Uploaded on

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

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

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,974
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. The Web and HTML Design & Development CourseTuesday, March 15, 2011
  • 2. How does the Internet work?Tuesday, March 15, 2011
  • 3. The InternetTuesday, March 15, 2011
  • 4. Web server (box)Tuesday, March 15, 2011
  • 5. IP addresses 74.125.224.83Tuesday, March 15, 2011
  • 6. DNS (Domain Name Service) Google.comTuesday, 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 manuscriptTuesday, 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 outTuesday, 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. CSSTuesday, 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 GardenTuesday, March 15, 2011
  • 18. JavaScriptTuesday, 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 knowTuesday, 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 serverTuesday, 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 HTML5Tuesday, 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. ExampleTuesday, 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 TagsTuesday, 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.aspTuesday, March 15, 2011