HTML Essentials Markup ( 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 and the The section is quite restricted in what it holds The VAST MAJORITY of HTML is placed within the tags

Document Head 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 Everything else Entire remaining document is contained within the tags Contains ALL remaining elements within the document May not be contained within any other element Used for both HTML and XHTML documents

Section Page title goes here 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 element provides the name of the page currently being displayed. REQD by HTML 5 Other items that may occur within the section will be discussed later in the course

Section....All Remaining Tags ( for the moment ).... All tags to be discussed during the next few weeks will be contained within the 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 … thru … Progress from largest to smallest with standard-sized text occurring at

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 … For current browsers, it is okay to omit the closing element ( ) 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 … is used to indicate the text is to be bolded and flagged as being of added importance … is used to indicate only that the text is to be bolded Some screen readers may use a different voice when encountering 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 … is used to indicate the text is to be emphasized and flagged as being of added importance … is used to indicate only that the text is to be emphasized Some screen readers may use a different voice when encountering However, very little difference between the two tags but may be differentiated more as browsers progress

Underlined Text: Inline Element … 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 … is used to indicate the text is to be made slightly larger than normal Not used very often … 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 … is used to indicate the text is to be made into a subscript … 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 ( " " ) within lines of text, most browsers will recognize the HTML equivalent Creativity is allowing yourself to make mistakes. Art is knowing which ones to keep. – Scott Adams

Blockquote: Block Element A long quotation, a testimonial, or a section of copy from another source may use a … A indents the text contained therein on both sides

Center: Block Element To center text horizontally on a page, the … code is used

Horizontal Rules ( lines ): Block Element The tag normally defines a thematic break in an HTML page (e.g. a shift of topic) In HTML, the tag has no end tag In XHTML, the tag must be properly closed, like this: The 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