1 | P a g e Need help? Contact us: www.MayeCreate.com | [email protected] | (573) 447-1836
HTML BOOTCAMP
How a Website Works:
2 | P a g e Need help? Contact us: www.MayeCreate.com | [email protected] | (573) 447-1836
HTML BOOTCAMP
HTML Tags In Theory: <tag>visible stuff</tag>
a
address
blockquote
body
br
div
em
h1, h2, h3, h4, h5 & h6
head
html
img
li
link
ol
p
span
strong
style
title
ul
(anchor) used for links & anchors
Wraps an address
Wraps quotes or long citations
The visible information
Soft line break
Division, like a box
Makes text italics
Headings
Contains invisible info
Starts & ends web page
Image [src, height, width]
List item
Links stylesheets inside head
Ordered list (1, 2, 3…)
paragraph
used for inline styling (mostly CSS)
makes text bold
starts CSS, inside head
words in tab thingy, in head
un-ordered (bulleted) list
New in HTML 5*:
nav – for navigation
article – post or content
header / footer – surrounding exactly what you’d think
section – section of page, or chapter of an article
aside – un-necessary info like sidebars, comments and footnotes
3 | P a g e Need help? Contact us: www.MayeCreate.com | [email protected] | (573) 447-1836
HTML BOOTCAMP
___________'s Letter Home
A Letter Home
From _________________, HTML Bootcamper
307 Locust Street Columbia, MO 65201
Dear ____________________,
I'm having a great time at HTML Bootcamp today! My advisor is Marie Newell. She has been a part of Camp MayeCreate since June 2010.
So far today I have done the following three things:
gotten unpacked met the campers made a pot holder for you
I'm really looking forward to teaching the following three things:
______________________________________________________________________________________
______________________________________________________________________________________
______________________________________________________________________________________
Here's a picture:
Can't wait to show you all the stuff I'm doing! I'm thinking about signing up for the WordPress camp next month
Sincerely, _________________________
_________________________@_________________________
<h1></h1> <h2></h2>
<p></p> <strong></strong>
<ol><li></li></ol> <ul><li></li></ul>
<em></em> <a></a> <img />
4 | P a g e Need help? Contact us: www.MayeCreate.com | [email protected] | (573) 447-1836
HTML BOOTCAMP
Links
<a href=“destination/action”>What people click on</a> Composed of 3 parts:
Anchor tag: <a>
href attribute: href=“ ” (inside the starting anchor tag – defines destination/action)
Content that people click on (must be in between anchor starting and closing tags)
Types of Links:
To a website/webpage:
<a href=“http://www.mayecreate.com/”>Our Website</a>
To an email address:
<a href=“mailto:[email protected]”>Email Us!</a>
For a phone number:
<a href=“tel:5734471836”>Call Us!</a>
Open a link in a new window: add target=“_blank” inside the starting anchor tag
Images
<img src=“url for image to be used” height=“# in pixels” width=“# in pixels” />
Composed of 4 parts:
1. img tag
2. src attribute = url for the image to be used
3. height in pixels (optional)
4. width in pixels (optional)
CSS - Inline Styles
Inside the tag you are talking to, insert style=“styles go here”
Find more information about styles in an external stylesheet online: http://www.w3schools.com/css/
5 | P a g e Need help? Contact us: www.MayeCreate.com | [email protected] | (573) 447-1836
HTML BOOTCAMP
Color codes consist of a hash symbol (#) and 6 characters. These characters can be digits (0-9) or letters (A-F)
Common codes: #FFFFFF = white, #000000=black style=”color:#000000;”
6 | P a g e Need help? Contact us: www.MayeCreate.com | [email protected] | (573) 447-1836
HTML BOOTCAMP
Universal Font Families:
Verdana, Geneva, sans-serif
Georgia, Times New Roman, Times, serif
Courier New, Courier, monospace
Arial, Helvetica, sans-serif
Tahoma, Geneva, sans-serif
Trebuchet MS, Arial, Helvetica, sans-serif
Palatino Linotype, Book Antiqua, Palatino, serif
Lucida Sans Unicode, Lucida Grand, sans-serif
span
Can be used anywhere within another tag to talk to specific text or elements
div
They can be nested
The end tag closes the open div immediately before it
Example:
<div>
<div class=“column1”>Contents in column 1</div>
<div class=“column2”>
Contents of column 2
</div>
</div>
Float You can float left, right, or none
style=”font-family:Tahoma, sans-serif;”
style=”float:left;” style=”float:right;”
style=”float:none;”
7 | P a g e Need help? Contact us: www.MayeCreate.com | [email protected] | (573) 447-1836
HTML BOOTCAMP
Margin pushes other elements away from the outside of your element
Padding pushes the borders of the element out
Additional Resources:
HTML Dog - http://htmldog.com/
Don’t Fear the Internet - http://www.dontfeartheinternet.com/
HTML5:
W3 Schools: http://www.w3schools.com/html5/default.asp
WDL – Essentials & Good Practices:
http://webdesignledger.com/tips/html5-essentials-and-good-practices
Validator: http://html5.validator.nu/
Text Editors:
Text Wrangler (MAC):
http://www.barebones.com/products/TextWrangler/download.html
Komodo Edit (PC): http://www.activestate.com/komodo-edit
Adobe Dreamweaver: http://www.adobe.com/products/dreamweaver.html
CSS - http://www.w3schools.com/css/