Download presentation
Presentation is loading. Please wait.
1
Computer Sciences Department
2
And use http://www.w3schools.com/
3
You have to Study from the textbook and http://www.w3schools.com
Hyper Text Markup Language (HTML) and Extensible Hyper Text Markup Language (XHTML) Computer Sciences Department You have to Study from the textbook and
4
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
5
Example of html file <!DOCTYPE html> <html> . . <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> Computer Sciences Department Computer Sciences Department
6
<tagname>content</tagname>
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. <tagname>content</tagname> Computer Sciences Department
7
HTML Elements <p>This is a paragraph.</p>
"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
8
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
9
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
10
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
11
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
12
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
13
HTML Page Structure a visualization of an HTML page structure
Computer Sciences Department
14
HTML Headings HTML headings are defined with the <h1> to <h6> tags. Computer Sciences Department
15
HTML Paragraphs HTML paragraphs are defined with the <p> tag.
Computer Sciences Department
16
HTML Links HTML links are defined with the <a> tag.
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
17
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
18
Computer Sciences Department
19
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
20
Style Computer Sciences Department
21
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
22
HTML / XHTML 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
23
Computer Sciences Department
24
Computer Sciences Department
25
HTML Comments Computer Sciences Department
26
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 Computer Sciences Department
27
Computer Sciences Department
28
Computer Sciences Department
29
Computer Sciences Department
30
HTML Classes Classing HTML elements, makes it possible to define CSS styles for classes of elements. Equal styles for equal classes, or different styles for different classes Computer Sciences Department
31
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 If a web page uses a different character-set than ISO , it should be specified in the <meta> tag. Computer Sciences Department
32
Computer Sciences Department
33
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
34
Computer Sciences Department
35
Computer Sciences Department
36
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
37
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
38
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
39
Computer Sciences Department
40
Complex HTML table A more complex HTML table may also include <caption>, <col>, <colgroup>, <thead>, <tfoot>, and <tbody> elements. Computer Sciences Department
41
Table and caption Computer Sciences Department
42
Different Styles for Different Tables
Computer Sciences Department
43
HTML Lists Computer Sciences Department
44
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
45
Computer Sciences Department
46
An XHTML DTD describes the allowed syntax and grammar of XHTML markup
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
47
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
48
Computer Sciences Department
49
Computer Sciences Department
50
Computer Sciences Department
51
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
52
Computer Sciences Department
53
Computer Sciences Department
54
HTML 4.01 / XHTML 1.0 Tag Reference
Computer Sciences Department
55
Computer Sciences Department
56
Computer Sciences Department
Similar presentations
