Intro to HTML

2,129
-1

Published on

Intro to HTML. This presentation was written for a design and development class at the UC Berkeley Graduate School of Journalism.

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

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

No notes for slide

Intro to HTML

  1. 1. The Web and HTML Design & Development CourseTuesday, March 15, 2011
  2. 2. How does the Internet work?Tuesday, March 15, 2011
  3. 3. The InternetTuesday, March 15, 2011
  4. 4. Web server (box)Tuesday, March 15, 2011
  5. 5. IP addresses 74.125.224.83Tuesday, March 15, 2011
  6. 6. DNS (Domain Name Service) Google.comTuesday, March 15, 2011
  7. 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. 8. How do webpages work?Tuesday, March 15, 2011
  9. 9. HTML (HyperText Markup Language) • HyperText - Means the ability to link out. • Markup - Like annotating–or “marking up”– a manuscriptTuesday, March 15, 2011
  10. 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. 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. 12. This is a headline This is a paragraph Here is some text with a word chosen to make it stand outTuesday, March 15, 2011
  13. 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. 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. 15. CSSTuesday, March 15, 2011
  16. 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. 17. Example: CSS Zen GardenTuesday, March 15, 2011
  18. 18. JavaScriptTuesday, March 15, 2011
  19. 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. 20. RECAP • HTML: The content • CSS: The style • JavaScript: The functionality (plug-ins: Flash, JavaVM, Silverlight)Tuesday, March 15, 2011
  21. 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. 22. Other things you should knowTuesday, March 15, 2011
  23. 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. 24. Client-side vs Server side • HTML • PHP (WordPress) • CSS • MySQL • JavaScript • Django, Ruby, ASP, .NET Your computer Web serverTuesday, March 15, 2011
  25. 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. 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. 27. Intro to HTML5Tuesday, March 15, 2011
  28. 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. 29. Open and close your tags <title>  Here  is  a  title  </title>Tuesday, March 15, 2011
  30. 30. Some tags self-close <br  /> <hr  /> <img  src=“some  image”  />Tuesday, March 15, 2011
  31. 31. Nested Tags <body> <h1>Here  is  a  headline</h1> <p>Here  is  a  paragraph</p> </body>Tuesday, March 15, 2011
  32. 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. 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. 34. <!DOCTYPE  html> (no  spaces  before  it)Tuesday, March 15, 2011
  35. 35. ExampleTuesday, March 15, 2011
  36. 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. 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. 38. <body> <p>Your  content  here</p> </body>Tuesday, March 15, 2011
  39. 39. paragraph tag <p>This  is  a  paragraph.   Line  breaks  don’t  matter.</p>Tuesday, March 15, 2011
  40. 40. strong tag <p>This  an <strong>important</strong>   word.</p>Tuesday, March 15, 2011
  41. 41. emphasis tag <p>This  is  a  word  that  should  be   <em>emphasized</em> .</p>Tuesday, March 15, 2011
  42. 42. anchor tag <p>Search  <a  href=“http://google.com”>Google</a>.</p> <a  href=“http://google.com”>Tuesday, March 15, 2011
  43. 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. 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. 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. 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. 47. images <img  src=“image.jpg”   width=“450”   height=“450”   alt=“Image  of  a  man  walking”  />Tuesday, March 15, 2011
  48. 48. New HTML5 Semantic TagsTuesday, March 15, 2011
  49. 49. header tag <header> <h1>This  is  a  headline</h1> </header>Tuesday, March 15, 2011
  50. 50. hgroup tag <hgroup> <h1>This  is  a  headline</h1> <h2>This  is  a  subhead</h2> </hgroup>Tuesday, March 15, 2011
  51. 51. article tag <article> <h1>This  is  a  headline</h1> <p>Some  text</p> </article>Tuesday, March 15, 2011
  52. 52. time tag <time>March  9,  2011</time> <time  datetime=“2011-­‐03-­‐09”>... <time  datetime=“2011-­‐03-­‐09”  pubdate>Tuesday, March 15, 2011
  53. 53. footer tag <footer> <p>This  is  information  at  the   bottom.</p> </footer>Tuesday, March 15, 2011
  54. 54. navigation tag <nav> <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </nav>Tuesday, March 15, 2011
  55. 55. Others <video> <audio> <aside> <section> <canvas> http://www.w3schools.com/html5/html5_reference.aspTuesday, March 15, 2011

×