Download - Intro to HTML
![Page 1: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/1.jpg)
Intro to HTML
![Page 2: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/2.jpg)
Randy Oest Manager of Digital Design Williams Randall Marketing
!
@amazingrando
![Page 3: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/3.jpg)
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
![Page 4: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/4.jpg)
What We’ll Learn
1. What is HTML
2. How to mark up a document
3. How a page is structured
![Page 5: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/5.jpg)
HTML is the Skeleton of Web pages.
![Page 6: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/6.jpg)
![Page 7: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/7.jpg)
HTML is aMarkup Language
![Page 8: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/8.jpg)
Marky MarkupLanguage
![Page 9: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/9.jpg)
![Page 10: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/10.jpg)
HTML uses markup tags to describe elements on a page. <tag>Text</tag>
![Page 11: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/11.jpg)
Anatomy of a Tag
<tag>Text</tag>
Start Tag End Tag
![Page 12: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/12.jpg)
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
![Page 13: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/13.jpg)
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
![Page 14: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/14.jpg)
Nesting Tags
<i><b>italic & bold</b></i>
![Page 15: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/15.jpg)
Self-closing Tags
Some tags don’t wrap around anything. These are self-closing tags. <img src=“”> or <img src=“” />
![Page 16: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/16.jpg)
Tags Can Have Attributes
Attributes are additional information added to a tag.
<img src=“”>
<a href=“” class=“”>
<div class=“”>
![Page 17: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/17.jpg)
Tags are used to give semantic meaning to text. e.g., paragraph, header, bold, emphasis, etc.
![Page 18: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/18.jpg)
Let’s Learn By Example
![Page 19: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/19.jpg)
![Page 20: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/20.jpg)
Starting the HTML
<!DOCTYPE html> <html> <body> <!—-‐ content —-‐> </body> </html>
![Page 21: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/21.jpg)
Let’s talk about Headings, Paragraphs, and Formatting.
![Page 22: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/22.jpg)
Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
![Page 23: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/23.jpg)
DO NOT use headings to make text BIGGER or BOLDER. Styling should be done with CSS.
![Page 24: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/24.jpg)
You have signed up for Intro to CSS, right?
![Page 25: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/25.jpg)
Paragraphs
Paragraphs are defined with the <p> tag.
<p>This is some stuff </p>
![Page 26: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/26.jpg)
![Page 27: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/27.jpg)
![Page 28: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/28.jpg)
Links
Links are defined with the <a> tag with the href pointing to the destination.
<a href=“http://foo.com”>Text</a>
![Page 29: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/29.jpg)
Two Varieties of Links Absolute & Relative.
![Page 30: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/30.jpg)
Absolute Links
Absolute links point directly to the destination.
<a href=“http://foo.com”>Text</a>
Typically starts with http://
![Page 31: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/31.jpg)
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>
![Page 32: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/32.jpg)
![Page 33: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/33.jpg)
![Page 34: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/34.jpg)
Images
Images are self-closing tags
<img src=“mocha.jpg” />
<img src=“mocha.jpg” alt=“Mocha the cat” />
![Page 35: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/35.jpg)
![Page 36: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/36.jpg)
![Page 37: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/37.jpg)
Lists
Lists come in two varieties, ordered and unordered.
1. Item
2. Item
3. Item
•Item
•Item
•Item
![Page 38: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/38.jpg)
List Items
List items use the <li> tag.
<li>Loves food</li> <li>Good at cuddling</li> <li>Chews wires</li>
![Page 39: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/39.jpg)
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>
![Page 40: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/40.jpg)
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>
![Page 41: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/41.jpg)
![Page 42: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/42.jpg)
![Page 43: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/43.jpg)
Now let’s roll up our sleeves and talk about layout.
![Page 44: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/44.jpg)
Layout
Most pages have a header, content and footer.
![Page 45: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/45.jpg)
<div>
![Page 46: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/46.jpg)
The Magic of <div>
The <div> tag can be used with IDs and Classes to become whatever they need to be.
![Page 47: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/47.jpg)
IDs and Classes
IDs and Classes provide targets for CSS and Javascript.
![Page 48: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/48.jpg)
IDs and Classes
IDs are unique.
Classes are reusable.
![Page 49: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/49.jpg)
Examples
<div id=“header”></div> <div id=“nav”></div> <div class=“active-‐region”></div>
![Page 50: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/50.jpg)
![Page 51: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/51.jpg)
Comments
The comment tag is useful for making notes in HTML.
<!—-‐ comment here —-‐>
![Page 52: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/52.jpg)
![Page 53: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/53.jpg)
![Page 54: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/54.jpg)
<div>’s Have No Style
By themselves <div>’s have no style or formatting.
CSS is used to style the presentation of HTML.
![Page 55: Intro to HTML](https://reader034.vdocument.in/reader034/viewer/2022051512/540d00ab7bef0ad7288b8c64/html5/thumbnails/55.jpg)
Further Learning
RandyOest.com/HTML
W3Schools (free)
Team Treehouse (not free)