Lab Webpage In this lab you will learn how to create a web page. In the source code of a web page, its content, i.e. what you see, is mixed with the formatting, which does not appear when the page is displayed but controls its elements such as paragraph, breaks, pictures, links, and so on. Tags In HTML, every formatting element is known as a tag. A tag is a word enclosed between the < and > symbols, like the following tag for a new paragraph: <p> A tag applies a format to what follows, until the ending tag appears. The ending tag begins with a </ rather than just a <. For example, a title looks like: <title> This is the title of this document. </title> Everything between the <title> and the </title> defines the title of the web page. There are a few exceptions, that is, tags that do not need an ending tag:<br> (paragraph break) is one of them. Note that there cannot be spaces between the < and the tag name, or between the < and the / in an ending tag, so the following are not valid tags: < title>, </ title>, < /title> Tag names are case insensitive, so <TITLE> is valid, as is <TiTLe>. Tags present in every document Every html document begins with a <html> tag, and ends with a </html> tag. What comes between these is the actual web page. Anything that appears outside of these two tags will not show up if you display the page using a browser. Html Documents usually have two main sections: a header and a body:
The header defines the title, and may also refer to a stylesheet for the document (more on that later.) It is enclosed in a <head></head> tag pair. The body contains what you really see on the web page, and it is enclosed in a <body></body> tag pair. Other useful tags Two very useful tags are the tags for hyperlinks, the a tag (for anchor), and the tag for an image, img: The anchor tag a allows you to link a document to your page; this document can be a file that sits on your server, or an external web page. Here is how you would link the web page for ECS15 to your web page: <a href="http://web.cs.ucdavis.edu/~liu/ecs15/f14/15.htm ">ECS15 Home Page</a>. Note that the tag is not just <a>, but <a href="/smartsite.ucdavis.edu ">: href is an attribute to the tag a that gives the URL for the link you want to create; here it gives the address to ECS15 web page. The text between <a> and </a> will show as a link on your web page The img tag allows you to attach an image to your web page. Its format is <img src="addr" alt="" /> where Addr is the address of the image; this address can be a path on the computer hosting the web site, or an external URL address. The attribute "alt" indicates what is displayed on the web page if the image is not found. Here is an example of an image tag: <img src="http://www.ucdavis.edu/local_resources/images/common/ucdavis_logo.gif" alt="image not found"> For a more exhaustive list of html tags, you can look at HTML Tags Simple Document Here is a simple html document that creates a web page listing my hobbies during the summer: <html> <head> <title>my summer page</title> </head> <body> <h1>my summer hobbies </h1> <hr /> <p> In the summer, I like to be active. Here is a small list of my summertime activities: </p> <ul> <li> I like running in <a href="http://www.ucdtri.com/">triathlons</a></li>
<li> I often rock climb in <a href="http://www.yosemite.org/">yosemite</a></li> </ul> </body> </html> Some notes about this document: "My summer page" is the header for the document: it will not appear on the web page itself The visible part of the web page appears between the tags <body> and </body> I have set a heading for the first part of the document, which I named "My summer hobbies"; it is enclosed in the tabs <h1> and </h1> and will appear with a different style on the web page (usually with a larger font, in bold) Under the heading, I added a horizontal line using the tag <hr /> As part of the text, I added an unordered list (i.e. that appears with bullets instead of numbers. To do so, I started with the tag <ul> and then added each element in the list between the tags <li> and </li>; the unordered list ends with </ul> Styles Notice that I indented the different parts of the document: this is not required, but it helps reading the html code You can change the appearance of a web page (i.e. the fonts it uses, the color -background, text, -) using styles. These styles appear in the header section, between the tags <style type="text/css"> and </style>. Here is an example: <head> <style type="text/css"> body { color: navy; background-color: #ffff66; font-family : sans-serif; margin-right: 15%; } </style> </head> Some notes about this style: The tags "body {" and "}" delimit all style formatting that applies to the body of the document color refers to the color of the text in the document; here it is set to "navy" background-color refers to the color of the background; here it is defined in hexadecimal format: this is what the symbol # means. A color can be defined in hexadecimal format using a seven digit label; with: o digit 1: #
o digit 2-3: the amount of red in the color, between 0 and ff (ff is a hexidecimal number as you have learned, it is 255 in decimal); "ff" means full red, while 00 means no red o digit 4-5: the amount of green in the color, between 0 and ff (i.e. 255 in decimal); o digit 6-7: the amount of blue in the color. The color used is ffff66, meaning full red, full green, and some blue: this is in fact yellow!! font-family defines the fond family used for the text (if not specified, the web page will use "serif") margin-right defines the margin on the right of the document; it is given as percentage of the full length of the page. Similarly, you can also use margin-left. Feel free to experiment with different styles to find one that you like. Tutorial For more HTML tutorial information you can go to http://www.w3schools.com/html/ Here is an online real-time HTML editor. http://htmledit.squarefree.com/ Lab Assignment For your lab assignment, make a web page of your choosing. Name the web page file index.html. It can be on any topic. It must contain: 1. A title (2 points) 2. A style section specifying a 10% left and right margin, some font face besides the default serif, and some color besides the default black-on-white (2 points each, 6 points total) 3. Two different headings, with separate content under each heading (2 points each, 4 points total) 4. An unnumbered list with at least two different items (2 points each, 4 points total) 5. At least 4 links to other web pages (1 point each, 4 points total) 6. At least one picture (2 points) Here is a simple example what your website should look like, this just give you a basic idea. Feel free to make a fancy one.(do not make exactly the same one as this example)
We recommend that you use notepad to create the web page. However, you are free to use any other software/editor; we only require that your index.html file be clean and readable (5 points), e.g., without unnecessary characters/tags/formats. (Sometimes, a more sophisticated editor may cause problems. For example, one TextEdit user spent a couple of hours debugging and finally realized that the smart quotation option needs to be turned off.) To hand in your assignment, you can create a zip file containing index.html and any pictures you include in your web page, and name it lab_webpage.zip. Use the e-drop in Smartsite submit your file. Please double check your submission to make sure you submit correctly, in particular, your pictures show up appropriately i.e., the TA will only grade what you submitted to Smartsite.