SlideShare uma empresa Scribd logo
1 de 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

Mais conteúdo relacionado

Mais procurados

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
 

Mais procurados (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
 

Destaque

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
 

Destaque (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
 

Semelhante a Web design basics 1

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

Semelhante a 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
 

Último

Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
KarakKing
 

Último (20)

How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17
 
REMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptxREMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptx
 
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxHMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
 
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
 
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
 
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptxOn_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptx
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
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Ữ Â...
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptx
 
How to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxHow to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptx
 
Plant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptxPlant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptx
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 

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

Notas do Editor

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