HA2 HA4

archive2.zip

Home >Computer Science homework help >HA2 HA4

HTML5 Hands-On Practice 3 Instructions(2).doc

CS 150 The best way to learn how to code Web pages is by doing it! HTML5 HA 3

CS 150 HTML5 Hands- On Practice Assignment ( HA ) 3 Instructions

Purpose : To create a Web site with 3 Web pages with the HTML5 anchor elements / hyperlinks / e-mail hyperlinks .

Prerequisite : to know the HTML5 elements covered in the previous HA 1 (a head section and a body section with heading elements, break tag, unordered list, and ordered list) and HA 2 (structural elements and special characters)

Follow-up 1 : The knowledge / skills from HA 1, HA 2, HA 3 you will need for the “Website Case Study” project, which will be due later in classes (before the end of this semester)

Step 1.

1.A. Create a folder with the name HA3- Trillium Media on your flash drive.

1.B. Copy in that folder the file structure2.html, which is the result product of the HA 2, which you finished in the last class.

FYI: Each Web site (several Web pages /each in its own .html file/) is placed in its own folder by Web designers . So do you —you put your HA web design in the folder with the name HA3-Trillium Media.

Step 2.

2.A. Launch a text editor (NotePad).

2.B. In NotePad, select File -> Open to open the file located at HA3- Trillium Media/structure2.html, which you created and saved in HA 2 in the last class.

2.C. Save the file as index.html.

FYI: It is common practice for the Web designers to use the file name index.html for the home page (the topmost page) of a Web site.

Step 3.

3.A. Edit the HTML5 code in the index.html to add 3 navigation hyperlinks. Edit the HTML5 nav element to configure 3 hyperlinks

· The text “Home” will hyperlink (link) to index.html file

· The text “Services” will hyperlink hyperlink (link) to services.html file

· The text “Contact” will hyperlink hyperlink (link) to contact.html file

Modify the code within the nav element as follows:

<nav>

<a href=services.html>Services</a>  

<a href=contact.html>Contact</a>  

</b>

</nav>

3.B. Save this file index.html.

3.C. Add in between the <> of the open body HTML tag, <body>, the attribute for a background color, bgcolor, as follows (you may choose some other color but it should be bright enough so the foreground text of the Web page can be read):

3.D Add beneath the h1 heading (<h1> Trillium Media Design </h1>) the following tag <HR> for a horizontal line and its 3 attributes, color, size, width as follows:

3.E. Resave this file index.html.

3.F. Test your page in a browser (which means open it in the browser, e.g., in Google Chrome, to display its content).

Create the Services Page: i.e., create the services.html file, starting at step 4.

FYI: It is common practice for the Web designers to create a new Web page based on an existing page. You will use the file name index.html as a starting point for the new services Web page.

Step 4.

4.A. Open the index.html file in a text editor (the NotePad).

4.B. Save the file as services.html in the HA3- Trillium Media folder. Edit the code as follows (steps 4.C to 4.F):

4.C. Modify the title of the Web page by changing the text between <title> and </title> tags to Trillium Media Design - Services.

4.D. Change the background color, bgcolor, of the <body> open HTML tag, as follows (you may choose some other color but it should be bright enough so the foreground text of the Web page can be read):

4.E. In order to create a consistent header, navigation, and footer for all the Web pages in the Web site, do NOT change the code within the header, nav, and footer HTML5 elements.

4.F. Edit the HTML5 code in the services.html to change the HTML5 main element. Firstly, delete the code and text between the open and close main tags (i.e., between <main> and </main> tags).

4.G. Secondly, instead of the deleted code and text in step 4.E. above, add the heading 2 and description list between the main tags as follows:

<h2>Our Services Meet Your Business Needs</h2>

<dl>

<dt><strong>Website Design</strong></dt>

<dd>Whether your needs are large or small, Trillium can get you on the Web!</dd>

<dt><strong>E-Commerce Solutions</strong></dt>

<dd>Trillium offers quick entry into the e-commerce market place.</dd>

<dt><strong>Search Engine Optimization</strong></dt>

<dd>Most people find new sites using search engines. Trillium can get your Web site noticed.</dd>

</dl>

4.H. Resave the file with the same name (services.html)

4.I. Test your page in a browser.

Create the Contact Page: i.e., create the contact.html file, starting at step 5.

Step 5.

5.A. Open the index.html file in a text editor (the NotePad) as a starting point for the new Contact page.

5.B. Save the file as contact.html in the HA3- Trillium Media folder. Edit the code as follows (steps 5.C. to 5.F):

5.C. Modify the title of the Web page by changing the text between <title> and </title> tags to Trillium Media Design - Contact.

5.D. Change the background color, bgcolor, of the <body> open HTML tag, as follows (you may choose some other color but it should be bright enough so the foreground text of the Web page can be read):

5.E. In order to create a consistent header, navigation, and footer for all the Web pages in the Web site, do not change the code within the header, nav, and footer HTML5 elements.

5.F. Edit the HTML5 code in the contact.html to change the HTML5 main element. Firstly, delete the code and text between the open and close main tags (i.e., between <main> and </main> tags).

5.G. Secondly, instead of the deleted code and text in step 5.E. above, add the heading 2 and unordered list between the main tags as follows:

<h2>Contact Trillium Media Design Today</h2>

<ul>

<li>E-mail: [email protected]</li>

<li>phone: 555-555-5555</li>

</ul>

5.H. Resave the file with the same name (contact.html)

5.I. Test your page in a browser.

5.J. Test your page by clicking each link.

· When you click the “Home” hyperlink, the index.html Web page should display.

· When you click the “Services” hyperlink, the services.html page should display.

· When you click the “Contact” hyperlink, the contact.html page should display.

Step 6.

6.A. Modify the E-mail in the contact.html file to configure an e-mail link. Configure the email address between the ul tags in the main HTML element as an e-mail hyperlink as follows:

<li>E-mail:

<a href=mailto:[email protected]> [email protected]</a>

</li>

6.B. Resave the file with the same name (contact.html)

6.C. Test your page in a browser.

6.D After you finish this assignment, upload the 3 files index.html, services.html, and contact.html in Blackboard (under the link of this assignment) for grading.

Enjoy!

PAGE

HTML5 Hands-On Practice 21 Instructions.doc

CS 150 The best way to learn how to code Web pages is by doing it! HTML5 HA 2

CS 150 HTML5 Hands- On Practice Assignment ( HA ) 2 Instructions

Purpose : To create Web pages with the HTML5 structural elements : header, nav, main, and footer, as well as HTML5 special characters .

Prerequisite : to know the HTML5 elements covered in the previous HA 1 (a head section and a body section with heading elements, break tag, unordered list, and ordered list)

Follow-up 1 : In the next HA 3, you must use the file structure2.html file, which is the result product of this HA 2. Hence, you must save it and have it available for the next class (for doing the HA 3)

Follow-up 2 : All the knowledge from HA 1, HA 2, HA 3 you will need for the “Website Case Study” project which will be due later in class (before the end of this semester)

1.A. Download the file template.html from Blackboard under this Assignment link.

1.B. Launch a text editor (NotePad).

1.C. In NotePad, select File > Open to open the file template.html.

1.D. Once you open the file template.html in NotePad, edit the HTML5 code and add a new code to change the Web page based on it.

Follow the following steps: starting at step 2.

2.A. In the file template.html, change the title between the title tags (i.e., between <title> and </title> tags) to become Trillium Media Design.

2.B. Save your file with the following new name structure2.html in the folder named CS150-MyHTML on your flash drive, which you created as part of HA 1. (If you did it NOT, create CS150-MyHTML now, or save it in a folder of your choice)

Now, further modify structure2.html file. Position your cursor in the body section. Create the header element with the text Trillium Media Design contained in Level 1 Heading (i.e., between <h1> and </h1> tags) as shown below:

<h1> Trillium Media Design </h1>

</header>

4.A. Create a nav element that contains text which will indicate the main navigation for the website.

4.B. Make this navigation text bold (using the <b> and </b> tags) and add extra blank space using the special character ( ) as follows:

<nav>

<b> Home   Services   Contact </b>

</nav>

Next, create a main element that contains the h2 and paragraph elements (the text between <p> and </p>) [NOTE: ’ is used to code the special character ‘ (apostrophe) in HTML5]. The HTML5 code of this is shown below, i.e., you may use it directly):

<main>

<h2>New Media and Web Design</h2>

<p>Trillium Media Design will bring for company’s Web presence to the next level. We offer a comprehensive range of services.</p>

<h2>Meeting Your Business Needs</h2>

<p>Our expert designers are creative and eager to work with you.</p>

</main>

Next, create the footer element to contain a copyright notice displayed in small font size (use the small HTML5 phrase element) and italic font (use the <i> phrase element). Be careful to properly nest the elements. The element is shown below:

</footer>

7.A. Resave the file with the same name (structure2.html)

7.B. Test your page in a browser (which, again, means open it the browser; e.g., in IE—choose from the top menu File > Open > Browse in order to open the structure2.html).

7.B. Alternatively, you can open the html file you created, structure2.html, by double clicking on its name; after that the default browser will open it and show it as a Web page.

7.C After that upload and submit for grading the file structure2.html in Blackboard (under the link of this assignment) for grading.

PAGE