1. Intro to HTML Basics HTML = Hypertext Mark-up Language HTML = Hypertext Mark-up Language HTML is a plain-text file that can be created using a text editor like Notepad. HTML is a plain-text file that can be created using a text editor like Notepad. When creating HTML files for the web, make sure you save them as.html – or they wont work. When creating HTML files for the web, make sure you save them as.html – or they wont work.

2. Overview: Tags As a text document, your HTML in Notepad will contain elements, such as headers, titles, paragraphs, etc. As a text document, your HTML in Notepad will contain elements, such as headers, titles, paragraphs, etc. These elements must be denoted in your script, which is done using tags These elements must be denoted in your script, which is done using tags HTML tags consist of a left angle bracket ( ) HTML tags consist of a left angle bracket ( ) For example: For example: Tags must also close. To do so, you incorporate a slash (/). A starting and ending tag would be: Tags must also close. To do so, you incorporate a slash (/). A starting and ending tag would be:

3. More Tags Any HTML document should contain certain tags: - - - -headings (such as ) - Any HTML document should contain certain tags: - - - -headings (such as ) -

4. Adding Attributes to Tags You can add attributes to tags to enhance your page. You can add attributes to tags to enhance your page. Added attributes go inside the brackets of the opening tag (example: would center the paragraph) Added attributes go inside the brackets of the opening tag (example: would center the paragraph) A list of attributes can be found at http://archive.devx.com/projectcool/ developer/reference/tag-table.html A list of attributes can be found at http://archive.devx.com/projectcool/ developer/reference/tag-table.html http://archive.devx.com/projectcool/ developer/reference/tag-table.html http://archive.devx.com/projectcool/ developer/reference/tag-table.html

5. Colors Background and text colors are attributes of the body of the document. Background and text colors are attributes of the body of the document. text=#xxxxxx determines your text color text=#xxxxxx determines your text color Bgcolor=#xxxxxx determines your background color Bgcolor=#xxxxxx determines your background color Colors and codes for HTML can be found at http://hotwired.lycos.com/webmonkey/ref erence/color_codes/ Colors and codes for HTML can be found at http://hotwired.lycos.com/webmonkey/ref erence/color_codes/ http://hotwired.lycos.com/webmonkey/ref erence/color_codes/ http://hotwired.lycos.com/webmonkey/ref erence/color_codes/

6. Lists Lists are found inside the body, and are written as for an unordered list, or for an ordered (or numbered) list. Lists are found inside the body, and are written as for an unordered list, or for an ordered (or numbered) list. List items are denoted by and do not require closing tags. List items are denoted by and do not require closing tags.

7. Links The biggest thing that made HTML so popular was its ability to link to other documents or sections of documents. The biggest thing that made HTML so popular was its ability to link to other documents or sections of documents. A link is indicated by (anchor). A link is indicated by (anchor). The text that will become the link is identified with by (hyperlink reference). The text that will become the link is identified with by (hyperlink reference).

8. More Links An example link would be: Link to document An example link would be: Link to document This would make the phrase Link to document a hyperlink to document.html assuming that it is in the same directory as your current file. This would make the phrase Link to document a hyperlink to document.html assuming that it is in the same directory as your current file. If the document is in a different directory, you need to include it in the path. For example: If the document is in a different directory, you need to include it in the path. For example:

9. More Links If you wish to make an external link, you have to write out the full URL. I recommend opening the page you want in a browser, then copying and pasting the URL. This prevents you from unnecessary typing or messing up. If you wish to make an external link, you have to write out the full URL. I recommend opening the page you want in a browser, then copying and pasting the URL. This prevents you from unnecessary typing or messing up. For example: For example: http://www.theonion.com/onion390 2/index.htmlhttp://www.theonion.com/onion390 2/index.html Just make sure that when you paste it in, you add the quotes (). Just make sure that when you paste it in, you add the quotes ().

10. The href mailto: function mailto: Another function of href can be to provide users with an opportunity to send you e-mail. Another function of href can be to provide users with an opportunity to send you e-mail. An example: An example: mailto:mpeters@ist.psu.edu The full text, with something to link the function to would be: Send me an e-mail The full text, with something to link the function to would be: Send me an e-mail mailto:mpeters@ist.psu.edu

11. Adding Images I suggest you make a folder for images in your directory – it will make it easier to refer to things. I suggest you make a folder for images in your directory – it will make it easier to refer to things. The tag will allow you to insert an image. ??????? Should be the path to the image file. The tag will allow you to insert an image. ??????? Should be the path to the image file. For example: if the image named sample is in the same directory as your html file. For example: if the image named sample is in the same directory as your html file.

12. Images as Links You can also href an image the same way you would with text, by including the in place of the text between the href anchors. You can also href an image the same way you would with text, by including the in place of the text between the href anchors. For example: For example: www.catabus.com Or, you could havemailto:me@here.there in place of the website. Or, you could havemailto:me@here.there in place of the website.mailto:me@here.there

13. Tables Refer to table of table attributes Refer to table of table attributes

14. Frames A Frame document is very much like a normal HTML document, but the Body container is replaced by the Frameset container. A Frame document is very much like a normal HTML document, but the Body container is replaced by the Frameset container. Any tags that would normally be in the body cannot come before the Frameset tag, or it will be ignored. Any tags that would normally be in the body cannot come before the Frameset tag, or it will be ignored.

15. Frame attributes Rows: -Simple numbers mean pixel size -% means percentage value (ie: 33%) Rows: -Simple numbers mean pixel size -% means percentage value (ie: 33%) Columns: -Function just like rows Columns: -Function just like rows

16. Single Frames defines a single frame in a frameset. defines a single frame in a frameset. This tag has 6 possible attributes: -SRC -Name -Margin Width -Margin Height -Scrolling -No Resize This tag has 6 possible attributes: -SRC -Name -Margin Width -Margin Height -Scrolling -No Resize

17. SRC This attribute takes the URL of the site you want to display in the frame as its value. This attribute takes the URL of the site you want to display in the frame as its value. A frame without an SRC value will be displayed as a blank space. A frame without an SRC value will be displayed as a blank space.

18. Name This attribute lets you name your frame so that it can be targeted by links in other documents. This attribute lets you name your frame so that it can be targeted by links in other documents. If you choose to name your frames, they must begin with letters or numbers, no symbols. If you choose to name your frames, they must begin with letters or numbers, no symbols.

19. Marginwidth This attribute gives you control of the width of your frames. This attribute gives you control of the width of your frames. The value is in pixels, so will be a frame 170 pixels wide. The value is in pixels, so will be a frame 170 pixels wide. Leaving out the marginwidth will allow the browser to determine the width of your frame. Leaving out the marginwidth will allow the browser to determine the width of your frame.

20. Marginheight Just like marginwidth, only vertically inclined. Just like marginwidth, only vertically inclined.

21. Scrolling This allows you to determine if there should be a scrollbar in your frame. This allows you to determine if there should be a scrollbar in your frame. Scrolling has 3 values: yes, no, and auto. -Yes means there is always a bar, no means there is never one, and auto means it will be automatically determined. Scrolling has 3 values: yes, no, and auto. -Yes means there is always a bar, no means there is never one, and auto means it will be automatically determined. You dont have to include scrolling, the default is auto. You dont have to include scrolling, the default is auto.

22. Noresize This has no value (numerically, I mean) – it just indicates to the browser that the user has no control over the size of the frame. This has no value (numerically, I mean) – it just indicates to the browser that the user has no control over the size of the frame. This is also optional, and without it, the frame will be resizable. This is also optional, and without it, the frame will be resizable.

23. A note on these attributes These attributes are included in the and are separated by commas. These attributes are included in the and are separated by commas. Example: Example: http://statecollege.com/bartour/