Understanding html
28
The Structure of HTML by Ray Villalobos
-
Upload
ray-villalobos -
Category
Technology
-
view
1.019 -
download
0
description
The Fundamentla
Transcript of Understanding html
The Structure of HTMLby 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="en">
<head><meta charset="utf-8" /><title></title>
</head><body></body>
</html>
Old Style HTML Page
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /><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="en">
<head><meta charset="utf-8" /><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[="VALUE"]]...>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="#">)
• 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="genericblock"></div>
• <span class="genericstyle"></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
