intro to html
Post on 08-Sep-2014
16 Views
Preview:
DESCRIPTION
TRANSCRIPT
Intro to HTML
Randy Oest Manager of Digital Design Williams Randall Marketing
!
@amazingrando
Why Learn HTML?
1. Running a blog on a CMS and want to tweak things
2. Working with a developer and want to understand how to talk with them
3. Web designer looking to understand how things get built
What We’ll Learn
1. What is HTML
2. How to mark up a document
3. How a page is structured
HTML is the Skeleton of Web pages.
HTML is aMarkup Language
Marky MarkupLanguage
HTML uses markup tags to describe elements on a page. <tag>Text</tag>
Anatomy of a Tag
<tag>Text</tag>
Start Tag End Tag
About 80 Tagsa
abbr
acronym
address
area
b
base
bdo
big
blockquote
body
br
button
caption
cite
code
col
colgroup
dd
del
dfn
div
dl
DOCTYPE
dt
em
fieldset
form
h1, h2, h3, h4, h5, and
h6
head
html
hr
i
img
input
ins
kbd
label
legend
li
link
map
meta
noscript
object
ol
optgroup
option
p
param
pre
q
samp
script
select
small
span
strong
style
sub
sup
table
tbody
td
textarea
tfoot
th
thead
title
tr
tt
ul
var
Some Are Used More Oftena
abbr
acronym
address
area
b
base
bdo
big
blockquote
body
br
button
caption
cite
code
col
colgroup
dd
del
dfn
div
dl
DOCTYPE
dt
em
fieldset
form
h1, h2, h3, h4, h5, and
h6
head
html
hr
i
img
input
ins
kbd
label
legend
li
link
map
meta
noscript
object
ol
optgroup
option
p
param
pre
q
samp
script
select
small
span
strong
style
sub
sup
table
tbody
td
textarea
tfoot
th
thead
title
tr
tt
ul
var
Nesting Tags
<i><b>italic & bold</b></i>
Self-closing Tags
Some tags don’t wrap around anything. These are self-closing tags. <img src=“”> or <img src=“” />
Tags Can Have Attributes
Attributes are additional information added to a tag.
<img src=“”>
<a href=“” class=“”>
<div class=“”>
Tags are used to give semantic meaning to text. e.g., paragraph, header, bold, emphasis, etc.
Let’s Learn By Example
Starting the HTML
<!DOCTYPE html> <html> <body> <!—-‐ content —-‐> </body> </html>
Let’s talk about Headings, Paragraphs, and Formatting.
Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
DO NOT use headings to make text BIGGER or BOLDER. Styling should be done with CSS.
You have signed up for Intro to CSS, right?
Paragraphs
Paragraphs are defined with the <p> tag.
<p>This is some stuff </p>
Links
Links are defined with the <a> tag with the href pointing to the destination.
<a href=“http://foo.com”>Text</a>
Two Varieties of Links Absolute & Relative.
Absolute Links
Absolute links point directly to the destination.
<a href=“http://foo.com”>Text</a>
Typically starts with http://
Relative Links
Relative links are based on where the destination is from where you are.
<a href=“/folder/page.html”>Text</a> <a href=“../page.html”>Text</a>
Images
Images are self-closing tags
<img src=“mocha.jpg” />
<img src=“mocha.jpg” alt=“Mocha the cat” />
Lists
Lists come in two varieties, ordered and unordered.
1. Item
2. Item
3. Item
•Item
•Item
•Item
List Items
List items use the <li> tag.
<li>Loves food</li> <li>Good at cuddling</li> <li>Chews wires</li>
Lists Need An Outer Tag
Ordered lists use the <ol> tag.
<ol> <li>Loves food</li> <li>Good at cuddling</li> <li>Chews wires</li> </ol>
Lists Need An Outer Tag
Unordered lists use the <ul> tag.
<ul> <li>Loves food</li> <li>Good at cuddling</li> <li>Chews wires</li> </ul>
Now let’s roll up our sleeves and talk about layout.
Layout
Most pages have a header, content and footer.
<div>
The Magic of <div>
The <div> tag can be used with IDs and Classes to become whatever they need to be.
IDs and Classes
IDs and Classes provide targets for CSS and Javascript.
IDs and Classes
IDs are unique.
Classes are reusable.
Examples
<div id=“header”></div> <div id=“nav”></div> <div class=“active-‐region”></div>
Comments
The comment tag is useful for making notes in HTML.
<!—-‐ comment here —-‐>
<div>’s Have No Style
By themselves <div>’s have no style or formatting.
CSS is used to style the presentation of HTML.
Further Learning
RandyOest.com/HTML
W3Schools (free)
Team Treehouse (not free)
top related