SlideShare a Scribd company logo
1 of 22
Format Tags
Headings are formatted big and bold because
they need to stand out from the rest of the page’s
content to help the users figure out the different
topics covered by your site. Even if the site you wish
to develop is a personal or a hobby site, there
should still divisions for the different areas of your
personality or hobby.
Headings
Heading element have opening (e.g., <h3> and
closing e.g.,</h3>) tags to enclose the topic or section
title to be used. There are six levels of headings and all
except the first level (.i.e., <h1>) can be used over and
over throughout the HTML document . The first level
heading should be your main, or umbrella topic and the
other levels only your subtopics, so that the web users
will no be confused
Paragraph
Headings may used to introduce paragraphs. The paragraphs element tags
are simply <p> and </p>. As much as possible, paragraphs must be kept short.
Space
Spacing in HTML is overlooked by browsers. Browser interpret
an entry like “t h I s” (with tow spaces between each letter) as only
“t h i s” (with only one space between each letter), because multiple
spaces are still considered as one. However tell the browser to
register spaces by typing “&nbsp;” for each space that you want.
Line Break
To introduce line break between text, such as those in snail mail
city addresses, insert the break empty tag <br />, like in the example
that follows. Remember that there is always a line break between
paragraphs so you don’t have to put <br />, unless you want another
<ENTER> key effect.
HTML TAGS Description
<b> Boldface
<i> Italics
<strong> Strongly; same as boldface
<em> Emphasized; same as italics
FILO – First In Last Out
This applies to tags as well. Any combination of tags can be used, as long as
you close the innermost tag before closing its enclosing tag.
: Keep FILO rule in mind. You may interchange the tags as long as the first that you can
open is the last that you close.
Tags for Lists
HTML TAGS Description
<ul> Unordered or bulleted list
<ol> Ordered list
<li> Line item
Unordered or Bulleted List
This kind of list is enclosed in <ul> </ul> tags, while each item is enclosed in <li> </li> tags.
Ordered or Numbered List
This kind of list is enclosed in <ol> </ol> tags, with each list item inside <li> </li> tags.
<ol type=“1”> for Arabic numerals
<ol type=“I” or <ol type=“I”> for Roman numerals
<ol type=“a” or <ol type=“A”> for Alpha numerals
Definition List
This kind of list is enclosed in <dl> </dl> tags. The term to be defined is
noted within <dt> </dt> tags, while the term’s definition is noted inside <dd>
</dd> tags.
Nested Lists
In this list you can create a hierarchy of information, putting unordered lists inside the first list’s
item (<li> </li>) tags.
Preformatted Text and Horizontal Rule
The preformatted text element (with the <pre> </pre> )tag tells the browser to
display the fixed-width
Links or Hyperlinks are pointers to the pages they
reference and these are some of the most essential parts
of the Web. There are two types of links in HTML.
Depending on the page your web browser is trying to
access: external and internal. An external link is a link to a
file or to a webpage that does not belong to the webpage’s
own site. An internal link is a link to a file or a webpage
within the webpage’s own site or any part of the webpage
itself.
External Link
Internal Links
Linking to Other Parts of the Same Page
E-mail Address as Link
Image as Link
Web Design L2 - Playing with Tags

More Related Content

What's hot (19)

XML
XMLXML
XML
 
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
 
Basic xml syntax
Basic xml syntaxBasic xml syntax
Basic xml syntax
 
Xhtml
XhtmlXhtml
Xhtml
 
html tags
html tagshtml tags
html tags
 
XML
XMLXML
XML
 
basic introduction of html tags
basic introduction  of html tagsbasic introduction  of html tags
basic introduction of html tags
 
Xml ppt
Xml pptXml ppt
Xml ppt
 
Html presentation
Html presentationHtml presentation
Html presentation
 
Web design - Working with Text and Lists in HTML
Web design - Working with Text and Lists in HTMLWeb design - Working with Text and Lists in HTML
Web design - Working with Text and Lists in HTML
 
XML Introduction
XML IntroductionXML Introduction
XML Introduction
 
Html9
Html9Html9
Html9
 
O9xml
O9xmlO9xml
O9xml
 
Basic XML
Basic XMLBasic XML
Basic XML
 
uptu web technology unit 2 Xml2
uptu web technology unit 2 Xml2uptu web technology unit 2 Xml2
uptu web technology unit 2 Xml2
 
Html Presentation
Html PresentationHtml Presentation
Html Presentation
 
XML Introduction
XML IntroductionXML Introduction
XML Introduction
 
Xml
XmlXml
Xml
 
HTML Basic Tags
HTML Basic Tags HTML Basic Tags
HTML Basic Tags
 

Similar to Web Design L2 - Playing with Tags (20)

Htmlppt 100604051515-phpapp01
Htmlppt 100604051515-phpapp01Htmlppt 100604051515-phpapp01
Htmlppt 100604051515-phpapp01
 
static dynamic html tags
static dynamic html tagsstatic dynamic html tags
static dynamic html tags
 
Html ppt computer
Html ppt computerHtml ppt computer
Html ppt computer
 
static dynamic html tags
 static dynamic html tags static dynamic html tags
static dynamic html tags
 
HTML Tags
HTML Tags HTML Tags
HTML Tags
 
Html presentation
Html presentationHtml presentation
Html presentation
 
Html tags
Html tagsHtml tags
Html tags
 
HTML language and all its tags .....
HTML language and all its tags .....HTML language and all its tags .....
HTML language and all its tags .....
 
Html ppt
Html pptHtml ppt
Html ppt
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 
Html presentation
Html presentationHtml presentation
Html presentation
 
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
 
Html
HtmlHtml
Html
 
Unit 1 (part-1, basic tags)
Unit 1 (part-1, basic tags)Unit 1 (part-1, basic tags)
Unit 1 (part-1, basic tags)
 
Final by smit parekh
Final  by smit  parekhFinal  by smit  parekh
Final by smit parekh
 
HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Pptaug7
Pptaug7Pptaug7
Pptaug7
 
HTML
HTMLHTML
HTML
 

Recently uploaded

General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...Poonam Aher Patil
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentationcamerronhm
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSCeline George
 
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.pdfQucHHunhnh
 
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptxSKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptxAmanpreet Kaur
 
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)Jisc
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxheathfieldcps1
 
psychiatric nursing HISTORY COLLECTION .docx
psychiatric  nursing HISTORY  COLLECTION  .docxpsychiatric  nursing HISTORY  COLLECTION  .docx
psychiatric nursing HISTORY COLLECTION .docxPoojaSen20
 
PROCESS RECORDING FORMAT.docx
PROCESS      RECORDING        FORMAT.docxPROCESS      RECORDING        FORMAT.docx
PROCESS RECORDING FORMAT.docxPoojaSen20
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingTechSoup
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin ClassesCeline George
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfAdmir Softic
 
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
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.pptRamjanShidvankar
 
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_.pdfSherif Taha
 
Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseAnaAcapella
 
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 . pdfQucHHunhnh
 

Recently uploaded (20)

Asian American Pacific Islander Month DDSD 2024.pptx
Asian American Pacific Islander Month DDSD 2024.pptxAsian American Pacific Islander Month DDSD 2024.pptx
Asian American Pacific Islander Month DDSD 2024.pptx
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 
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
 
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptxSKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
 
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)
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
psychiatric nursing HISTORY COLLECTION .docx
psychiatric  nursing HISTORY  COLLECTION  .docxpsychiatric  nursing HISTORY  COLLECTION  .docx
psychiatric nursing HISTORY COLLECTION .docx
 
PROCESS RECORDING FORMAT.docx
PROCESS      RECORDING        FORMAT.docxPROCESS      RECORDING        FORMAT.docx
PROCESS RECORDING FORMAT.docx
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
 
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
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
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...
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
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
 
Spatium Project Simulation student brief
Spatium Project Simulation student briefSpatium Project Simulation student brief
Spatium Project Simulation student brief
 
Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please Practise
 
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
 

Web Design L2 - Playing with Tags

  • 1.
  • 2. Format Tags Headings are formatted big and bold because they need to stand out from the rest of the page’s content to help the users figure out the different topics covered by your site. Even if the site you wish to develop is a personal or a hobby site, there should still divisions for the different areas of your personality or hobby.
  • 3.
  • 4.
  • 5. Headings Heading element have opening (e.g., <h3> and closing e.g.,</h3>) tags to enclose the topic or section title to be used. There are six levels of headings and all except the first level (.i.e., <h1>) can be used over and over throughout the HTML document . The first level heading should be your main, or umbrella topic and the other levels only your subtopics, so that the web users will no be confused
  • 6. Paragraph Headings may used to introduce paragraphs. The paragraphs element tags are simply <p> and </p>. As much as possible, paragraphs must be kept short.
  • 7. Space Spacing in HTML is overlooked by browsers. Browser interpret an entry like “t h I s” (with tow spaces between each letter) as only “t h i s” (with only one space between each letter), because multiple spaces are still considered as one. However tell the browser to register spaces by typing “&nbsp;” for each space that you want. Line Break To introduce line break between text, such as those in snail mail city addresses, insert the break empty tag <br />, like in the example that follows. Remember that there is always a line break between paragraphs so you don’t have to put <br />, unless you want another <ENTER> key effect.
  • 8.
  • 9. HTML TAGS Description <b> Boldface <i> Italics <strong> Strongly; same as boldface <em> Emphasized; same as italics
  • 10. FILO – First In Last Out This applies to tags as well. Any combination of tags can be used, as long as you close the innermost tag before closing its enclosing tag. : Keep FILO rule in mind. You may interchange the tags as long as the first that you can open is the last that you close.
  • 11. Tags for Lists HTML TAGS Description <ul> Unordered or bulleted list <ol> Ordered list <li> Line item
  • 12. Unordered or Bulleted List This kind of list is enclosed in <ul> </ul> tags, while each item is enclosed in <li> </li> tags.
  • 13. Ordered or Numbered List This kind of list is enclosed in <ol> </ol> tags, with each list item inside <li> </li> tags. <ol type=“1”> for Arabic numerals <ol type=“I” or <ol type=“I”> for Roman numerals <ol type=“a” or <ol type=“A”> for Alpha numerals
  • 14. Definition List This kind of list is enclosed in <dl> </dl> tags. The term to be defined is noted within <dt> </dt> tags, while the term’s definition is noted inside <dd> </dd> tags.
  • 15. Nested Lists In this list you can create a hierarchy of information, putting unordered lists inside the first list’s item (<li> </li>) tags.
  • 16. Preformatted Text and Horizontal Rule The preformatted text element (with the <pre> </pre> )tag tells the browser to display the fixed-width
  • 17.
  • 18. Links or Hyperlinks are pointers to the pages they reference and these are some of the most essential parts of the Web. There are two types of links in HTML. Depending on the page your web browser is trying to access: external and internal. An external link is a link to a file or to a webpage that does not belong to the webpage’s own site. An internal link is a link to a file or a webpage within the webpage’s own site or any part of the webpage itself.
  • 20. Linking to Other Parts of the Same Page
  • 21. E-mail Address as Link Image as Link