HTML Bootcamp

HTML Bootcamp

MAYECREATE DESIGN

What We’ll be Going Over:

 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

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 web pages.

W3schools.com/html/html_intro.asp

What are tags?

 Tags surround plain text and describe web pages.
 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?

DOCTYPE – before the
html tag, refers to
version of markup

html – describes the
where the webpage
starts and ends

head – for specific
information that is not
visible on the page

body – holds the visible
page content

Web Page’s Basic Structure

http://w3schools.com/html/html_intro.asp

Common Tags

 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

 Fill in the blanks/replace the
all CAPS text
 Insert the following tags where you
think they go:
 title
 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

<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

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

How to View HTML in WordPress

 Login to your WordPress Dashboard
 Go to a Page or Post
 Click on the HTML 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

Practice Proofing

 Mistakes happen… using what you’ve learned so
far, can you find the 7 mistakes in the
proof_letterhome.html file? (see workbook)
 Hints:
 If it opens, it must close
 It must be spelled correctly
 All tags need to be held in < >

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!

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

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.

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…

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

Learn More @ Columbia Area Career Center

 This Fall, I’m teaching several classes:
 Designing Effective Publications
 Digital Publishing Standards
 Adobe InDesign Modules 1-4

 If interested, sign up at career-center.org/adult

HTML Bootcamp

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to HTML Bootcamp

Similar to HTML Bootcamp (20)

More from MayeCreate Design

More from MayeCreate Design (20)

Recently uploaded

Recently uploaded (20)

HTML Bootcamp