Week 2         1.   HTML/XHTML         2.   HTML/XHTML meta tags         3.   Create a Web site with              lists, h...
HTML  1.   Hyper Text Markup Language  2.   Markup language for Web page design  3.   File name extension: .html, .htm  4....
HTML tags •   keywords surrounded by angle brackets like     <html></html> •   come in pairs like <b> and </b> •   The fir...
HTML elements          Document            Type                Start tagHTML Elements                End tag              ...
XHTMLo   EXtensible HyperText Markup Languageo   a combination of HTML and XML (EXtensible    Markup Language)o   consists...
HTML/XHTML differences o   XHTML elements must be properly nested     <b><i>example</i></b> o   XHTML elements must always...
HTML/XHTML <meta> tag • provides metadata about the HTML document • not to be displayed on the page, but will be machine  ...
Format text • properties panel (heading, bold, italics, link) • Copy/paste text • Paste special (with structure, basic for...
Make a list              Properties Panel > list icon                                             9
TableInsert    • Insert > tableSelect    • a cell or table    • a row or column    • an adjacent cell (hold the mouse and ...
Table (2)Merge/split cells      • Click on the cell(s)      • Properties panel ][Sort table      • Select table > command ...
Add linksInsert > common > hyperlink      Text: text appears on the page      Link: address      Target: the new page prop...
Links, links - 2 types of links1. Absolute link – full url (for outside your site)   • Can be found anywhere with domain n...
Create Email Links   1. Highlight the word   2. Click Insert Panel > Email Link   3. Enter the email address              ...
Images (1)                   A few things to consider:1. Image resolution (resize the image before insert)2. Image formats...
Images - Which format? what???    •   If logo, choose .gif    •   If photo, choose .jpeg    •   If transparency, choose .p...
Insert an image o Insert > image   Alternate Text: (enter a name for the image)   Long description: (may refer to another ...
Insert a rollover image         Insert > Image Objects > Rollover Image      Modify an image        Clink on the image > P...
Upcoming SlideShare
Loading in...5
×

Week 2 HTML lists, hyperlinks, tables, and images

2,955

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,955
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Week 2 HTML lists, hyperlinks, tables, and images"

  1. 1. Week 2 1. HTML/XHTML 2. HTML/XHTML meta tags 3. Create a Web site with lists, hyperlinks, images, and tables 1
  2. 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. 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. 4. HTML elements Document Type Start tagHTML Elements End tag 4
  5. 5. XHTMLo EXtensible HyperText Markup Languageo 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 XMLo almost identical to HTML 4.01o a stricter and cleaner version of HTMLo is W3C recommended From http://www.w3schools.com/xhtml/xhtml_intro.asp 5
  6. 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. 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. 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
  9. 9. Make a list Properties Panel > list icon 9
  10. 10. TableInsert • Insert > tableSelect • 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 colorInsert a row or column • Click on the row or column • Modify > table > insert/delete 10
  11. 11. Table (2)Merge/split cells • Click on the cell(s) • Properties panel ][Sort table • Select table > command > sort tableImport 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. 12. Add linksInsert > 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. 13. Links, links - 2 types of links1. 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. 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. 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. 16. Images - Which format? what??? • If logo, choose .gif • If photo, choose .jpeg • If transparency, choose .png (32) 16
  17. 17. Insert an image o Insert > image Alternate Text: (enter a name for the image) Long description: (may refer to another website, but not necessaryNote:• 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. 18. Insert a rollover image Insert > Image Objects > Rollover Image Modify an image Clink on the image > Properties Panel > 18

×