1. Week 2
1. HTML/XHTML
2. HTML/XHTML meta tags
3. Create a Web site with
lists, hyperlinks, images, and tables
1
2. HTML
1. Hyper Text Markup Language
2. Markup language for Web page design
3. File name extension: .html, .htm
4. With tags surrounded by angle brackets <>
5. Developed and maintained by World Wide Web
Consortium (W3C)
6. Further extend to xhtml transitional 1.0
7. HTML 4.01 is the most recent finished version (1999)
8. HTML 5 is the upcoming version
Adapted from http://www.w3schools.com/html/html_intro.asp
2
3. HTML tags
• keywords surrounded by angle brackets like
<html></html>
• come in pairs like <b> and </b>
• The first tag in a pair is the start tag, the second
tag is the end tag
• Or opening tags and closing tags
Adapted from http://www.w3schools.com/html/html_intro.asp
3
4. HTML elements
Document
Type
Start tag
HTML Elements
End tag
4
5. XHTML
o EXtensible HyperText Markup Language
o a combination of HTML and XML (EXtensible
Markup Language)
o consists of all the elements in HTML 4.01, combined
with the strict syntax of XML
o almost identical to HTML 4.01
o a stricter and cleaner version of HTML
o is W3C recommended
From http://www.w3schools.com/xhtml/xhtml_intro.asp
5
6. HTML/XHTML differences
o XHTML elements must be properly nested
<b><i>example</i></b>
o XHTML elements must always be closed
o XHTML elements must be in lowercase
o XHTML documents must have one root element
o An XHTML document consists of three main parts:
the DOCTYPE declaration
the <head> section
the <body> section
Adapted from http://www.w3schools.com/html/xhtml_intro.asp
6
7. HTML/XHTML <meta> tag
• provides metadata about the HTML document
• not to be displayed on the page, but will be machine
parsable
• used to specify page description, keywords, author of
the document, last modified, and other metadata
• goes inside the head element
• can be used by browsers, search engines (keywords), or
other web services
• supported in all major browsers
http://www.w3schools.com/tags/tag_meta.asp
7
8. Format text
• properties panel (heading, bold, italics, link)
• Copy/paste text
• Paste special (with structure, basic formatting, full
formatting)
• Center text
format > align > center
• Check spelling:
Command > check spelling
• Import Word and Excel Document
File > import > Word document
8
10. Table
Insert
• Insert > table
Select
• a cell or table
• a row or column
• an adjacent cell (hold the mouse and drag across)
Modify
• Click on table > Properties panel > height/width/ row or
column number/ border/cellpad/cellspace/align/clear height and
width/background color
Insert a row or column
• Click on the row or column
• Modify > table > insert/delete
10
11. Table (2)
Merge/split cells
• Click on the cell(s)
• Properties panel ][
Sort table
• Select table > command > sort table
Import data from Excel
• File > import > import Tabular data (Excel file has to
be saved as Text Tab delimited)
Export data to Excel
• Select table > File > Export > table (delimiter:
comma line breaks: windows)
11
12. Add links
Insert > common > hyperlink
Text: text appears on the page
Link: address
Target: the new page properties (_blank – opens in a new
window), otherwise, do not choose
Access key: no
Title: (optional)
Properties Panel > Link window
12
13. Links, links - 2 types of links
1. Absolute link – full url (for outside your site)
• Can be found anywhere with domain names
• Starts with http://
For example:
<a href="http://gslis720.commons.gc.cuny.edu">gslis720 class
blog</a>
2. Relative link (from current page, within your site)
• test.html (on the same level)
for example: <a href="page2.html">Go to page 2</a>
• ../test.html (up one level)
• gslis751/test.html (down one level)
13
14. Create Email Links
1. Highlight the word
2. Click Insert Panel > Email Link
3. Enter the email address
or
Property Panel > link window > type in
mailto: email@yahoo.com
14
15. Images (1)
A few things to consider:
1. Image resolution (resize the image before insert)
2. Image formats
o GIF (Graphics Interchange Format) contains max
256 shades
o JPEG (Joint Photographic Experts Group), contains
millions of colors, but blotchy
o PNG (Portable Network Graphics). PNG 32 offers
256 levels of transparency (not shown in IE 6)
o PSD – generated by Photoshop. Cannot be inserted
as it is. It has to be saved as the above 3 formats
before inserted in Dreamweaver
15
16. Images - Which format? what???
• If logo, choose .gif
• If photo, choose .jpeg
• If transparency, choose .png (32)
16
17. Insert an image
o Insert > image
Alternate Text: (enter a name for the image)
Long description: (may refer to another website, but not
necessary
Note:
• Make sure to move the image to your designated
folder first, and then insert;
• The image should be in your site’s root directory;
if not, DW will ask you if you would like to copy
it to the root directory, say “yes”.
17
18. Insert a rollover image
Insert > Image Objects > Rollover Image
Modify an image
Clink on the image > Properties Panel >
18
