Beruflich Dokumente
Kultur Dokumente
Todays Topic
HTML syntax, tags, and document type definitions The anatomy of a web page Formatting the body of a web page Formatting the text on a web page Physical and logical style tags Special Characters Connecting Web pages using hyperlinks
What is HTML?
HTML: The set of markup symbols or codes placed in a file intended for display on a Web browser page. The World Wide Web Consortium (http://w3c.org) sets the standards for HTML and its related languages.
HTML Elements
Each tag has a purpose. Tags are enclosed in angle brackets, "<" and ">" symbols.
What is HTML5?
Support the display of HTML Extensible language Designed to allow the definition of new tags or markup An XML document must be well-formed.
<body>
</body>
<hr />
Doctype statement Identifies the version of HTML contained in your document Placed at the top of a web page document
XHTML 1.0 Transitional DTD <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> HTML5 DTD <!DOCTYPE html>
Head Section
Contains information that describes the Web page document
<head> head section info goes here </head>
Body Section
Contains text and elements that display in the Web page document
<body> body section info goes here </body>
Questions
Choose the true statement below. a. The content that displays in the browser is contained in the head section. b. The content that displays in the browser is contained in the body section. c. Information about the web page is The text contained between title tags contained in the body section. is: d. All of the above are true. a. Not displayed by browsers The <meta> tag is coded in the ___________ section of a web page document. a. body b. header c. footer d. DOCTYPE b. Displayed in the title bar of the browser window c. Not used by search engines d. Never seen by your web page visitor.
<h1>Heading Level 1</h1> <h2>Heading Level 2</h2> <h3>Heading Level 3</h3> <h4>Heading Level 4</h4> <h5>Heading Level 5</h5> <h6>Heading Level 6</h6>
Groups sentences and sections of text together. Configures a blank line above and below the paragraph
Stand-alone tag
Blockquote element
Phrase Elements
Element <abbr> <b> <cite> <code> <dfn> <em> <i> <kbd> <mark> <samp> <small> <strong> <sub> <sup> <var> Example WIPO bold text cite text code text dfn text emphasized text italicized text kbd text mark text samp text small text strong text text text var text
sub sup
Usage Identifies text as an abbreviation Text that has no extra importance but is styled in bold font by usage and convention Identifies a citation or reference Identifies program code samples Identifies a definition of a word or term Causes text to be emphasized in relation to other text; usually displayed in italics Text that has no extra importance but is styled in italics by usage and convention Identifies user text to be typed Text that is highlighted in order to be easily referenced (HTML5 only) Shows program sample output Legal disclaimers and notices (fine print) displayed in small fontsize Strong importance; causes text to stand out from surrounding text; usually displayed in bold Displays a subscript as small text below the baseline Displays a superscript as small text above the baseline Identifies and displays a variable or program output
<li>
Contains an item in the list
Conveys information <ol> <li>Apply to school</li> in an ordered fashion <li>Register for course</li> <li>Pay tuition</li> <ol>
Contains the ordered list
type attribute determines numbering scheme of list, default is numerals <ol type=A>
<li>
Contains an item in the list
Type value: 1, A, a, I, i
Useful to display a list of terms and definitions or a list of FAQ and answers
<dl> tag
Contains the definition list
<dt> tag
Contains a defined term Configures a line break above and below the text
<dd> tag
Contains a data definition or description Indents the text
Questions
What tag pair is used to create a new paragraph? a. <new paragraph> </new paragraph> b. <paragraph> </paragraph> What tag pair is used to create the c. <p> </p> largest heading? d. <para> </para> a. <h1> </h1> b. <h9> </h9> c. <h type=smallest> </h> d. <h6> </h6> Which tag is used to force the browser to display the next text or element on a new line? What tag pair contains the items in an a. <new line> ordered or unordered list? b. <p> a. <item> </item> c. <br> b. <li> </li> d. <line> c. <dd> </dd> d. none of the above
Entity Name
Quotation mark Copyright symbol Ampersand Nonbreaking space Em dash Vertical bar Less than Bigger than
Code
" © & — | < >
DIV Element
Configures a structural block area or division on a web page with empty space above and below Can contain other block display elements, including other div elements
Specifies a hyperlink reference (href) to a file Text between the <a> and </a> is displayed on the web page.
href Attribute
Indicates the file name or URL Web page document, photo, pdf, etc.
Absolute link
<a href="http://yahoo.com">Yahoo</a>
Relative link
<a href="index.htm">Home</a>
<a href=mailto:me@hotmail.com>me@hotmail.com</a>
Indicate the logical style of the text display Common Logical Style Tags
<strong></strong>
To cause text to be emphasized or to "stand out" from surrounding text. <strong>This is important</strong>
<em></em>
To cause text to be emphasized in relation to other text on the page. Usually italics. <em>Please note</em>
Example
Strong text Emphasized text Cite text Code text
Usage
Causes text to be emphasized or to stand out from surrounding text; usually displayed in bold Causes text to be emphasized in relation to other text; usually displayed in italics Identifies a citation or reference; usually displayed in italics Identifies program code samples; usually a fixedspace font
<dfn>
<kbd> <samp> <var>
Dfn text
Kbd text Samp text Var text
Useful for browsers but not always applicable for other devices or user agents such as screen readers
<b></b>
<i></i>
Example
Bold text Emphasized text Displays text as bold
Usage
Displays text in italics Displays text larger than normal size Displays text smaller than normal size Displays small text below the baseline Displays small text above the baseline Displays text with a line through it (deprecated) Displays text underlined; avoid using this because underlined text can be confused with hyperlinks (deprecated)
Big text
Small
Subscript
Superscript
<tt>
Teletype text
Questions
Choose the special character that is used to indicate a blank space. a. ␣ b. Choose the tag pair that is used to c. © link web page documents to each d. none of the above other. a. <link> tag Select the function of an e-mail link from b. <hyperlink> tag the choices below. c. <a> tag a. automatically send you an e-mail d. <body> tag message with the visitor's e-mail address
as the reply-to field b. launch the default e-mail application for the visitor's browser with your e-mail address as the recipient c. display your e-mail address so that the visitor can send you a message later d. link to your mail server