SlideShare a Scribd company logo

The Ulta-Handy HTML Guide

•Download as PPT, PDF•
•
J
jsved

The document provides an overview of basic HTML elements and concepts. It defines HTML as using markup tags to structure web pages. It explains the basic format of an HTML document with <head> and <body> sections, and introduces common tags like <p> for paragraphs, <a> for links, <h1> for headings, and <img> for images. It also defines key concepts like URLs, HTTP, and FTP for transferring files to web servers to host HTML pages online.

Related slideshows

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

More Related Content

The Ulta-Handy HTML Guide

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