Introduction to HTML Xiangming Mu 9/23/2004. 2 Learning Objectives Understand basic HTML tags and...
-
Upload
brenda-owen -
Category
Documents
-
view
214 -
download
1
Transcript of Introduction to HTML Xiangming Mu 9/23/2004. 2 Learning Objectives Understand basic HTML tags and...
![Page 1: 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.](https://reader036.fdocuments.us/reader036/viewer/2022082818/56649f075503460f94c1c9a2/html5/thumbnails/1.jpg)
Introduction to HTML
Xiangming Mu
9/23/2004
![Page 2: 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.](https://reader036.fdocuments.us/reader036/viewer/2022082818/56649f075503460f94c1c9a2/html5/thumbnails/2.jpg)
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)
![Page 3: 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.](https://reader036.fdocuments.us/reader036/viewer/2022082818/56649f075503460f94c1c9a2/html5/thumbnails/3.jpg)
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"
![Page 4: 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.](https://reader036.fdocuments.us/reader036/viewer/2022082818/56649f075503460f94c1c9a2/html5/thumbnails/4.jpg)
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>
![Page 5: 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.](https://reader036.fdocuments.us/reader036/viewer/2022082818/56649f075503460f94c1c9a2/html5/thumbnails/5.jpg)
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>
![Page 6: 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.](https://reader036.fdocuments.us/reader036/viewer/2022082818/56649f075503460f94c1c9a2/html5/thumbnails/6.jpg)
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.
![Page 7: 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.](https://reader036.fdocuments.us/reader036/viewer/2022082818/56649f075503460f94c1c9a2/html5/thumbnails/7.jpg)
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: <!-- This is a comment -->
![Page 8: 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.](https://reader036.fdocuments.us/reader036/viewer/2022082818/56649f075503460f94c1c9a2/html5/thumbnails/8.jpg)
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
![Page 9: 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.](https://reader036.fdocuments.us/reader036/viewer/2022082818/56649f075503460f94c1c9a2/html5/thumbnails/9.jpg)
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
![Page 10: 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.](https://reader036.fdocuments.us/reader036/viewer/2022082818/56649f075503460f94c1c9a2/html5/thumbnails/10.jpg)
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>
![Page 11: 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.](https://reader036.fdocuments.us/reader036/viewer/2022082818/56649f075503460f94c1c9a2/html5/thumbnails/11.jpg)
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.
![Page 12: 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.](https://reader036.fdocuments.us/reader036/viewer/2022082818/56649f075503460f94c1c9a2/html5/thumbnails/12.jpg)
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>
![Page 13: 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.](https://reader036.fdocuments.us/reader036/viewer/2022082818/56649f075503460f94c1c9a2/html5/thumbnails/13.jpg)
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>
![Page 14: 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.](https://reader036.fdocuments.us/reader036/viewer/2022082818/56649f075503460f94c1c9a2/html5/thumbnails/14.jpg)
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">
![Page 15: 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.](https://reader036.fdocuments.us/reader036/viewer/2022082818/56649f075503460f94c1c9a2/html5/thumbnails/15.jpg)
15
Special characters
Copyright sign © ©
non-breaking space  
ampersand & &
quotation mark " “
Division ÷ ÷
Registered trademark ® ®
![Page 16: 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.](https://reader036.fdocuments.us/reader036/viewer/2022082818/56649f075503460f94c1c9a2/html5/thumbnails/16.jpg)
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