Algorithms 444
Download
Report
Transcript Algorithms 444
Computer Sciences Department
1
And use http://www.w3schools.com/
Hyper Text Markup Language
(HTML)
and
Extensible Hyper Text Markup
Language (XHTML)
You have
to Study
from the textbook and http://www.w3schools.com
Computer
Sciences
Department
3
HTML Introduction
With HTML you can create your own Web site.
What is HTML?
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is not a programming language, it is a markup
language
A markup language is a set of markup tags
The purpose of the tags are to describe page content
Computer Sciences Department
4
Example of html file
<!DOCTYPE html>
<html>
.
.
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Computer Sciences Department
5
HTML Tags
HTML markup tags are usually called HTML tags
HTML tags are keywords (tag names) surrounded by angle brackets
like <html>
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, with a forward slash before
the tag name
Start and end tags are also called opening tags and closing tags
HTML tags are not case sensitive: <P> means the same as <p>. Many
web sites use uppercase HTML tags.
Computer Sciences Department
6
HTML Elements
"HTML tags" and "HTML elements" are often used to
describe the same thing.
HTML elements are written with a start tag, with an
end tag, with the content in between.
The HTML element is everything from the start tag to
the end tag:
HTML container element:
•Start tag: <p>
•Content: This is a paragraph.
•End tag: </p>
Computer Sciences Department
7
Nested HTML Elements (This example contains 4 HTML elements)
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Computer Sciences Department
8
HTML Element Syntax
An HTML element starts with a start tag / opening tag
An HTML element ends with an end tag / closing tag
The element content is everything between the start
and the end tag
Some HTML elements have empty content
Empty elements are closed in the start tag
Most HTML elements can have attributes
Computer Sciences Department
9
Empty HTML Elements
HTML elements with no content are called empty
elements.
<br> is an empty element without a closing tag (the
<br> tag defines a line break).
Tip: In XHTML, all elements must be closed. Adding a
slash inside the start tag, like <br />, is the proper way
of closing empty elements in XHTML (and XML).
Computer Sciences Department
10
HTML Documents = Web Pages
HTML documents describe web pages
HTML documents contain HTML tags and plain text
HTML documents are also called web pages
Computer Sciences Department
11
Web Browsers
The purpose of a web browser (Chrome, Internet
Explorer, Firefox) is to read HTML documents and
display them as web pages. The browser does not
display the HTML tags, but uses the tags to
interpret the content of the page.
Computer Sciences Department
12
HTML Page Structure
a visualization of an HTML page structure
Computer Sciences Department
13
HTML Headings
HTML headings are defined with the <h1> to <h6>
tags.
Computer Sciences Department
14
HTML Paragraphs
HTML paragraphs are defined with the <p> tag.
Computer Sciences Department
15
HTML Links
A hyperlink is an element, a text, or an image that you can click on, and
jump to another document.
HTML links are defined with the <a> tag.
Computer Sciences Department
16
HTML Images
HTML images are defined with the <img> tag.
The alt attribute specifies an alternate text for the
image, if it cannot be displayed.
The alt attribute is required. A web page will not
validate correctly without it
width and height attributes: the values are specified
in pixels (with or without px after the value):
Computer Sciences Department
17
Computer Sciences Department
18
HTML Attributes
HTML elements can have attributes
Attributes provide additional information about an element.
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"
Computer Sciences Department
19
Style
Computer Sciences Department
20
Always Quote Attribute Values
Attribute values should always be enclosed in quotes.
Double style quotes are the most common, but single style
quotes are also allowed.
Tip: In some rare situations, when the attribute value itself
contains quotes, it is necessary to use single quotes:
name='John "ShotGun" Nelson‘
Newer versions of (X)HTML will demand lowercase attributes.
Computer Sciences Department
21
HTML / XHTML Standard Event
Attributes
Standard Event Attributes:
HTML 4 added the ability to let events trigger actions in a
browser, like starting a JavaScript when a user clicks on an
element.
Next is the standard event attributes that can be inserted into
HTML / XHTML elements to define event actions. (some)
Computer Sciences Department
22
Computer Sciences Department
23
Computer Sciences Department
24
HTML Comments
Computer Sciences Department
25
HTML Color Names RGB
140 Color Names are Supported by All Browsers
140 color names are defined in the HTML5 and CSS3 color
specifications.
17 colors are from the HTML specification, 123 colors are from
the CSS specification.
The following table lists them all, along with their
hexadecimal values
Tip: The 17 colors from the HTML specification are: aqua,
black, blue, fuchsia, gray, green, lime, maroon, navy, olive,
orange, purple, red, silver, teal, white, and yellow
http://www.w3schools.com/html/html_colornames.asp
Computer Sciences Department
26
Computer Sciences Department
27
Computer Sciences Department
28
Computer Sciences Department
29
HTML Classes
Classing HTML elements, makes it possible to define CSS styles for classes of
elements.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_classes_london
Equal styles for equal classes, or different styles for different classes
Computer Sciences Department
30
HTML Character Sets
To display an HTML page correctly, the browser must
know what character-set to use.
The character-set for the early world wide web was ASCII.
ASCII supports the numbers from 0-9, the uppercase and
lowercase English alphabet, and some special characters.
Since many countries use characters which are not a part
of ASCII, the default character-set for modern browsers is
ISO-8859-1.
If a web page uses a different character-set than ISO-88591, it should be specified in the <meta> tag.
Computer Sciences Department
31
Computer Sciences Department
32
HTML Symbol Entities
This entity reference includes mathematical symbols,
Greek characters, various arrows, technical symbols
and shapes.
Note: Entity names are case sensitive.
Computer Sciences Department
33
Computer Sciences Department
34
Computer Sciences Department
35
Button
The <button> tag defines a clickable button.
Inside a <button> element you can put content, like text or images. This is
the difference between this element and buttons created with the < input>
element
Computer Sciences Department
36
Table and caption
Definition and Usage
The <caption> tag defines a table caption.
The <caption> tag must be inserted immediately after
the <table> tag.
You can specify only one caption per table.
Tip: By default, the table caption will be center-aligned
above a table. However, the CSS properties "text-align"
and "caption-side" can be used to align and place the
caption.
Computer Sciences Department
37
Table
The <td> tag defines a standard cell in an HTML table.
An HTML table has two kinds of cells:
Header cells - contains header information (created with the
<th> element)
Standard cells - contains data (created with the <td> element)
The text in <th> elements are bold and centered by default.
The text in <td> elements are regular and left-aligned by
default
Computer Sciences Department
38
Computer Sciences Department
39
Complex HTML table
A more complex HTML table may also include
<caption>, <col>, <colgroup>, <thead>, <tfoot>, and
<tbody> elements.
Computer Sciences Department
40
Table and caption
Computer Sciences Department
41
Different Styles for Different Tables
http://www.w3schools.com/html/tryit.asp?filename=t
ryhtml_table_id1
Computer Sciences Department
42
Computer Sciences Department
43
XHTML Introduction
XHTML stands for EXtensible HyperText Markup
Language
XHTML is almost identical to HTML 4.01
XHTML is a stricter and cleaner version of HTML
XHTML is HTML defined as an XML application
Computer Sciences Department
44
Computer Sciences Department
45
An XHTML DTD describes the allowed syntax and grammar
of XHTML markup. XHTML/XML namespaces are used for
providing uniquely named elements and attributes used in
an XHTML/XML document.
Computer Sciences Department
46
The Most Important Differences
from HTML
DOCUMENT STRUCTURE
XHTML DOCTYPE is mandatory
The XML namespace attribute in <html> is mandatory
<html>, <head>, <title>, and <body> is mandatory
ELEMENT SYNTAX
XHTML elements must be properly nested
XHTML elements must always be closed
XHTML elements must be in lowercase
XHTML documents must have one root element
ATTRIBUTE SYNTAX
XHTML attribute names must be in lower case
XHTML attribute values must be quoted
XHTML attribute minimization is forbidden
Computer Sciences Department
47
Computer Sciences Department
48
Computer Sciences Department
49
Computer Sciences Department
50
XHTML - Attributes
XHTML attributes are HTML attributes written as XML
XHTML Attributes - Syntax Rules
Attribute names must be in lower case
Attribute values must be quoted
Attribute minimization is forbidden
Computer Sciences Department
51
Computer Sciences Department
52
Computer Sciences Department
53
HTML 4.01 / XHTML 1.0 Tag
Reference
Computer Sciences Department
54
Computer Sciences Department
55
Computer Sciences Department
56