Introduction to HTML Xiangming Mu 9/23/2004. 2 Learning Objectives Understand basic HTML tags and their attributes Learn to create a simple HTML page

Introduction to HTML

Xiangming Mu

9/23/2004

2

Learning Objectives

Understand basic HTML tags and their attributes Learn to create a simple HTML page Learn basic operations on Dreamweaver

Learn to create HTML pages using Javascript Understand basic DHTML

Introduce some current WWW studies and research (e.g., semantic web)

3

What is HTML

HTML stands for Hyper Text Markup Language An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display

the page An HTML file must have an htm or html file extension An HTML file can be created using a simple text editor An HTML file can be found by URL URL refers to the Uniform Resource Locator. Usually

takes the form "protocol://address"

4

An simple example

<html> <head>

<title>Title of page</title>

</head>

<body> This is my first homepage.

<b>This text is bold</b>

<p>This is a paragraph.</p>

</body>

</html>

5

HTML Tags

HTML tags are used to mark-up HTML elements surrounded by the two characters < and > , which are called angle

brackets normally come in pairs like <b> and </b> . These pairs define containers. Any content within a container has

the rules of that container applied to it. The first tag in a pair is the start tag, the second tag is the end tag The text between the start and end tags is the element content

HTML tags are not case sensitive, <b> means the same as <B>

6

Tag Attributes

Tags can have attributes. Attributes can provide additional information about the HTML elements on your page

For example: <body bgcolor="red">. -----background color is red <body background=“back.gif”> ---an image background <table border="0"> -----no borders for a table

Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style

quotes are also allowed.

7

Key Tags

Document Tags <html>: tell a Web browser where the HTML in your document

begins and ends <head>: contain all of the document's header information <title>: will appear at the top of the browser's title bar, and also

appears in the history list <body>: comes after the <head> structure and contains all the

stuffs you want to display in the browser

Comments in HTML to insert a comment in the HTML source code. be ignored by the browser For example: 

8

Key Tags—Text structure

Heading defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading. automatically adds an extra blank line before and after a heading

Paragraphs--<p> automatically adds an extra blank line before and after a paragraph.

Line Breaks --<br> to end a line, but not to start a new paragraph. The <br> tag is an empty tag. It has no closing tag.

Quoted Text--<blockquote> Text will be indented and seperated

9

Key Tags—Text format

Horizon line: <hr>

Preformat: The previous defined format will be

kept <pre>…</pre>

Alignment:<div align="center/left/right">..</div>

<b> Bold

<em> Emphasized

<i> Italic

<strong> Strong

<sub> Subscripted

<sup> Superscripted

<ins> Inserted

<del> Deleted

<address> Address

<cite> Citation

10

List

Unordered Lists --<ul>

Ordered Lists ----<ol>

List items---<li>

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

11

Tables

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag) Each row is divided into data cells (with the <td>

tag). A data cell can contain text, images, lists,

paragraphs, forms, horizontal rules, tables, etc. Headings in a table are defined with the <th> tag.

12

Table example

<table border="1"> <tr>

<th> Heading </th> <th> Another Heading </th>

</tr>

<tr> <td> row 1, cell 1 </td> <td> row 1, cell 2 </td>

</tr>

<tr> <td> row 2, cell 1 </td><td> row 2, cell 2 </td>

</tr> </table>

13

Anchors and Hyperlinks

<a> is used for anchors and hyperlinks

Hyperlink: <a href=“Target.URL”>..text..</a> href stands for "Hypertext REFerence“ Target.URL refers to the URL of the web document linked

Named Anchor Define a section in the HTML document <a name="label">A section</a> a named anchor is not displayed in a special way To link directly to the “lable" section, add a # sign and the name of the anchor to

the end of a URL: <a href="http://www.uwm.edu/#label"> Jump to a Section</a>

14

Image

Image tag--- <img>

contains attributes only and has no closing tag.

To display an image on a page, the src attribute is needed to identify the source URL <img src="url">

The alt attribute is used to define an "alternate text" for an image. <img src="boat.gif" alt="Big Boat">

The height and width attributes decide the size of the image <img src="peter.jpg" width="200" height="150">

15

Special characters

Copyright sign © ©

non-breaking space &nbsp

ampersand &amp &

quotation mark &quot “

Division &divide ÷

Registered trademark &reg ®

16

Multimedia

Embedded multimedia files in your HTML <embed src=“video/audio files” autostart=“true/false”>

Multimedia files need to be uploaded with the HTML document

Documents

Introduction to HTML Xiangming Mu 9/23/2004. 2 Learning Objectives Understand basic HTML tags and their attributes Learn to create a simple HTML page