HTML Bootcamp MAYECREATE DESIGN
What We’ll be Going Over: How a website works What HTML is How to write HTML CSS, the stylish best friend HTML in Wor...
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...
Viewing Source Code            If you’re really               curious, you can peek               behind the curtain of  ...
What are tags?   Tags surround plain text and describe the content.   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?
Basic HTML Document Structure All web pages contain 2 basic parts:  1. Head: Where things are linked and defined  2. Body...
Common Tags Used  a                                            head  address                                      html...
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             Replace/Fill in the blanks with              your information:                 Your na...
Mark Up Your Letter            Use the following tags to “mark up”             your letter so the browser knows          ...
<title></title> Used to describe the page’s content Displays in the browser window Used in SEO Goes inside your head tag
<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,        ...
Let’s Look at Your Letter Home Rename your file to be NAME_letterhome.html Connect to the hosting account via your FTP p...
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...
Practice Proofing Mistakes happen… using what you’ve learned so far, can you find the 7 mistakes in the proof_letterhome....
How to View HTML in WordPress Login to your WordPress Dashboard Go to a Page or Post Click on the Text 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...
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!
Linking to an External Stylesheet<link rel="stylesheet" href=“path to file/filename.css"type="text/css" media="screen" />...
External Stylesheets (.css) Styles are written  differently in an external  stylesheet or within style  tags than inline ...
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...
The New Standard Font-Families: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif Constantia,...
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...
Spacing – Padding & Margins Spacing between elements can be accomplished with  padding and/or margins                    ...
Spacing – The Box Model Padding: pushes the border out Margin: pushes other elements away from the border               ...
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?
Additional Resources HTML Dog - http://htmldog.com/ Don’t Fear the Internet -  http://www.dontfeartheinternet.com/ HTML...
What We Covered: How a website works What HTML is How to write HTML CSS, HTML’s stylish best friend HTML in WordPress...
Upcoming SlideShare
Loading in …5
×

HTML Bootcamp

2,401 views

Published on

An introduction to HTML, including a description of how it works, common tags and appropriate image sizes and types. This presentation shows you how to create hyperlinks, manipulate text, use fonts and change colors on your website.

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

  • Be the first to like this

No Downloads
Views
Total views
2,401
On SlideShare
0
From Embeds
0
Number of Embeds
69
Actions
Shares
0
Downloads
3
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, the 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 content in web pages.W3schools.com/html/html_intro.asp
  6. 6. Viewing Source Code  If you’re really curious, you can peek behind the curtain of any site and view the page’s source code to see how it’s constructed.  (Some developers even provide a bit of entertainment – theoatmeal.com)
  7. 7. What are tags?  Tags surround plain text and describe the content.  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
  8. 8. HTML in Theory http://www.dontfeartheinternet.com/html/html
  9. 9. 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
  10. 10. Do You Have What You Need? ARE THERE ANY QUESTIONS SO FAR?
  11. 11. Basic HTML Document Structure All web pages contain 2 basic parts: 1. Head: Where things are linked and defined 2. Body: Where the content goes that you want to display on the page Before these can exist, a doctype must be defined and HTML has to be defined as the language that’s going to be used
  12. 12. Common Tags Used  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
  13. 13. 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
  14. 14. 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>
  15. 15. Edit Your Letter Home  Replace/Fill in the blanks with your information:  Your name [x2]  Your friend/family/dog’s name  [up to] 3 things you’re going to do today  Your name  Your email
  16. 16. Mark Up Your Letter  Use the following tags to “mark up” your letter so the browser knows how to read it:  h1  h2  p  strong  ol  ul  li  a  em
  17. 17. <title></title> Used to describe the page’s content Displays in the browser window Used in SEO Goes inside your head tag
  18. 18. <h1></h1> Most important title on the page Only use it once per page!
  19. 19. <h2></h2> through <h6></h6> Used for titles and sub-titles As many as you want on a page
  20. 20. <p></p> Used to create paragraphs As many as you want on a page Often has other tags within it
  21. 21. <strong></strong> & <em></em> Used to create bold or italicized text Can be used within other tags
  22. 22. <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
  23. 23. 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)
  24. 24. 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>
  25. 25. 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
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. Let’s Look at Your Letter Home Rename your file to be NAME_letterhome.html Connect to the hosting account via your FTP program:  Login Credentials Host: User: Password:  Upload your file Look at your file in a web browser by going to: _________.mayecreate.com/NAME_letterhome.html
  30. 30. 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
  31. 31. 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
  32. 32. Practice Proofing Mistakes happen… using what you’ve learned so far, can you find the 7 mistakes in the proof_letterhome.html file?  Hints:  If it opens, it must close  It must be spelled correctly  All tags need to be held in < >
  33. 33. How to View HTML in WordPress Login to your WordPress Dashboard Go to a Page or Post Click on the Text tab
  34. 34. 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
  35. 35. 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
  36. 36. What is CSS? CSS stands for: Cascading Style Sheets It is a language of styles that tell browsers how to display HTML elements
  37. 37. 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
  38. 38. Bones are Good – Let’s Add Some Fun!
  39. 39. Linking to an External Stylesheet<link rel="stylesheet" href=“path to file/filename.css"type="text/css" media="screen" /> Consists of several parts:  Relationship: telling the browser it’s linking to a stylesheet  Href: tells the browser which file to use and where to find it  Type: tells the browser what kind of language it’s going to read  Media: tells the browser when to use the stylesheet
  40. 40. External Stylesheets (.css) Styles are written differently in an external stylesheet or within style tags than inline styles A tag, class, id or some combination is defined, followed by curly brackets around the css styles like so:Comments can be used to help navigatelong stylesheets /* this is a comment */
  41. 41. 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
  42. 42. 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/
  43. 43. 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
  44. 44. 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
  45. 45. The New Standard Font-Families: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif Segoe, “Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace
  46. 46. 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
  47. 47. 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>
  48. 48. 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
  49. 49. 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;
  50. 50. 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.
  51. 51. Spacing – Padding & Margins Spacing between elements can be accomplished with padding and/or margins H1 {This is an H2 Title background: #FFFF00; margin-bottom:16px; } Lorem ipsum dolor sit amet, consectetur adipiscing elit. p{ Proin vel urna sem. Suspendisse background:#FFFFFF; ultricies augue in lacus lobortis color: #3399FF; feugiat. Nulla sollicitudin pretium padding:10px; velit, ac porttitor neque elementum } non. Aliquam suscipit ultricies erat et Or: euismod. Suspendisse eleifend <p style=“background:#FFFFFF; eleifend dapibus. Nunc vitae interdum sem. color: #3399FF; padding:10px;”>Lorem….</p>
  52. 52. Spacing – The Box Model Padding: pushes the border out Margin: pushes other elements away from the border (margin) (padding)
  53. 53. 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
  54. 54. Campfire Horror Stories: Don’t Just Do It…
  55. 55. Questions?
  56. 56. 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
  57. 57. 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

×