SlideShare une entreprise Scribd logo
1  sur  8
HTMLL E S S O N T W O : S T A R T I N G W I T H T H E
B A S I C S
B Y : L L OY D C H R I S TO P H E R M . E S T E B A N
STRUCTURE OF AN HTML
DOCUMENT
Elements
• The fundamental components of the structure of
a text document
Tags
• Commands written between less than (<) and
greater than (>) signs, also known as angle
brackets
• There are opening and closing tags and the
affected text is contained within the two tags
STRUCTURE OF AN HTML
DOCUMENT
• Opening tags that do not have closing tags are
referred to as EMPTY TAGS
Attributes
• Additional information included inside the
opening tag
Values
• Defines how an attribute would affect a tag
ANATOMY OF AN HTML ELEMENT
<h1 align=“center”> this is my text </h1>
Opening
tag
Value Contained text Closing tagAttribute
• An equal sign ( = ) comes after the attribute then followed
by a compatible value
• According to theWorld Wide Web Consortium (W3C), all
values should be enclosed in single ( ‘ ) or double ( “ )
quotation marks
• The contained text is the only part that would appear when
viewing the finished webpage document
• The closing tag should be preceded by a forward slash ( / )
STARTING AND FINISHING HTML
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
STARTING AND FINISHING HTML
<html> - indicates that you are creating an HTML document
<head> - provides information which is not displayed on the actual
webpage
<title> - the text that would appear on the browser’s title bar
</title>
</head>
<body> - everything that you want to appear on the
webpage itself should be placed here
</body>
</html>
• *Notice that the tags were indented in
order keep everything organized and to
avoid confusion.
*HTML follows the First In, Last Out
(FILO) principle.The first tag used
should be closed last and vice versa.
STARTING AND FINISHING HTML
Here is a list of BODYTag attributes:
ATTRIBUTE VALUES DESCRIPTION
1.bgcolor
• word color values (ex: blue,
red, black)
• Hexadecimal color values (ex:
#000000)
Sets the background
color of the webpage
2.background
• URL of the background
image
(ex:
http://www.images.com/pic1.j
pg)
Sets a background
image on the webpage
3.text
• word color values
• Hexadecimal color values
Sets the default font
color of all body text
STARTING AND FINISHING HTML
<html>
<head>
<title> SAMPLE FILE </title>
</head>
<body>
Hello! This is my sample
document.
</body>
</html
*The file was saved as
“SAMPLElessons.html”

Contenu connexe

Tendances (20)

HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
 
Html
HtmlHtml
Html
 
Introduction to XML
Introduction to XMLIntroduction to XML
Introduction to XML
 
Html 5
Html 5Html 5
Html 5
 
HTML- Hyper Text Markup Language
HTML- Hyper Text Markup LanguageHTML- Hyper Text Markup Language
HTML- Hyper Text Markup Language
 
Html
HtmlHtml
Html
 
Xhtml
XhtmlXhtml
Xhtml
 
Notes4
Notes4Notes4
Notes4
 
What is html xml and xhtml
What is html xml and xhtmlWhat is html xml and xhtml
What is html xml and xhtml
 
Html vs xhtml
Html vs xhtmlHtml vs xhtml
Html vs xhtml
 
XHTML
XHTMLXHTML
XHTML
 
Unit ii java script and xhtml documents and dynamic documents with javascript
Unit ii java script and xhtml documents and dynamic documents with javascriptUnit ii java script and xhtml documents and dynamic documents with javascript
Unit ii java script and xhtml documents and dynamic documents with javascript
 
Html
HtmlHtml
Html
 
Xml 215-presentation
Xml 215-presentationXml 215-presentation
Xml 215-presentation
 
HTML
HTMLHTML
HTML
 
Html grade 11
Html grade 11Html grade 11
Html grade 11
 
Html notes
Html notesHtml notes
Html notes
 
Html
HtmlHtml
Html
 
Html5
Html5 Html5
Html5
 
215077679 introduction to HTML
215077679  introduction to HTML215077679  introduction to HTML
215077679 introduction to HTML
 

Similaire à HTML Lesson Two: Starting with the Basics

Similaire à HTML Lesson Two: Starting with the Basics (20)

Html (hyper text markup language)
Html (hyper text markup language)Html (hyper text markup language)
Html (hyper text markup language)
 
Computer fundamentals-internet p2
Computer fundamentals-internet p2Computer fundamentals-internet p2
Computer fundamentals-internet p2
 
Hyper Text Mark-up Language
Hyper Text Mark-up Language Hyper Text Mark-up Language
Hyper Text Mark-up Language
 
HTML - R.D.Sivakumar
HTML - R.D.SivakumarHTML - R.D.Sivakumar
HTML - R.D.Sivakumar
 
Basic tags in html
Basic tags in htmlBasic tags in html
Basic tags in html
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
web development.pdf
web development.pdfweb development.pdf
web development.pdf
 
Html
HtmlHtml
Html
 
Ankit (221348051) BCA-Aiml.pptx
Ankit (221348051) BCA-Aiml.pptxAnkit (221348051) BCA-Aiml.pptx
Ankit (221348051) BCA-Aiml.pptx
 
Learning html. (Part- 1)
Learning html. (Part- 1)Learning html. (Part- 1)
Learning html. (Part- 1)
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Html
HtmlHtml
Html
 
Html for beginners part I
Html for beginners part IHtml for beginners part I
Html for beginners part I
 
html complete notes
html complete noteshtml complete notes
html complete notes
 
html compete notes basic to advanced
html compete notes basic to advancedhtml compete notes basic to advanced
html compete notes basic to advanced
 
Learn html Basics
Learn html BasicsLearn html Basics
Learn html Basics
 
Lecture 2 introduction to html
Lecture 2  introduction to htmlLecture 2  introduction to html
Lecture 2 introduction to html
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
How to learn HTML in 10 Days
How to learn HTML in 10 DaysHow to learn HTML in 10 Days
How to learn HTML in 10 Days
 
learnhtmlbyvipuladissanayake-170516061515 (1).pptx
learnhtmlbyvipuladissanayake-170516061515 (1).pptxlearnhtmlbyvipuladissanayake-170516061515 (1).pptx
learnhtmlbyvipuladissanayake-170516061515 (1).pptx
 

Plus de ChristopherEsteban2

MIL Evolution of media to new media
MIL Evolution of media to new mediaMIL Evolution of media to new media
MIL Evolution of media to new mediaChristopherEsteban2
 
M.I.L Characteristics of a good media practitioner
M.I.L Characteristics of a good media practitionerM.I.L Characteristics of a good media practitioner
M.I.L Characteristics of a good media practitionerChristopherEsteban2
 
Media, information and technology literacy
Media, information and technology literacy Media, information and technology literacy
Media, information and technology literacy ChristopherEsteban2
 
introduction to media and information literacy
introduction to media and information literacy introduction to media and information literacy
introduction to media and information literacy ChristopherEsteban2
 
Introduction to information and communication technologies
Introduction to information and communication technologiesIntroduction to information and communication technologies
Introduction to information and communication technologiesChristopherEsteban2
 
Adobe Photoshop intro to interface
Adobe Photoshop intro to interfaceAdobe Photoshop intro to interface
Adobe Photoshop intro to interfaceChristopherEsteban2
 
Characteristics of a good media practitioner
Characteristics of a good media practitioner Characteristics of a good media practitioner
Characteristics of a good media practitioner ChristopherEsteban2
 
Introduction to Media and Information Literacy
Introduction to Media and Information LiteracyIntroduction to Media and Information Literacy
Introduction to Media and Information LiteracyChristopherEsteban2
 
Three Literacy: Media, Information, Technology Literacy.
Three Literacy: Media, Information, Technology Literacy. Three Literacy: Media, Information, Technology Literacy.
Three Literacy: Media, Information, Technology Literacy. ChristopherEsteban2
 

Plus de ChristopherEsteban2 (20)

ICT CONTENT DEVELOPMENT
ICT CONTENT DEVELOPMENTICT CONTENT DEVELOPMENT
ICT CONTENT DEVELOPMENT
 
MIL Evolution of media to new media
MIL Evolution of media to new mediaMIL Evolution of media to new media
MIL Evolution of media to new media
 
Adobe ps selection tools
Adobe ps selection toolsAdobe ps selection tools
Adobe ps selection tools
 
Adobe ps color palettes
Adobe ps color palettesAdobe ps color palettes
Adobe ps color palettes
 
Adobe ps common file types
Adobe ps common file typesAdobe ps common file types
Adobe ps common file types
 
M.I.L Characteristics of a good media practitioner
M.I.L Characteristics of a good media practitionerM.I.L Characteristics of a good media practitioner
M.I.L Characteristics of a good media practitioner
 
introduction to layers
introduction to layersintroduction to layers
introduction to layers
 
Media, information and technology literacy
Media, information and technology literacy Media, information and technology literacy
Media, information and technology literacy
 
introduction to media and information literacy
introduction to media and information literacy introduction to media and information literacy
introduction to media and information literacy
 
Introduction to information and communication technologies
Introduction to information and communication technologiesIntroduction to information and communication technologies
Introduction to information and communication technologies
 
Adobe PS raster image
Adobe PS raster imageAdobe PS raster image
Adobe PS raster image
 
Adobe Photoshop intro to interface
Adobe Photoshop intro to interfaceAdobe Photoshop intro to interface
Adobe Photoshop intro to interface
 
Introduction to adobe Photoshop
Introduction to adobe PhotoshopIntroduction to adobe Photoshop
Introduction to adobe Photoshop
 
Characteristics of a good media practitioner
Characteristics of a good media practitioner Characteristics of a good media practitioner
Characteristics of a good media practitioner
 
Introduction to Media and Information Literacy
Introduction to Media and Information LiteracyIntroduction to Media and Information Literacy
Introduction to Media and Information Literacy
 
Three Literacy: Media, Information, Technology Literacy.
Three Literacy: Media, Information, Technology Literacy. Three Literacy: Media, Information, Technology Literacy.
Three Literacy: Media, Information, Technology Literacy.
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 
Data and Operators
Data and OperatorsData and Operators
Data and Operators
 
Introduction to Flowchart
Introduction to FlowchartIntroduction to Flowchart
Introduction to Flowchart
 
Introduction to Algorithm
Introduction to AlgorithmIntroduction to Algorithm
Introduction to Algorithm
 

Dernier

MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptxMULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptxAnupkumar Sharma
 
Keynote by Prof. Wurzer at Nordex about IP-design
Keynote by Prof. Wurzer at Nordex about IP-designKeynote by Prof. Wurzer at Nordex about IP-design
Keynote by Prof. Wurzer at Nordex about IP-designMIPLM
 
Choosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for ParentsChoosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for Parentsnavabharathschool99
 
Difference Between Search & Browse Methods in Odoo 17
Difference Between Search & Browse Methods in Odoo 17Difference Between Search & Browse Methods in Odoo 17
Difference Between Search & Browse Methods in Odoo 17Celine George
 
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTSGRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTSJoshuaGantuangco2
 
Influencing policy (training slides from Fast Track Impact)
Influencing policy (training slides from Fast Track Impact)Influencing policy (training slides from Fast Track Impact)
Influencing policy (training slides from Fast Track Impact)Mark Reed
 
What is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERPWhat is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERPCeline George
 
How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17Celine George
 
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptxECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptxiammrhaywood
 
Concurrency Control in Database Management system
Concurrency Control in Database Management systemConcurrency Control in Database Management system
Concurrency Control in Database Management systemChristalin Nelson
 
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITYISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITYKayeClaireEstoconing
 
Culture Uniformity or Diversity IN SOCIOLOGY.pptx
Culture Uniformity or Diversity IN SOCIOLOGY.pptxCulture Uniformity or Diversity IN SOCIOLOGY.pptx
Culture Uniformity or Diversity IN SOCIOLOGY.pptxPoojaSen20
 
ACC 2024 Chronicles. Cardiology. Exam.pdf
ACC 2024 Chronicles. Cardiology. Exam.pdfACC 2024 Chronicles. Cardiology. Exam.pdf
ACC 2024 Chronicles. Cardiology. Exam.pdfSpandanaRallapalli
 
Earth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatEarth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatYousafMalik24
 
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...Nguyen Thanh Tu Collection
 

Dernier (20)

MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptxMULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
 
Raw materials used in Herbal Cosmetics.pptx
Raw materials used in Herbal Cosmetics.pptxRaw materials used in Herbal Cosmetics.pptx
Raw materials used in Herbal Cosmetics.pptx
 
YOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptx
YOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptxYOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptx
YOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptx
 
Keynote by Prof. Wurzer at Nordex about IP-design
Keynote by Prof. Wurzer at Nordex about IP-designKeynote by Prof. Wurzer at Nordex about IP-design
Keynote by Prof. Wurzer at Nordex about IP-design
 
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptxFINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
 
Choosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for ParentsChoosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for Parents
 
Difference Between Search & Browse Methods in Odoo 17
Difference Between Search & Browse Methods in Odoo 17Difference Between Search & Browse Methods in Odoo 17
Difference Between Search & Browse Methods in Odoo 17
 
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
 
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTSGRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
 
Influencing policy (training slides from Fast Track Impact)
Influencing policy (training slides from Fast Track Impact)Influencing policy (training slides from Fast Track Impact)
Influencing policy (training slides from Fast Track Impact)
 
What is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERPWhat is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERP
 
How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17
 
YOUVE GOT EMAIL_FINALS_EL_DORADO_2024.pptx
YOUVE GOT EMAIL_FINALS_EL_DORADO_2024.pptxYOUVE GOT EMAIL_FINALS_EL_DORADO_2024.pptx
YOUVE GOT EMAIL_FINALS_EL_DORADO_2024.pptx
 
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptxECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
 
Concurrency Control in Database Management system
Concurrency Control in Database Management systemConcurrency Control in Database Management system
Concurrency Control in Database Management system
 
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITYISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
 
Culture Uniformity or Diversity IN SOCIOLOGY.pptx
Culture Uniformity or Diversity IN SOCIOLOGY.pptxCulture Uniformity or Diversity IN SOCIOLOGY.pptx
Culture Uniformity or Diversity IN SOCIOLOGY.pptx
 
ACC 2024 Chronicles. Cardiology. Exam.pdf
ACC 2024 Chronicles. Cardiology. Exam.pdfACC 2024 Chronicles. Cardiology. Exam.pdf
ACC 2024 Chronicles. Cardiology. Exam.pdf
 
Earth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatEarth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice great
 
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
HỌC TỐT TIẾNG ANH 11 THEO CHƯƠNG TRÌNH GLOBAL SUCCESS ĐÁP ÁN CHI TIẾT - CẢ NĂ...
 

HTML Lesson Two: Starting with the Basics

  • 1. HTMLL E S S O N T W O : S T A R T I N G W I T H T H E B A S I C S B Y : L L OY D C H R I S TO P H E R M . E S T E B A N
  • 2. STRUCTURE OF AN HTML DOCUMENT Elements • The fundamental components of the structure of a text document Tags • Commands written between less than (<) and greater than (>) signs, also known as angle brackets • There are opening and closing tags and the affected text is contained within the two tags
  • 3. STRUCTURE OF AN HTML DOCUMENT • Opening tags that do not have closing tags are referred to as EMPTY TAGS Attributes • Additional information included inside the opening tag Values • Defines how an attribute would affect a tag
  • 4. ANATOMY OF AN HTML ELEMENT <h1 align=“center”> this is my text </h1> Opening tag Value Contained text Closing tagAttribute • An equal sign ( = ) comes after the attribute then followed by a compatible value • According to theWorld Wide Web Consortium (W3C), all values should be enclosed in single ( ‘ ) or double ( “ ) quotation marks • The contained text is the only part that would appear when viewing the finished webpage document • The closing tag should be preceded by a forward slash ( / )
  • 5. STARTING AND FINISHING HTML <html> <head> <title> </title> </head> <body> </body> </html>
  • 6. STARTING AND FINISHING HTML <html> - indicates that you are creating an HTML document <head> - provides information which is not displayed on the actual webpage <title> - the text that would appear on the browser’s title bar </title> </head> <body> - everything that you want to appear on the webpage itself should be placed here </body> </html> • *Notice that the tags were indented in order keep everything organized and to avoid confusion. *HTML follows the First In, Last Out (FILO) principle.The first tag used should be closed last and vice versa.
  • 7. STARTING AND FINISHING HTML Here is a list of BODYTag attributes: ATTRIBUTE VALUES DESCRIPTION 1.bgcolor • word color values (ex: blue, red, black) • Hexadecimal color values (ex: #000000) Sets the background color of the webpage 2.background • URL of the background image (ex: http://www.images.com/pic1.j pg) Sets a background image on the webpage 3.text • word color values • Hexadecimal color values Sets the default font color of all body text
  • 8. STARTING AND FINISHING HTML <html> <head> <title> SAMPLE FILE </title> </head> <body> Hello! This is my sample document. </body> </html *The file was saved as “SAMPLElessons.html”