Embed Size (px)
Citation preview
Introducing HTML 5
Creating Web Pages with HTML 5
1
2
Web Pages, Servers, and Browsers Web pages
Documents on the Web Can contain images, video and sound clips Stored on Web servers
Web browser Used to view a Web page Interprets the HTML and scripting language such as JavaScript
and jQuery HyperText Markup Language
Allows users to click items called links to open documents
3
HTML: The Language of the Web Web page
Text file written in HyperText Markup Language (HTML) Markup language
Describes structure and content of a document Extensions
Differences in the language introduced by competing browsers
4
HTML: The Language of the Web World Wide Web Consortium (W3C)
http://www.w3c.org Creates standards for browser manufacturers Has no enforcement power but recommendations are usually
followed Companion site is www.w3schools.com
Provides online tutorials, documentation, and quizzes
5
The Structure of an HTML File DOCTYPE tag <!DOCTYPE html….> HTML tag <html></html>
Root element Can have only one root element
Head element <head></head> Contains information about the document Can contain meta elements Instructions in this section are done before the page is displayed and
remains in memory. Body element <body></body>
Contains content to be displayed in the Web page Sequential process of each line
<!DOCTYPE html><html><head>
<title></title></head><body>
content</body></html>
6
<head> tags <head> tags are elements that provide information about
the page – not the pages content <title></title> - describes content of page and used by search
engines for SEO <meta></meta> - provides metadata – information about the
content <link></link> - specifies a file that should be linked to the web
page - not a link that is clicked <script></script> - contains script, not HTML nor CSS <style></style> - CSS styles
Versions of HTML and XHTML
7
What's a deprecated tag / attribute?•Older HTML tags and attributes •Superseded by other more functional or flexible alternatives (whether as HTML or as CSS)•Eventually these tags are likely to become obsolete
Deprecated HTML tags examples•<applet> Inserts applet •<object> references an object•<basefont> sets font styles •<center> centers elements •<dir> directory list •<isindex> adds search field •<menu> menu list •<s> strike through text style sheets •<u> underline text style sheets
8
HTML: The Language of the Web Direction of Web development
Focused on improving XML and XHTML XML combined with CSS style sheets provides the same functionality
as HTML, but with greater flexibility XHTML was designed to overcome some of the problems with
competing HTML standards and the inconsistent interpretation of the language by browsers.
HTML5 implements a complete separation of structure and presentation
Creating an HTML Document
9
Element A distinct feature of a document Each feature is marked within the HTML file with a tag
Tags are either Container tags or Empty tags Container tags:
Have an Opening tag (<p>) and a closing tag (</p>) Meaning that the paragraph tag effects everything contained between the open and closing tags only.
Self closing tags Have no content the opening tag closes itself <img src=“images/teapot.jpg” width=“96” alt=“” /> <br /> Note: There is a space between “br” and “/”.
10
Attributes Tell more about
an element Appear INSIDE
the opening tag only
Some attributes are global attributes
Some attributes are core attributes (most likely to use) id class title lang
11
HTML5 compliant code
Tags and attribute names in lowercase, <body> instead of <BODY>
Closing tags are required, i.e., a paragraph item must be coded <p>here are lists of my items</p>.
Empty tags must be closed, i.e., <hr> must be coded <hr />. Attributes must be assigned a value, for instance the attribute
to designate which image to display must be coded as src = “dog.jpg”
Attribute values must be in quotes. Example: align = “center”
12
HTML5 compliant code
Correct nesting. Closing tags always appear in reverse order of the opening tags.
The alt attribute is required for all images and should be assigned a meaningful description - if none exists, may be assigned with empty quotes.
alt = “Sally Jones, Professor”alt = “ “ (Used in the case of decorative graphics)
13
Working with Block-level Elements Elements are either Block-level, Inline, or Structural Block-level elements
Contains content displayed in a separate section within the page
Examples: headings <h1>, Paragraphs <p>, lists <ul>, tables <table>, divisions <div>, and spans <span> Note: DIV and SPAN are grouping tags
Inline elements Placed within block-level elements Not separated from other page content Examples: Italics <i> and bold <b>
14
Creating Headings Headings
Titles placed within the page body HTML supports six heading elements, numbered h1 through h6 <h1> defines the most important heading. <h6> defines the
least important heading. Syntax to mark a heading element
<hn>content</hn>
15
Creating Paragraphs Paragraphs
Another popular block-level element To mark content as a paragraph
<p>content</p> The <p> tag starts a new line with a blank space above it,
separating the new paragraph from the preceding element.
16
Creating Lists HTML supports three kinds of lists:
an ordered list, which is used to display information in a numeric order
an unordered list, which list items are not listed in a particular order i.e. bullets
a definition list, which is a list of terms, each followed by a definition line that is typically indented slightly to the right
17
Ordered Lists
< ol type = “option”>
<li> Item1 </li>
<li> Item2 </li>. . .
</ol>
“option” specifies the type of character used to number the list of items:
• “1” displays with numbers (default)
• “a”, “A” displays either lowercase or uppercase letters.
• “i”, “I” displays Roman numerals
1. Conceptual Chemistry
2. Chemistry
3. Advanced Placement Chemistry
a. Conceptual Chemistry
b. Chemistry
c. Advanced Placement Chemistry
Output to the page
18
Unordered Lists
< ul type = “option”>
<li> Item1 </li>
<li> Item2 </li>. . .
</ul>
“option” specifies the type of symbol used to display the list of items:
• “disc” (default)
• “square”
• “circle”
o Conceptual Chemistry
o Chemistry
o Advanced Placement Chemistry
Conceptual Chemistry
Chemistry
Advanced Placement Chemistry
Output to the page
19
Definition List
<dl><dt>Conceptual Chemistry </dt>
<dd> An introductory course requiring basic arithematics </dd> <dt>Chemistry I</dt>
<dd> An introductory course requiring solid algebra skills</dd>
</dl>
Conceptual Chemistry
An introductory course requiring basic mathematics
Chemistry I
An introductory course requiring solid algebra skills
20
Block elements for special types of text <pre></pre>
Used for portions of code that are formatted with line breaks and spaces
Preserves whitespace and uses a monospaced font <blockquote></blockquote>
Used for quotations <address></address>
Used for contact information for the development or owner of a web site
21
Block-level Elements
22
Structuring a page Generic elements
<div></div> - divides page content into sections that can be formatted and positioned using styles
</span></span> - identifies text that can be formatted using styles
Semantic elements <header></header> - top of page <section></section> - generic section of page <article></article> - composition, like a newspaper article <nav></nav> - links to other pages <aside></aside> - sidebar <footer></footer> - bottom of page
23
Inline elements Coded within a block element
Those that format text: <b></b> - bold <i></i> - italics <sub></sub> - subscript <sup></sup> - superscript
Those that identify content – convey meaning <abbr></abbr> - abbreviations <cite></cite> - citations <code></code> - computer code <dfn></dfn> - definitions <em></em> - emphasis <kbd></kbd> - keyboard entries (monospaced font) <q></q> - quotations <samp></samp> - mark a sequence of characters <strong></strong> - strongly emphasized <var></var> - computer variables
24
Inline elements - continued Semantic inline elements
<hgroup></hgroup> - 2 or more headings that form a composite heading
<time> </time> - date and time datetime – attribute defining the format pubdate – attribute indicating the date is the actual publication date
for the article that contains the <time> element <figure></figure> - an illustration referred to from the main
content of the document <figcaption></figcaption> - caption that identifies a figure
25
Special Characters Characters not represented on the keyboard, or Characters that may have significance to the markup
language. Special Characters such as <, >, and & , for example, should be
represented by their character entities such as< for <> for >& for &. for a nonbreaking space (use multiple times for spacing).
http://www.digitalmediaminute.com/reference/entity/index.php
26
Creating New Lines Breaks
The <br /> tag inserts a single line break. The <br /> tag is an empty tag which means that it has no end
tag. This text contains<br>a line break.
Horizontal Rules The <hr /> tag defines a thematic break in an HTML page (e.g.
a shift of topic). The <hr /> element is used to separate content (or define a
change) in an HTML page <hr />
27
Creating Links A hyperlink (or link) is 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. <a> tag defines a hyperlink.
The most important attribute of the <a> element is the href attribute, which indicates the link’s destination.
By default, 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
SYNTAX Mark content with a container <a> tag:
<a href="url">content</a> EXAMPLE
<a href="http://www.pixalproducts.com">Pixal Products</a>
28
Comments
Comment Tag Used to add notes with the code<!-- comment --><!--
Chemistry Class Web PageCreated for Robert Service High School
-->
29
Working with Images Inline images
Displays a graphic image located in a separate file within the contents of a block-level element
Most widely viewable in one of three file formats JPEG, GIF (proprietary), or PNG
To markup an inline image<img src="url" alt="text" />
The alt attribute is used for users who do not display images.
