Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Week 2


Published on

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

Week 2

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