sccc.premiumdw.com

HCDE532 » The Building Blocks of HTML

Markup language (code) is a modern system for annotating a text in a way that is syntactically distinguishable from that text. When used in your web page, it is the underlying instructions that describe how content should be structured. Markup language may include using sets of tags as well as detail of the relationships between parts of the document.

Elements

• Elements are the labels that HTML uses to identify the different parts of a web page and it’s instructions
• Elements can contain text and/or be empty

Elements are called out by using an opening and a closing tag:

1	<p>This is a text element in a paragraph tag.</p>

Where <p> is the opening tag of the element and </p> is the closing tag of the element.

See Also:

• HTML Elements | W3 Schools

Block vs. Inline (Elements)

• Elements can either be block or inline
• Block-level elements will display on a new line—like a paragraph return in a book
• Inline-level elements will be displayed in the current line

Parents & Children (Elements)

When one element contains another it is considered to be the parent of the enclosed child element:

1	<p>This is a text element in a paragraph tag that has a <em>child</em>element inside it.</p>

• The <p> element is the parent element and contains the <em> or child element
• Tags  must be properly nested with corresponding closing tags when using parent and child elements—meaning the child element must be completely inside of the parent element

Attributes & Values

• Attributes contain information about the data in the document
• Depending on the attribute the value may be numerical or predefined

An attribute’s Value must always be enclosed in quotation marks:

1	<img src="images/picture.gif" alt="This is my Picture" />

Where alt is the attribute and This is my Picture is the value of the attribute.

See Also: HTML Attributes | W3 Schools

Textual Content

Text that is contained within elements is a basic ingredient of most web pages.

Written text that you want to appear on the screen will get written in between an opening and a closing tag:

1	<p>This is text written inside an opening and closing tag.</p>

• HTML used to be restricted to only ASCII characters, numerals and a few symbols
• Today HTML accepts most Unicode—most symbols, like quotation marks and apostrophes
• The only textual symbol you need to avoid is the “&” (ampersand) as this is a special character used in character entities

Character Entities

Special characters, such as the copyright symbol, can and should be written as character entity references:

1	<p>&copy; 2006 Premium Design Works</p>

Where &copy; is the character entity reference for the copyright symbol.

See Also: HTML Entities | W3 Schools

Images

When you want to place an image on your page you will call out the source of that image to be displayed:

1	<img src="images/www_barbacoa.jpg" />

Where images/www_barbacoa.jpg is the source file of the image to be displayed

See Also: HTML Images | W3 Schools

Links

Links are another basic ingredient that will let you move from page to page and access media.

Links are written as a reference to another page or piece of media:

1	<a href="portfolio.html">Portfolio</a>

Where the word Portfolio gets assigned a reference to the page portfolio.html.

See Also: HTML Links | W3 Schools