Assignment #2: HTML Documents & Structure

Size: px

Start display at page:

Download "Assignment #2: HTML Documents & Structure"

Laura Ella Black
5 years ago
Views:

1 Assignment #2: HTML Documents & Structure Submission instructions: For this assignment you will submit the files you created for Part 2. Files will be submitted using the 7- zip software. Refer to the demonstration given during the lecture this week on how to zip your files or use the instructions in the 7-zip.pdf posted on Moodle if needed. Due Date: Sunday, January 31st at midnight! Goals of assignment: 1. The overall structure of HTML documents and how they are different than other types of documents. 2. Creating HTML documents using Notepad W3C validation of HTML documents. Key Concept HTML documents are text documents structured with special markup tags also called elements. Unlike other document formats such as PDF and Microsoft Word, HTML source code is human readable. Also, HTML is not proprietary, i.e., it is not owned or copyrighted commercially. The format and standards for HTML documents are established by the W3C ( and WHATWG ( which are "transparent," non-profit organizations devoted to the open and free development of the WWW ( Part 1 Do the following activities 1. Download the sample.html document from Moodle. 2. Save the file as sample.html and be sure to note the location where you saved it. Depending on your computer and web browser the file could be saved in a folder called Downloads or it could be saved on your Desktop.

2 3. Using Notepad++, open the sample.html page that you just saved. 4. Take note of how Notepad++ uses color to highlight the syntax of the HTML code. Typically, HTML elements (markup tags) are colored blue, attributes are red, values are purple, comments are green, and the actual text content is black. 5. Click on the View menu, select Document Map, and use the document map to move around the document. 6. Move to the very bottom of the document and create a new line by hitting enter. Then, type the letters c o l and press CTRL-Space (i.e., hold the CTRL key and press the space bar). Take note of what happens when you typed CTRL-Space. It if worked, it should gives you a list of HTML elements and attributes that start with the letters you typed. This is very helpful if you cannot remember the exactly spelling of HTML key words. 7. Download the following Adobe PDF file: syllabus.pdf (CIS1151-syllabus.pdf) from Moodle. 8. Open the file in Notepad++ and try to find the any of the text content, i.e., course learning goals, required textbook, grading, etc. Part 2 Answer the following questions For this part, create a directory called cis1151-assignment2. You will be creating each of the following files within this directory. At the conclusion of the assignment you will zip your files and submit the zipped file (instructions on how to zip files are at the end of the assignment. by [[Insert Your Name Here]] Problem 1 - Visit a web site that interests you. Write a one-page summary and your reaction to the site. Address the following topics: a. What is the purpose of the site? b. Who is the intended audience? c. Do you think that the site reaches its intended audience? Why or why not? d. Is the site useful to you? Why or why not? e. List one interesting fact or issue that this site addresses. f. Would you encourage others to visit this site? g. How could this site be improved? Problem 2 My first web page 1. Open notepad by going to Start -> Programs -> Accessories -> Notepad OR go to Start -> Run - Type notepad and press Enter.

2. Type in the following code: <head> <title>my first page</title> </head> <h1>my first HTML page!</h1> 3. Save the file as firstdoc.html in notepad++. 4.

3 2. Type in the following code: <head> <title>my first page</title> </head> <h1>my first HTML page!</h1> 3. Save the file as firstdoc.html in notepad Within notepad++ click the Run, you will then see a drop down menu choose run in chrome (if you have chrome installed), or another browser of your choice. You will then see the browser open with your first web page displayed!

4 NOTE: Make sure that you give the file a.html extension and that you save it as type 'All Files', otherwise you will get plain text. Problem 3 HTML practice 1. Type in the following code in your text editor: Some text. Some more text.

5 2. Save the file as second-doc.html NOTE: Make sure that you give the file a.html extension and that you save it as type 'All Files', otherwise you will get plain text. Type into the web browsers location bar the absolute location of the directory where you saved the file along with the file name. For example, if you saved the file in C:\windows, type C:\windows\second-doc.html into the web browsers location bar. Problem 4 HTML practice - including comments in code 1. Type in the following code in your text editor:  Some text 2. Save the file as comments-doc.html

6 NOTE: Make sure that you give the file a.html extension and that you save it as type 'All Files', otherwise you will get plain text. Type into the web browsers location bar the absolute location of the directory where you saved the file along with the file name. For example, if you saved the file in C:\windows, type C:\windows\comments-doc.html into the web browsers location bar. Problem 5 HTML practice - setting the title of a web page 1. Type in the following code in your text editor: Note in order to display html tags in the context below you must replace the < with an &lt and > with an &gt. <head> <title>a webpage</title> <p> The title of a webpage is set with the &lt title &gt tag. The &lt title &gt tag is located in the &lt head &gt section of an HTML document. The title of a webpage appears in the upper left corner of a web browser window. The title specified by the above code is "A webpage". <p> The title of this page is "Online code editor"

7 2. Save the file as title-doc.html NOTE: Make sure that you give the file a.html extension and that you save it as type 'All Files', otherwise you will get plain text. Type into the web browsers location bar the absolute location of the directory where you saved the file along with the file name. For example, if you saved the file in C:\windows, type C:\windows\title-doc.html into the web browsers location bar. Problem 6 HTML practice - linking to other web sites 1. Type in the following code in your text editor: <a href=" to Yahoo</a> <br /><br /> <a href=" to Lycos</a>

8 2. Save the file as links.html NOTE: Make sure that you give the file a.html extension and that you save it as type 'All Files', otherwise you will get plain text. Type into the web browsers location bar the absolute location of the directory where you saved the file along with the file name. For example, if you saved the file in C:\windows, type C:\windows\links.html into the web browsers location bar. Problem 7 HTML practice - opening links in another window 1. Type in the following code in your text editor: <a href=" target="_blank"> Go to Yahoo </a> <br><br> <a href=" target="_blank"> Go to Landofcode.com index page </a> <p> You can open links in a new window by setting the <b>target</b> attribute to "_blank".

9 2. Save the file as morelinks.html NOTE: Make sure that you give the file a.html extension and that you save it as type 'All Files', otherwise you will get plain text. Type into the web browsers location bar the absolute location of the directory where you saved the file along with the file name. For example, if you saved the file in C:\windows, type C:\windows\morelinks.html into the web browsers location bar. Problem 8 HTML practice - creating an ordered list 1. Type in the following code in your text editor: Colors: <br /><br /> <ol> <li>green</li> <li>blue</li> <li>gray</li> <li>orange</li>

10 <li>teal</li> </ol> <p> An ordered list is created with the <ol> tag. Each item in the list is specified with the <li> tag. 2. Save the file as ordered-list.html NOTE: Make sure that you give the file a.html extension and that you save it as type 'All Files', otherwise you will get plain text. Type into the web browsers location bar the absolute location of the directory where you saved the file along with the file name. For example, if you saved the file in C:\windows, type C:\windows\orderedlists.html into the web browsers location bar. Problem 9 HTML practice - displaying paragraphs 1. Type in the following code in your text editor:

11 <p> This is the first sentence of the paragraph. This is the second sentence of the paragraph. This is the third sentence of the paragraph. <b>this paragraph is aligned to the center:</b> <p align="center"> This is the first sentence of the paragraph. This is the second sentence of the paragraph. This is the third sentence of the paragraph. <b>this paragraph is aligned to the right:</b> <p align="right"> This is the first sentence of the paragraph. This is the second sentence of the paragraph. This is the third sentence of the paragraph.

12 2. Save the file as paragraphs.html NOTE: Make sure that you give the file a.html extension and that you save it as type 'All Files', otherwise you will get plain text. Type into the web browsers location bar the absolute location of the directory where you saved the file along with the file name. For example, if you saved the file in C:\windows, type C:\windows\paragraphs.html into the web browsers location bar. Deliverables Upload your zipped file with your answers to Part 2 to the Moodle Assignment #1 Submission folder. You will be graded based on the quality of your answers. 1. Right click on the directory cis1151-assignment2 and you will see a selection for 7zip. 2. Or please see the file 7zip.pdf for instructions on how to 7zip your files. 3. If you have trouble please post a message to the discussion board or send me a message.

Tutorial 1: HTML Tutorial (Windows Version) HTML (Hypertext Markup Language) Basics Objectives

1 Tutorial 1: HTML Tutorial (Windows Version) HTML (Hypertext Markup Language) Basics Objectives In this HTML Tutorial, we will introduce you to the tools used to create, save, view and print a Web page.