SlideShare a Scribd company logo

Html

•Download as PPT, PDF•
•
C
Cerise Anderson

The document provides an introduction to HTML, covering topics such as what HTML is, how web pages work, common programs used to write HTML, how browsers display web pages, basic HTML tags, formatting of HTML documents, and more. Key points include: - HTML is the standard markup language used to create web pages - Web pages are stored on servers and viewed in browsers using HTTP - Popular programs for writing HTML include Notepad, Textpad, Dreamweaver - Browsers fetch and display pages using HTML tags to control formatting - Basic HTML tags include headings, paragraphs, line breaks, comments - Links, images, backgrounds, and other elements are added using tags

Related slideshows

Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
HTML
HTMLHTML
HTML
 
Presentation on html, css
Presentation on html, cssPresentation on html, css
Presentation on html, css
 
1 of 36
HTML: 4:0 The Basics
What is the World Wide Web The World Wide Web (WWW) is most often called the Web . The Web is a network of computers all over the world . All the computers in the Web can communicate with each other . All the computers use a communication standard called HTTP .
How does WWW work? Web information is stored in documents called Web pages . Web pages are files stored on computers called Web servers . Computers reading the Web pages are called Web clients . Web clients view the pages with a program called a Web browser . Popular browsers are Internet Explorer and Mozilla Firefox .
What programs can you use to write HTML Documents? Notepad-This come with every windows PC. It is a free word processing tool. Note: you must save an HTML document with the extension or notepad will save it as a *.txt file which is unusable on the internet. Textpad: This is a free downloadable program you can use to create HTML documents. This program will color code the HTML tags and save the document in HTML format.
What programs can you use to write HTML Documents? HTML KIT- This is a free program that allows you to write html code and create CSS. Word: you can write HTML code in this purchased program but be aware it adds extra code to you document and you have load the file in order to view the document. Dreamweaver: this is a purchased program. This program is called and editor. It allows you to click on icons instead of actually typing in the code.
How does the browsers fetch pages? A browser fetches a Web page from a server by a request . A request is a standard HTTP request containing a page address . A page address looks like this: http://www.someone.com/page.htm.
How do Browsers display the pages? All Web pages contain instructions for display The browser displays the page by reading these instructions . The most common display instructions are called HTML tags . HTML tags look like this <p>This is a Paragraph</p>.
Browsers Remember Not all browser are the same. What looks good in one may look terrible in others. IE Netscape Firefox Opera
Who is making Web Standards The Web standards are not made up by Netscape or Microsoft. The rule-making body of the Web is the W3C . W3C stands for the World Wide Web Consortium . W3C puts together specifications for Web standards . The most essential Web standards are HTML, CSS and XML . The latest HTML standard is XHTML 1.0 .
What is an HTML File? HTML stands for H yper T ext M arkup L anguage An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file must have an htm or html file extension An HTML file can be created using a simple text editor
How to name your document Make sure the folder which contains your site is named appropriately. Be specific and not ambiguous. DO NOT use capital letters or spaces. Your home page (the very first page a viewer sees) is always called index. All other page must have appropriate names which represent what content is on that page. They also must NOT have capital letters and spaces.
Format of an HTML Document <HTML> <HEAD> <TITLE>My First Page</TITLE> </HEAD> <BODY> </BODY> </HTML>
EXPLAINATION OF TAGS The first tag in your HTML document is <html>. This tag tells your browser that this is the start of an HTML document. The last tag in your document is </html>. This tag tells your browser that this is the end of the HTML document. The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window. The text between the <title> tags is the title of your document. The title is displayed in your browser's caption. The text between the <body> tags is the text that will be displayed in your browser.
HTML TAGS HTML tags are used to mark-up HTML elements HTML tags are surrounded by the two characters < and > The surrounding characters are called angle brackets HTML tags normally come in pairs like <table> and </table> The first tag in a pair is the start tag, the second tag is the end tag The text between the start and end tags is the element content HTML tags are not case sensitive, <table> means the same as <TABLE>
Tag Attributes Tags can have attributes . Attributes can provide additional information about the HTML elements on your page.
HTML ELEMENTS This is an HTML element: <strong> This text is bold</strong> The HTML element starts with a start tag : <strong> The content of the HTML element is: This text is bold The HTML element ends with an end tag : </strong>
Tag Attributes Tags can have attributes . Attributes can provide additional information about the HTML elements on your page. This tag defines the body element of your HTML page: <body>. With an added bgcolor attribute, you can tell the browser that the background color of your page should be red, like this: <body bgcolor=&quot;red&quot;>. Attributes always come in name/value pairs like this: name=&quot;value&quot;. Attributes are always added to the start tag of an HTML element.
Viewing Source Code To view any source code, all you have to do is in a browser go to edit---view source. Notepad will open to view the source.
Basic HTML Tags Headings Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading. HTML automatically adds an extra blank line before and after a heading.
Basic HTML Tags Paragraphs Paragraphs are defined with the <p> </p>tag. HTML automatically adds an extra blank line before and after a paragraph.
Basic HTML Tags Line Breaks The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it. The <br> tag is an empty tag. It has no closing tag.
Basic HTML Tags Comments in HTML The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date. <!– this is a comment - -> Note that you need an exclamation point after the opening bracket, but not before the closing bracket.
The Anchor Tag and the href Attribute HTML uses the <a> that to link to other documents An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.
The syntax of creating an anchor: <a href =“url”></a> The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink. Example: <a href =“http://www.yahoo.com”>Yahoo Search Engine</a>
HTML Links HTML uses hyperlinks to link to another document on the web. Example: <html> <body> <p> <a href=&quot;lastpage.htm&quot;> This text</a> is a link to a page on this Web site. </p> <p> <a href=&quot;http://www.microsoft.com/&quot;> This text</a> is a link to a page on the World Wide Web. </p> </body> </html>
Email link Example: <a href=“mailto:ms_canderson@yahoo.com> Email me here</a>
HTML Backgrounds The <body> tag has two attributes where you can specify backgrounds. The background can be a color or an image. The bgcolor attribute sets the background to a color. The value of this attribute can be a hexadecimal number, an RGB value, or a color name. The background attribute sets the background to an image. The value of this attribute is the URL of the image you want to use. If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window.
Backgrounds Example: <body bgcolor=“red” background=“image.gif>
Backgrounds: Keep in mind If you want to use a background image, you should keep in mind: Will the background image increase the loading time too much? Tip: Image files should be maximum 10k Will the background image look good with other images on the page? Will the background image look good with the text colors on the page? Will the background image look good when it is repeated on the page? Will the background image take away the focus from the text?
HTML and Images The img tag and the src attribute: In HTML, images are defined with the <img> tag.  The <img> tag is empty, which means that it contains attributes only and it has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for &quot;source&quot;. The value of the src attribute is the URL of the image you want to display on your page .
Syntax for the image tag <img src=“filename.extention alt=“picture of a cat”>
Alt tag The alt attribute is used to define an &quot;alternate text&quot; for an image. The value of the alt attribute is an author-defined text: The &quot;alt&quot; attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. It is a good practice to include the &quot;alt&quot; attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers.
Align Attribute align =“top” : this will align text at the top of the image. align =“middle” : this will align text in the middle of the image. align =“ bottom” :this will aling text at the bottom of the image. Don't use the top, middle, or bottom attribute unless you only want one line of text. EX: http://www. htmlgoodies .com/primers/html/article. php /3478191
Align Attribute align =“left” : this will align the image to the left of the webpage while wrapping the text around the image. Align =“right” : this will align the image to the right of the webpage while wrapping the text around the image.
Image alignment To align text around and image you must use the attribute align. EX: <img src =“picture.jpg” align =“left”
Citation All information in this presentation was taken from the HTML tutorial on http://www.w3schools.com

More Related Content

Html

  • 1. HTML: 4:0 The Basics
  • 2. What is the World Wide Web The World Wide Web (WWW) is most often called the Web . The Web is a network of computers all over the world . All the computers in the Web can communicate with each other . All the computers use a communication standard called HTTP .
  • 3. How does WWW work? Web information is stored in documents called Web pages . Web pages are files stored on computers called Web servers . Computers reading the Web pages are called Web clients . Web clients view the pages with a program called a Web browser . Popular browsers are Internet Explorer and Mozilla Firefox .
  • 4. What programs can you use to write HTML Documents? Notepad-This come with every windows PC. It is a free word processing tool. Note: you must save an HTML document with the extension or notepad will save it as a *.txt file which is unusable on the internet. Textpad: This is a free downloadable program you can use to create HTML documents. This program will color code the HTML tags and save the document in HTML format.
  • 5. What programs can you use to write HTML Documents? HTML KIT- This is a free program that allows you to write html code and create CSS. Word: you can write HTML code in this purchased program but be aware it adds extra code to you document and you have load the file in order to view the document. Dreamweaver: this is a purchased program. This program is called and editor. It allows you to click on icons instead of actually typing in the code.
  • 6. How does the browsers fetch pages? A browser fetches a Web page from a server by a request . A request is a standard HTTP request containing a page address . A page address looks like this: http://www.someone.com/page.htm.
  • 7. How do Browsers display the pages? All Web pages contain instructions for display The browser displays the page by reading these instructions . The most common display instructions are called HTML tags . HTML tags look like this <p>This is a Paragraph</p>.
  • 8. Browsers Remember Not all browser are the same. What looks good in one may look terrible in others. IE Netscape Firefox Opera
  • 9. Who is making Web Standards The Web standards are not made up by Netscape or Microsoft. The rule-making body of the Web is the W3C . W3C stands for the World Wide Web Consortium . W3C puts together specifications for Web standards . The most essential Web standards are HTML, CSS and XML . The latest HTML standard is XHTML 1.0 .
  • 10. What is an HTML File? HTML stands for H yper T ext M arkup L anguage An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file must have an htm or html file extension An HTML file can be created using a simple text editor
  • 11. How to name your document Make sure the folder which contains your site is named appropriately. Be specific and not ambiguous. DO NOT use capital letters or spaces. Your home page (the very first page a viewer sees) is always called index. All other page must have appropriate names which represent what content is on that page. They also must NOT have capital letters and spaces.
  • 12. Format of an HTML Document <HTML> <HEAD> <TITLE>My First Page</TITLE> </HEAD> <BODY> </BODY> </HTML>
  • 13. EXPLAINATION OF TAGS The first tag in your HTML document is <html>. This tag tells your browser that this is the start of an HTML document. The last tag in your document is </html>. This tag tells your browser that this is the end of the HTML document. The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window. The text between the <title> tags is the title of your document. The title is displayed in your browser's caption. The text between the <body> tags is the text that will be displayed in your browser.
  • 14. HTML TAGS HTML tags are used to mark-up HTML elements HTML tags are surrounded by the two characters < and > The surrounding characters are called angle brackets HTML tags normally come in pairs like <table> and </table> The first tag in a pair is the start tag, the second tag is the end tag The text between the start and end tags is the element content HTML tags are not case sensitive, <table> means the same as <TABLE>
  • 15. Tag Attributes Tags can have attributes . Attributes can provide additional information about the HTML elements on your page.
  • 16. HTML ELEMENTS This is an HTML element: <strong> This text is bold</strong> The HTML element starts with a start tag : <strong> The content of the HTML element is: This text is bold The HTML element ends with an end tag : </strong>
  • 17. Tag Attributes Tags can have attributes . Attributes can provide additional information about the HTML elements on your page. This tag defines the body element of your HTML page: <body>. With an added bgcolor attribute, you can tell the browser that the background color of your page should be red, like this: <body bgcolor=&quot;red&quot;>. Attributes always come in name/value pairs like this: name=&quot;value&quot;. Attributes are always added to the start tag of an HTML element.
  • 18. Viewing Source Code To view any source code, all you have to do is in a browser go to edit---view source. Notepad will open to view the source.
  • 19. Basic HTML Tags Headings Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading. HTML automatically adds an extra blank line before and after a heading.
  • 20. Basic HTML Tags Paragraphs Paragraphs are defined with the <p> </p>tag. HTML automatically adds an extra blank line before and after a paragraph.
  • 21. Basic HTML Tags Line Breaks The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it. The <br> tag is an empty tag. It has no closing tag.
  • 22. Basic HTML Tags Comments in HTML The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date. <!– this is a comment - -> Note that you need an exclamation point after the opening bracket, but not before the closing bracket.
  • 23. The Anchor Tag and the href Attribute HTML uses the <a> that to link to other documents An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.
  • 24. The syntax of creating an anchor: <a href =“url”></a> The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink. Example: <a href =“http://www.yahoo.com”>Yahoo Search Engine</a>
  • 25. HTML Links HTML uses hyperlinks to link to another document on the web. Example: <html> <body> <p> <a href=&quot;lastpage.htm&quot;> This text</a> is a link to a page on this Web site. </p> <p> <a href=&quot;http://www.microsoft.com/&quot;> This text</a> is a link to a page on the World Wide Web. </p> </body> </html>
  • 26. Email link Example: <a href=“mailto:ms_canderson@yahoo.com> Email me here</a>
  • 27. HTML Backgrounds The <body> tag has two attributes where you can specify backgrounds. The background can be a color or an image. The bgcolor attribute sets the background to a color. The value of this attribute can be a hexadecimal number, an RGB value, or a color name. The background attribute sets the background to an image. The value of this attribute is the URL of the image you want to use. If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window.
  • 28. Backgrounds Example: <body bgcolor=“red” background=“image.gif>
  • 29. Backgrounds: Keep in mind If you want to use a background image, you should keep in mind: Will the background image increase the loading time too much? Tip: Image files should be maximum 10k Will the background image look good with other images on the page? Will the background image look good with the text colors on the page? Will the background image look good when it is repeated on the page? Will the background image take away the focus from the text?
  • 30. HTML and Images The img tag and the src attribute: In HTML, images are defined with the <img> tag.  The <img> tag is empty, which means that it contains attributes only and it has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for &quot;source&quot;. The value of the src attribute is the URL of the image you want to display on your page .
  • 31. Syntax for the image tag <img src=“filename.extention alt=“picture of a cat”>
  • 32. Alt tag The alt attribute is used to define an &quot;alternate text&quot; for an image. The value of the alt attribute is an author-defined text: The &quot;alt&quot; attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. It is a good practice to include the &quot;alt&quot; attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers.
  • 33. Align Attribute align =“top” : this will align text at the top of the image. align =“middle” : this will align text in the middle of the image. align =“ bottom” :this will aling text at the bottom of the image. Don't use the top, middle, or bottom attribute unless you only want one line of text. EX: http://www. htmlgoodies .com/primers/html/article. php /3478191
  • 34. Align Attribute align =“left” : this will align the image to the left of the webpage while wrapping the text around the image. Align =“right” : this will align the image to the right of the webpage while wrapping the text around the image.
  • 35. Image alignment To align text around and image you must use the attribute align. EX: <img src =“picture.jpg” align =“left”
  • 36. Citation All information in this presentation was taken from the HTML tutorial on http://www.w3schools.com