Web topic 5 text formatting


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web topic 5 text formatting

  1. 1. Web Authoring Topic 5 – Text Formatting
  2. 2. ObjectivesStudents should able to:Describe the function and use thefollowing text formatting tags: • Paragraphs • Headings • Emphasis • Line breaks • Bold • Italic • Image source (Img Src)
  3. 3. ParagraphThe <p> tag defines a paragraph.This tag places a blank line above andbelow the text of the paragraph.The web browser automaticallyunderstands how to display the textbecause of the paragraph tag. Example: <P> ... the text goes here ... </P>
  4. 4. HeadingsThe HTML header contains severalnotable items which include:1. doctype - This gives a description of thetype of HTML document this is.2. meta name="description" - This gives adescription of the page for search engines.3. title - Defines the name of your documentfor your browser.
  5. 5. HeadingsThe header in our example document:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN"> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><meta name="description" content="ComprehensiveDocumentation and information about HTML."> <meta name="keywords" content="HTML, tags, commands"><title>The CTDP HTML Guide</title> <link href="style.css" rel="stylesheet" type="text/css"></head>
  6. 6. EmphasisIf you learned HTML before you learnedXHTML, you probably know about the boldand italics tags.But these tags are not semantic elementsbecause they define how the text should lookrather than information about the text.They have been generally replaced by strong(for bold) and emphasis (for italics).
  7. 7. EmphasisExample:<em>This text is emphasized</em> mostbrowsers display it as italics.<strong>This text is stronglyemphasized</strong> most browsers displayit as bold.
  8. 8. Link BreakLine breaks are different from most of thetags we have seen so far.A line break ends the line you arecurrently on and resumes on the nextline.Placing <br /> within the code is the sameas pressing the return key in a wordprocessor. Use the <br /> tag within the<p> (paragraph) tag.
  9. 9. Link BreakFor example:<p> Will Peterson<br />Box 61<br />Cleveland, Ohio<br /></p>
  10. 10. FontThe <font> tag is used to add style, size,and colour to the text on your site.Use the size, colour, and face attributesto customize your fonts.Use a <basefont> tag to set all of yourtext to the same size, face, and colour.
  11. 11. FontExample: - set font size to 5<p> <font size="5">Here is a size 5font</font> </p>Example: - set font colour to red<p><font color="red">This text is red</font></p>
  12. 12. UnderlineUnderlines can be used to highlight andemphasize text on web pages.Text can be underlined using CSS stylesheets, with the text-decoration property, or,with the HTML U element.Example: <U> ... text to be underlined ... </U>
  13. 13. Preformatted TextPreformatted text between the start andend PRE tag is rendered using a fixedwith font, in addition whitespacecharacters are treated literally.The spacing and line breaks are rendereddirectly.
  14. 14. Preformatted TextFor example, a verse from Shelley (To aSkylark):<PRE> Higher still and higher From the earth thou springest Like a cloud of fire; The blue deep thou wingest,And singing still dost soar, and soaring eversingest.</PRE>
  15. 15. Using <style> TagThe <STYLE> tag is always inside theheader of the document, i.e. between the<HEAD> Start and End Tags.<HEAD> <TITLE>Bachs home page</TITLE> <STYLE type="text/css"> H1 { color: blue } </STYLE></HEAD>