The Ulta-Handy HTML Guide

785 views
699 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
785
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

The Ulta-Handy HTML Guide

  1. 1. The Ultra-Handy Guide to HTML5 By Kurt Richardson, Josh Sved, Ryle Laporte & Nathan Smofsky
  2. 2. HTML Basics <ul><li>Hypertext Markup Language </li></ul><ul><li>Uses “markup tags” </li></ul><ul><ul><li>Usually follows <opentag>Content</closetag> format </li></ul></ul><ul><li>Commands describe the website </li></ul><ul><li>HTML Document is a WEB PAGE </li></ul>
  3. 3. Website vs. Webpage <ul><li>A webSITE is a collection of linked pages (HTML documents) </li></ul><ul><li>A webPAGE is an individual HTML document </li></ul>
  4. 4. HTML vs. CSS <ul><li>HTML document is the STRUCTURE of the webpage </li></ul><ul><ul><li>Eg. how blocks of texts are arranged, what they say </li></ul></ul><ul><li>CSS document is the design (look) of the page </li></ul><ul><ul><li>Eg. font size/color, background image/color, etc. </li></ul></ul>
  5. 5. !DOCTYPE Declaration <ul><li>Should be the first line in any HTML document (before <html> tag) </li></ul><ul><li>Indicates to the browser which protocol is to be followed </li></ul><ul><li>Syntax: </li></ul><ul><ul><li>< !DOCTYPE    [Top Element]   [Availability]   &quot;[Registration]// [Organization]// [Type]   [Label]// [Language]&quot;   &quot;[URL]&quot;> </li></ul></ul>
  6. 6. Basic Format of an HTML Doc <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li>Head Content </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li>Body Content </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  7. 7. Basic Format, Continued <ul><li>Composed of <head> and <body> </li></ul><ul><li><head> tag is for title and other info </li></ul><ul><li><body> tag is where content goes </li></ul>
  8. 8. Basic Tags <ul><li><p> means paragraph </li></ul><ul><li><a href=“”> creates a link </li></ul><ul><li><h1> means header </li></ul><ul><li><img src=“”> creates an image </li></ul>
  9. 9. <p> <ul><li>Means PARAGRAPH </li></ul><ul><li>Basic Syntax: </li></ul><ul><ul><li><p>This is the paragraph</p> </li></ul></ul><ul><li>Uses regular size font </li></ul><ul><li>Notice how tags must be CLOSED with </whatever> </li></ul>
  10. 10. <a href=“”> <ul><li>Creates a LINK </li></ul><ul><li>Basic Syntax </li></ul><ul><ul><li><a href=“www.examplewebsite.com”>This is the link</a> </li></ul></ul><ul><li>First part is the site you want to link to </li></ul><ul><li>Second part is the text that will appear in your webpage </li></ul>
  11. 11. <h1> <ul><li>Creates a HEADER </li></ul><ul><li>Basic syntax: </li></ul><ul><ul><li><h1>This is our header</h1> </li></ul></ul><ul><li>Numbers 1-6 can be used </li></ul><ul><ul><li>1 is biggest header, 6 is smallest header </li></ul></ul><ul><li>Text will appear bolded and larger than <p> font </li></ul>
  12. 12. <img src=“”> <ul><li>Will insert an image on the page </li></ul><ul><li>Basic Syntax: </li></ul><ul><ul><li><img src=“filename” width=“x” height=“y”/> </li></ul></ul>
  13. 13. <meta> <ul><li>Appears in <head> section </li></ul><ul><li>Information about the site itself </li></ul><ul><li>Will be used to identify site in searches </li></ul><ul><li>Basic Syntax: </li></ul><ul><ul><li><meta name=“keywords” content=“tutorial, HTML, MPM17”> </li></ul></ul>
  14. 14. What is a web server? <ul><li>A physical space (HDD) which stores data that can be accessed over the internet </li></ul><ul><li>HTML (and supporting) files will be saved here </li></ul><ul><li>They can then be accessed via a URL </li></ul>
  15. 15. URL <ul><li>Uniform Resource Locator </li></ul><ul><li>A unique address (string of characters) pointing to a file that is accessible via the internet </li></ul><ul><li>Syntax: </li></ul><ul><ul><li>http://www.examplesite.com/image </li></ul></ul><ul><ul><li>(protocol – domain name – specific file) </li></ul></ul>
  16. 16. HTTP <ul><li>Hypertext Transfer Protocol </li></ul><ul><li>Foundation for data communication over the World Wide Web </li></ul><ul><li>Defines information format and transmission </li></ul><ul><ul><li>A URL sends an HTTP request from your browser to the server to display the corresponding web page </li></ul></ul>
  17. 17. FTP <ul><li>File Transfer Protocol </li></ul><ul><li>Allows computers to communicate over the internet </li></ul><ul><li>Supports a wide variety of file formats </li></ul><ul><li>Popular Clients: </li></ul><ul><ul><li>FileZilla, FireFTP </li></ul></ul>
  18. 18. Accessing Your Web Space <ul><li>Host </li></ul><ul><ul><li>ftp.imagearts.ryerson.ca </li></ul></ul><ul><li>Username </li></ul><ul><ul><li>first initial + last name </li></ul></ul><ul><li>Password </li></ul><ul><ul><li>Last 7 of student ID </li></ul></ul>
  19. 19. Sources <ul><li>www.w3schools. com </li></ul><ul><li>Schafer, Steven M. HTML, XHTML, and CSS Bible . Indianapolis: Wiley Publishing, Inc., 2010. Print </li></ul>

×