• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML Bootcamp
 

HTML Bootcamp

on

  • 661 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
661
Views on SlideShare
659
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