HTML Overview - Text Markups

Before We Begin Make a copy of your HTML file you created in the previous lesson Make a copy of your HTML file you created in the previous lesson Do this in ‘My Computer’ Do this in ‘My Computer’ Use copy/paste to copy the file Use copy/paste to copy the file Rename the copy to ‘text markup.html’ Rename the copy to ‘text markup.html’ Remove everything between the and tags Remove everything between the and tags

Remember… Multiple spaces and ‘Enters’ are ignored, so… Multiple spaces and ‘Enters’ are ignored, so… Don’t use spaces, tabs, and enters to format your text Don’t use spaces, tabs, and enters to format your text Instead, use HTML code to do the formatting for you Instead, use HTML code to do the formatting for you

Block Elements Mark blocks of text Mark blocks of text Result in a new line Result in a new line We’re going to look at: We’re going to look at: Headers Headers Paragraphs Paragraphs Block Quotes Block Quotes Horizontal Rule Horizontal Rule

The Header Tag Use the Header tags to mark sections of your page Use the Header tags to mark sections of your page HTML has six levels of headers: HTML has six levels of headers: H1, H2, H3, H4, H5, H6 H1, H2, H3, H4, H5, H6 H1 is highest importance, H6 is lowest H1 is highest importance, H6 is lowest Similar to styles and outlines used in Word and PowerPoint Similar to styles and outlines used in Word and PowerPoint

Header Example Put this in the Body: Put this in the Body: Mrs. Puff’s Boating School Teacher’s Handbook Mrs. Puff’s Boating School Teacher’s Handbook Ways to Torture SpongeBob Ways to Torture SpongeBob In-school Methods In-school Methods At-home Methods At-home Methods Boating School Assignments Boating School Assignments Boat Driving Exercises Boat Driving Exercises Written Exams Written Exams <hr>

The Paragraph Tag In HTML, a paragraph is a collection of one or more sentences In HTML, a paragraph is a collection of one or more sentences Best to use paragraphs for sentences and not just anything Best to use paragraphs for sentences and not just anything Like most tags, you can use attributes with it Like most tags, you can use attributes with it ALIGN=“center”, ALIGN=“right” ALIGN=“center”, ALIGN=“right”

Paragraph Example Add this code following the first H3 tag: Add this code following the first H3 tag: In-school Methods In-school Methods SpongeBob is extremely sensitive to chalk dust. Put some on his desk. SpongeBob is extremely sensitive to chalk dust. Put some on his desk. Also, a good method is to put him in a round room and tell him to stand in the corner. Also, a good method is to put him in a round room and tell him to stand in the corner.

Block Quotes Used to mark a block of text as a quotation Used to mark a block of text as a quotation Paragraph is blocked and every line is indented Paragraph is blocked and every line is indented Dreamweaver uses this for indention Dreamweaver uses this for indention

Blockquote Example Add this code following the second H3 tag: Add this code following the second H3 tag: At-home Methods At-home Methods According to the Bikini Bottom website: According to the Bikini Bottom website: <blockquote> SpongeBob is very scared of the dark. He will run around in circles and go crazy if trapped in a dark enclosed space. SpongeBob is very scared of the dark. He will run around in circles and go crazy if trapped in a dark enclosed space. </blockquote>

Horizontal Rule Used to draw a horizontal line Used to draw a horizontal line Can be used as a separator or other things Can be used as a separator or other things Can use attributes to control size and color Can use attributes to control size and color

Line Breaks Not really block elements, but they can be used to ‘block’ text Not really block elements, but they can be used to ‘block’ text Multiple ones can be used to create many blank lines and lots of space. Multiple ones can be used to create many blank lines and lots of space.

Horizontal Rule Example Add this code following the blockquote code: Add this code following the blockquote code:<br><hr><br>

Inline Elements Mark short pieces of text Mark short pieces of text Don’t result in a new line Don’t result in a new line We’re going to look at: We’re going to look at: Emphasis & Strong Emphasis & Strong Bold, Underline, & Italics Bold, Underline, & Italics

Emphasis and Strong Emphasis makes the text look different so it stands out Emphasis makes the text look different so it stands out Strong further emphasizes the text Strong further emphasizes the text Can be used together or separately Can be used together or separately

Bold, Underline, & Italics They do what they say They do what they say Bold emphasizes text (same as what Strong does) Bold emphasizes text (same as what Strong does) Underline underlines text Underline underlines text Italics italicizes text (same as what Emphasis does) Italics italicizes text (same as what Emphasis does)

Emphasis & Strong Example Add the white code where shown: Add the white code where shown: Boat Driving Exercises Boat Driving Exercises In-boat instruction Note: this is VERY DANGEROUS In-boat instruction Note: this is VERY DANGEROUS Written Exams Written Exams Tests can be bold, underlined, or italicized. Tests can be bold, underlined, or italicized.