ita3.2 structural and semantic element theory

ITA3.2 Structural & Semantic Elements of Web Pages

ITA3.2 1

Essential Question?

What is “semantics” and how is it a benefit of HTML?

XPXPXPXPXPDisplaying an HTML File• As you continue modifying the HTML code, you should

occasionally view it with your Web browser to verify that you have not introduced any errors

• You may want to view the results using different browsers to check for compatibility

New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition 3

XPXPXPXPXP

• Article• Aside• Footer• Header• Nav• Section• Blockquote• Lists – description, un/ ordered lists• Character sets


XPXPXPXPXPWhite Space and HTML• HTML file documents are composed of text characters and

white space• White space is the blank space, tabs, and line breaks within the

file• HTML treats each occurrence of white space as a single blank

space• You can use white space to make your document more

readable


Jigsaw: each group will become the “experts” on the assigned HTML

element

Groups will then report back to the group and teach the important concepts to other students.

6

Jigsaw TopicsHTML

Headings&

HTML Paragraphs

HTML Formatting

HTMLLayouts

HTMLLinks

HTMLImages

HTML Lists

HTML Lines & Breaks

HTML Blocks

HTML Colors

HTML Tables

XPXPXPXPXPHTML Headings• Important in HTML documents• Defined with <h1> to <h6> tags– <h1> defines the most important heading. – <h6> defines the least important heading.

• Don't use headings to make text BIG or bold.• Search engines use headings to index the structure and content

of web pages.• use headings to show the document structure.


XPXPXPXPXPHTML Paragraphs <p>• HTML documents are divided into paragraphs.• Paragraphs are defined with the <p> tag.


XPXPXPXPXPHTML Horizontal Line <hr>• HTML Lines• The <hr> tag creates a horizontal line in an HTML page.• The hr element can be used to separate content:


XPXPXPXPXPHTML Line Breaks <br>• Use the <br> tag if you want a line break (a new line) without

starting a new paragraph:


The <br> element is an empty HTML element. It has no end tag.

XPXPXPXPXPHTML Preformatted Text <pre>• displayed in a fixed-width font (usually Courier)• preserves both spaces and line breaks.• Use the <pre> element when displaying text with unusual

formatting, or some sort of computer code.


XPXPXPXPXPHTML Text Formatting• To apply bold or italic text • HTML uses tags like <b> and <i> for formatting output, like text.


Often <strong> renders as <b>, and <em> renders as <i>.

However, there is a difference in the meaning of these tags:

<b> or <i> defines bold or italic text only.

<strong> or <em> means that you want the text to be rendered in a way that the user understands as "important". Today, all major browsers render strong as bold and em as italics. However, if a browser one day wants to make a text highlighted with the strong feature, it might be cursive for example and not bold!

XPXPXPXPXP


Tag Description How It Looks

<b> Defines bold text This text is bold

<em> Defines emphasized text This text is emphasized

<i> Defines a part of text in an alternate voice or mood This text is italic

<small> Defines smaller text This text is small

<strong> Defines important text This text is strong

<sub> Defines subscripted textThis is subscript and superscript

<sup> Defines superscripted text

<ins> Defines inserted textThis is inserted and deleted

<del> Defines deleted text

<mark> Defines marked/highlighted text

HTML Text Formatting Tags

http://www.w3schools.com/tags/tag_b.asp

http://www.w3schools.com/tags/tag_em.asp



http://www.w3schools.com/tags/tag_i.asp



http://www.w3schools.com/tags/tag_small.asp

http://www.w3schools.com/tags/tag_strong.asp

http://www.w3schools.com/tags/tag_sub.asp

http://www.w3schools.com/tags/tag_sup.asp

http://www.w3schools.com/tags/tag_ins.asp

http://www.w3schools.com/tags/tag_del.asp

http://www.w3schools.com/tags/tag_mark.asp

XPXPXPXPXPHTML Links <a>• Hyperlink: (link) a word, group of words, or

image that you can click on to jump to another document; when you move the cursor over a link in a Web page, the arrow will turn into a little hand.

• href attribute: indicates the link's destination.• links will appear as follows in all browsers:– An unvisited link is underlined and blue– A visited link is underlined and purple– An active link is underlined and red

15

XPXPXPXPXPHTML Link Syntax


Tip: The "Link text" doesn't have to be text. It can be an image or any other HTML element.

XPXPXPXPXPHTML Hyperlink Attributes• Target attribute specifies where to open the linked document


“_blank” - will open the linked document in a new browser window or a new tab

XPXPXPXPXPHTML Links - The id Attribute


The id attribute can be used to create a bookmark inside an HTML document.

Tip: Bookmarks are not

displayed in any special way. They are invisible to

the reader.

XPXPXPXPXPHTML Images <img>

• The <img> tag is empty - contains attributes only, and has no closing tag.

• To display an image on a page, you need to use the src attribute.

• Src = "source“ The value of the src attribute is the URL of the image you want to display


XPXPXPXPXPHTML Layouts• Multiple columns are created by using <div> or <table>

elements. • CSS are used to position elements, or to create backgrounds or

colorful look for the pages.• div element: a block level element used for grouping HTML

elements. <div>


XPXPXPXPXPHTML Tables


XPXPXPXPXPHTML Lists


XPXPXPXPXPHTML Blocks• HTML elements can be grouped together with <div> and

<span>.• block level elements: normally start (and end) with a new line

when displayed in a browser.– Examples: <h1>, <p>, <ul>, <table>

• inline elements: normally displayed without starting a new line. – Examples: <b>, <td>, <a>, <img>


XPXPXPXPXPHTML <div>• a block level element that can be used as a container for

grouping other HTML elements; browser display a line break before and after

• When used password1• with CSS, the <div> element can be used to set style attributes

to large blocks of content.• common use of the <div> element, document layout. • It replaces the "old way" of defining layout using tables. Using

<table> elements for layout is not the correct use of <table>. The purpose of the <table> element is to display tabular data.


XPXPXPXPXPHTML <span>• The HTML <span> element is an inline element that can be used

as a container for text.• The <span> element has no special meaning. • When used together with CSS, the <span> element can be used

to set style attributes to parts of the text.


XPXPXPXPXPHTML Colors• Colors are displayed combining RED, GREEN, and BLUE light.• Color Values– CSS colors are defined using a hexadecimal (hex) notation for the combination of

Red, Green, and Blue color values (RGB). – The lowest value that can be given to one of the light sources is 0 (hex 00). – The highest value is 255 (hex FF).– Hex values are written as 3 double digit numbers, starting with a # sign.

26

XPXPXPXPXPDefining the Structure of the Page Body


XPXPXPXPXPMarking Structural Elements in HTML5• To mark the page header, use the header element• To mark the page footer, use the footer element• To mark a main section of page content, use the section

element• To mark a sidebar, use the aside element• To mark an article, use the article element


XPXPXPXPXPMarking a Section with the div Element


XPXPXPXPXPPage Content Elements


XPXPXPXPXPWorking with Grouping Elements


XPXPXPXPXPWorking withGrouping Elements• Grouping elements are elements that contain content that is

viewed as a distinct block within the Web page• Heading elements are block-level elements that contain the

text of main headings on the Web page– <hn>content<hn>– n is an integer between 1 and 6• <h1> is the largest heading• <h6> is the smallest heading


XPXPXPXPXPMarking Grouping Content• To mark a heading, enter

<hn>content</hn>

where n is an integer from 1 to 6 and content is the text of heading• To mark a paragraph, enter

<p>content</p>• To mark a block quote, enter

<blockquote>content</blockquote>


XPXPXPXPXPAdding Headings


XPXPXPXPXPMarking Paragraph Elements


XPXPXPXPXPMarking a Block Quote• The syntax for making an extended quote is– <blockquote>content</blockquote>


XPXPXPXPXPMarking an Address• <address>content</address>


XPXPXPXPXPMarking a List• HTML supports three kinds of lists: ordered, unordered, and

description• You use an ordered list for items that must appear in a

numerical order• You use an unordered list for items that do not need to occur in

any special order• One list can contain another list. This is called a nested list


XPXPXPXPXPDescription Lists• The description list contains a list of terms, each followed by

the term’s description• Web browsers typically display the definition description below

the definition term and slightly indented:Basic Stick

Easiest stick to learn


XPXPXPXPXPApplying an External Style Sheet• Style sheets are written in the Cascading Style Sheet (CSS) language• To apply an external style sheet to a Web page, you create a link within

the document head to the style sheet file using the link element<link href=”file” rel=”stylesheet” type=”text/css” />


XPXPXPXPXPLinking to a JavaScript File


XPXPXPXPXPMarking Text-Level Elements


XPXPXPXPXPUsing the Generic Elements div and span• HTML supports two such generic elements: div and span– The div element is used to mark general grouping content– The span element is used to mark general text-level content


XPXPXPXPXPMarking a Line Break


XPXPXPXPXPInserting an Inline Image


XPXPXPXPXPFigures and Figure Captions• In books and magazines, figures and figure captions are often placed

within boxes that stand aside from the main content of an article• HTML5 introduced this type of object to Web page markup with the

figure and figcaption elements<figure>

content<figcaption>caption</figcaption>

</figure>


XPXPXPXPXPWorking with Character Sets and Special Characters• Character sets come in a wide variety of sizes, based on the

number of symbols required for communication in the chosen Language– ASCII (American Standard Code for Information Interchange)– Latin-1– ISO 8859-1– Unicode– UTF-8


XPXPXPXPXPWorking with Character Sets and Special Characters• Character encoding associates each symbol from a character

set with a numeric value called the numeric character reference

• Another way to insert a special symbol is to use a character entity reference, in which a short memorable name is used in place of the numeric character reference


XPXPXPXPXPWorking with Character Sets and Special Characters• To insert a symbol based on the encoding number, use the entity

&#code;where code is the encoding number.

• To insert a symbol based on a character entity reference, use the entitychar;where char is the name assigned to the character.

• To insert a nonbreaking space, use the following entity:

• To insert the < symbol, use the following entity:<

• To insert the > symbol, use the following entity:>


XPXPXPXPXPWorking with Character Sets and Special Characters


XPXPXPXPXPSpecifying a Character Set


XPXPXPXPXPESSENTIAL QUESTION ANSWERED:

What are the structural elements in HTML5 and how are they used??

Tags, elements, containers,


ita3.2 structural and semantic element theory

Technology