EECS 1550 HTML Basics

HTML main structure elements

For more information see Web platform docs on elements.

<!doctype html >          — the first tag in the file
<html>
    <head> … </head>      — NOT analogous to a header on a page
    <body> … </body>      — the contents of the page
</html>

HTML basic body elements

on elements

Header — Use <header> … </header> to define the header section of a page.

Footer — Use <footer> … </header> to define the footer section of a page.

Section — Use <section> … </section> to define each section of a page including sub-sections.

Heading level — <hn>…</hn> — 1 ≤ n ≤ 6. Headings always follow a section tag.

Paragraph — <p>

Line break — <br>

Block quote — <blockquote>…</blockquote> — use only for quotes. Do not use for indentation

Unordered list with list elements — items are bulleted. The ul element is useful for a quick way of indenting a section of text without using li elements.

In HTML5 to change the type of the "bullet" we use CSS, as the type attribute is obsolescent.

Ordered list with list elements — items are numbered

To change the type of number use the type attribute

<ol type=1> … </ul>     — numerals, the default
<ol type=A> … </ul>     — uppercase letters
<ol type=a> … </ul>     — lower case letters
<ol type=I> … </ul>     — uppercase Roman numerals
<ol type=i> … </ul>     — lowercase Roman numerals

Description list — Used to describe items.

<dl>
    <dt>
         first item to describe
    </dt>
        <dd>
             Description of the first item
        </dd>
…
    <dt>
         Last item to describe
    </dt>
        <dd>
             Description of the last itemitem
        </dd>
</dl>

Page division is used to divide a page into structural blocks that are displayed differently. Divisions can be nested within each other. Divisions are not useful until we use CSS. Some uses of divisions have been superceded with new elements in HTML5 such as the header, hgroup, nav, footer, section, article, aside and time. In the following the css style indent1 is used to indent the text within the div element.

Similar to the div element is the span element that provides fine tuning within other elements such as p, li, blockquote and div. However, it is only useful when you start using CSS. In the following the css style colourRed is used to change the colour of the text within the span element.

Anchors are used specify hyperlink addresses or, simply called, links. The clickable text can contain many HTML elements; exceptions are elements like tables.

<a href="http://eecs.yorku.ca/course/1550"> clickable text to activate the link </a>
     The above is an absolute address

<a href="resources.html"> clickable text to activate the link </a>
     The above is a relative address

<a href="../images/picture.jpg"> clickable text to activate the link </a>
     The above is a relative address

<a href="mailto:a.nonomous@hotmail.com"> clickable text to activate the link </a>
     The above is an email address. Clicking brings up a mailto window

Predefined fixed format block often used to display a simple ASCII table such as the timetable at the top of the class schedule page for the course.

Phrase elements change the style in which text is rendered or identify a special type of element .

<abbr> … </abbr> — identifies the text as an abbreviation
<b> … </b> — renders the text in bold
<cite> … </cite> — identifies a citation or reference
<code> … </code> — identifies program text, which is rendered in a fixed-space font
<dfn> … </dfn> — identifies a definition of a term, usually rendered in italics
<em> … </em> — text is emphasized in relation to the surrounding text
<i> … </i> — renders the text in italics
<kbd> … </kbd> — renders the text in a fixed-space font
<small> … </small> — render in a smaller font
<strong> … </strong> — render in a stronger font
<sub> … </sub> — render the text as a sub_script
<sup> … </sup> — render the text as a super^script
<var> … </var> — identify a variable or program outout, rendered in italics

Comment — insert comments into your web page to document what you are doing.

HTML Entities

For more information see Web platform docs on entities.

The character has special meaning in rendering (displaying) the HTML page; for example the < is the character that begins a tag (a command character). If you do not use a name, then the character is taken to be a command character and is not displayed.

The character has no keyboard equivalent, so the name is used to find the program text that will render the character. Characters that look like a graphic, such as ellipis, …, and em-dash, —, are called glyphs.

& &

< <

space_character   it is always rendered, as a consequence is is used to adjust spacing

" "

‘ &lsquot;

’ &rsquot;

| |

— — the em dash, which longer than a hyphen "-".
− − the minus sign for mathematics, is slightly shorter and thicker.

… …

HTML attributes

For more information see Web platform docs on attributes.

Attributes are specified as a pair of items separated by an equal sign.
attributeName=value
If characters such as a space or graphic character occur in the value, then the value is written within double quotes.
href="http://docs.webplatform.org/wiki/html/elements".

Attributes are written in the start tag for an entity. If more than one attribute is used, then they are listed one after another with at least one space character in between each attributeName=value pair.

When you view the page source for this page you can see attributes used in elements such as meta, link, input and anchor.

HTML main structure elements

HTML basic head elements

HTML basic body elements

HTML Entities

HTML attributes