Chapter 2
This presentation is the property of its rightful owner.
Sponsored Links
1 / 21

Chapter 2 PowerPoint PPT Presentation


  • 105 Views
  • Uploaded on
  • Presentation posted in: General

Chapter 2. Adding and Formatting Text. Agenda. Creating a Paragraph Adding a Line Break Inserting a Blank Space Inserting Preformatted Text Inserting Headings Adding Block Quotes Inserting a Comment Creating Lists (Numbered, Bulleted and Nested) Creating a Definition List

Download Presentation

Chapter 2

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Chapter 2

Chapter 2

Adding and Formatting Text


Agenda

Agenda

  • Creating a Paragraph

  • Adding a Line Break

  • Inserting a Blank Space

  • Inserting Preformatted Text

  • Inserting Headings

  • Adding Block Quotes

  • Inserting a Comment

  • Creating Lists (Numbered, Bulleted and Nested)

  • Creating a Definition List

  • Inserting Special Characters

  • Font Styles (Bold, Italic, Underline)

  • Formatting Fonts (Name, Size, Color)

  • Adjusting Margins

  • Setting a Background Page Color

  • Adding a Horizontal Line


Creating a paragraph

Creating a Paragraph

  • The <p> tag defines a paragraph.

  • Browsers automatically add some space (margin) before and after each <p> element.

    Example

    <p align=“right” >This is some text in a paragraph.</p>


Adding a line break

Adding a Line Break

  • The <br> tag inserts a single line break.

  • The <br> tag is an empty tag which means that it has no end tag.

  • The <br> tag is useful for writing addresses or poems.

  • Use the <br> tag to enter line breaks, not to separate paragraphs.

    Example:

    This text contains <br> a line break.


Inserting a blank space

Inserting a Blank Space

  • Insert the HTML entity &nbsp; where ever you would like to add a single space ("nbsp" stands for non breaking space).

  • Using &nbsp; is helpful in situations where you just need one or two spaces in between characters or words.

    Example:

    Hello. &nbsp;How are you


Inserting preformatted text

Inserting Preformatted Text

  • The <pre> tag defines preformatted text.

  • Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

    Tip: Use the <pre> element when displaying text with unusual formatting, or some sort of computer code.

    Example:

    <pre>Text in a pre elementis displayed in a fixed-widthfont, and it preservesboth spaces andline breaks</pre>


Inserting headings

Inserting Headings

  • The <h1> to <h6> tags are used to define HTML headings.

  • <h1> defines the most important heading. <h6> defines the least important heading.

    Example:

    <h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6>


Adding block quotes

Adding Block Quotes

  • The <blockquote> tag specifies a section that is quoted from another source.

    Example:

    <blockquote cite="http://www.worldwildlife.org/who/index.html">For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</blockquote>


Inserting a comment

Inserting a Comment

  • The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers.

  • You can use comments to explain your code, which can help you when you edit the source code at a later date. This is especially useful if you have a lot of code.

    Example:

    <!--This is a comment. Comments are not displayed in the browser-->


Creating numbered lists

Creating Numbered Lists

  • The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.

  • Use the <li> tag to define list items.


Example of o rdered list

Example of Ordered List

<ol type="A"><li>Coffee</li><li>Tea</li><li>Milk</li></ol><ol start="50"><li>Coffee</li><li>Tea</li><li>Milk</li></ol>


Creating bulleted lists

Creating Bulleted Lists

  • The <ul> tag defines an unordered (bulleted) list.

  • Use the <ul> tag together with the <li> tag to create unordered lists.


Example of bulleted list

Example of Bulleted List

<ul Type="Disc"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>

<ul Type="Square"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>


Creating a definition list

Creating a Definition List

  • The <dl> tag defines a description list.

  • The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name).

    Example:

    <dl><dt>Coffee</dt><dd>Black hot drink</dd><dt>Milk</dt><dd>White cold drink</dd></dl>


Inserting special characters

Inserting Special Characters


Font styles bold italic underline

Font Styles (Bold, Italic, Underline)

The <b> tag specifies bold text.

The <i> tag specifies italic text.

The <u> tag specifies underlined text.

Example:

This is normal text - <b>and this is bold text</b>

This is normal text - <i>and this is bold text</i>

This is normal text - <u>and this is bold text</u>


Formatting fonts

Formatting Fonts

The <font> tag specifies the font face, font size, and font color of text.

Example:

<font size="3" color="red">This is some text!</font><font size="2" color="blue">This is some text!</font><font face="verdana" color="green">This is some text!</font>


Adjusting margins

Adjusting Margins

  • LEFTMARGIN - Sets a left hand margin for your body element.

  • TOPMARGIN - Sets a margin along the top of your body element.

  • RIGHTMARGIN, BOTTOMMARGIN, or

  • MARGINWIDTH, MARGINHEIGHT.

  • A unique set of margin attributes are available to the body tag. These attributes work much like those of a word processing program, allowing you set pixel value margins for the left, right, top, or bottom of your website. Setting these attributes means that all the content you place within your body tags will honor the preset margin.

    Example:

    <body topmargin="50">

    <body leftmargin="50">


The body tag

The <body> tag

The <body> tag defines the document's body.

The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.


Adding a horizontal line

Adding a Horizontal Line

  • The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).

  • The <hr> element is used to separate content (or define a change) in an HTML page.

    Example:

    <h1>HTML</h1><p>HTML is a language for describing web pages.....</p><hr><h1>CSS</h1><p>CSS defines how to display HTML elements.....</p>


Lab 2

Lab 2

Write an HTML code that contains the following:

  • Paragraphs with different alignments

  • Line Breaks

  • Blank Spaces

  • Headings (h1, h2, h3, h4, h5, h6)

  • Comments

  • Lists (Numbered, Bulleted)

  • Font Styles (Bold, Italic, Underline)

  • Fonts (Name, Size, Color)

  • Margins

  • Background Page Color

  • Horizontal Line


  • Login