• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Intro to HTML
 
  • 2,163 views

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.

Statistics

Views

Total Views
2,163
Views on SlideShare
1,621
Embed Views
542

Actions

Likes
1
Downloads
0
Comments
0

3 Embeds 542

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

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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 74.125.224.83Tuesday, 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