Is3330 L2

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
" © & — | < >
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. 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

Is3330 L2

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Is3330 L2

Diunggah oleh

Hak Cipta:

Format Tersedia

IS3330: Web Authoring

Troy University Ingyu Lee

Each individual markup code is referred to as an element or tag.

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

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)

Use lowercase Use opening and closing tags

Close stand-alone tag with special syntax

Document Type Definition (DTD)

Document Type Definition (DTD)

First Web Page

Head & Body Sections

The Heading Element

HTML <p> tag

HTML <br> tag

Line Break element

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

Indents a block of text for special emphasis

<blockquote> text goes here </blockquote>

HTML List Basics

HTML Unordered List

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

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

Type value: disc, square, circle

HTML Ordered List

<li>Attend course</li> </ol>

HTML Description List

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

HTML Special Characters

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

<div>Home Services Contact</div>

HTML <a> tag

The anchor element

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

HTML <a> tag

Link to other Web sites

Link to pages on your own site

HTML Email Links using the <a> tag

HTML Logical Style Elements

HTML Logical Style Elements

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

HTML Physical Style Elements

Provide browser font configuration info

Common Physical Style Tags

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

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

HTML Physical Style Elements

text text text

Strike text Underline text

Displays text in teletype or fixed-space font

Anda mungkin juga menyukai