HTML Bootcamp


Published on

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

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

HTML Bootcamp

  1. 1. MayeCreate Design<br />HTML Bootcamp<br />
  2. 2. What We’ll be Going Over:<br />What is HTML?<br />The Must-Haves of Editing HTML<br />What Are Tags?<br />Tags You Should Know<br />Structure of a web page<br />Letters Home – practicing what you know<br />Common Mistakes<br />Links<br />
  3. 3. What We’ll be Going Over (continued):<br />Using CSS to Style your HTML<br />How to use Inline Styles<br />Changing Colors<br />Text<br />Backgrounds<br />Changing Typefaces<br />Spans & Divs<br />Adding Images<br />Floating on the River<br />
  4. 4. What is HTML?<br />HTML = Hyper Text Markup Language<br />It is not a programming language, it is a markup language that consists of a set up markup tags.<br />These markup tags are used to describe web pages.<br /><br />
  5. 5. Must Haves<br />Text Editing Program<br />We use Adobe CS5 Dreamweaver<br />TextWrangler for Mac or Komodo Edit for PC users are free<br />Notepad also works<br />Hosting Space<br />This is the house where your files will live<br />
  6. 6. Must Haves (continued)<br />FTP Program<br />This is the moving truck that gets your files from your old house (your computer) to your new house (your hosting space)<br />Domain Name<br />Your guests will take this road to visit your house (website)<br />
  7. 7. What are tags?<br />Tags surround plain text and describe web pages.<br />They are keywords or letters surrounded by angle brackets like:<br /> <html><br />They normally come in pairs:<br /> <body> </body><br />The first tag is a start tag (aka an opening tag) & the second is an end tag (aka closing tag)<br /><br />
  8. 8. On the Lunch Menu: Hamburger <br /><br />
  9. 9. Tags You Should Know <br />a<br />address<br />blockquote<br />body<br />br<br />div<br />em<br />h1<br />h2<br />h3<br />h4<br />h5<br />h6<br />head<br />html<br />img<br />li <br />link<br />ol<br />p<br />span<br />strong<br />style<br />strong<br />title<br />ul<br /><br />
  10. 10. Web Page’s Basic Structure<br />DOCTYPE – before the html tag, refers to version of markup<br />html – describes the where the webpage starts and ends<br />head – for specific information that is not visible on the page<br />body – holds the visible page content<br /><br />
  11. 11. My Letter Home<br />The tags I used and what they look like.<br />
  12. 12. Write a Letter Home<br />Login:<br />Host:<br />User: html<br />Password: bootcamp<br />Download <br />letterhome.html<br />Open letterhome.html in a text editor (not Word!)<br />OR<br />Flip to the letter home in your workbook<br />
  13. 13. Edit Your Letter Home<br />Fill in the blanks/replace the all CAPS text<br />Insert the following tags where you think they go:<br />html<br />head<br />title<br />body<br />h1<br />h2<br />p<br />strong<br />ol<br />ul<br />li<br />a<br />em<br />
  14. 14. Let’s Look at Your Letter Home<br />Rename your file to be NAME_letterhome.html<br />Upload it into your folder in the hosting space:<br />Login:<br />Host:<br />User: html<br />Password: bootcamp<br />Upload your file into your folder <br />Look at your file in a web browser by going<br />
  15. 15. Fix Your Mistakes<br />It is very common for the following mistakes to happen when using HTML:<br />Mis-spellings (reference your tags list)<br />Brackets are missing<br />Tags don’t close </TAG> TAG = whatever tag you are trying to close<br />Tags open and close, but don’t match<br />
  16. 16. Practice Proofing<br />Mistakes happen… using what you’ve learned so far, can you find the 7 mistakes in the proof_letterhome.html file? (see workbook)<br />Hints:<br />If it opens, it must close<br />It must be spelled correctly<br />All tags need to be held in < ><br />
  17. 17. Links<br /><a href=“destination/action”>What people click on</a><br />Composed of 3 parts:<br />Anchor tag: <a><br />href attribute: href=“” (inside the starting anchor tag)<br />Content that people click on (must be in between anchor starting and closing tags)<br />
  18. 18. Different Types of Links<br />To a website/webpage:<br /><a href=“”>Our Website</a><br />To an email address:<br /><a href=“”>Email Us!</a><br />For a phone number:<br /><a href=“tel:5734471836”>Call Us!</a><br />
  19. 19. Open Link In a New Window<br />This is controlled through the target attribute within your linked anchor tag:<br /><a href=“” target=“_blank”>Find Us on Facebook</a><br />_blank = open in a new window or tab<br />_self = open in same frame as it was clicked<br />_parent = open in the parent frameset<br />_top = open in the full body of the window<br />Default (if left off) is to open in the same window/frame<br />
  20. 20. Other Questions?<br />
  21. 21. Making It Look Good<br />All web browsers have default styles for the standard html tags.<br />We use CSS to style elements so they look cleaner and fit the style of the website/client<br />This is accomplished through CSS<br />
  22. 22. CSS – Stylesheet vs. Inline Styling<br />2 ways to style HTML:<br />External stylesheet<br />Linked inside head tag<br />Allows the same styles to be applied to lots of different elements throughout a site<br />Requires knowledge of CSS <br />Inline styling<br />Written within the tag it is being applied to<br />Only applied in that instance<br />Little easier than drafting a whole stylesheet<br />
  23. 23. Bones are Good – Let’s Add Some Fun!<br />
  24. 24. Starting the Style:<br />Within the tag you are wanting to change, you must add the style attribute:<br /><p style=“ ”>Text I want to change</p><br />This is where we will be telling it how to look<br />
  25. 25. Changing the Color<br />Changing Text Color:<br />color:#FFCC99;<br />Changing Background Color:<br />background-color:#336633;<br />#FFFFFF<br />#CCCCCC<br />#666666<br />#333333<br />#000000<br />Find Hexidecimal Codes:<br />
  26. 26. Typeface Changes<br />This can be done by defining your font family using:<br />font-family: Trebuchet MS, Arial, Helvetica, sans-serif;<br />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.<br />There are several fonts that are considered universal<br />
  27. 27. Universal Fonts / Standard Font-Families<br />Verdana,Geneva, sans-serif<br />Georgia, Times New Roman, Times, serif<br />Courier New, Courier, monospace<br />Arial, Helvetica, sans-serif<br />Tahoma,Geneva, sans-serif<br />Trebuchet MS, Arial, Helvetica, sans-serif<br />Palatino Linotype, Book Antiqua,Palatino, serif<br />Lucida Sans Unicode, Lucida Grand, sans-serif<br />
  28. 28. Smaller Changes<br />strong = bold<br />em = italics<br />span = changes within another tag<br />
  29. 29. Big Changes = Divs<br />div = a “box” that can hold many different things, including other divs!<br />Your webpage might look a little broken if things aren’t in the right order.<br />If things are in the wrong order, or these tags don’t close, it may seem like your whole webpage is broken!<br />
  30. 30. Before: the image is not displaying above the columns<br />Example of a Broken HTML<br />After: the image is free of any other tags and displays at the top of the page<br />
  31. 31. Rules of Divs:<br />They can be nested<br />The end tag closes the open div immediately before it<br />Example:<br /><div><br /><div class=“column1”>Contents in column 1</div><br /><div class=“column2”><br /> Contents of column 2<br /></div><br /></div><br />
  32. 32. Adding Images to Your Site<br /><imgsrc=“url for image to be used” height=“# in pixels” width=“# in pixels” /><br />Composed of 4 parts:<br />img tag<br />src attribute = url for the image to be used<br />height in pixels (optional)<br />width in pixels (optional)<br />
  33. 33. Images<br />Image are great for adding interest<br />If they are too big, they can increase loading time<br />Keep loading time down by making images for web:<br />72 ppi (pixels per inch) = web resolution<br />Less than 700 pixels tall or 700 pixels wide <br />
  34. 34. Image File Types<br />JPG = white background, best for gradients<br />GIF = for web, not really useable by other programs, can have transparent background, or not<br />PNG = best for transparent backgrounds<br />
  35. 35. Floating on the River<br />Floating objects can allow all kinds of fun things to happen on your website.<br />It allows text to “wrap” around images<br />2 options:<br />float:left;<br />float:right;<br />
  36. 36. Rules of the River<br />Float left unless absolutely necessary.<br />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.<br />If floating right, the content that you want to appear to the left of the floating object must come after it.<br />
  37. 37. S’more Things to Remember<br />Text colors need to have good contrast so your viewers can read it.<br />Using more than two fonts gets confusing really quickly!<br />Make changes thoughtfully<br />
  38. 38. Campfire Horror Stories:<br />Don’t Just Do It…<br />
  39. 39. Questions?<br />
  40. 40. What We Went Over:<br />What is HTML?<br />The Must-Haves of Editing HTML<br />What Are Tags?<br />Tags You Should Know<br />Structure of a web page<br />Letters Home – practicing what you know<br />Common Mistakes<br />Links<br />
  41. 41. What We Went Over (continued):<br />Using CSS to Style your HTML<br />How to use Inline Styles<br />Changing Colors<br />Text<br />Backgrounds<br />Changing Typefaces<br />Spans & Divs<br />Adding Images<br />Floating on the River<br />
  42. 42. Learn More @ Columbia Area Career Center<br />Tonight I’m teaching:<br />Designing Effective Publications 6-9pm<br />I’ll also be teaching:<br />InDesign CS5 – Level 2: Wed. Sept. 28, Oct. 5 & 12 | $129<br />InDesign CS5 – Level 1: Wed. Oct. 26, Nov. 2 & 9 | $154<br />InDesign CS5 – Level 2: Wed. Nov. 30, Dec. 7 & 14 | $129<br />If interested, sign up at<br />