Daily+Exercise+4++-HTML+in+Notepad

Daily Exercise #4 Here are some decent sites on the WWW about creating HTML from scratch. __ @http://sunsite.berkeley.edu/Web/basictags.html __ __ @http://webmonkey.wired.com/webmonkey/reference/html_cheatsheet/ __ __ @http://www.w3.org/MarkUp/Guide/ __ __ @http://www.web-source.net/html_codes_chart.htm __ __ @http://www.immigration-usa.com/html_colors.html __ 1) Get a JPEG or GIF from anywhere and save it to your desktop. Remember what the file is named. 2) Open Windows Notepad 3) Use this as your opening tag.
 * **
 * **

4) After the First  tag, put in a pair of head tags. Head tags isolate specific instructions. Things that are in the head section don't appear in the body of the page.  
 * **
 * **

5) Now, put title tags in between the head tags. This will appear to the user at the top of your browser window.    
 *  web page name**

6) Information in the body section is the actual content of the webpage. Throw in a pair of those now after the closing head tag.    web page name</TITLE> </HEAD> </HTML>
 * <BODY>**
 * </BODY>**

7) What do you want this page to say? In the body section, type up the following sentence: "This is a link to my favorite page." 8.) Save your Notepad file by going to File > Save As >. In the **Save As** field use “HTML”.

9) Open the file in an internet browser. See the title at the top of the browser window and the sentence you entered in step 7. Note there's nothing spectacular about the font in the body of the page. All that work and that's all you got! Let's change the color of the word "link" in the sentence by throwing a pair of **font** tags around the word. Everything in-between the tags will be affected. Color is just one kind of font tag. You could also change size if you wanted. However, since we don't have a color picker in Notepad, you will have to find the __ 6-character hexadecimal code __ for your chosen colors on the Internet.    web page name </TITLE> </HEAD> <BODY> This is a **<font color="#0033CC">** link ** ** to my favorite page. </BODY> </HTML> 10) Open the file in your browser. Hey, everything is left-aligned. How do I change that? With the center tag. Remember, it affects whatever is between the tags, so, in this case, the whole sentence.    web page name</TITLE> </HEAD> <BODY> This is a <font color="#0033CC"> link to my favorite page. </BODY> </HTML>
 * <CENTER>**
 * </CENTER>**

11) We haven't yet made that link. That's where the A HREF tag comes in. Whatever is in between the tags becomes the clickable area for the user to open the link. We'll choose the words "favorite page". Since I want the link to open up in a new window instead of the current page, I'll throw in the <target=_blank> switch. The closing </a> signals the end of the clickable area    web page name </TITLE> </HEAD> <BODY> <CENTER> This is a <font color="#0033CC"> link to my **<a href="http://inls461.wikispaces.com" target="_blank">** favorite page.**</a>** </CENTER> </BODY> </HTML>

12) To think that we haven't yet inserted an image! Remember in step 1 when we saved an image to the desktop? Put in the basic image tag, with the file's appropriate name. The filename for the JPEG image I used was "collage.jpg" By typing just the name of the image, this assumes that in the web structure it is stored in the same folder as the HTML file being read. If, for example, you were keeping all your images in a separate folder called "images" in relation to the current HTML file, the image tag would look like this: <img src="images/collage.jpg"> The point being, when you transfer your files to your FTP space, these paths have to be preserved.    web page name</TITLE> </HEAD> <BODY> <CENTER> This is a <font color="#0033CC"> link to my <a href="http:// http://inls461.wikispaces.com" target="_blank"> favorite page.</a> </CENTER> </BODY> </HTML> 13) How come all the "content" of our page is all pushed together like that? You can create a full paragraph break at anytime by putting in <P>, and a simple line break with every <BR>. It should be noted that these two tags don't require an ending tag. They do work singly, though some HTML programs try to put them in pairs for consistency.    web page name</TITLE> </HEAD> <BODY> <CENTER> This is a <font color="#0033CC"> link to my <a href="http://inls461.wikispaces.com/" target="_blank"> favorite page.</a> </CENTER>**<P>** <img src="collage.jpg"> </BODY> </HTML>
 * <img src="collage.jpg">**

14)You may also bold and italicize words by surrounding them with the following tags: <B> </B> <I></I> 15) Move the image and your notepad file to the public.html folder on your FTP server space. Send me (ejcox@email.unc.edu) an email with the link to this site (e.g. http://www.unc.edu/~youronyen/filename)