Lab Worksheet Week 4: Sep 12 through 14 CS 105 Lab 2 - A Simple Web Page

Transcription

1 CS 105 Lab 2 - A Simple Web Page Objective For today s lab, you will make a simple single page web page by writing some HTML code. The content of the web page can be anything of your choice. For e.g., you can choose to make a web page containing your (real/fictitious) résumé, favorite movie, TV show, singer or book etc. However, we have a requirement on the types of tags to use in your web page (see Instructions section). At the end of the lab, you will have gained some hands on experience with using HTML, know the function of various HTML tags, and how to create a very simple webpage using HTML. Review What is HTML HTML (Hypertext Markup Language) is a system for describing web documents (web pages). It describes the content of the web pages, but does not provide control over exactly how the content should be displayed. Styling of the content is left to Cascading Style Sheets (CSS), which you will learn in subsequent lectures to make your web page look nicer. What are HTML tags A web page is composed of text (or other media content) described by HTML tags. HTML tags are keywords surrounded by the angular brackets < and > (without the quotes). They (usually) come in pairs (a start tag and an end tag) and the content between a pair of tags takes on the properties associated with that tag. The general format of a tag is, <tag-name attribute1=... attribute2=......> Content goes here </tag-name> where attribute1, attribute2, etc., are the additional inputs associated with the tag. Note that some tags may have no attributes, and the end tag requires the / before the tag name. 1

2 For e.g., <b> and its matching end tag </b> are the tags for making text bold. The following, <b>bold text</b> will make the browser display the words Bold text in bold. Notice that this tag has no additional attributes. An HTML element is everything from the start tag to the end tag. In the above example, <b>bold text</b> is an HTML element. HTML tags can be nested within each other You can nest HTML tags within each other so that the content enclosed by the tags take on the property of all its enclosing tags. For example, <b><i>bold italic text</i></b> <ul> <li><b>bold item 1</b></li> <li><i><b>bold italic item 2</b></i></li> </ul> will make the browser display the words Bold italic text in bold and italics, and a list with the first item, Bold item 1 in bold, and the second item Bold italic item 2 in bold and italics. Note that a tag opened most recently is always the next tag to close. In the above example, we close </b> before </i> and </li>. HTML tags need not come in pairs Not all HTML tags come in pairs. The following are a few tags that appear alone, HTML tag <br> <hr> Description Inserts a single line break Defines a thematic change in the content <!-- --> Defines a comment <img src=... > Defines an image 2

3 List of HTML tags, their functions, and examples Here are some tags you will use. Go to to see a full list of HTML tags and their description. Click on the link for a tag to see examples on how to use it. HTML tag <title>title of HTML document</title> <h1>my header</h1> <h2>my sub-header</h2> <h6>some really small header</h6> <p>some new paragraph of text </p> <b>some bold text</b> <i>some italic text</i> Description Defines title for document. Inserts My header as a h1 header etc. Text gets smaller from <h1> to <h6>. Make Some new paragraph of text a new paragraph of text Make Some bold text bold Make Some italic text italic <a href= >text</a> Make text a link to <img src= > <br> <hr> Inserts the image file img.jpg from Inserts a single line break Defines a thematic change in the content. Often displayed as a horizontal line across screen <!-- Some comment here --> Defines a comment. Note there are 2 dashes - <ul> <li>item a</li> <li>item b</li> <li>last item</li> </ul> <ol> <li>item 1</li> <li>item 2</li> <li>item k</li> </ol> Inserts an Unordered List (<ul>) with items, Item a, Item b, etc. Inserts an Ordered List (<ol>) with items, Item 1, Item 2, etc. 3

4 Structure of HTML a document The basic structure of a HTML document is as follows, Image taken from Requirements You are required to write a simple web page using HTML and submit the web page (more information below). Your submission needs to satisfy the following requirements: 1. The HTML code has to be well formed. 2. Include a title tag (use <title>some random title</title>) 3. Include at least 1 image (use <img src= URL of image >) 4. Include at least 2 header (use <h1>, <h2> etc.) 5. Include at least 1 hyperlink (use <a href= >link text</a>) 6. Include at least 1 un/ordered list (use <ul>, <ol>) 7. Include at least 1 formatting tags (<b>, <i> etc.) 8. Include at least 1 comment (use <!-- Some random comment -->) 4

5 Instructions 1. Open the Notepad++ application. 2. Select Language > H > HTML from the menu bar at the top of the screen 3. Write your HTML code in Notepad To save your file as a HTML file, select File > Save as, and save your file as <Your NetID >.html. E.g., if your NetID is johndoe12, then save your file as johndoe12.html. 5. You can view your web page by double clicking <Your NetID>.html to open it in your browser. If you make changes to your HTML file, you will need to refresh the web page to see the latest changes. 6. Once you have completed your web page, submit your file by following the instructions in the next section. Submitting your work Go to the CS 105 web site and click "Labs" in the top menu. Under "Lab 2" you will find these instructions and a link to submit your assignment using our central submission system. Please be sure to include your netid and the netid of everybody else in your team. Each member must submit the work separately and your solutions may vary slightly, but you must include everybody's netid when you submit your work. Make sure that you are uploading the right file! You will not receive any credit for uploading the wrong one! 5

6 Appendix HTML reference - Everything you need Web-based HTML editor A useful web-based HTML editor for trying small pieces of HTML code is JSFiddle Open the link in your browser. Ignore the top right and bottom left quadrant for now. They are meant for entering CSS and JavaScript code, respectively, and you will only learn them in future lectures. Enter the HTML you want to test in the upper left quadrant of the web page. Notice that the editor will automatically insert the end tag (if any) for the tag that you are typing. Another thing to note is that sometimes the web page will show up okay even if you entered badly formatted HTML code (e.g., not ending a tag). However, do not count on this to always work. You should always enter valid HTML when creating your web page. When you are done entering your HTML code, click the Run link at the upper left of the screen to see the results. Useful trick - View Page Source You can view the HTML code for a web page by opening it in your browser, right-click in the page and select "View Page Source" (in Chrome, Firefox) or something similar in other browsers. 6