HTML EssentialsMarkup ( Part I )

Why Markup ?

•Markup gives meaning and structure to your web page

• Creates a relationship between the elements

Where Markup Occurs

• There are only two sections within a web page, the < head > and the < body >

• The < head > section is quite restricted in what it holds

• The VAST MAJORITY of HTML is placed within the < body > tags

Document Head

< ! doctype html >

• This is NOT an element of html; it is a document type declaration

• It identifies the following document as an HTML 5 document

• It is the FIRST line in any HTML document

Document Structure

< html > Everything else< /html >• Entire remaining document is contained within the

< html > tags• Contains ALL remaining elements within the

document• May not be contained within any other element• Used for both HTML and XHTML documents

< head > Section

< head > < metacharset=“utf-8” > < title > Page title goes here < /title >< /head >

• < meta > element describes the character encoding used within the document• While not required, this tag is highly suggested as it specifies the

character set used by the page

• < title > element provides the name of the page currently being displayed. REQD by HTML 5

• Other items that may occur within the < head > section will be discussed later in the course

< body > Section

< body > ....All Remaining Tags ( for the moment )....< /body >

• All tags to be discussed during the next few weeks will be contained within the < body > tag

Definition of Element Types

• Some elements are block elements

• Create a new line / section on the page

• Browsers treat block elements as if there were little rectangular elements stacked on a page

• Some space is usually added at the top / bottom of the entire element

• Some elements are inline elements

• Do not start new lines

• Just adjust with the flow of characters to the screen

Heading: Block Element

• Used by the browser to create a document outline for the page

• Assistive reading devices use the headings to help users quickly scan the page

• Search engines can use headings as part of their algorithm in determining the rank of the page

• Code is < h1 > … < /h1 > thru < h6 > … < /h6 >

• Progress from largest to smallest with standard-sized text occurring at < h3 >

Paragraph: Block Element

• Used by the browser to create a document block for a page

• A blank line will separate paragraph tags from one another

• Code is < p > … < /p >

• For current browsers, it is okay to omit the closing element ( </p> ) BUT• Future revisions of HTML may make it required ( XHTML already

requires it )

• For the sake of consistency and clarity, it is highly encouragedText will occur normally within the paragraph

• Will wrap at line ( screen width ) end

Important Text: Inline Element

• There are two tags which will result in bolded text

• < strong > … < /strong > is used to indicate the text is to be bolded and flagged as being of added importance

• < b > … < /b > is used to indicate only that the text is to be bolded

• Some screen readers may use a different voice when encountering < strong >

• However, very little difference between the two tags but may be differentiated more as browsers progress

Emphasized Text: Inline Element

• There are two tags which will result in emphasized text

• < em > … < /em > is used to indicate the text is to be emphasized and flagged as being of added importance

• < i > … < /i > is used to indicate only that the text is to be emphasized

• Some screen readers may use a different voice when encountering < em >

• However, very little difference between the two tags but may be differentiated more as browsers progress

Underlined Text: Inline Element

• < u > … < /u > is used to indicate the text is to be underlined

• In today’s world with differing fonts, italics, and bold tags, there is very little need to have underlined text occur on a web page

• Also, because hyperlinks tend to be underlined ( and blue ) underlining text on a web page is discouraged

Big & Small Text: Inline Elements

• These two tags which will result in varying the font size a minor amount

• < big > … < /big > is used to indicate the text is to be made slightly larger than normal

• Not used very often

• < small > … < /small > is used to indicate the text is to be made slightly smaller than normal

• Small print used for items such as a copyright or legal notice

Sub & Superscript Text: Inline Elements

• These two tags which will result in changing the font size and location

• < sub > … < /sub > is used to indicate the text is to be made into a subscript

• < sup > … < /sup > is used to indicate the text is to be made into a superscript

Quotations: Inline Elements

• While current HTML has little problem when encountering quote marks ( "<some text>" ) within lines of text, most browsers will recognize the HTML equivalent

• <q>Creativity is allowing yourself to make mistakes. Art is knowing which ones to keep.</q> – Scott Adams

Blockquote: Block Element

• A long quotation, a testimonial, or a section of copy from another source may use a < blockquote > … < /blockquote >

• A < blockquote > indents the text contained therein on both sides

Center: Block Element

• To center text horizontally on a page, the < center > … < /center > code is used

Horizontal Rules ( lines ): Block Element

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

• In HTML, the < hr > tag has no end tag

• In XHTML, the < hr > tag must be properly closed, like this: < hr />

• The < hr > tag has the following attributes• align: left, center, right

• noshade: used on non-colored tags

• size: height of the line in pixels

• width: width of the line as a percentage ( % ) or in pixels

Font: Inline Element

• The font tag is used allow designers to change the size, typeface, and color of text

• Default font is serif. Other possibilities are: sans-serif, monospace, fantasy, and cursive

• The font tag has the following attributes

• size: values are 1 – 7 ( default is 3 ). Can also use: +1, -1, etc.

• color: values are any valid color code

• face: HTML fonts or any valid font on the system

The End