HTML Bootcamp

HTML Bootcamp

MAYECREATE DESIGN

What We’ll be Going Over:

 How a website works
 What HTML is
 How to write HTML
 CSS, the stylish best friend
 HTML in WordPress
 What NOT to do with your new skills
 Beyond 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 Credentials
 FTP Program

Do You Have What You Need?

ARE THERE ANY QUESTIONS SO FAR?

Basic HTML Document Structure

 All web pages contain 2 basic parts:
1. Head: Where things are linked and defined
2. 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  head
 address  html
 blockquote  img
 body  li
 br  link
 div  ol
 em  p
 h1  span
 h2  strong
 h3  style
 h4  strong
 h5  title
 h6  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 content
 Displays in the browser window
 Used in SEO
 Goes inside your head tag

<h1></h1>

 Most important title on the page
 Only use it once per page!

<h2></h2> through <h6></h6>

 Used for titles and sub-titles
 As many as you want on a page

<p></p>

 Used to create paragraphs
 As many as you want on a page
 Often has other tags within it

<strong></strong> & <em></em>

 Used to create bold or italicized text
 Can be used within other tags

<ul></ul> VS <ol></ol> & <li></li>

 Used to start and end lists
 ul stands for Un-Ordered List
 ol stands for Ordered List

 li tags are used for both types of lists
 li 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:info@mayecreate.com”>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 interest
 If 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

Example of a Broken HTML

Before: the image is not After: the image is free of
displaying above the any other tags and displays
columns at the top of the page

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 Dashboard
 Go to a Page or Post
 Click 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 box
in 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 Sheets
 It is a language of styles that tell browsers how to
display HTML elements

CSS – Stylesheet vs. Inline Styling

2 ways to style HTML:

 External stylesheet  Inline styling
 Linked inside head tag  Written within the tag it is
 Allows the same styles to being applied to
be applied to lots of  Only applied in that
different elements instance
throughout a site  Little easier than drafting
 Files end in .css a whole stylesheet

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:  Changing Background
 color:#FFCC99; 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-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

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 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>

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
H1 {
This is an H2 Title background: #FFFF00;
margin-bottom:16px;
}
Lorem ipsum dolor sit
amet, consectetur adipiscing elit. p{
Proin vel urna sem. Suspendisse background:#FFFFFF;
ultricies augue in lacus lobortis color: #3399FF;
feugiat. Nulla sollicitudin pretium padding:10px;
velit, ac porttitor neque elementum }
non. Aliquam suscipit ultricies erat et Or:
euismod. Suspendisse eleifend
<p style=“background:#FFFFFF;
eleifend dapibus. Nunc vitae interdum
sem. color: #3399FF;
padding:10px;”>Lorem….</p>

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…

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 works
 What HTML is
 How to write HTML
 CSS, HTML’s stylish best friend
 HTML in WordPress
 What NOT to do with your new skills
 Beyond Bootcamp

HTML Bootcamp

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (14)

Similaire à HTML Bootcamp

Similaire à HTML Bootcamp (20)

Plus de MayeCreate Design

Plus de MayeCreate Design (20)

Dernier

Dernier (20)

HTML Bootcamp