1 / 22

Info + Web Tech Course

Info + Web Tech Course. Information Technologies. Anselm Spoerri PhD (MIT) SC&I @ Rutgers University aspoerri@rutgers.edu anselm.spoerri@gmail.com. Lecture 4 – Overview. Basic HTML Transition to HTML5 and Key Rules Doctype , encoding (XHTML, HTML5)

afya
Télécharger la présentation

Info + Web Tech Course

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Info + Web Tech Course • Information • Technologies • Anselm Spoerri PhD (MIT) • SC&I @ Rutgers University • aspoerri@rutgers.edu • anselm.spoerri@gmail.com

  2. Lecture 4 – Overview Basic HTML • Transition to HTML5 and Key Rules • Doctype, encoding (XHTML, HTML5) • Tables, Links, Images (XHTML, HTML5) Demo of Exercise 2 • Transition from XTHML to HTML5 Web Services Google Analytics Demo Lectures – Week 4 Contenthttp://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures.html#week4

  3. HTML – Big Picture • Page DesignProgressive Enhancement • Create HTML structure  Add CSS  Add JavaScript • Transition to HTML5  Markup with Meaning • HTML 4, XHTML: use tags to structure the content • HTML5: use tags to structure and describe meaning of content • New semantic elements: <header>, <nav>, <main>, <article> , <section>, <figure>, <aside>, <footer> • Redefines existing tags or eliminates others • More forgiving than XHTML: /> optional and <b> and <i> are back • Still true and necessary • HTML elements must be properly nested • HTML elements should have closing tag

  4. HTML – Examples • HTML elements must be properly nested • <p><em>Content</p></em> •  <p><em>Content</em></p> • HTML elements must close • <p>Content •  <p>Content</p> • <br> and <br /> acceptable • HTML elements best be lowercase • <P> •  <p>

  5. HTML – Examples • Semantic Meaning • <em>emphasis • <p><em>Content</em></p> • <strong>important • <p><strong>Content</strong></p> • Visual Appearance • <p><i>Content</i></p> • <p><b>Content</b></p>

  6. HTML – Page Layout • Two methods for creating Web Page Layout • Tables (this lecture) • HTML5, DIVs and CSS (next lecture) • Table <table> <tr> <td> </td> </tr> </table> • <table> table • <tr> row • <th> header • <td> cell • <td colspan="2"> <td rowspan="2">

  7. Table Example <table> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table>

  8. Basic XHTML – Essential Elements to Include • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • <html xmlns="http://www.w3.org/1999/xhtml"> • <head> • <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> • <title>My Page</title> • <body> • Headers: <h1> <h2> <h3> <h4> <h5> • Paragraphs:<p> • Tables: <table> <tr> <td> </td> </tr> </table> • Lists: <ol>, <ul> (can be nested) • Adding visual emphasis to text : <em>, <strong> • Font specification: <font face="Arial" color="#000099">Text</font>

  9. Basic HTML5 – Essential Elements to Include • <!DOCTYPE html> • <html lang="en"> • <head> • <meta charset=utf-8" /> • <title>My Page</title> • <body> • <header> <nav> • <main> <article> <section> <figure> • <aside> • <footer> • Headers: <h1> <h2> <h3> <h4> <h5> • Paragraphs:<p> • Tables: <table> <tr> <td> </td> </tr> </table> • Lists: <ol>, <ul> (can be nested) • Adding semantic emphasis to text : <em>, <strong>. <i>, <b> • Font specification: use CSS

  10. Hyperlinks • <a> hyperlink tag • Use Attributes and Values • <a href="absolute or relative pathname"target="_self" [opens page in same browser window] target="_blank" [opens page in new browser window]>Text of Hyperlink</a> • Create Anchor: <a name="anchor name"> • Link to Anchor: <a href="#anchor name">

  11. Images • <img> image tag • Use Attributes and Values (src and alt are required to be valid HTML) • <imgsrc="pathname"alt="my image" [text to appear if image does not show]height="100" width="100" [improves time to load page] • align="left" [image floats on left, text flows on right … deprecated in HTML5 for CSS]hspace="5" [deprecated in HTML5 for CSS] vspace="5" [deprecated in HTML5 for CSS] • /> [XHTML requires />] • Floating image needs to be placed right before text that needs to flow or wrap around it.

  12. Exercise 2 • Exercise 2: HTML– Create Information Resource • Create at least 3 web pages. • Use a table to structure the page so that it has: • 3 columns: 50 | 500 | 100 pixels wide • 4 rows: 50 | 50 | 500 | 50 pixels high • Each page has one h1 tag and at least one h2 tagSans-serif font is used at least one word is bolded and italized • Simple navigation structure using relative hyperlinks. • Include at least one absolute hyperlink per page. • Edit images found on flickr.com using free online tool.Embed at least one image per page and text flows around it

  13. Exercise 2 Demo – Step 1 • Create folder = “ex2” inside your “550” folder • Open New File with Notepad++ / TextWrangler • Save as type – All files (otherwise saves it as .txt by default) • File name - ex2_page1.html • Add doctype, encoding and title and essential elements (make sure to have closing tags) • Upload File to Eden, Set Permissions, Test in Browser

  14. Exercise 2 Demo – Step 2 • Create Table • One row with three cells and height = 50 and widths as indicated in Ex2 • Add following text “1.1”, “1.2”, “1.3” to respective cells • Add Font specification so that text in table is shown Arial and dark blue • Save Page • Upload File to Eden and Test in Browser

  15. Exercise 2 Demo – Step 3 • Copy 1st Row code • Create 2nd Row by pasting copied code and customize • Height = 50 and widths as indicated in Ex2 • Add following text “2.1”, “2.2”, “2.3” to respective cells • Create 3rd Row by pasting copied code and customize • Height = 500 and widths as indicated in Ex2 • Add following text “3.1”, “3.2”, “3.3” to respective cells • Create 4th Row by pasting copied code and customize • Height = 50 and widths as indicated in Ex2 • Add following text “4.1”, “4.2”, “4.3” to respective cells • Save Page • Upload File to Eden and Test in Browser

  16. Exercise 2 Demo – Step 4 • Enter Following Content into 3rd Row and 2nd Column: Heading 1 tag “Heading1” Paragraph tag “Intro paragraph” Heading 2 tag “Heading2” Paragraph “Follow-up paragraph” • Save Page • Upload File to Eden and Test in Browser • Make sure content in 3rd row is top aligned

  17. Exercise 2 Demo – Step 5 • Find Image and Save to Hard Disk • Insert Image before “follow-up” paragraph • Specify Height, Width, Alternate Text, Left Alignment • Save Page • Upload File to Eden and Test in Browser • Make sure there is visual gap between image and text

  18. Exercise 2 Demo – Step 6 • Enter Following Content into 1st Row and 2nd Column: “Page1 | Page2” • Attach relative hyperlink to “Page1” so that it links to page “ex2_page1.html” • Attach relative hyperlink to “Page2” so that it links to page “ex2_page2.html” • Save Page • Upload File to Eden and Test in Browser • Create “ex2_page2.html” page using Save As Customize page • Upload File to Eden, Set Permissions and Test in Browser

  19. Exercise 2 Demo – Step 7 • Create “you are here” indicator in Navigation Structure • Select “PageN” on “ex2_pageN” and remove hyperlink • Select “PageN” and make it bold • Select “PageN” and set font color to red ["#FF0000"] • Save Page • Upload File to Eden and Test in Browser • You will need to Validate Your Pages usinghttp://validator.w3.org/ • [instructor will let you know which errors you can ignore]

  20. Exercise 2 – Transition from XTHML to HTML5 • What Changes • DOCTYPE and encoding • Font specification • Width and Height of Table Cell specification • Font color of “you are here” indicator specification •  Need to use CSS • body { font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; color: #000099;} • td { width: 50px; height: 50px;} • .wide1 {width: 500px;} • .wide2 { width: 100px;} • .high1 { height: 500px;} • .here { color: #FF0000;}

  21. Web Services • Google Analytics Demo • Log into Your Google Account • Add Analytics to your set of tools • In Accounts bar, click on “Add New Account” orUse “Select an account” pull down menu in top right corner • Analytics: New Account Signup dialog : Specify URL • Track: Single Domain • Copy Embed code (consult “common question” links) • Paste at bottom of web page before </body>

  22. Example of Google Analytics Tracking Code • <script type="text/javascript"> • var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); • document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); • </script> • <script type="text/javascript"> • try { • var pageTracker = _gat._getTracker("UA-16139265-1"); • pageTracker._trackPageview(); • } catch(err) {}</script>

More Related