HTML Tutorial
HTML and Hello World In Computer Science, there is a tradition of writing a "Hello World" program when you are first learning a new language. "Hello World" may not be a very interesting program, but if you can write a "Hello World" program then you know you can communicate with the computer in that language. That is the first step to being able to do more interesting things. In HTML, the "Hello World" program looks like this: Hello World To create your own "Hello World" 1. Push the start button on the screen using the mouse. 2. Choose Notepad. (You may need to choose “All Programs->Accessories>Notepad). 3. Type the text above. 4. Choose Save from the File menu. 5. Type "hello.html" in the filename box. 6. Choose "All Files" in the filetype box. 7. Choose your X:\ drive and then create a directory called public_html 8. Push the "Save" button. 9. Close Notepad. 10. Open Internet Explorer 11. Choose Open form the File menu. 12. Choose the X:\ drive and then the directory called public_html 13. Double click on "hello.html" 14. You can also go to this URL: http://www.cs.utah.edu/~yourUserName/hello.html HTML and the Sandwich Writing HTML is kind of like making a sandwich. When you make a sandwich you put a piece of bread on top and a piece of bread on bottom, but it doesn’t really matter what you put between them. In HTML, you have to put a on top, and a on bottom, but it doesn’t really matter what you put between them. You can put text (like we did when we wrote "Hello World") or you can put other things like pictures, sounds, or links to other pages. HTML tags The text between a ‘<’ and ’>’ has a special name, a tag. Each tag tells the computer to do something special, like display the text as HTML, display a picture, skip a line, make the text bold, embed a sound, etc. The on top and the on bottom are tags. These tags tell the computer to interpret all the text between them as HTML. The tag without the ‘/’ is the starting tag because it comes first; the tag with the ‘/’ is the ending tag. Not all starting tags have an ending tag. If there is no ending tag, we will
call it a solo tag. If there is both a starting tag and an ending tag, we will call it a pair of tags. If there is a pair of tags, the property of the tag applies to everything inside the pair of tags. Parts of a Tag Each tag has a name; the name is the first word in the tag. Many tags also have attributes; an attribute consists of a paired name and value. For example, in the tag
, IMG is the tag name, and SRC= "mypic.gif" is the attribute. SRC is the attribute name and mypic.GIF is the attribute value. The name of the tag is not cASe SeNsiTive; that means it doesn’t matter if it is lower case or upper case or both. The name of the attribute is not case sensitive either, but the value of the attribute is case sensitive. In order to make code easier to read, we will write HTML in all capital letters except for the attribute values. In HTML, there are many different tags and many of the tags have many attributes. We will learn about a few of the more popular tags in class. You can learn about other tags by looking in a book about HTML, going to a site on the Internet that teaches HTML (like www.htmlgoodies.com ), looking at the source code for web pages you like (choose Source from the View menu in your favorite browser), or asking other people who know HTML. P tag The P tag is a solo tag; it doesn’t have any attributes. The P tag skips a line for a new ‘P’aragraph. It looks like this :
. To see how the P tag works, we will write "p.html". The text for "p.html" is as follows: This is without skipping a line. This is without skipping a line. This is with skipping a line.
This is with skipping a line. Make p.html using the same steps you used to make hello.html. B tag The B tag is a paired tag; it doesn’t have any attributes. The B tag makes all the test between its start tag () and end tag() ‘B’old. It looks like this: Some bold text. To see how the B tag works, we will write "b.html". The text for "b.html" is as follows: This is plain text. This is bold text. Make b.html using the same steps you used to make p.html and hello.html.
A tag The A tag is a paired tag with attributes. The A tag makes a line you can click on to go to another page. The attribute we will learn about in class is the href attribute. The href attribute specifies a URL (Uniform Resource Locator-like an address for the Internet you will go to when the link is clicked on. There are two kinds of URLs. Local or relative URLs contain just a filename. Universal URLs begin with a prefix like http:// and contain the whole address. Relative URLs are better when you will be moving both the linked to page (the page you are going to) and the linking page (the page you are coming from). Universal URLs are better when you will be moving just the linking page. There are advantages to both, so we will learn to do both. The A tag looks something like this: clickable text . To see how the A tag works, we will write "link.html." The text for "link.html" is as follows: This is yahoo! This is a Universal URL!
This is hello. This is a local or relative URL! Create link.html in the usual manner. How the Internet Works ( a BRIEF discussion) How does the Internet Work? It is best to think of the Internet like a giant postal system where the post office is always open. Uploading is like sending a copy of something to the post office. When you upload something, the post office takes what you have sent it and keeps it in a safe place. Downloading is like getting a copy of something from the post office. When you download something, you tell the post office you want to see a copy, and the post office sends you a copy, keeping the original in a safe place, so that the next person can download it. The post office in our example is actually called a server. A server is a computer somewhere that is always turned on and at a specific URL or address. When more people are using the Internet, the post office is busier, and it takes longer to process your requests. Hello World as a Picture In addition to using text on your web page , you can use graphics. For example, you can create a picture using paint that says "Hello World." To create your own "Hello World" graphic: 1. Push the start button on the screen using the mouse. 2. Choose Paint. 3. Choose Attributes from the Image menu. 4. Set the Width and Height equal to 100 pixels. 5. Type "hello.html" in the filename box. 6. Create a small graphic that says "hello world"
7. Experiment with the utilities in the toolbox at the left side of the screen. 8. Choose Save from the File menu. 9. Type "hello" in the filename box. 10. Choose "Graphics Interchange Format (*.GIF)" in the filetype box. 11. Choose the public_html folder on your X:\drive 12. Push the "Save" button. 13. The computer will warn you; choose "yes." 14. Close Paint. IMG tag The IMG tag is a solo tag; it has attributes. The attribute we will learn about in class is the source attribute. The IMG tag displays an image(IMaGe). The SRC attribute is the source(SouRCe) of the filename of the picture you want to display. The image tags looks like this 
. To see how the image tag works, we will write "pic.html." The text for "pic.html" is as follows: This is my Hello World picture. 
Create pic.html in the usual manner. Applet Tag The APPLET tag is a paired tag with attributes. The attributes we will learn about in class are the code attribute, width attribute, and the height attribute. The APPLET displays an applet in your page. The WIDTH is the width of the applet in pixels. The HEIGHT is the height of the applet in pixels. The CODE is the name of the class file in quotes. Additionally, you can include PARAM tags inside the applet tags to pass parameters to your applet. The PARAM tag has two attributes, a name and a value. The NAME is the name of the parameter, and the VALUE is the value you are passing in. To see how the applet tag works, we will write "applet.html": Create applet.html in the usual manner. Putting it all Together Make a web page that has a picture, a link, some formatted text, and an applet.