• Save
Intro to HTML
Upcoming SlideShare
Loading in...5

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.



Total Views
Views on SlideShare
Embed Views



3 Embeds 542

http://codelabs.herokuapp.com 361
http://richardkocihernandez.com 177
http://tusharv.in 4



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Intro to HTML Intro to HTML Presentation Transcript

  • 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, March 15, 2011
  • DNS (Domain Name Service) Google.comTuesday, March 15, 2011
  • 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
  • How do webpages work?Tuesday, March 15, 2011
  • HTML (HyperText Markup Language) • HyperText - Means the ability to link out. • Markup - Like annotating–or “marking up”– a manuscriptTuesday, March 15, 2011
  • <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
  • <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
  • This is a headline This is a paragraph Here is some text with a word chosen to make it stand outTuesday, March 15, 2011
  • 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
  • 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
  • CSSTuesday, March 15, 2011
  • 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
  • Example: CSS Zen GardenTuesday, March 15, 2011
  • JavaScriptTuesday, March 15, 2011
  • 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
  • RECAP • HTML: The content • CSS: The style • JavaScript: The functionality (plug-ins: Flash, JavaVM, Silverlight)Tuesday, March 15, 2011
  • 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
  • Other things you should knowTuesday, March 15, 2011
  • 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
  • Client-side vs Server side • HTML • PHP (WordPress) • CSS • MySQL • JavaScript • Django, Ruby, ASP, .NET Your computer Web serverTuesday, March 15, 2011
  • 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
  • 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
  • Intro to HTML5Tuesday, March 15, 2011
  • <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
  • 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, March 15, 2011
  • Nested Tags <body> <h1>Here  is  a  headline</h1> <p>Here  is  a  paragraph</p> </body>Tuesday, March 15, 2011
  • 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
  • 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
  • <!DOCTYPE  html> (no  spaces  before  it)Tuesday, March 15, 2011
  • ExampleTuesday, March 15, 2011
  • 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
  • <!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
  • <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, March 15, 2011
  • strong tag <p>This  an <strong>important</strong>   word.</p>Tuesday, March 15, 2011
  • emphasis tag <p>This  is  a  word  that  should  be   <em>emphasized</em> .</p>Tuesday, March 15, 2011
  • anchor tag <p>Search  <a  href=“http://google.com”>Google</a>.</p> <a  href=“http://google.com”>Tuesday, March 15, 2011
  • 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
  • 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
  • lists: unordered list <ul> <li>Bullet  point  item</li> <li>Bullet  point  item</li> <li>Bullet  point  item</li> </ul>Tuesday, March 15, 2011
  • 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
  • images <img  src=“image.jpg”   width=“450”   height=“450”   alt=“Image  of  a  man  walking”  />Tuesday, March 15, 2011
  • New HTML5 Semantic TagsTuesday, March 15, 2011
  • header tag <header> <h1>This  is  a  headline</h1> </header>Tuesday, March 15, 2011
  • hgroup tag <hgroup> <h1>This  is  a  headline</h1> <h2>This  is  a  subhead</h2> </hgroup>Tuesday, March 15, 2011
  • article tag <article> <h1>This  is  a  headline</h1> <p>Some  text</p> </article>Tuesday, March 15, 2011
  • time tag <time>March  9,  2011</time> <time  datetime=“2011-­‐03-­‐09”>... <time  datetime=“2011-­‐03-­‐09”  pubdate>Tuesday, March 15, 2011
  • footer tag <footer> <p>This  is  information  at  the   bottom.</p> </footer>Tuesday, March 15, 2011
  • navigation tag <nav> <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </nav>Tuesday, March 15, 2011
  • Others <video> <audio> <aside> <section> <canvas> http://www.w3schools.com/html5/html5_reference.aspTuesday, March 15, 2011