Вы находитесь на странице: 1из 30

IS3330: Web Authoring

Troy University Ingyu Lee

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 individual markup code is referred to as an element or tag.


Each tag has a purpose. Tags are enclosed in angle brackets, "<" and ">" symbols.

Most tags come in pairs; an opening tag and a closing tag.

What is HTML5?

Newest draft version of HTML Supported by modern browsers

Safari, Google Chrome, Firefox, Internet Explorer 9

Intended to be backwards compatible Adds new elements Adds new functionality

Edit form data Native video and audio And more!

XML (eXtensible Markup Language)

Support the display of HTML Extensible language Designed to allow the definition of new tags or markup An XML document must be well-formed.

Use lowercase Use opening and closing tags

<body>

</body>

Close stand-alone tag with special syntax

<hr />

Document Type Definition (DTD)

Document Type Definition (DTD)

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>

First Web Page


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html > an opening tag .... page info goes here </html> a closing tag <!DOCTYPE html> <html lang="en"> <head> <title>Page Title Goes Here</title> <meta charset="utf-8"> </head> <body> ... body text and more HTML5 tags go here ... </body> </html>

Head & Body Sections

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.

The Heading Element

<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>

HTML <p> tag


Paragraph element <p> paragraph goes here </p>

Groups sentences and sections of text together. Configures a blank line above and below the paragraph

HTML <br> tag

Line Break element

Stand-alone tag

text goes here <br> This starts on a new line.

Causes the next element or text to display on a new line

HTML <blockquote> tag

Blockquote element

Indents a block of text for special emphasis

<blockquote> text goes here </blockquote>

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

HTML List Basics


Unordered List Ordered List Description List (definition list)

HTML Unordered List

Displays information with <ul> <li>TCP</li> bullet points <li>IP</li> <ul>


Contains the unordered list type attribute determines the type of bullet point <ul type=square> default type is disc (but depends on the browser used)

<li>HTTP</li> <li>FTP</li> </ul>

Type value: disc, square, circle

<li>
Contains an item in the list

HTML Ordered 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>Attend course</li> </ol>

<li>
Contains an item in the list

Type value: 1, A, a, I, i

HTML Description List

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

<dl> <dt>IP</dt> <dd>Internet Protocol</dd> <dt>TCP</dt> <dd>Transmission Control Protocol</dd> </dl>

<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

HTML Special Characters

Display special characters such as quotes, copyright symbol, etc.


Character
& Empty space -| < >

Entity Name
Quotation mark Copyright symbol Ampersand Nonbreaking space Em dash Vertical bar Less than Bigger than

Code
&quot; &copy; &amp; &nbsp; &mdash; &#124; &lt; &gt;

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

<div>Home Services Contact</div>

HTML <a> tag

The anchor element

Specifies a hyperlink reference (href) to a file Text between the <a> and </a> is displayed on the web page.

<a href="contact.html">Contact Us</a>

href Attribute

Indicates the file name or URL Web page document, photo, pdf, etc.

HTML <a> tag

Absolute link

Link to other Web sites

<a href="http://yahoo.com">Yahoo</a>

Relative link

Link to pages on your own site

<a href="index.htm">Home</a>

HTML Email Links using the <a> tag


Automatically launch the default mail program configured for the browser If no browser default is configured, a message is displayed

<a href=mailto:me@hotmail.com>me@hotmail.com</a>

HTML Logical Style Elements


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>

HTML Logical Style Elements


Element
<strong> <em> <cite> <code>

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

Identifies a definition of a word or term; usually displayed in italics


Identifies user text to be typed; usually a fixedspace font Shows program sample output; usually a fixedspace font Identifies and displays a variable or program output; usually displayed in italics

HTML Physical Style Elements

Provide browser font configuration info

Useful for browsers but not always applicable for other devices or user agents such as screen readers

Common Physical Style Tags

<b></b>

To display as bold text <b>This is important</b>

<i></i>

To display text in italics <i>Please note</i>

HTML Physical Style Elements


Element
<b> <i> <big> <small> <sub> <sup> <strike> <u>

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

text text text

Subscript

Superscript

Strike text Underline text

<tt>

Teletype text

Displays text in teletype or fixed-space font

Questions
Choose the special character that is used to indicate a blank space. a. &blank; b. &nbsp; Choose the tag pair that is used to c. &copy; 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