Intro to HTML
- 1. The Web and HTML Design & Development Course Tuesday, March 15, 2011
- 2. How does the Internet work? Tuesday, March 15, 2011
- 3. The Internet Tuesday, March 15, 2011
- 4. Web server (box) Tuesday, March 15, 2011
- 5. IP addresses 74.125.224.83 Tuesday, March 15, 2011
- 6. DNS (Domain Name Service) Google.com Tuesday, March 15, 2011
- 7. Recap • Web servers - Computers that serve up webpages. • IP (internet protocol) - Addresses of web servers. • DNS (domain name service) - Translates a URL like Google.com to an IP address. Tuesday, March 15, 2011
- 8. How do webpages work? Tuesday, March 15, 2011
- 9. HTML (HyperText Markup Language) • HyperText - Means the ability to link out. • Markup - Like annotating–or “marking up”– a manuscript Tuesday, March 15, 2011
- 10. <h1> This is a headline </h1> <p> This is a paragraph </p> <p> Here is some text with a word chosen to make it <strong> stand out </strong> </p> Tuesday, March 15, 2011
- 11. <h1> This is a headline </h1> <p> This is a paragraph </p> <p> Here is some text with a word chosen to make it <strong> stand out </strong> </p> Tuesday, March 15, 2011
- 12. This is a headline This is a paragraph Here is some text with a word chosen to make it stand out Tuesday, March 15, 2011
- 13. Other type of markup languages • XML (Extensible Markup Language) - A generic form of markup for transferring data. • RSS (Really Simple Syndication) - A markup language for transferring a feed of items, specifically titles, posts, photos, and content. Tuesday, March 15, 2011
- 14. RSS <item> <title>Example entry</title> <description>Here is a description.</description> <link>http://www.wikipedia.org/</link> <guid>unique ID per item</guid> <pubDate>Mon, 06 Sep 2009 16:45:00 +0000 </pubDate> </item> Tuesday, March 15, 2011
- 15. CSS Tuesday, March 15, 2011
- 16. Cascading Style Sheet • Describes how a webpage should look. • Identifies content in a webpage by the tags, or by special identifiers. • You must link to a CSS document from your HTML. (or include it in your page) Tuesday, March 15, 2011
- 17. Example: CSS Zen Garden Tuesday, March 15, 2011
- 18. JavaScript Tuesday, March 15, 2011
- 19. JavaScript • Programming (scripting) language that adds functionality to a webpage. • For example, you can move elements around, create timers, detect the browser type, store cookies, and more... • jQuery, AJAX, sproutcore are all libraries written in JavaScript. Tuesday, March 15, 2011
- 20. RECAP • HTML: The content • CSS: The style • JavaScript: The functionality (plug-ins: Flash, JavaVM, Silverlight) Tuesday, March 15, 2011
- 21. The Semantic Web semantic web noun "Web of data" that enables machines to understand the semantics, or meaning, of information on the World Wide Web. Tuesday, March 15, 2011
- 22. Other things you should know Tuesday, March 15, 2011
- 23. Dynamic / Static • Static webpage: A static webpage doesn’t change. It’s written in HTML, CSS and JavaScript. • Dynamic webpage: Where the content changes depending on the user interaction. Content updates, such as a blog, gmail, or news site. Tuesday, March 15, 2011
- 24. Client-side vs Server side • HTML • PHP (WordPress) • CSS • MySQL • JavaScript • Django, Ruby, ASP, .NET Your computer Web server Tuesday, March 15, 2011
- 25. PHP (WordPress) • The PHP code is run on the web server. • When you request a webpage (visiting the site) the PHP code will look up the latest content in the database (MySQL) and write an HTML page on the fly. • End-users never see server-side scripting. • PHP is free. Tuesday, March 15, 2011
- 26. Recap • Static - A webpage that never changes. • Dynamic - Content is updated regularly. • Client-side - Code that is run in the user’s browser, is also visible to the user. • Server-side - Code that is run on the server, not visible to the end-user. • PHP - A free server-side language. (WP) Tuesday, March 15, 2011
- 27. Intro to HTML5 Tuesday, March 15, 2011
- 28. <tags> • HTML uses tags to identify content. • Every opening tag must be closed. • Some tags have additional information called attributes. • You can only use certain tags. Learn them! Tuesday, March 15, 2011
- 29. Open and close your tags <title> Here is a title </title> Tuesday, March 15, 2011
- 30. Some tags self-close <br /> <hr /> <img src=“some image” /> Tuesday, March 15, 2011
- 31. Nested Tags <body> <h1>Here is a headline</h1> <p>Here is a paragraph</p> </body> Tuesday, March 15, 2011
- 32. Some tags have attributes <div>Just a division tag</div> <div id=“sidebar”>This is the sidebar</div> <a href=“http://google.com”>Google</a> Tuesday, March 15, 2011
- 33. DOC Type • First line of code needs to tell the browser how to interpret the HTML. • W3C (World Wide Web consortium) aimed to standardize the web. Didn’t work so well. • We will be using HTML5. Tuesday, March 15, 2011
- 34. <!DOCTYPE html> (no spaces before it) Tuesday, March 15, 2011
- 35. Example Tuesday, March 15, 2011
- 36. Two Parts to HTML document • The <head> - Identifies (meta) information about the webpage. User does not see this on the webpage. • The <body> - Is the actual content of the webpage that the user sees. Tuesday, March 15, 2011
- 37. <!DOCTYPE html> <head lang=“en”> <meta charset=“utf-‐8” /> <title>Your Title</title> <meta name=“description” content = “” /> <meta name=“author” content= “” /> <link rel=“stylesheet” href= “css/ style.css”> </head> Tuesday, March 15, 2011
- 38. <body> <p>Your content here</p> </body> Tuesday, March 15, 2011
- 39. paragraph tag <p>This is a paragraph. Line breaks don’t matter.</p> Tuesday, March 15, 2011
- 40. strong tag <p>This an <strong>important</strong> word.</p> Tuesday, March 15, 2011
- 41. emphasis tag <p>This is a word that should be <em>emphasized</em> .</p> Tuesday, March 15, 2011
- 42. anchor tag <p>Search <a href=“http://google.com”>Google</a>.</p> <a href=“http://google.com”> Tuesday, March 15, 2011
- 43. headline tag <h1>This is the largest headline</h1> <h2>Sub headline, not as important</h2> <h3>Even less important</h3> <h4>Maybe a section heading?</h4> Tuesday, March 15, 2011
- 44. division tag <div>This is a section</div> <div>This is another section</div> <div id=“container”>This is a container</div> Tuesday, March 15, 2011
- 45. lists: unordered list <ul> <li>Bullet point item</li> <li>Bullet point item</li> <li>Bullet point item</li> </ul> Tuesday, March 15, 2011
- 46. lists: ordered list <ol> <li>List item number 1</li> <li>List item number 2</li> <li>List item number 3</li> </ol> Tuesday, March 15, 2011
- 47. images <img src=“image.jpg” width=“450” height=“450” alt=“Image of a man walking” /> Tuesday, March 15, 2011
- 48. New HTML5 Semantic Tags Tuesday, March 15, 2011
- 49. header tag <header> <h1>This is a headline</h1> </header> Tuesday, March 15, 2011
- 50. hgroup tag <hgroup> <h1>This is a headline</h1> <h2>This is a subhead</h2> </hgroup> Tuesday, March 15, 2011
- 51. article tag <article> <h1>This is a headline</h1> <p>Some text</p> </article> Tuesday, March 15, 2011
- 52. time tag <time>March 9, 2011</time> <time datetime=“2011-‐03-‐09”>... <time datetime=“2011-‐03-‐09” pubdate> Tuesday, March 15, 2011
- 53. footer tag <footer> <p>This is information at the bottom.</p> </footer> Tuesday, March 15, 2011
- 54. navigation tag <nav> <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </nav> Tuesday, March 15, 2011
- 55. Others <video> <audio> <aside> <section> <canvas> http://www.w3schools.com/html5/html5_reference.asp Tuesday, March 15, 2011