Creating a page in HTML<br />Introduction<br />Having an understanding of HTML is a necessity of web development.  No matt...
HTML is not a programming language, it is a markup language
A markup language is a set of markup tags
Upcoming SlideShare
Loading in …5
×

Creating a page in HTML

622 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
622
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Creating a page in HTML

  1. 1. Creating a page in HTML<br />Introduction<br />Having an understanding of HTML is a necessity of web development. No matter how good of a web design program you have, you will find situations where it just isn’t doing exactly what you want. Consider adding a YouTube video to your web page. YouTube makes the process very easy by providing you the code, but what if you want to change where the video displays? Having an understanding of HTML will allow you to align that video to the left, right, or center of your page.<br />What is HTML?<br />HTML is a language for describing web pages.<br /><ul><li>HTML stands for Hyper Text Markup Language
  2. 2. HTML is not a programming language, it is a markup language
  3. 3. A markup language is a set of markup tags
  4. 4. HTML uses markup tags to describe web pages </li></ul>HTML markup tags are usually called HTML tags<br /><ul><li>HTML tags are keywords surrounded by angle brackets like <html>
  5. 5. HTML tags normally come in pairs like <b> and </b>
  6. 6. The first tag in a pair is the start tag, the second tag is the end tag
  7. 7. Start and end tags are also called opening tags and closing tags</li></ul>HTML Documents = Web Pages<br /><ul><li>HTML documents describe web pages
  8. 8. HTML documents contain HTML tags and plain text
  9. 9. HTML documents are also called web pages</li></ul>The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.<br />W3Schools.com<br />How to create HTML pages<br />HTML tags are created using brackets. Most HTML tags open and close. For example, a standard web page starts with <HTML>. This tells the browser that the page is using HTML code. At the end of the page, you will find a </HTML> tag which indicates the end of the code.<br />HTML code can be created in most web page design applications are most simply in a text editor like Note Pad. Do not use an application such as Microsoft Word.<br />An excellent source on HTML is W3Schools. You can find an HTML tutorial at http://w3schools.com/html/default.asp<br />Example HTML web page<br /><ul><li><HTML> Tells the browser the language of the page.
  10. 10. <HEAD> File information not displayed on the body of the page.
  11. 11. <TITLE> Title of page that is displayed on tabs, in history, and on the top of the browser window.
  12. 12. <BODY> Content area of page.
  13. 13. <p> Paragraph tag that formats text. Notice that I used the align attribute to explain where the text should be.
  14. 14. <HR/> Horizontal rule. This places the line on the page. Notice that this tag does not have an ending tag of </HR> since there is nothing in the middle that could be affected.</li></ul>Create your first web page<br />You are going to create your first web page in HTML. This will be a very simple web page. It will be the home page for your site with a link to your COMW-100 folder and pages. We are following this format in case you take further web classes at Mott. For example, if you take COMW-163 (Design Concepts for the Web), you will add a link to COMW-163 on this page then link to all of those assignments. Once complete, you will have a full portfolio of your work.<br />For this assignment, follow these directions:<br /><ul><li>Open Notepad on your computer (Start > Accessories > Notepad)
  15. 15. Type the following text:
  16. 16. Save your page to your public_html folder as index.html (do this exact!)
  17. 17. Close Notepad
  18. 18. Double click on your web page and it should open in your default web browser (such as Internet Explorer). Your page should look like the following:
  19. 19. If your page does not look like the image in step 5, right click on the file and select “open with” and “Notepad”. Or you may open Notepad and then open this file. Verify that your code is correct.
  20. 20. When you click on the COMW-100 link, it will give you a page not found error. That is correct for now.
  21. 21. Copy your page to your web space.

×