CSC105 Manual 27 Working with HTML Learning the Tags <HTML> <HEAD> <TITLE> </HEAD> <BODY> must appear at the very beginning of your webpage starts the first section of your page Enter the title of your Home Page here.</title> ends the first section of your page starts the second section of your page Enter the text of your Home Page here. </BODY> </HTML> ends the second section of your page must appear at the very end of your webpage REMEMBER: when you open a tag, you need to close it TREAT THEM LIKE QUOTES.
CSC105 Manual 28 Simple Example of a Homepage <HTML> <HEAD> </HEAD> <BODY> Welcome to my home page. </BODY> </HTML> <TITLE>Laurie Patterson s Home Page</TITLE> <BODY> Welcome to my home page. </BODY> Puts the name at the top: Puts infomation in the main part of the screen: Body Text: Headings: <h1>heading 1</h1> <h2>heading 2</h2> <h3>heading 3</h3> EXAMPLE: Heading 1 Heading 2 Heading 3 <h4>heading 4</h4> Heading 4 <h5>heading 5</h5> Heading 5 <h6>heading 6</h6> Heading 6 After a heading line, you don't need to include a <br> or <p> tag the heading tag automatically adds a return and blank line beneath it.
CSC105 Manual 29 Type Characteristics: EXAMPLE <b>text</b> Bold is added: text <i>text</i> Italics is added: text <u>text</u> Underline is added text <b><i><u>text</u></i></b> Bold, italics, underline added text <strike>text</strike> Text appears crossed-out text <blink>text will blink on and off</blink> <sup>text</sup> text is raised <sub>text</sub> text is lowered <blockquote> Text surrounded by a </blockquote> <center>centers The Text</center> BLINK only works in Netscape. Adds superscript Adds subscript Text is indented Text will blink on and off. text text is raised text text is lowered Text followed by a indented paragraph Centers The Text Ending a Line text<p> text<br> Adds a hard return and a blank line after the text. (Used at the end of a paragraph) Adds a hard return at the end of a line without adding the extra blank line.
CSC105 Manual 30 Scrolling Text <marquee> </marquee> This only works on Internet Explorer Text placed between the marquee tags will scroll across the screen. Additional marquee options: <marquee bgcolor= color code > Adds a color background to the marquee <marquee direction=left> <marquee behavior=???> Scrolls the marquee left; conversely using right, scroll the text right Replace??? With one of the following options: Scroll, continues the text off the screen Slide, stops the text at the edge of the screen Alternate, bounces the text from one side to the other Creating Lists Unordered Lists <ul> </ul> Uses bullets Examples: <ul> </ul> <ul type=square> </ul> <ul type=round> </ul> text text text text text text
CSC105 Manual 31 Ordered Lists <ol> Uses numbers Examples: <ol> <ol> <li start=7>text <ol TYPE=A> or lower case <ol TYPE=I> or lower case 1. text 2. text 7. text A. text I. text Changing the Background <body bgcolor= color > colors: for basic colors, enter the color name ( red ); for other colors visit: background= picture.name in the body tag bgcolor= color in the body tag http://www.se-tel.com/~sarah/colors.html <body background= picture.name >
CSC105 Manual 32 Changing Font Colors for the ENTIRE file <body text= color > text= color in the body tag Treat it the same as the body background <body link= color code > changes the color of a non-vis ited link <body vlink= color code > changes the color of a visited link link= color in the body tag vlink= color in the body tag Combine all body tags into ONE tag. Such as: <body background="image.gif" text="#ffffff"> Changing Font Colors for part of the file <font color= color > Use </font> to return the font color to the default color. Setting Font Sizes Remember that the base font default is a size 3 <Basefont size=#> Use a number 1 through 7 in place of #
CSC105 Manual 33 Text/Graphic Alignment <p align=right> Results in this: To stop right alignment, add the </p> at the end of the right aligned paragraph Align=right can also be used in the header tags. <p align=center> Results in this: To stop center alignment, add the </p> at the end of the center aligned paragraph Align=center can also be used in the header tags. Links <a href= http://www.uncwil.edu >UNCW</a> The a href tag creates a link to the URL listed in quotation marks. The text appearing after the tag shows as the link. Closing tag is: </a> Email connection <a href= mailto:pattersonl@uncwil.edu >Me!</a> The a href tag creates a link to the email address listed in quotation marks. The text appearing after the tag shows as the link. Closing tag is: </a> Graphics/Pictures <img src= picture name > Replace picture name with the name of the graphic. It is EXTREMELY helpful if the picture is in the same location as the htm file.
CSC105 Manual 34 Naming Your File The Extension of the file should either be:.htm or.html Don't use spaces or punctuation in the file name. Keep the file name limited to 8 characters or less (not including the extension) Naming your main file: index.html means that this is the file that will automatically open when connecting to your Web site. Sounds <bgsound src= file name > Replace file name with the sound file. If you do want the music to play indefinitely add to the tag: Loop=infinite If you want the music to play for only a certain number of times, add: Loop=# and replace # with the number of times it should play. EXAMPLE: <bgsound src="stuck.mid" loop=1>
CSC105 Manual 35 Tables Tables are used to place text next to an image or have something resembling columns on your page. <table width=100% border> </table> <table> is the table start tag width=100% added to it means that the table will fill the entire screen from side to side border will show lines around the outside and around each "cell" of the table width and border do NOT have to be included </table> is placed at the END of the table section <tr> </tr> <td> </td> <tr> begins each row of the table </tr> ends each row of the table <td> is used to describe the data that gets placed in each "cell" or column within the table. </td> is the closing tag You use a <td> and a </td> for each "column" of information within a row Example: <table border="1" width="100%"> <tr> <td width="33%">cell 1</td> <td width="33%">cell 2</td> <td width="34%">cell 3</td> </tr> <tr> <td width="33%">cell 4</td> <td width="33%">cell 5</td> <td width="34%">cell 6</td> </tr> </table>