Embed Size (px)
DESCRIPTION
An introduction to HTML, including a description of how it works, common tags and appropriate image sizes and types. This presentation shows you how to create hyperlinks, manipulate text, use fonts and change colors on your website.
Citation preview
MAYECREATE DESIGN
HTML Bootcamp
What We’ll be Going Over:
How a website worksWhat HTML isHow to write HTMLCSS, the stylish best friendHTML in WordPressWhat NOT to do with your new skillsBeyond Bootcamp
How a Website Works: Part 1 - Front End
How a Website Works: Part 2 – Back End
What is HTML?
HTML = Hyper Text Markup Language
It is not a programming language, it is a markup language that consists of a set up markup tags.
These markup tags are used to describe content in web pages.
W3schools.com/html/html_intro.asp
Viewing Source Code
If you’re really curious, you can peek behind the curtain of any site and view the page’s source code to see how it’s constructed.
(Some developers even provide a bit of entertainment – theoatmeal.com)
What are tags?
Tags surround plain text and describe the content.
They are keywords or letters surrounded by angle brackets like:
<html>They normally come in pairs:
<body> </body>The first tag is a start tag (aka an opening
tag) & the second is an end tag (aka closing tag)
W3schools.com/html/html_intro.asp
HTML in Theory
http://www.dontfeartheinternet.com/html/html
What You’ll Need:
To Write:Text Editing Program
We use Dreamweaver TextWrangler for Mac or Komodo Edit for PC users
(free) Notepad also works
To Publish:Hosting Space FTP CredentialsFTP Program
ARE THERE ANY QUESTIONS SO FAR?
Do You Have What You Need?
Basic HTML Document Structure
All web pages contain 2 basic parts:1. Head: Where things are linked and defined2. Body: Where the content goes that you want to
display on the page
Before these can exist, a doctype must be defined and HTML has to be defined as the language that’s going to be used
Common Tags Used
a address blockquote body br div em h1 h2 h3 h4 h5 h6
head html img li link ol p span strong style strong title ul
http://www.dontfeartheinternet.com/html/html
Write a Letter Home
Login:Host: User: Password:
Download letterhome.html
Open letterhome.html in a text editor (not Word!)
OR
Flip to the letter home in your workbook
Add Tags To Your Letter Home
Start your document <html>
Start and End your head and body:
<head></head> and <body></body>
End your document </html>
Edit Your Letter Home
Replace/Fill in the blanks with your information: Your name [x2] Your friend/family/dog’s name [up to] 3 things you’re going to
do today Your name Your email
Mark Up Your Letter
Use the following tags to “mark up” your letter so the browser knows how to read it:
h1 h2 p strong ol ul li a em
<title></title>
Used to describe the page’s contentDisplays in the browser windowUsed in SEOGoes inside your head tag
<h1></h1>
Most important title on the pageOnly use it once per page!
<h2></h2> through <h6></h6>
Used for titles and sub-titlesAs many as you want on a page
<p></p>
Used to create paragraphsAs many as you want on a pageOften has other tags within it
<strong></strong> & <em></em>
Used to create bold or italicized textCan be used within other tags
<ul></ul> VS <ol></ol> & <li></li>
Used to start and end listsul stands for Un-Ordered Listol stands for Ordered List
li tags are used for both types of listsli tags are on individual List Items
Links (Anchor Tags)
<a href=“destination/action”>What people click on</a>
Composed of 3 parts: Anchor tag: <a> href attribute: href=“” (inside the starting anchor tag) Content that people click on (must be in between anchor
starting and closing tags)
Different 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 Link In a New Window
This is controlled through the target attribute within your linked anchor tag:
<a href=“http://www.facebook.com/mayecreate” target=“_blank”>Find Us on Facebook</a>
_blank = open in a new window or tab_self = open in same frame as it was clicked_parent = open in the parent frameset_top = open in the full body of the window
Default (if left off) is to open in the same window/frame
Images
<img src=“http://mayecreate.com/images/filename.jpg” height=“150” width=“100” />
Composed of 3 parts: tag: <img />
*Self-closing tag – don’t need </img> src attribute: src=“”
inside the address of exactly where the image lives online dimensions: height=“” width=“”
if left off, image will display at full size this is in pixels automatically, but percent can also be used
Images
Image are great for adding interestIf they are too big, they can increase loading
time
Keep loading time down by making images for web: 72 ppi (pixels per inch) = web resolution Less than 700 pixels tall or 700 pixels wide
Image File Types
JPG = white background, best for gradients
GIF = for web, not really useable by other programs, can have transparent background, or not
PNG = best for transparent backgrounds
Let’s Look at Your Letter Home
Rename your file to be NAME_letterhome.html
Connect to the hosting account via your FTP program: Login Credentials
Host: User: Password:
Upload your file Look at your file in a web browser by going to:
_________.mayecreate.com/NAME_letterhome.html
Common Mistakes
It is very common for the following mistakes to happen when using HTML: Mis-spellings (reference your tags list) Brackets are missing Tags don’t close
</tag> tag = whatever tag you are trying to close
Tags open and close, but don’t match
B e f o r e : t h e i m a g e i s n o t d i s p l a y i n g a b o v e t h e c o l u m n s
Example of a Broken HTML
Af t e r : t h e i m a g e i s f r e e o f a n y o t h e r t a g s a n d d i s p l a y s a t t h e t o p o f t h e p a g e
Practice Proofing
Mistakes happen… using what you’ve learned so far, can you find the 7 mistakes in the proof_letterhome.html file? Hints:
If it opens, it must close It must be spelled correctly All tags need to be held in < >
How to View HTML in WordPress
Login to your WordPress DashboardGo to a Page or PostClick on the Text tab
Broken? Go back a revision.
At the bottom of your page, find the revision’s panel
Click on the last version before it was broken and “restore”
If not available, check the boxin the screen options
HTML’s Stylish Best Friend: CSS
All web browsers have default styles for the standard html tags.
We use CSS to style elements so they look cleaner and fit the style of the website/client
This is accomplished through CSS
What is CSS?
CSS stands for: Cascading Style SheetsIt is a language of styles that tell browsers
how to display HTML elements
CSS – Stylesheet vs. Inline Styling
External stylesheet Linked inside head tag Allows the same styles
to be applied to lots of different elements throughout a site
Files end in .css
Inline styling Written within the tag
it is being applied to Only applied in that
instance Little easier than
drafting a whole stylesheet
2 ways to style HTML:
Bones are Good – Let’s Add Some Fun!
Linking to an External Stylesheet
<link rel="stylesheet" href=“path to file/filename.css" type="text/css" media="screen" />
Consists of several parts: Relationship: telling the browser it’s linking to a
stylesheet Href: tells the browser which file to use and where to
find it Type: tells the browser what kind of language it’s
going to read Media: tells the browser when to use the stylesheet
External Stylesheets (.css)
Styles are written differently in an external stylesheet or within style tags than inline styles
A tag, class, id or some combination is defined, followed by curly brackets around the css styles like so:
Comments can be used to help navigate long stylesheets /* this is a comment */
Inline Styles
Within the tag you are wanting to change, you must add the style attribute:
<p style=“ ”>Text I want to change</p>
This is where we will be telling it how to look
Changing the Color
Changing Text Color: color:#FFCC99;
Changing Background Color: background-
color:#336633;
#FFFFFF #CCCCCC #666666 #333333 #000000
Find Hexidecimal Codes: http://www.mayecreate.com/2010/09/color-codes/
Typeface Changes
This can be done by defining your font family using:
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
Its important to list several typefaces, so if the device being used to view your page doesn’t have it, it depreciates to the next best thing.
There are several fonts that are considered universal
Universal Fonts / Standard Font-Families
Verdana, Geneva, sans-serifGeorgia, Times New Roman, Times, serifCourier New, Courier, monospaceArial, Helvetica, sans-serifTahoma, Geneva, sans-serifTrebuchet MS, Arial, Helvetica, sans-serifPalatino Linotype, Book Antiqua, Palatino,
serifLucida Sans Unicode, Lucida Grand, sans-serif
The New Standard Font-Families:
Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L",
"Times New Roman", serif "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed",
Helvetica, Arial, sans-serif Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu
Sans", Verdana, sans-serif Segoe, “Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-
serif Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-
serif Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace
Big Changes = <div></div>
div = a “box” that can hold many different things, including other divs!
You can wrap content in div tags:<div></div>
Styles applied to a div apply to everything within the tags unless over-written by inline styles
Rules of Divs:
They can be nestedThe 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>
Small Changes = <span></span>
Spans are inline elements that apply only to what they surround
They don’t take up any more space than needed
You can wrap content in span tags:<span></span>
Styles applied to a span only apply to what they wrap
Floating on the River
Floating objects can allow all kinds of fun things to happen on your website.
It allows text to “wrap” around images
2 options: float:left; float:right;
Rules of the River
Float left unless absolutely necessary.
If you float left, the text or other content that needs to move up to the right of the floating object can go before or after it.
If floating right, the content that you want to appear to the left of the floating object must come after it.
Spacing – Padding & Margins
Spacing between elements can be accomplished with padding and/or margins
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel urna sem. Suspendisse ultricies augue in lacus lobortis feugiat. Nulla sollicitudin pretium velit, ac porttitor neque elementum non. Aliquam suscipit ultricies erat et euismod. Suspendisse eleifend eleifend dapibus. Nunc vitae interdum sem.
H1 { background: #FFFF00; margin-bottom:16px;}
p { background:#FFFFFF; color: #3399FF; padding:10px;}
Or: <p style=“background:#FFFFFF; color: #3399FF; padding:10px;”>Lorem….</p>
This is an H2 Title
Spacing – The Box Model
Padding: pushes the border out Margin: pushes other elements away from
the border(margin)
(padding)
S’more Things to Remember
Text colors need to have good contrast so your viewers can read it.
Using more than two fonts gets confusing really quickly!
Make changes thoughtfully
Campfire Horror Stories:
Don’t Just Do It…
Questions?
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
What We Covered:
How a website worksWhat HTML isHow to write HTMLCSS, HTML’s stylish best friendHTML in WordPressWhat NOT to do with your new skillsBeyond Bootcamp
