Chapter 2
1 / 21

Chapter 2 - PowerPoint PPT Presentation

  • Uploaded on

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

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about ' Chapter 2' - halden

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


  • 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.


    <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.


    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.


    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.


    <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.


    <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.


    <blockquote cite="">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.


    <!--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).


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

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.


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.


<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.



  • 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.


    <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.


    <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