• Save
HTML Bootcamp
Upcoming SlideShare
Loading in...5
×
 

HTML Bootcamp

on

  • 714 views

HTML Bootcamp presentation developed by Marie Newell for use at MayeCreate Design.

HTML Bootcamp presentation developed by Marie Newell for use at MayeCreate Design.

Statistics

Views

Total Views
714
Views on SlideShare
712
Embed Views
2

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 2

http://www.mayecreate.com 2

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML Bootcamp HTML Bootcamp Presentation Transcript

  • MayeCreate Design
    HTML Bootcamp
  • What We’ll be Going Over:
    What is HTML?
    The Must-Haves of Editing HTML
    What Are Tags?
    Tags You Should Know
    Structure of a web page
    Letters Home – practicing what you know
    Common Mistakes
    Links
  • What We’ll be Going Over (continued):
    Using CSS to Style your HTML
    How to use Inline Styles
    Changing Colors
    Text
    Backgrounds
    Changing Typefaces
    Spans & Divs
    Adding Images
    Floating on the River
  • 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
  • Must Haves
    Text Editing Program
    We use Adobe CS5 Dreamweaver
    TextWrangler for Mac or Komodo Edit for PC users are free
    Notepad also works
    Hosting Space
    This is the house where your files will live
  • Must Haves (continued)
    FTP Program
    This is the moving truck that gets your files from your old house (your computer) to your new house (your hosting space)
    Domain Name
    Your guests will take this road to visit your house (website)
  • 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
  • On the Lunch Menu: Hamburger
    http://www.dontfeartheinternet.com/html/html
  • Tags You Should Know
    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
  • Web Page’s Basic Structure
    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
    http://w3schools.com/html/html_intro.asp
  • My Letter Home
    The tags I used and what they look like.
  • Write a Letter Home
    Login:
    Host: tranq3.tranquility.net
    User: html
    Password: bootcamp
    Download
    letterhome.html
    Open letterhome.html in a text editor (not Word!)
    OR
    Flip to the letter home in your workbook
  • Edit Your Letter Home
    Fill in the blanks/replace the all CAPS text
    Insert the following tags where you think they go:
    html
    head
    title
    body
    h1
    h2
    p
    strong
    ol
    ul
    li
    a
    em
  • Let’s Look at Your Letter Home
    Rename your file to be NAME_letterhome.html
    Upload it into your folder in the hosting space:
    Login:
    Host: tranq3.tranquility.net
    User: html
    Password: bootcamp
    Upload your file into your folder
    Look at your file in a web browser by going to:tranq3.tranquility.net/~html/NAME/NAME_letterhome.html
  • Fix Your 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
  • 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 < >
  • 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)
    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
  • Other Questions?
  • Making It Look Good
    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
  • CSS – Stylesheet vs. Inline Styling
    2 ways to style HTML:
    External stylesheet
    Linked inside head tag
    Allows the same styles to be applied to lots of different elements throughout a site
    Requires knowledge of CSS
    Inline styling
    Written within the tag it is being applied to
    Only applied in that instance
    Little easier than drafting a whole stylesheet
  • Bones are Good – Let’s Add Some Fun!
  • Starting the Style:
    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-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
  • Smaller Changes
    strong = bold
    em = italics
    span = changes within another tag
  • Big Changes = Divs
    div = a “box” that can hold many different things, including other divs!
    Your webpage might look a little broken if things aren’t in the right order.
    If things are in the wrong order, or these tags don’t close, it may seem like your whole webpage is broken!
  • Before: the image is not displaying above the columns
    Example of a Broken HTML
    After: the image is free of any other tags and displays at the top of the page
  • 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>
  • Adding Images to Your Site
    <imgsrc=“url for image to be used” height=“# in pixels” width=“# in pixels” />
    Composed of 4 parts:
    img tag
    src attribute = url for the image to be used
    height in pixels (optional)
    width in pixels (optional)
  • 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
  • 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…
  • Questions?
  • What We Went Over:
    What is HTML?
    The Must-Haves of Editing HTML
    What Are Tags?
    Tags You Should Know
    Structure of a web page
    Letters Home – practicing what you know
    Common Mistakes
    Links
  • What We Went Over (continued):
    Using CSS to Style your HTML
    How to use Inline Styles
    Changing Colors
    Text
    Backgrounds
    Changing Typefaces
    Spans & Divs
    Adding Images
    Floating on the River
  • Learn More @ Columbia Area Career Center
    Tonight I’m teaching:
    Designing Effective Publications 6-9pm
    I’ll also be teaching:
    InDesign CS5 – Level 2: Wed. Sept. 28, Oct. 5 & 12 | $129
    InDesign CS5 – Level 1: Wed. Oct. 26, Nov. 2 & 9 | $154
    InDesign CS5 – Level 2: Wed. Nov. 30, Dec. 7 & 14 | $129
    If interested, sign up at career-center.org/adult