SlideShare une entreprise Scribd logo
1  sur  18
WebSite
                 Development

                 Web Design - 1

Class # 02
TRIVUz Academy
                         MS Alam TRIVUz
                            CEO, Shabaka Soft Ltd.
What to do?
Before we Start




 Web Pages                   FTP
 (Web Site)
                                                 Web Server
                    File Transfer Protocol
                                                  (Hosting)


                           Have a look, figure out which
Web Design Basics          part we are going to do first.
Session # 01
Before we Start
1. Create our first web Document called Webpage




    Web Pages                  FTP
    (Web Site)
                                                   Web Server
                      File Transfer Protocol
                                                    (Hosting)


                             Have a look, figure out which
  Web Design Basics          part we are going to do first.
   Session # 01
Define Task

1. Create our first web Document called
 Webpage
2. Upload our page to webserver
3. Browse our site using any web browser




 Web Design Basics
  Session # 01
Creating Web Page
                 Tools & Language

1. A Text Editor, maybe notepad
2. Basic Knowledge of HTML




Web Design - 1
HTML
                 What is HTML?




Web Design - 1
HTML
                               Introduction

•   HTML stands for Hyper Text Markup Language
•   HTML is not a programming language, it is a
    markup language
•   A markup language is a set of markup tags
•   HTML uses markup tags to describe web pages




                                              - w3schools.com

Web Design - 1
HTML
• HTML markup tags are usually called HTML tags
• HTML tags are keywords surrounded by ange
                               HTML Tags
  brackets like <html>
• HTML tags normally come in pairs like <b> and
  </b>
• The first tag in a pair is the start tag, the second
  tag is the end tag. It also known as opening tags &
  closing tags.



                                                - w3schools.com

Web Design - 1
HTML
                       HTML Documents


• HTML documents describe web pages
• HTML documents contain HTML tags and plain text
• HTML documents are also called web pages
• Web browser can read HTML documents and
  display them as Web Pages.


                                         - w3schools.com

Web Design - 1
HTML
                       Our First HTML Document

<html>
<body>
 <h1>Our first Heading</h1>
 <p>
  This is our first paragraph in web page
  created with HTML markup language
 </p>
</body>
</html>



Web Design - 1
HTML
                  Saving HTML Document
To save HTML document follow the step

1. Click File > Save As

2. Name the file as index.html

3. Open the index.html with any web browser




                                         - w3schools.com

Web Design - 1
HTML
Output
HTML
                             More HTML Tags
Lets learn more HTML Tags


Bold Tag: <b>Text</b>
Italic Tag: <i>Text</i>
Underline Tag: <u>Text</u>
Paragraph Tag: <p>Text</p>
HTML Images: <img src=“path/image.jpg” />
Hyper Link: <a href=“file.html”>Link Text</a>

Web Design - 1
HTML
                                       HTML Elements

An HTML element is everything from the start tag to the end tag:


Start Tag *             Element content         End tag *

<p>                     This is paragraph       </p>

<a href=“index.html”> This is a link            </a>

<br />




Web Design - 1
MS Alam TRIVUz

Thank You

                    Head of Research
                    TRIVUz Network (IT Research Since 2003)

                    Lead Software Engineer
                    RxRD Inc, Florida, USA

                    CEO
                    Shabaka Soft Ltd.


trivuz@gmail.com
+88 01712 084408

Contenu connexe

Tendances

Theme development essentials columbus oh word camp 2012
Theme development essentials   columbus oh word camp 2012Theme development essentials   columbus oh word camp 2012
Theme development essentials columbus oh word camp 2012
Joe Querin
 

Tendances (20)

Html5
Html5Html5
Html5
 
BASICS OF HTML
BASICS OF HTMLBASICS OF HTML
BASICS OF HTML
 
Web Programming - 1st TA Session
Web Programming - 1st TA SessionWeb Programming - 1st TA Session
Web Programming - 1st TA Session
 
Themes 101
Themes 101Themes 101
Themes 101
 
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodologyBEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodology
 
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog TemplateBP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
 
Theme development essentials columbus oh word camp 2012
Theme development essentials   columbus oh word camp 2012Theme development essentials   columbus oh word camp 2012
Theme development essentials columbus oh word camp 2012
 
Week 5 Lecture
Week 5 LectureWeek 5 Lecture
Week 5 Lecture
 
Images, lists and links
Images, lists and linksImages, lists and links
Images, lists and links
 
Class1slides
Class1slidesClass1slides
Class1slides
 
Lecture-3: Introduction to html - Basic Structure & Block Building
Lecture-3: Introduction to html - Basic Structure & Block BuildingLecture-3: Introduction to html - Basic Structure & Block Building
Lecture-3: Introduction to html - Basic Structure & Block Building
 
Empowering Non-Profits with WordPress
Empowering Non-Profits with WordPressEmpowering Non-Profits with WordPress
Empowering Non-Profits with WordPress
 
Word camp 2013 migration
Word camp 2013 migrationWord camp 2013 migration
Word camp 2013 migration
 
How to create basic webpage
How to create basic webpageHow to create basic webpage
How to create basic webpage
 
J309-14 Week One
J309-14 Week OneJ309-14 Week One
J309-14 Week One
 
Building the basics (WordPress Ottawa 2014)
Building the basics (WordPress Ottawa 2014)Building the basics (WordPress Ottawa 2014)
Building the basics (WordPress Ottawa 2014)
 
Wordpress 101 Training
Wordpress 101 TrainingWordpress 101 Training
Wordpress 101 Training
 
Xhtml validation
Xhtml validationXhtml validation
Xhtml validation
 
What is (not) WordPress
What is (not) WordPressWhat is (not) WordPress
What is (not) WordPress
 
Child Themes in WordPress
Child Themes in WordPressChild Themes in WordPress
Child Themes in WordPress
 

En vedette

Database Design and Implementation
Database Design and ImplementationDatabase Design and Implementation
Database Design and Implementation
Christian Reina
 
Fractals presentation
Fractals presentationFractals presentation
Fractals presentation
gbdriver80
 
MySQL优化、新特性和新架构 彭立勋
MySQL优化、新特性和新架构 彭立勋MySQL优化、新特性和新架构 彭立勋
MySQL优化、新特性和新架构 彭立勋
Lixun Peng
 
MySQL源码分析.02.Handler API
MySQL源码分析.02.Handler APIMySQL源码分析.02.Handler API
MySQL源码分析.02.Handler API
Lixun Peng
 
MySQL源码分析.01.代码结构与基本流程
MySQL源码分析.01.代码结构与基本流程MySQL源码分析.01.代码结构与基本流程
MySQL源码分析.01.代码结构与基本流程
Lixun Peng
 
MySQL新技术探索与实践
MySQL新技术探索与实践MySQL新技术探索与实践
MySQL新技术探索与实践
Lixun Peng
 
Performance of fractal tree databases
Performance of fractal tree databasesPerformance of fractal tree databases
Performance of fractal tree databases
Lixun Peng
 
阿里云RDS for MySQL的若干优化
阿里云RDS for MySQL的若干优化阿里云RDS for MySQL的若干优化
阿里云RDS for MySQL的若干优化
Lixun Peng
 
DoubleBinlog方案
DoubleBinlog方案DoubleBinlog方案
DoubleBinlog方案
Lixun Peng
 
Database management system presentation
Database management system presentationDatabase management system presentation
Database management system presentation
sameerraaj
 

En vedette (15)

Basics of web design
Basics of web designBasics of web design
Basics of web design
 
Fractal Tree Indexes : From Theory to Practice
Fractal Tree Indexes : From Theory to PracticeFractal Tree Indexes : From Theory to Practice
Fractal Tree Indexes : From Theory to Practice
 
MongoDB and Fractal Tree Indexes
MongoDB and Fractal Tree IndexesMongoDB and Fractal Tree Indexes
MongoDB and Fractal Tree Indexes
 
Database Design and Implementation
Database Design and ImplementationDatabase Design and Implementation
Database Design and Implementation
 
Fractals presentation
Fractals presentationFractals presentation
Fractals presentation
 
MySQL优化、新特性和新架构 彭立勋
MySQL优化、新特性和新架构 彭立勋MySQL优化、新特性和新架构 彭立勋
MySQL优化、新特性和新架构 彭立勋
 
MySQL源码分析.02.Handler API
MySQL源码分析.02.Handler APIMySQL源码分析.02.Handler API
MySQL源码分析.02.Handler API
 
MySQL源码分析.01.代码结构与基本流程
MySQL源码分析.01.代码结构与基本流程MySQL源码分析.01.代码结构与基本流程
MySQL源码分析.01.代码结构与基本流程
 
MySQL新技术探索与实践
MySQL新技术探索与实践MySQL新技术探索与实践
MySQL新技术探索与实践
 
Performance of fractal tree databases
Performance of fractal tree databasesPerformance of fractal tree databases
Performance of fractal tree databases
 
阿里云RDS for MySQL的若干优化
阿里云RDS for MySQL的若干优化阿里云RDS for MySQL的若干优化
阿里云RDS for MySQL的若干优化
 
DoubleBinlog方案
DoubleBinlog方案DoubleBinlog方案
DoubleBinlog方案
 
Database - Design & Implementation - 1
Database - Design & Implementation - 1Database - Design & Implementation - 1
Database - Design & Implementation - 1
 
Dbms slides
Dbms slidesDbms slides
Dbms slides
 
Database management system presentation
Database management system presentationDatabase management system presentation
Database management system presentation
 

Similaire à Web design basics 1

Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
dilanie77
 

Similaire à Web design basics 1 (20)

HTML for absolutely begginers
HTML for absolutely begginersHTML for absolutely begginers
HTML for absolutely begginers
 
Lesson 1: Introduction to HTML
Lesson 1: Introduction to HTMLLesson 1: Introduction to HTML
Lesson 1: Introduction to HTML
 
Web development
Web developmentWeb development
Web development
 
Web design - HTML (Hypertext Markup Language) introduction
Web design - HTML (Hypertext Markup Language) introductionWeb design - HTML (Hypertext Markup Language) introduction
Web design - HTML (Hypertext Markup Language) introduction
 
Html basics
Html basicsHtml basics
Html basics
 
HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
 
Handout1 intro to html
Handout1 intro to htmlHandout1 intro to html
Handout1 intro to html
 
Html.pptx
Html.pptxHtml.pptx
Html.pptx
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 
3 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp023 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp02
 
HTML course.ppt
HTML course.pptHTML course.ppt
HTML course.ppt
 
Unit 01 (1).pdf
Unit 01 (1).pdfUnit 01 (1).pdf
Unit 01 (1).pdf
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
HTML 5
HTML 5HTML 5
HTML 5
 
Internet programming notes
Internet programming notesInternet programming notes
Internet programming notes
 
Grade 7_HTML.pptx
Grade 7_HTML.pptxGrade 7_HTML.pptx
Grade 7_HTML.pptx
 
UNIT 2.2 Web Programming HTML Basics - Benchmark standard
UNIT 2.2 Web Programming HTML Basics - Benchmark standardUNIT 2.2 Web Programming HTML Basics - Benchmark standard
UNIT 2.2 Web Programming HTML Basics - Benchmark standard
 
WEB TECHNOLOGY:Web Essentials and Markup Language HTML
WEB TECHNOLOGY:Web Essentials and Markup Language HTMLWEB TECHNOLOGY:Web Essentials and Markup Language HTML
WEB TECHNOLOGY:Web Essentials and Markup Language HTML
 
Training report on web developing
Training report on web developingTraining report on web developing
Training report on web developing
 
IT8005 Electronic Commerces Notes UNIT 1
IT8005 Electronic Commerces Notes UNIT 1IT8005 Electronic Commerces Notes UNIT 1
IT8005 Electronic Commerces Notes UNIT 1
 

Dernier

Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
ZurliaSoop
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
QucHHunhnh
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
ciinovamais
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
QucHHunhnh
 

Dernier (20)

On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
 
Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...
 
Unit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptxUnit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptx
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
PROCESS RECORDING FORMAT.docx
PROCESS      RECORDING        FORMAT.docxPROCESS      RECORDING        FORMAT.docx
PROCESS RECORDING FORMAT.docx
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdf
 
Dyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptxDyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptx
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
Spatium Project Simulation student brief
Spatium Project Simulation student briefSpatium Project Simulation student brief
Spatium Project Simulation student brief
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 

Web design basics 1

  • 1. WebSite Development Web Design - 1 Class # 02 TRIVUz Academy MS Alam TRIVUz CEO, Shabaka Soft Ltd.
  • 3. Before we Start Web Pages FTP (Web Site) Web Server File Transfer Protocol (Hosting) Have a look, figure out which Web Design Basics part we are going to do first. Session # 01
  • 4. Before we Start 1. Create our first web Document called Webpage Web Pages FTP (Web Site) Web Server File Transfer Protocol (Hosting) Have a look, figure out which Web Design Basics part we are going to do first. Session # 01
  • 5. Define Task 1. Create our first web Document called Webpage 2. Upload our page to webserver 3. Browse our site using any web browser Web Design Basics Session # 01
  • 6. Creating Web Page Tools & Language 1. A Text Editor, maybe notepad 2. Basic Knowledge of HTML Web Design - 1
  • 7. HTML What is HTML? Web Design - 1
  • 8. HTML Introduction • HTML stands for Hyper Text Markup Language • HTML is not a programming language, it is a markup language • A markup language is a set of markup tags • HTML uses markup tags to describe web pages - w3schools.com Web Design - 1
  • 9. HTML • HTML markup tags are usually called HTML tags • HTML tags are keywords surrounded by ange HTML Tags brackets like <html> • HTML tags normally come in pairs like <b> and </b> • The first tag in a pair is the start tag, the second tag is the end tag. It also known as opening tags & closing tags. - w3schools.com Web Design - 1
  • 10. HTML HTML Documents • HTML documents describe web pages • HTML documents contain HTML tags and plain text • HTML documents are also called web pages • Web browser can read HTML documents and display them as Web Pages. - w3schools.com Web Design - 1
  • 11. HTML Our First HTML Document <html> <body> <h1>Our first Heading</h1> <p> This is our first paragraph in web page created with HTML markup language </p> </body> </html> Web Design - 1
  • 12. HTML Saving HTML Document To save HTML document follow the step 1. Click File > Save As 2. Name the file as index.html 3. Open the index.html with any web browser - w3schools.com Web Design - 1
  • 14. HTML More HTML Tags Lets learn more HTML Tags Bold Tag: <b>Text</b> Italic Tag: <i>Text</i> Underline Tag: <u>Text</u> Paragraph Tag: <p>Text</p> HTML Images: <img src=“path/image.jpg” /> Hyper Link: <a href=“file.html”>Link Text</a> Web Design - 1
  • 15. HTML HTML Elements An HTML element is everything from the start tag to the end tag: Start Tag * Element content End tag * <p> This is paragraph </p> <a href=“index.html”> This is a link </a> <br /> Web Design - 1
  • 16.
  • 17.
  • 18. MS Alam TRIVUz Thank You Head of Research TRIVUz Network (IT Research Since 2003) Lead Software Engineer RxRD Inc, Florida, USA CEO Shabaka Soft Ltd. trivuz@gmail.com +88 01712 084408

Notes de l'éditeur

  1. ----- Meeting Notes (12/28/11 19:20) -----