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

More Related Content

What's hot

Similar to HTML Bootcamp

More from MayeCreate Design

Recently uploaded

HTML Bootcamp