SlideShare ist ein Scribd-Unternehmen logo
1 von 17
Web Authoring

     Topic 3 –
HTML Formatting Tags
Objectives
Students should able to:
1. Use Web Authoring tool to format text
with the following HTML tags:
•   Bold, italic and underlining the text;
•   Change font size;
•   Change the font face;
•   Change the colour of the text; and
•   Change the colour of the links.
2. Create white space (non breaking),
   horizontal rule and quotations.
Nesting Tags
Tags are always nested. This nesting
reflects the structure of the document
(for example, emphasized text inside a
paragraph, inside a form, inside the
BODY).

However, tags can never overlap.
Nesting Tags

<A HREF=”burn.html”><EM>Burn down</EM></A> more forests

                                            Correct!




<A HREF=”burn.html”><EM>Burn down</A></EM> more forests

                                            Wrong!
Background tag

It is used to include a background image
in HTML.

<BODY BACKGROUND = “image.gif”>
Background tag

It is used to set a background
colour, text colour and link colour in
HTML.
   <BODY BGCOLOR = “#000000”
  TEXT=“FFFFFF” LINK=“#9690CC>
HTML HEADERS
The format for an HTML heading tag is:
    <hN>Text to Appear in Heading</hN>
where N is a number from 1 to 6
identifying the heading size
Paragraphs
The paragraph can be aligned using:

<P ALIGN=”CENTER”>
Every line of text in this paragraph is
centered
</P>
BOLD & ITALIC
Often <strong> renders as <b>, and <em>
renders as <i>

<strong> or <em> means that you want the
text to be rendered in a way that the user
understands as "important".
TEXT SIZE
CHANGING TEXT SIZE:
To change the size of all or just certain
portions of your text within an HTML
document, use the SIZE attribute of the
<FONT></FONT> tag.
Following is an example:
<FONT SIZE="4">
This text should appear in FONT SIZE 4
</FONT>
TEXT COLOUR
CHANGING TEXT COLOR:
Changing the colour of your text (all or just
words or portions) is just as easy as
changing text size.
You use the colour's hexadecimal triplet
value within the FONT tag:
<FONT COLOR="#FF0000">Some RED
text</FONT>
             http://www.espressographics.com/text/colorvalues.html
NON BREAKING SPACE
NON BREAKING SPACE:
In HTML coding, the non-breaking space is a
character entity which can:
- create white space between words or web
page elements
- stop the browser from breaking a line in
the wrong place.
&nbsp;
     Example: Mr.&nbsp;Someone
HORIZONTAL LINE
CHANGING TEXT COLOR:
Use the <hr /> tag to display lines across the
screen.
Note: the horizontal rule tag has no ending
tag like the line break tag.

Example:
Use <hr />
QUOTATION
The BLOCKQUOTE element defines a block
quotation:
The content of the BLOCKQUOTE element
should be contained within the blockquote.

<BLOCKQUOTE><P>My name is txt </P>
</BLOCKQUOTE>
Review
How many text sizes can be used within the
FONT SIZE tag ?

Seven text sizes can be used within the
FONT SIZE tag, with FONT SIZE 1 as
the smallest and FONT SIZE 7 as the
largest.
Review
What are some problems with using the
non-breaking space HTML coding ?
1. Not all browsers acknowledge the
additional instances of the non-breaking
space.
2. If you get carried away with the use of
non-breaking space, it can cause the
horizontal scroll bar to appear, if the browser
window is not big enough.
Review
What are some problems with using the
non-breaking space HTML coding ?
3. Using the non-breaking space HTML
coding within the text or between pictures
(for example) can make your content overlap
the borders of the table

Weitere ähnliche Inhalte

Was ist angesagt? (16)

Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Basic html tags
Basic html tagsBasic html tags
Basic html tags
 
Lesson 3
Lesson 3Lesson 3
Lesson 3
 
Html
HtmlHtml
Html
 
Html
Html Html
Html
 
html
htmlhtml
html
 
Basic html
Basic htmlBasic html
Basic html
 
Html basics
Html basicsHtml basics
Html basics
 
Prabu html
Prabu htmlPrabu html
Prabu html
 
HTML
HTMLHTML
HTML
 
Intro to HTML (Kid's Class at TIY)
Intro to HTML (Kid's Class at TIY)Intro to HTML (Kid's Class at TIY)
Intro to HTML (Kid's Class at TIY)
 
Html text formatting
Html text formattingHtml text formatting
Html text formatting
 
Learn HTML Easier
Learn HTML EasierLearn HTML Easier
Learn HTML Easier
 
Hyper Text Marup Language
Hyper Text Marup LanguageHyper Text Marup Language
Hyper Text Marup Language
 
Html basics
Html basicsHtml basics
Html basics
 
Html basics
Html basicsHtml basics
Html basics
 

Andere mochten auch

Web topic 7 html tags for links
Web topic 7  html tags for linksWeb topic 7  html tags for links
Web topic 7 html tags for links
CK Yang
 
PHP Basics Ebook
PHP Basics EbookPHP Basics Ebook
PHP Basics Ebook
Swanand Pol
 
Web topic 2 html
Web topic 2  htmlWeb topic 2  html
Web topic 2 html
CK Yang
 
Web topic 9 navigation and link
Web topic 9  navigation and linkWeb topic 9  navigation and link
Web topic 9 navigation and link
CK Yang
 
Web topic 8 listings in html
Web topic 8  listings in htmlWeb topic 8  listings in html
Web topic 8 listings in html
CK Yang
 
Web topic 4 style in html
Web topic 4  style in htmlWeb topic 4  style in html
Web topic 4 style in html
CK Yang
 
Web topic 10 2 web design basics
Web topic 10 2  web design basicsWeb topic 10 2  web design basics
Web topic 10 2 web design basics
CK Yang
 
Web topic 12 tables in html
Web topic 12  tables in htmlWeb topic 12  tables in html
Web topic 12 tables in html
CK Yang
 
Web topic 29 w3 c page validation
Web topic 29  w3 c page validationWeb topic 29  w3 c page validation
Web topic 29 w3 c page validation
CK Yang
 
Web topic 23 web accessibility
Web topic 23  web accessibilityWeb topic 23  web accessibility
Web topic 23 web accessibility
CK Yang
 
Web topic 32 validate web contents
Web topic 32  validate web contentsWeb topic 32  validate web contents
Web topic 32 validate web contents
CK Yang
 
Web topic 24 usage of web browser
Web topic 24  usage of web browserWeb topic 24  usage of web browser
Web topic 24 usage of web browser
CK Yang
 
Web topic 14 cascading style sheets
Web topic 14  cascading style sheetsWeb topic 14  cascading style sheets
Web topic 14 cascading style sheets
CK Yang
 
Web topic 15 1 basic css layout
Web topic 15 1  basic css layoutWeb topic 15 1  basic css layout
Web topic 15 1 basic css layout
CK Yang
 
Web topic 29 w3 c page validation
Web topic 29  w3 c page validationWeb topic 29  w3 c page validation
Web topic 29 w3 c page validation
CK Yang
 
Web topic 28. w3 c standards and guidelines
Web topic 28. w3 c standards and guidelinesWeb topic 28. w3 c standards and guidelines
Web topic 28. w3 c standards and guidelines
CK Yang
 
Web topic 25 mobile optimized website
Web topic 25  mobile optimized websiteWeb topic 25  mobile optimized website
Web topic 25 mobile optimized website
CK Yang
 
Web topic 30 ensure web contents meet
Web topic 30   ensure web contents meetWeb topic 30   ensure web contents meet
Web topic 30 ensure web contents meet
CK Yang
 

Andere mochten auch (20)

Web topic 7 html tags for links
Web topic 7  html tags for linksWeb topic 7  html tags for links
Web topic 7 html tags for links
 
PHP Basics Ebook
PHP Basics EbookPHP Basics Ebook
PHP Basics Ebook
 
Hushang Gaikwad
Hushang GaikwadHushang Gaikwad
Hushang Gaikwad
 
Technical Seminar Topic on Google glass
Technical Seminar Topic on Google glassTechnical Seminar Topic on Google glass
Technical Seminar Topic on Google glass
 
Web topic 2 html
Web topic 2  htmlWeb topic 2  html
Web topic 2 html
 
Web topic 9 navigation and link
Web topic 9  navigation and linkWeb topic 9  navigation and link
Web topic 9 navigation and link
 
Web topic 8 listings in html
Web topic 8  listings in htmlWeb topic 8  listings in html
Web topic 8 listings in html
 
Web topic 4 style in html
Web topic 4  style in htmlWeb topic 4  style in html
Web topic 4 style in html
 
Web topic 10 2 web design basics
Web topic 10 2  web design basicsWeb topic 10 2  web design basics
Web topic 10 2 web design basics
 
Web topic 12 tables in html
Web topic 12  tables in htmlWeb topic 12  tables in html
Web topic 12 tables in html
 
Web topic 29 w3 c page validation
Web topic 29  w3 c page validationWeb topic 29  w3 c page validation
Web topic 29 w3 c page validation
 
Web topic 23 web accessibility
Web topic 23  web accessibilityWeb topic 23  web accessibility
Web topic 23 web accessibility
 
Web topic 32 validate web contents
Web topic 32  validate web contentsWeb topic 32  validate web contents
Web topic 32 validate web contents
 
Web topic 24 usage of web browser
Web topic 24  usage of web browserWeb topic 24  usage of web browser
Web topic 24 usage of web browser
 
Web topic 14 cascading style sheets
Web topic 14  cascading style sheetsWeb topic 14  cascading style sheets
Web topic 14 cascading style sheets
 
Web topic 15 1 basic css layout
Web topic 15 1  basic css layoutWeb topic 15 1  basic css layout
Web topic 15 1 basic css layout
 
Web topic 29 w3 c page validation
Web topic 29  w3 c page validationWeb topic 29  w3 c page validation
Web topic 29 w3 c page validation
 
Web topic 28. w3 c standards and guidelines
Web topic 28. w3 c standards and guidelinesWeb topic 28. w3 c standards and guidelines
Web topic 28. w3 c standards and guidelines
 
Web topic 25 mobile optimized website
Web topic 25  mobile optimized websiteWeb topic 25  mobile optimized website
Web topic 25 mobile optimized website
 
Web topic 30 ensure web contents meet
Web topic 30   ensure web contents meetWeb topic 30   ensure web contents meet
Web topic 30 ensure web contents meet
 

Ähnlich wie Web topic 3 html format tags

Basic html training national
Basic html training nationalBasic html training national
Basic html training national
Needanuts
 

Ähnlich wie Web topic 3 html format tags (20)

GFGC CHIKKABASUR(HTML)
GFGC CHIKKABASUR(HTML)GFGC CHIKKABASUR(HTML)
GFGC CHIKKABASUR(HTML)
 
GFGC CHIKKABASUR(HTML)
GFGC CHIKKABASUR(HTML)GFGC CHIKKABASUR(HTML)
GFGC CHIKKABASUR(HTML)
 
HTML-INTRO.pptx
HTML-INTRO.pptxHTML-INTRO.pptx
HTML-INTRO.pptx
 
introduction to html.ppt
introduction to html.pptintroduction to html.ppt
introduction to html.ppt
 
Introduction to HTML Communication Skills
Introduction to HTML Communication SkillsIntroduction to HTML Communication Skills
Introduction to HTML Communication Skills
 
Basic Html Notes
Basic Html NotesBasic Html Notes
Basic Html Notes
 
WEB PROGRAMMING- Web page creation using HTML Tags
WEB PROGRAMMING-  Web page creation using HTML TagsWEB PROGRAMMING-  Web page creation using HTML Tags
WEB PROGRAMMING- Web page creation using HTML Tags
 
Intro html
Intro htmlIntro html
Intro html
 
Basic html training national
Basic html training nationalBasic html training national
Basic html training national
 
introdution-to-html.ppt
introdution-to-html.pptintrodution-to-html.ppt
introdution-to-html.ppt
 
Positioning text
Positioning textPositioning text
Positioning text
 
HTML.pdf
HTML.pdfHTML.pdf
HTML.pdf
 
Html basics
Html basicsHtml basics
Html basics
 
HTML_Basics.pdf
HTML_Basics.pdfHTML_Basics.pdf
HTML_Basics.pdf
 
Html basics
Html basicsHtml basics
Html basics
 
Html basics
Html basicsHtml basics
Html basics
 
Html basics
Html basicsHtml basics
Html basics
 
Html basic file
Html basic fileHtml basic file
Html basic file
 
Html basics
Html basicsHtml basics
Html basics
 
Html BASICS
Html BASICSHtml BASICS
Html BASICS
 

Mehr von CK Yang

Web topic 27 class test
Web topic 27  class testWeb topic 27  class test
Web topic 27 class test
CK Yang
 
Web topic 33 publish websites
Web topic 33  publish websitesWeb topic 33  publish websites
Web topic 33 publish websites
CK Yang
 
Web topic 31 setup remote site
Web topic 31  setup remote siteWeb topic 31  setup remote site
Web topic 31 setup remote site
CK Yang
 
Web topic 26 browser compatibilty and security
Web topic 26  browser compatibilty and securityWeb topic 26  browser compatibilty and security
Web topic 26 browser compatibilty and security
CK Yang
 
Web topic 22 validation on web forms
Web topic 22  validation on web formsWeb topic 22  validation on web forms
Web topic 22 validation on web forms
CK Yang
 
Web topic 21 pass info via javascript
Web topic 21  pass info via javascriptWeb topic 21  pass info via javascript
Web topic 21 pass info via javascript
CK Yang
 
Web topic 20 2 html forms
Web topic 20 2  html formsWeb topic 20 2  html forms
Web topic 20 2 html forms
CK Yang
 
Web topic 20 1 html forms
Web topic 20 1  html formsWeb topic 20 1  html forms
Web topic 20 1 html forms
CK Yang
 
Web topic 18 conflict resolution in css
Web topic 18  conflict resolution in cssWeb topic 18  conflict resolution in css
Web topic 18 conflict resolution in css
CK Yang
 
Web topic 17 font family in css
Web topic 17  font family in cssWeb topic 17  font family in css
Web topic 17 font family in css
CK Yang
 
Web topic 16 css workflow
Web topic 16  css workflowWeb topic 16  css workflow
Web topic 16 css workflow
CK Yang
 
Web topic 15 2 basic css layout
Web topic 15 2  basic css layoutWeb topic 15 2  basic css layout
Web topic 15 2 basic css layout
CK Yang
 
Web topic 13 html validation tools
Web topic 13  html validation toolsWeb topic 13  html validation tools
Web topic 13 html validation tools
CK Yang
 
Web topic 11 importance of html validation
Web topic 11  importance of html validationWeb topic 11  importance of html validation
Web topic 11 importance of html validation
CK Yang
 

Mehr von CK Yang (14)

Web topic 27 class test
Web topic 27  class testWeb topic 27  class test
Web topic 27 class test
 
Web topic 33 publish websites
Web topic 33  publish websitesWeb topic 33  publish websites
Web topic 33 publish websites
 
Web topic 31 setup remote site
Web topic 31  setup remote siteWeb topic 31  setup remote site
Web topic 31 setup remote site
 
Web topic 26 browser compatibilty and security
Web topic 26  browser compatibilty and securityWeb topic 26  browser compatibilty and security
Web topic 26 browser compatibilty and security
 
Web topic 22 validation on web forms
Web topic 22  validation on web formsWeb topic 22  validation on web forms
Web topic 22 validation on web forms
 
Web topic 21 pass info via javascript
Web topic 21  pass info via javascriptWeb topic 21  pass info via javascript
Web topic 21 pass info via javascript
 
Web topic 20 2 html forms
Web topic 20 2  html formsWeb topic 20 2  html forms
Web topic 20 2 html forms
 
Web topic 20 1 html forms
Web topic 20 1  html formsWeb topic 20 1  html forms
Web topic 20 1 html forms
 
Web topic 18 conflict resolution in css
Web topic 18  conflict resolution in cssWeb topic 18  conflict resolution in css
Web topic 18 conflict resolution in css
 
Web topic 17 font family in css
Web topic 17  font family in cssWeb topic 17  font family in css
Web topic 17 font family in css
 
Web topic 16 css workflow
Web topic 16  css workflowWeb topic 16  css workflow
Web topic 16 css workflow
 
Web topic 15 2 basic css layout
Web topic 15 2  basic css layoutWeb topic 15 2  basic css layout
Web topic 15 2 basic css layout
 
Web topic 13 html validation tools
Web topic 13  html validation toolsWeb topic 13  html validation tools
Web topic 13 html validation tools
 
Web topic 11 importance of html validation
Web topic 11  importance of html validationWeb topic 11  importance of html validation
Web topic 11 importance of html validation
 

Web topic 3 html format tags

  • 1. Web Authoring Topic 3 – HTML Formatting Tags
  • 2. Objectives Students should able to: 1. Use Web Authoring tool to format text with the following HTML tags: • Bold, italic and underlining the text; • Change font size; • Change the font face; • Change the colour of the text; and • Change the colour of the links. 2. Create white space (non breaking), horizontal rule and quotations.
  • 3. Nesting Tags Tags are always nested. This nesting reflects the structure of the document (for example, emphasized text inside a paragraph, inside a form, inside the BODY). However, tags can never overlap.
  • 4. Nesting Tags <A HREF=”burn.html”><EM>Burn down</EM></A> more forests Correct! <A HREF=”burn.html”><EM>Burn down</A></EM> more forests Wrong!
  • 5. Background tag It is used to include a background image in HTML. <BODY BACKGROUND = “image.gif”>
  • 6. Background tag It is used to set a background colour, text colour and link colour in HTML. <BODY BGCOLOR = “#000000” TEXT=“FFFFFF” LINK=“#9690CC>
  • 7. HTML HEADERS The format for an HTML heading tag is: <hN>Text to Appear in Heading</hN> where N is a number from 1 to 6 identifying the heading size
  • 8. Paragraphs The paragraph can be aligned using: <P ALIGN=”CENTER”> Every line of text in this paragraph is centered </P>
  • 9. BOLD & ITALIC Often <strong> renders as <b>, and <em> renders as <i> <strong> or <em> means that you want the text to be rendered in a way that the user understands as "important".
  • 10. TEXT SIZE CHANGING TEXT SIZE: To change the size of all or just certain portions of your text within an HTML document, use the SIZE attribute of the <FONT></FONT> tag. Following is an example: <FONT SIZE="4"> This text should appear in FONT SIZE 4 </FONT>
  • 11. TEXT COLOUR CHANGING TEXT COLOR: Changing the colour of your text (all or just words or portions) is just as easy as changing text size. You use the colour's hexadecimal triplet value within the FONT tag: <FONT COLOR="#FF0000">Some RED text</FONT> http://www.espressographics.com/text/colorvalues.html
  • 12. NON BREAKING SPACE NON BREAKING SPACE: In HTML coding, the non-breaking space is a character entity which can: - create white space between words or web page elements - stop the browser from breaking a line in the wrong place. &nbsp; Example: Mr.&nbsp;Someone
  • 13. HORIZONTAL LINE CHANGING TEXT COLOR: Use the <hr /> tag to display lines across the screen. Note: the horizontal rule tag has no ending tag like the line break tag. Example: Use <hr />
  • 14. QUOTATION The BLOCKQUOTE element defines a block quotation: The content of the BLOCKQUOTE element should be contained within the blockquote. <BLOCKQUOTE><P>My name is txt </P> </BLOCKQUOTE>
  • 15. Review How many text sizes can be used within the FONT SIZE tag ? Seven text sizes can be used within the FONT SIZE tag, with FONT SIZE 1 as the smallest and FONT SIZE 7 as the largest.
  • 16. Review What are some problems with using the non-breaking space HTML coding ? 1. Not all browsers acknowledge the additional instances of the non-breaking space. 2. If you get carried away with the use of non-breaking space, it can cause the horizontal scroll bar to appear, if the browser window is not big enough.
  • 17. Review What are some problems with using the non-breaking space HTML coding ? 3. Using the non-breaking space HTML coding within the text or between pictures (for example) can make your content overlap the borders of the table