• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Understanding html
 

Understanding html

on

  • 1,015 views

The Fundamentla

The Fundamentla

Statistics

Views

Total Views
1,015
Views on SlideShare
786
Embed Views
229

Actions

Likes
0
Downloads
17
Comments
0

2 Embeds 229

http://planetoftheweb.com 178
http://www.planetoftheweb.com 51

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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

    Understanding html Understanding html Presentation Transcript

    • The Structure of HTML
      • by Ray Villalobos
    • What is HTML?
      • A Markup Language
      • Hypertext
    • Different Versions
      • HTML 4
      • XHTML
      • HTML5
      • Transitional vs Strict
    • HTML5
    • Typical HTML5 Page
      • <!DOCTYPE html> <html lang=&quot;en&quot;> <head> <meta charset=&quot;utf-8&quot; /> <title></title> </head> <body> </body> </html>
    • Old Style HTML Page <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd &quot;><html xmlns=&quot; http://www.w3.org/1999/xhtml &quot;><head> <meta http-equiv=&quot; content-type&quot; content=&quot;text/ html; charset=utf-8&quot; /> <title>Untitled</title></head><body></body></html>
    • What is HTML5?
      • A new version of the language
      • A Spec, not yet finished
      • Common sense
      • New Descriptive tags
      • Built for WebApps
    • Simpler
      • Simpler Coding
      • New Parsing rules (more flexible)
      • Common Sense Tags
      • More descriptive
    • New Tags
      • article, aside, datalist, details, embed, figure, footer, header, hgroup, nav, output, progress, section, source, summary, time.
      • Easier audio & video
      • Canvas for graphics
    • New APIs for WebApps
      • Offline Storage
      • Document Editing
      • Drag & Drop
      • Geolocation
      • Databases
    • HTML5
    • Typical HTML5 Page
      • <!DOCTYPE html> <html lang=&quot;en&quot;> <head> <meta charset=&quot;utf-8&quot; /> <title></title> </head> <body> </body> </html>
    • <HEAD></HEAD>
      • Content mostly invisible to browser
      • Process mostly before page loads
      • <TITLE>Document's Name</TITLE>
      • <META> Data about data
    • <HTML></HTML>
      • The tag to rule all tags
    • <BODY></BODY>
      • Where most visible content goes
    • The Markup Tags
      • <ELEMENT [ATTRIBUTE[=&quot;VALUE&quot;]]...>CONTENT[</ELEMENT>]
      • My name is <em>Ray Villalobos</em>
      • My name is Ray Villalobos
    • Types of Tags
      • Beginning & End tags (<em></em>)
      • Standalone tags (<br />)
      • Tags with Attributes (<a href=&quot;#&quot;>)
      • Invisible (head section, comments)
    • Other Important Tags
      • The Headline Tags: h1,h2,h3,h4,h5,h6
      • Paragraph tags <p></p>
      • Image Tags <img src=”” alt=””>
      • Emphasis, Strong
      • http://www.w3schools.com/tags
    • Unders
      • <p> Denotes paragraphs.
    • Classification of Tags
      • Block Level (<p>This is a paragraph</p>)
      • Inline (To <strong>emphasize</strong> something)
      • Invisible Tags (<style type=”text/css”>p { color:#FCC; }</style>)
    • SPECIAL Tags
      • <div id=&quot;genericblock&quot;></div>
      • <span class=&quot;genericstyle&quot;></span>
    • ADDING MEANING
      • To improve SEO
      • Usability
    • Validating
      • Validator http://validator.w3.org
      • Helps catch errors
      • Checks for correct usage of tags
    • Creating Links
      • Three Types of Links
        • Absolute (http://)
        • Relative (../)
        • Root Relative (/)
    • Working with Text Editors
      • Mac: TextWrangler, BBEdit, Aptana, Coda
      • PC: Notepad++, Aptana Studio
    • FTP App lications
      • Cyberduck (Mac or PC)
      • Transmit (Mac)
      • FileZilla (PC)
    • Setting up a WorkFlow
      • Work, then upload
      • Edit Directly from Server
    • The End