Introducing HTML and XHTML
Download
Report
Transcript Introducing HTML and XHTML
Introducing HTML 5
Creating Web Pages with HTML 5
1
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
2
Allows users to click items called links to open documents
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
3
Differences in the language introduced by competing browsers
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
4
Provides online tutorials, documentation, and quizzes
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>
5
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
content
</body>
</html>
Contains content to be displayed in the Web page
Sequential process of each line
<head> tags
<head> tags are elements that provide information about
the page – not the pages content
6
<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
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
7
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
HTML: The Language of the Web
Direction of Web development
8
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
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
9
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 “/”.
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
10
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”
11
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)
12
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
13
Placed within block-level elements
Not separated from other page content
Examples: Italics <i> and bold <b>
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>
14
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.
15
Creating Lists
HTML supports three kinds of lists:
16
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
Ordered Lists
“option” specifies the type of character
used to number the list of items:
< ol type = “option”>
<li> Item1
<li> Item2
...
</ol>
</li>
</li>
• “1” displays with numbers (default)
• “a”, “A” displays either lowercase or
uppercase letters.
• “i”, “I” displays Roman numerals
Output to the page
17
1.
Conceptual Chemistry
a.
Conceptual Chemistry
2.
Chemistry
b.
Chemistry
3.
Advanced Placement Chemistry
c.
Advanced Placement Chemistry
Unordered Lists
“option” specifies the type of symbol used
to display the list of items:
< ul type = “option”>
<li> Item1
<li> Item2
...
</ul>
</li>
</li>
• “disc” (default)
• “square”
• “circle”
Output to the page
o
Conceptual Chemistry
Conceptual Chemistry
o
Chemistry
Chemistry
o
Advanced Placement Chemistry
Advanced Placement Chemistry
18
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
19
Block elements for special types of text
<pre></pre>
<blockquote></blockquote>
Used for portions of code that are formatted with line breaks
and spaces
Preserves whitespace and uses a monospaced font
Used for quotations
<address></address>
20
Used for contact information for the development or owner of
a web site
Block-level Elements
21
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
22
<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
Inline elements
Coded within a block element
Those that format text:
Those that identify content – convey meaning
23
<b></b> - bold
<i></i> - italics
<sub></sub> - subscript
<sup></sup> - superscript
<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
Inline elements - continued
Semantic inline elements
<hgroup></hgroup> - 2 or more headings that form a
composite heading
<time> </time> - date and time
24
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
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
25
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
26
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 />
Creating Links
A hyperlink (or link) is a word, group of words, or image that you can click on to
jump to another document.
<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:
When you move the cursor over a link in a Web page, the arrow will turn into a little
hand.
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>
27
Comments
Comment Tag
Used to add notes with the code
<!-- comment -->
<!-Chemistry Class Web Page
Created for Robert Service High School
-->
28
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.
29