HTML BOOTCAMPHow a Website Works:1|Page                 Need help? Contact us:www.MayeCreate.com | info@mayecreate.com | (...
HTML BOOTCAMPHTML Tags          In Theory:    <tag>visible stuff</tag>                            a      (anchor) used for...
HTML BOOTCAMP  ___________s Letter Home  A Letter Home  From _________________, HTML Bootcamper  307 Locust Street  Columb...
HTML BOOTCAMP   <html>   <head>   <title>Maries Letter Home</title>   </head>   <body>   <h2>A Letter Home</h1>   <h2>From...
HTML BOOTCAMP  Links  <a href=“destination/action”>What people click on</a>  Composed of 3 parts:        Anchor tag: <a>  ...
HTML BOOTCAMP  Color codes consist of a hash symbol (#) and 6 characters. These characters can be digits (0-9) or letters ...
HTML BOOTCAMP  Universal Font Families:       Verdana, Geneva, sans-serif       Georgia, Times New Roman, Times, serif  ...
HTML BOOTCAMP  Additional Resources:  HTML Dog - http://htmldog.com/  Don’t Fear the Internet - http://www.dontfeartheinte...
Upcoming SlideShare
Loading in …5
×

Campers Packet

989 views

Published on

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
989
On SlideShare
0
From Embeds
0
Number of Embeds
71
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Campers Packet

  1. 1. HTML BOOTCAMPHow a Website Works:1|Page Need help? Contact us:www.MayeCreate.com | info@mayecreate.com | (573) 447-1836
  2. 2. HTML BOOTCAMPHTML Tags In Theory: <tag>visible stuff</tag> a (anchor) used for links &anchors address Wraps an address blockquote Wraps quotes or long citations body The visible information br Soft line break div Division, like a box em Makes text italics h1, h2, h3, h4, h5&h6 Headings head Contains invisible info html Starts & ends web page img Image [src, height, width] li List item New in HTML 5*: link Links stylesheets inside head nav – for navigation ol Ordered list (1, 2, 3…) article – post or content p paragraph figure – one or more images span used for inline styling (mostly CSS) section – section of page, strong makes text bold or chapter of an article style starts CSS, inside head aside – un-necessary info like sidebars, title words in tab thingy, in head comments and footnotes ul un-ordered (bulleted) list2|Page Need help? Contact us:www.MayeCreate.com | info@mayecreate.com | (573) 447-1836
  3. 3. HTML BOOTCAMP ___________s Letter Home A Letter Home From _________________, HTML Bootcamper 307 Locust Street Columbia, MO 65201 Dear ____________________, Im having a great time at HTML Bootcamp today! My advisor is Marie Newell. She has been a part of Camp MayeCreate since June 2010. So far today I have done the following three things: gotten unpacked met the campers made a pot holder for you Im really looking forward to teaching the following three things: ______________________________________________________________________________________ ______________________________________________________________________________________ ______________________________________________________________________________________ Heres a picture: Cant wait to show you all the stuff Im doing! Im thinking about signing up for the WordPress camp next month Sincerely, _________________________ _________________________@_________________________3|Page Need help? Contact us:www.MayeCreate.com | info@mayecreate.com | (573) 447-1836
  4. 4. HTML BOOTCAMP <html> <head> <title>Maries Letter Home</title> </head> <body> <h2>A Letter Home</h1> <h2>From Marie Newell, HTML Bootcamper</h1> <p>307 Locust Street<br />Columbia, MO 65201</p> <p><strong>Dear Clayton,<strong></p> <p>Im having a great time at HTML Bootcamp today! Im the advisor in charge. As you know, Ive been a part ofCamp MayeCreate since June 2010.</p> <p>So far today I have done the following three things: <ol><li>gotten unpacked</li> <Ii>met the campers</li> <li>made a pot holder for you</li> </ol> </p> <p>Im really looking forward to teaching the following three things: <ul><li>how to make links to other pages</li> <li>how to insert images</li> <li>how to change colors</li> </ul> </p> <p>Heres a picture:<br /> <imgsrc="../images/lunchnlearn.png" /></p> <p>An apple a day keeps MayeCreate at the top of their game!</p><p>Cant wait to show you all the stuff Im doing! Im thinking about signing up for <a href="http://www.mayecreate.com/2011/04/flash-back-to-wordpress/" target="_blank">the WordPress camp next month</a>.</p> <p>Sincerely,<br /> <em>Marie Newell</strong>br /> <a href="mailto:marie@mayecreate.com" marie@mayecreate.com</a></p> </body> </html>4|Page Need help? Contact us:www.MayeCreate.com | info@mayecreate.com | (573) 447-1836
  5. 5. HTML BOOTCAMP 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 – defines destination/action) Content that people click on (must be in between anchor starting and closing tags) 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 a link in a new window: add target=“_blank” inside the starting anchor tag Images  <imgsrc=“url for image to be used” height=“# in pixels” width=“# in pixels” />  Composed of 4 parts: 1. img tag 2. src attribute = url for the image to be used 3. height in pixels (optional) 4. width in pixels (optional) CSS - Inline Styles Inside the tag you are talking to, insert style=“styles go here” Find more information about styles in an external stylesheet online:http://www.w3schools.com/css/5|Page Need help? Contact us:www.MayeCreate.com | info@mayecreate.com | (573) 447-1836
  6. 6. HTML BOOTCAMP Color codes consist of a hash symbol (#) and 6 characters. These characters can be digits (0-9) or letters (A-F) Common codes: #FFFFFF = white, #000000=black style=”color:#000000;”6|Page Need help? Contact us:www.MayeCreate.com | info@mayecreate.com | (573) 447-1836
  7. 7. HTML BOOTCAMP Universal Font Families:  Verdana, Geneva, sans-serif  Georgia, Times New Roman, Times, serif style=”font-family:Tahoma, sans-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 span Can be used anywhere within another tag to talk to specific text or elements div 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> Float You can float left, right, or none style=”float:left;” style=”float:right;” style=”float:none;”7|Page Need help? Contact us:www.MayeCreate.com | info@mayecreate.com | (573) 447-1836
  8. 8. HTML BOOTCAMP Additional Resources: HTML Dog - http://htmldog.com/ Don’t Fear the Internet - http://www.dontfeartheinternet.com/ HTML5: W3 Schools: http://www.w3schools.com/html5/default.asp WDL – Essentials & Good Practices: http://webdesignledger.com/tips/html5-essentials-and-good-practices Validator: http://html5.validator.nu/ Text Editors: Text Wrangler (MAC): http://www.barebones.com/products/TextWrangler/download.html Komodo Edit (PC): http://www.activestate.com/komodo-edit Adobe Dreamweaver: http://www.adobe.com/products/dreamweaver.html CSS - http://www.w3schools.com/css/8|Page Need help? Contact us:www.MayeCreate.com | info@mayecreate.com | (573) 447-1836

×