The Web and HTML                            Design & Development CourseTuesday, March 15, 2011
How does the Internet work?Tuesday, March 15, 2011
The InternetTuesday, March 15, 2011
Web server (box)Tuesday, March 15, 2011
IP addresses                          74.125.224.83Tuesday, March 15, 2011
DNS (Domain Name Service)                          Google.comTuesday, March 15, 2011
Recap                    • Web servers - Computers that serve up                          webpages.                    • I...
How do webpages work?Tuesday, March 15, 2011
HTML                   (HyperText Markup Language)                    • HyperText - Means the ability to link out.        ...
<h1>	  This	  is	  a	  headline	  </h1>                          <p>	  This	  is	  a	  paragraph	  </p>                   ...
<h1>	  This	  is	  a	  headline	  </h1>                          <p>	  This	  is	  a	  paragraph	  </p>                   ...
This is a headline                          This is a paragraph                          Here is some text with a word cho...
Other type of markup languages                    • XML (Extensible Markup Language) - A                          generic ...
RSS       <item>       	  	  	  	  	  	  <title>Example	  entry</title>       	  	  	  	  	  	  <description>Here	  is	  a...
CSSTuesday, March 15, 2011
Cascading Style Sheet                    • Describes how a webpage should look.                    • Identifies content in ...
Example:                          CSS Zen GardenTuesday, March 15, 2011
JavaScriptTuesday, March 15, 2011
JavaScript                    • Programming (scripting) language that adds                          functionality to a web...
RECAP                • HTML: The content                • CSS: The style                • JavaScript: The functionality   ...
The Semantic Web                          semantic web                          noun                          "Web of data...
Other things you                           should knowTuesday, March 15, 2011
Dynamic / Static                    • Static webpage: A static webpage                          doesn’t change. It’s writt...
Client-side vs Server side                    •     HTML         •   PHP (WordPress)                    •     CSS         ...
PHP (WordPress)                    • The PHP code is run on the web server.                    • When you request a webpag...
Recap                    • Static - A webpage that never changes.                    • Dynamic - Content is updated regula...
Intro to HTML5Tuesday, March 15, 2011
<tags>                    • HTML uses tags to identify content.                    • Every opening tag must be closed.    ...
Open and close your tags                          <title>	  Here	  is	  a	  title	  </title>Tuesday, March 15, 2011
Some tags self-close                <br	  />                <hr	  />                <img	  src=“some	  image”	  />Tuesday,...
Nested Tags                <body>                          <h1>Here	  is	  a	  headline</h1>                          <p>H...
Some tags have attributes                <div>Just	  a	  division	  tag</div>                <div	  id=“sidebar”>This	  is...
DOC Type                    • First line of code needs to tell the browser                          how to interpret the H...
<!DOCTYPE	  html>                             (no	  spaces	  before	  it)Tuesday, March 15, 2011
ExampleTuesday, March 15, 2011
Two Parts to HTML document                    • The <head>          - Identifies (meta)                          informatio...
<!DOCTYPE	  html>                <head	  lang=“en”>                   <meta	  charset=“utf-­‐8”	  />                   <ti...
<body>                          <p>Your	  content	  here</p>                </body>Tuesday, March 15, 2011
paragraph tag                <p>This	  is	  a	  paragraph.	                  Line	  breaks	  don’t	  matter.</p>Tuesday, M...
strong tag                <p>This	  an                <strong>important</strong>	                  word.</p>Tuesday, March...
emphasis tag                <p>This	  is	  a	  word	  that	  should	  be	                  <em>emphasized</em>            ...
anchor tag                <p>Search	  <a	  href=“http://google.com”>Google</a>.</p>                      <a	  href=“http:/...
headline tag                <h1>This	  is	  the	  largest	  headline</h1>                <h2>Sub	  headline,	  not	  as	  ...
division tag                <div>This	  is	  a	  section</div>                <div>This	  is	  another	  section</div>    ...
lists: unordered list                <ul>                          <li>Bullet	  point	  item</li>                         ...
lists: ordered list                <ol>                          <li>List	  item	  number	  1</li>                        ...
images                <img	  src=“image.jpg”	                  width=“450”	                  height=“450”	                ...
New HTML5 Semantic TagsTuesday, March 15, 2011
header tag                <header>                          <h1>This	  is	  a	  headline</h1>                </header>Tues...
hgroup tag                <hgroup>                          <h1>This	  is	  a	  headline</h1>                          <h2...
article tag                <article>                          <h1>This	  is	  a	  headline</h1>                          <...
time tag                <time>March	  9,	  2011</time>                <time	  datetime=“2011-­‐03-­‐09”>...               ...
footer tag                <footer>                          <p>This	  is	  information	  at	  the	                        ...
navigation tag                <nav>                          <ul>                           <li>Home</li>                 ...
Others                <video>                <audio>                <aside>                <section>                <canva...
Upcoming SlideShare
Loading in...5
×

Intro to HTML

2,036

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
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

Transcript of "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

×