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 ...
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...
What are tags?   Tags surround plain text and describe web pages.   They are keywords or letters surrounded by angle    ...
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 use...
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  he...
Common Tags  a                                                  head  address                                          ...
Write a Letter Home            Login:             Host:             User:             Password:            Download     ...
Add Tags To Your Letter Home Start your document <html> Start and End your head and body: <head></head> and <body></body...
Edit Your Letter Home             Fill in the blanks/replace the              all CAPS text             Insert the follo...
<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...
Links (Anchor Tags)<a href=“destination/action”>What people click on</a> Composed of 3 parts:    Anchor tag: <a>    hre...
Different Types of Links To a website/webpage:   <a href=“http://www.mayecreate.com/”>Our Website</a> To an email addre...
Open Link In a New Window This is controlled through the target attribute within your  linked anchor tag:     <a href=“ht...
Images<img src=“http://mayecreate.com/images/filename.jpg”height=“150” width=“100” /> Composed of 3 parts:    tag: <img ...
Images Image are great for adding interest If they are too big, they can increase loading time Keep loading time down b...
Image File Types JPG = white background, best for gradients GIF = for web, not really useable by other programs,        ...
Common Mistakes It is very common for the following mistakes to happen when using HTML:    Mis-spellings (reference your...
Example of a Broken HTMLBefore: the image is not   After: the image is free ofdisplaying above the       any other tags an...
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 w...
Practice Proofing Mistakes happen… using what you’ve learned so far, can you find the 7 mistakes in the proof_letterhome....
HTML’s Stylish Best Friend: CSS All web browsers have default styles for the standard  html tags. We use CSS to style el...
What is CSS? CSS stands for: Cascading Style Sheets It is a language of styles that tell browsers how to display HTML el...
CSS – Stylesheet vs. Inline Styling                      2 ways to style HTML: External stylesheet              Inline s...
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 ...
Changing the Color Changing Text Color:                  Changing Background    color:#FFCC99;                      Col...
Typeface Changes This can be done by defining your font family using:  font-family: Trebuchet MS, Arial, Helvetica, sans-...
Universal Fonts / Standard Font-Families Verdana, Geneva, sans-serif Georgia, Times New Roman, Times, serif Courier New...
Big Changes = <div></div> div = a “box” that can hold many different  things, including other divs! You can wrap content...
Rules of Divs: They can be nested The end tag closes the open div immediately before it Example:  <div>       <div clas...
Small Changes = <span></span> Spans are inline elements that apply only to what  they surround They don’t take up any mo...
Floating on the River Floating objects can allow all kinds of fun things to  happen on your website. It allows text to “...
Rules of the River Float left unless absolutely necessary. If you float left, the text or other content that needs to mo...
S’more Things to Remember Text colors need to have good contrast so your  viewers can read it. Using more than two fonts...
Campfire Horror Stories:   Don’t Just Do It…
Questions?
What We Covered: How a website works What HTML is How to write HTML CSS, HTML’s stylish best friend HTML in WordPress...
Learn More @ Columbia Area Career Center This Fall, I’m teaching several classes:     Designing Effective Publications  ...
Upcoming SlideShare
Loading in …5
×

HTML Bootcamp

3,533 views

Published on

Created

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,533
On SlideShare
0
From Embeds
0
Number of Embeds
674
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML Bootcamp

  1. 1. HTML Bootcamp MAYECREATE DESIGN
  2. 2. 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
  3. 3. How a Website Works: Part 1 - Front End
  4. 4. How a Website Works: Part 2 – Back End
  5. 5. 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
  6. 6. 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
  7. 7. HTML in Theory http://www.dontfeartheinternet.com/html/html
  8. 8. 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
  9. 9. Do You Have What You Need? ARE THERE ANY QUESTIONS SO FAR?
  10. 10. 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 Structurehttp://w3schools.com/html/html_intro.asp
  11. 11. 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  ulhttp://www.dontfeartheinternet.com/html/html
  12. 12. 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
  13. 13. 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>
  14. 14. 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
  15. 15. <title></title> Used to describe the page’s content Displays in the browser window Used in SEO
  16. 16. <h1></h1> Most important title on the page Only use it once per page!
  17. 17. <h2></h2> through <h6></h6> Used for titles and sub-titles As many as you want on a page
  18. 18. <p></p> Used to create paragraphs As many as you want on a page Often has other tags within it
  19. 19. <strong></strong> & <em></em> Used to create bold or italicized text Can be used within other tags
  20. 20. <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
  21. 21. 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)
  22. 22. 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>
  23. 23. 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 windowDefault (if left off) is to open in the same window/frame
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. 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
  28. 28. Example of a Broken HTMLBefore: the image is not After: the image is free ofdisplaying above the any other tags and displayscolumns at the top of the page
  29. 29. How to View HTML in WordPress Login to your WordPress Dashboard Go to a Page or Post Click on the HTML tab
  30. 30. 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
  31. 31. 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 < >
  32. 32. 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
  33. 33. What is CSS? CSS stands for: Cascading Style Sheets It is a language of styles that tell browsers how to display HTML elements
  34. 34. 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
  35. 35. Bones are Good – Let’s Add Some Fun!
  36. 36. 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
  37. 37. 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/
  38. 38. 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
  39. 39. 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
  40. 40. 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
  41. 41. 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>
  42. 42. 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
  43. 43. 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;
  44. 44. 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.
  45. 45. 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
  46. 46. Campfire Horror Stories: Don’t Just Do It…
  47. 47. Questions?
  48. 48. 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
  49. 49. 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

×