Week 2 HTML lists, hyperlinks, tables, and images

Week 2

1. HTML/XHTML
2. HTML/XHTML meta tags
3. Create a Web site with
lists, hyperlinks, images, and tables

1

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

HTML tags

• keywords surrounded by angle brackets like
<html></html>
• come in pairs like and 
• 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

HTML elements

Document
Type

Start tag
HTML Elements

End tag

4

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

HTML/XHTML differences

o XHTML elements must be properly nested
example
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

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

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

Make a list

Properties Panel > list icon

9

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

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

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

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

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

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

Images - Which format? what???

• If logo, choose .gif
• If photo, choose .jpeg
• If transparency, choose .png (32)

16

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

Insert a rollover image

Insert > Image Objects > Rollover Image

Modify an image
Clink on the image > Properties Panel >

18

Week 2 HTML lists, hyperlinks, tables, and images

More Related Content

What's hot

Viewers also liked

Similar to Week 2 HTML lists, hyperlinks, tables, and images

Recently uploaded

Week 2 HTML lists, hyperlinks, tables, and images