HTML 5- Case Study II

 

In your last case study, you created an index.html that contained syllabus and the course project requirements. Your instructor now wants you to create a syllabus web page that includes an image. You will cite the source of the image on a separate bibliography web page. Finally, you will provide links on each page for easy navigation to other pages. Following are the expected web pages of your new assignment:

 

 

 

 

 

Objectives

After successfully completing this case study, you should be able to:

·         Create hyperlinks in a Web page using both relative and absolute pathnames.

·         Create table in a Web page.

·         Add rows and columns in a table.

·         Add caption and summary in the table.

·         Insert image from Internet.

·         Resize the image.

·         Cite the sources of images used in the Web site.

·         Use nav element for navigation

·         View web pages in a browser.

·         Validate Web pages using a Validator tool.

In this case study, we will learn several advanced web page techniques such as hyperlinks and tables. We will start by creating a new file called syllabus.html. We will enhance this file through out the case study. In the end, the collection of these pages will form your new web site.

 

Objective

In this exercise, you will create a new file called syllabus.html.

 

·         Open Notepad++

If the Start menu or Windows desktop include a Notepad++ shortcut icon, you can start the Notepad by simply clicking on the icon. Or, you can search for Notepad++ using the Search box on the Start menu.

 

·         If the Notepad++ Application window is not maximized, click on the Maximize button on the index.html

·          bar of the window.

 

·         Choose the View, Word Wrap command.

 

 

 

·         Type the HTML code as shown in the screen shot. You can also open and edit the index.html file created in HTML case study I for this step.

 

·         Continue in the Notepad++ and type the following code for the body element.

·         Save the file as syllabus.html.

·         Locate the file on your computer and open it in Internet Explorer window.

·         To view your syllabus.html file, choose File, Open command.

·         Click on Browse button and navigate to the appropriate drive.

·         Choose the file syllabus.html, which you saved earlier, and click Open.

·         Click on the OK button.

 

·         Your page will look similar to the following: (figure shown on the right):

 

 

Objective

In this exercise, you will set the background color of the document. The value to the background color attribute specifies what color browser should use in background when displaying the content of your document.

• Open index.html file that you created in case study I. Make it has your name in place of the author’s name, Bill Davis, and his information.
• Edit the CSS as shown below so it includes background-color attribute and its value.

 

 

 

You have assigned beige color as a value to background-color. You could have also used the hexadecimal value (#f5f5dc) of beige color. The content of the body will be displayed in a beige color.

 

NOTE: You must be careful in choosing colors for a web page. You should always use a high contrast such as black background with white text or red background with white text. Black background and blue text (or similar contrasts) makes it difficult to read the text.

 

• Choose File, Save or press Ctrl+S together to save your file.
• Switch to the browser window.
• Refresh the browser by pressing F5 function key on your keyboard or by clicking Refresh icon.

 

The colors can be different on your screen.

 

Tables

A table arranges information in rows and columns. An intersection of a row and a column is called a cell. The syntax of a table containing one column and one row is as follows:

<table>

   <tr>

       <td> … </td>

   </tr>

 </table>

 

The element tr stands for table row. It creates a row for a table. It is accompanied by the td element. The element td is for table data. It adds a column in a row.

 

The figure below contains two columns and one row:

 

 

 

You can have as many tds and trs in a table as you want.

 

By default, tables don’t have borders. The border attribute applies a border to a table. It takes a numerical value for the thickness in pixels of the border. You can also define the color of the border in this attribute. Here is the example of assigning values to table, table header, and table data border in CSS:

<style>

table, th, td {

  border: 1px solid black:

}

</style>

The figure below shows an example of a table with border attribute.

 

The element th stands for table header. It is mainly used for column headings. It is embedded within tr tags. Browsers usually center and bold the contents of th element.

 

The figure below shows an example of a table with th element.

 

Objective

In this exercise, you will include a course schedule in a table format.

·         Edit CSS in your syllabus.html file as shown below. This will include a “Schedule” header and a table in your web page.

 

·         Edit the body of syllabus.html file as given below:

·         Continue in Notepad++ with the following content to complete the schedule table:

·         Save your file.

·         Switch to Internet Explorer and view the changes.

 

 

Images

Images have made Web pages interesting and exciting to browse through.  The img tag is used to insert images in a Web document. It is an empty element and requires src and alt attributes. The syntax of img element is:

 

<img src = “source file” alt = “text alternative of an image” />

 

where source file is the name of the file. The source file name is case sensitive so make sure that you type in the file name exactly as it is saved. The alt attribute is short for “alternative.” The value of alt attribute provides the alternative text of an image. It is useful when an image can not get loaded on a browser. Also, screen readers read the value of alt attribute for visually impaired users. Thus, you must briefly describe the image in the alt attribute. If you don’t want your page to show the alt attribute, exclude text information from the alt value, i.e. keep an empty string for an alt attribute’s value (e.g. alt = “ “).

The figure below shows an example of inserting an image in a web page.

 

 

The following example shows the alternative text when an incorrect file name is entered in the src value.

 

The height and width attributes define the height and width of the image. Your specified height and width will take over the height and width of the actual image. Note that larger images take more time to download than smaller images. The border attribute creates a border around the image. The value of the border can be specified in pixel or percentage.

 

The figure below shows an example of adding border and resizing the height and width of an image for a web page.

 

 

 

Download an image from the Web site

 

Not every image on Web pages is free. In this case study, you will find an image available for free and insert it in syllabus.html page and will cite the source in the bibliography web page. You must get written permission from the webmaster for images that are not available for free before using them for your web site. You can email the webmaster for permission. You should keep the confirmation response till you use the image. You should also give the credit to the creator of an image on your web site.

 

To save an image from a web page, right click on an image that you would like to download and choose Save Picture As command.

 

In a Save Picture dialog box, enter a relevant name and save it as JPEG.

 

The align attribute of an image element floats an image on left or right.  Or top or bottom around an image. This makes new content appear after an image.

 

In the following example, vertical-align attribute aligns text to top and bottom, wrapping around the image. 

Objective

In this exercise, you will include an image related to computer technology in your web page.

·         Open browser window of your choice.

·         Type bing.com in the URL.

·         Type: Computer or any computer related term in the keyword search box.

·         Click on Images to view images related to computers.

·         Click on License, and select Free to modify, share, and use commercially from the drop-down list.

 

 

§  Select an image of your choice from the new display list.

§  Right-click on the image and click on Save image as…

§  In a Save As window, select the folder/directory where syllabus.html file was saved. Select JPEG for the image type and enter computer for the file name. Click on the Save button.

 

§  Edit the syllabus.html file with the highlighted text as shown in the following screen shot. Note that you include image in a display block so formatting such as center could be provided within the block that the image is residing in. The attributes margin-left and margin-right are set to “auto” so the image can be centered.

§  Save your file.

§  Switch to Internet Explorer and view the changes. Your page should now include an image as illustrated below:

 

 

Since the image is not your original work, you must cite the source on its own page or on a separate page. For this case study, you will create a separate web page, biblio.html, and will give credit to the source of your image.

 

Objective

In this exercise, you will create a new html file called biblio.html and cite the source of the clipart used in syllabus.html page.

·         Open a new Notepad.

·         Type content of the file as given in the following screen shot:

·         Save the file as biblio.html in the same directory where all other html files (index.html, syllabus.html) are located.

·         Switch to Internet Explorer.

·         Open biblio.html file and view the page. It should be similar to the following page:

 

Hyperlinks

Hyperlink connects web pages on the Internet. It allows you to navigate through Web pages and sites. The a element, called anchor, is used for hyperlinks. The syntax of hyperlink is:

 

<a href = “URL or the name of the file”> Text to appear on your page </a>

 

The “href” stands for hypertext reference and “a” for anchor. The value of href is the absolute URL such as http://google.com or the file located on your server, such as index.html file.

 

The figure below shows an example of adding external link in a web page.

 

 

If the file exists in the same directory where the referenced file is located, you only need to provide the name of the file. Notice in the attached view that both hyperlinks.html and index.html files are located under one folder called Examples. In this case, references to each other does not require an absolute pathname.

 

 

The figure below shows an example of referencing files within the same directory.

 

 

 

However, if the file does not exist in the current directory, you will specify the path to the file. You can either give the relative pathname or absolute pathname. The relative pathname is relative to the current directory, e.g. ../courses/it100.html, where .. (two dots) represent the parent directory.

 

Objective

 

In this exercise, you will create a link from index.html file to syllabus.html.

§  Open index.html file that you created in HTML case study I. Edit the body of index.html file as highlighted in the following screen shot:

·         Note that you have edited syllabus bullet and made it a link to Syllabus.html file.

·         Save your file.

·         Switch to Internet Explorer and view the changes. When you click on Syllabus in index.html file, it opens Syllabus.html in a browser window.

 

Navigation Element

Your web site must provide a way to navigate to other web pages. Browsers provide back and forward buttons to go backwards or forward in your search. However, it is not an optimal way to browse through any web site. You should always use <nav> element to include your navigational links.

 

Mobile devices, gadgets, and programs use nav element to determine whether the rendering of navigation is needed for accessibility reasons.

 

 

 

You can add style to nav by changing its attributes such as background-color for the color of the background. For border, the value is given in px which specifies the thickness of the border. You can change the background color of the border by giving the color value to the border attribute. The margin attribute adds how much space to add around elements. The width specifies how much width the nav could take in percentage of the browser window or in pixels.

 

 

 Objective

In this exercise, you will create a navigation menu in both syllabus and bibliography web pages.

§  Open syllabus.html file.

§  Edit syllabus.html file as highlighted in the following screen shot:

 

§  Save your file.

§  Switch to Internet Explorer and view the changes. Your page should now include a navigational table as illustrated below:

 

• Copy the navigation table html code and paste it in the biblio.html page as shown in the following screenshot:

 

• Save your file.
• Switch to Internet Explorer and view the changes. Your page should now include a navigational table as illustrated below:

 

• Note that your web pages biblio.html and syllabus.html have background-color: beige. However, the background color of Syllabus page is none (white). For the design consistency of your website, open syllabus.html web page in Notepad++.
• Edit the document as given below in order to change the background color to beige:

• Validate syllabus.html file by visiting https://html5.validator.nu/ page.
• Click on the Validate by File Upload tab.

 

 

• Click on the Browse button and locate the syllabus.html file.
• Click on Validate button on the Markup Validation Service web page.

• If you receive any error, edit the file in Notepad++.
• Upload the syllabus.html document again and revalidate it.
• If you get similar results as shown below, your file is a valid HTML5. 

• Validate biblio.html file as you validated syllabus.
• Validate index.html file as you validated syllabus and biblio files.

 

 

Conclusion

 

You have just completed the HTML – Case Study II. In the case study, you were introduced to many advanced techniques. To reinforce your understanding of these techniques, it is recommended that you read and work through it once again.