HTML Basics Objectives: Objectives: Understand what HTML is Understand what HTML is Know basic HTML tags Know basic HTML tags Understand how to view HTML sources Understand how to view HTML sources Tasks: Tasks: Page in Notepad! (Simple Bio) Page in Notepad! (Simple Bio) Printing the Source & IDing Tags Printing the Source & IDing Tags
HTML HTML stands for Hypertext Markup Language. HTML file and Web Page are synonymous. HTML stands for Hypertext Markup Language. HTML file and Web Page are synonymous. All web pages; despite fancy graphics, music… etc… is nothing more than a text file with formatting codes inserted. All web pages; despite fancy graphics, music… etc… is nothing more than a text file with formatting codes inserted. You don’t necessarily NEED a fancy web authoring program like Dreamweaver. Notepad can do everything Dreamweaver can- if you know the tags. You don’t necessarily NEED a fancy web authoring program like Dreamweaver. Notepad can do everything Dreamweaver can- if you know the tags.
Basic HTML Tags Starting Three Sections exist of a webpage: Three Sections exist of a webpage: 1. The HTML Document 2. The HEAD Section 3. The BODY Section
Basic Tag Layout WRONG WRONG<HTML><HEAD><TITLE><BODY></TITLE></HEAD></BODY></HTML> RIGHT RIGHT<HTML><HEAD><TITLE></TITLE></HEAD><BODY></BODY></HTML>
Example of the BASIC site. <HTML><HEAD><TITLE> This is a basic website. </TITLE></HEAD><BODY> Welcome to my basic website. Boo. </BODY></HTML>
REMEMBER: Always save files (if you do them in notepad, for example) as.htm or.html to be able to view them in a web browser! Always save files (if you do them in notepad, for example) as.htm or.html to be able to view them in a web browser! Most first/main pages are saved as index… Most first/main pages are saved as index… If you want to later open a file in notepad- right click and use the open with option to select notepad (usually the default program to open a.htm or.html file is a browser) If you want to later open a file in notepad- right click and use the open with option to select notepad (usually the default program to open a.htm or.html file is a browser)
More Basic Tags There are a LOT more tags available for use. For example, some basic text tags include: There are a LOT more tags available for use. For example, some basic text tags include:<B>Bold</B><I>Italic</I><U>Underline</U> Blinks (only in certain browsers) Blinks (only in certain browsers) Heading 1 (goes up to 6) Heading 1 (goes up to 6) <SUB>Subscript</SUB> Basic Seperations Include: Basic Seperations Include: Paragraph White Space before & after Paragraph White Space before & after Horizontal Rule Horizontal Rule Line Break Line Break Etc.. Etc! Etc.. Etc!
NOTICE All Tags Start with and end with ! This keeps them invisible to the everyday web surfer.
Viewing Sources All websites can be viewed in their HTML version. All websites can be viewed in their HTML version. Most web browsers have a “view -> source” option in their menu. Most web browsers have a “view -> source” option in their menu. Viewing the source of a page helps you learn how other web masters do what they do, and if needed- you can copy their code and use it as your own (this is how JAVA most commonly gets shared!) Viewing the source of a page helps you learn how other web masters do what they do, and if needed- you can copy their code and use it as your own (this is how JAVA most commonly gets shared!) No need to reinvent the wheel! No need to reinvent the wheel!
Tasks: Page in Notepad & Printing the Source & IDing Tags