Computer Science homework help

Web Page Project Instructions

 

Included in this zip file are two documents: this one that you are reading right now and a picture of some flowers. See page 2 of this document for some specific hints on creating all the components needed to  complete this web page project.

 

Use Windows Notepad, Mac Textedit, or Chromebook Text (see the paragraph below on Chromebook for how to get started with it). Pay attention to the Save time! note on page 2.

 

Create a single web page with the following features (see Sample HTML doc on page 2 below):

  • Four single lines of text in 4 different heading styles (choose from <h1> to <h6> styles). Make each heading style a different color. Example: <h3 style=”color:blue”>
  • Two paragraphs of text (marked by <p> and </p> tags). Use two different colors (other than black) for the text in the two paragraphs. This will require a ‘style’ attribute. Example:
    <p style=”color:green”>
  • Boldface one single word in one of the paragraphs (<b> and </b> tags needed).
  • Italicize one single word in See one of the paragraphs (<i> and </i> tags needed).
  • An unordered list (bulleted list) of at least 3 items <ul> <li> </li> … </ul> tags needed
  • An ordered list (numbered list) of at least 3 items <ol> <li> </li> … </ol> tags needed
  • A JPG image <img src=”name of image file goes here between the quotes” alt=”alternate text goes here”> — note: <img> does not have a closing tag
  • Add width and height attributes to the image (after alt text insert: style=”width:NNNpx;height:NNNpx;” inside of <img> tag, where NNN are nums of your choosing
    Example: <img src=”flowers.jpg” alt=”Flowers, Longwood Gardens” style=”width:150px;height:100px;”>
  • A working link to an external web site: <a href=”exact url of web site goes here between the quotes”> Link text goes here </a>

 

Getting the file ready to submit to the Moodle drop box

 

Windows. Save the Notepad document as an HTML file.  Click File > Save As and change the ‘Save as type’ setting from ‘txt’ (its default) to ‘All files’ and then manually add ‘html’ as the file extension.  So, for example, if you were going to save the file as ‘SomeTags’, you would actually type: ‘SomeTags.html’. Submit the HTML file to the drop box in the normal way.

 

Mac. TextEdit on a Mac will automatically add an ‘.rtf’ extension to whatever file name you give your web page. So if you save ‘SomeTags.html’ to the Mac Desktop, it will show up there as ‘SomeTags.html.rtf’. You will have to manually remove the ‘.rtf’ extension afterwards so that only the ‘.html’ extension remains. Submit the HTML file to the drop box in the normal way.

 

Chromebook. As soon as you open Text (before you even start typing) go to Save As and name your file: ‘SomeTags.html’. Then start typing your actual HTML code, hitting Save every once in a while. To check your work, click Files, right-click SomeTags.html, and choose Open > View. When it’s done submit the HTML file to the drop box in the normal way.

 

Fun note for Chromebook users.  There’s also this link to download a simple dedicated web page editor named Caret created specifically to run on Chromebooks:

https://www.google.com/search?q=creating+basic+html+files+with+chromebook&rlz=1C1CHZL_enUS748US748&oq=creating+basic+html+files+with+chromebook&aqs=chrome..69i57j33.10836j0j7&sourceid=chrome&ie=UTF-8#kpvalbx=_Wj2gX72OH-bB_QaG7q74Dg12

 

 

 

Sample HTML doc with hints on how to create the required features needed for this assignment

Black = actual HTML code; can be used as is.

Blue = comments (not executed by the browser).

Brown = sample text; replace it with your own text.

Save time! Start by copying/pasting all the code below into Notepad (Win), TextEdit (Mac) or Text (Chromebook)

 

<html>

<head>

<title> Text for the Page Title goes here </title>

</head>

<body>

Unformatted text can go here.

<h1 style=”color:blue”> Heading style 1 text goes here </h1>

<!–        Your second heading styles goes here with its own color

Your third heading styles goes here with its own color

Your fourth heading styles goes here with its own color                                                 –>

<p style=”color:green”> Your paragraph text goes here. Make sure to type enough

text inside this paragraph tag so that it wraps around when the web page

is rendered in your browser. It might take 2-3 lines of typing to

accomplish this.

</p>

<!–        You need to create a second paragraph. Again, type enough text so that it will

Wrap around to at least two lines on the web page.                                                        –>

<!–        Somewhere inside the first paragraph surround one of the words with

<b> and </b> tags to boldface that word.  Somewhere inside the second

paragraph surround one of the words with <i> and </i> tags

to italicize that word.                                                                                                                      –>

<!–        Your unordered (bulleted) list goes in this section,

It begins and ends with a <ul> and </ul> pair of tags and with <li> … </li> pairs

of tags in between for each of the items in the list.

It will look something like this:                                                                                                   –>

<ul>

<li> first bulleted item goes here </li>

<li> second bulleted item goes here </li>

<li> third bulleted item goes here </li>

<li> and so on … </li>

</ul>

<!–        Next is your ordered (numbered) list. The format is exactly the same as what

What you did for the unordered (bulleted) list above except that you replace

the <ul> and </ul> tags with <ol> and </ol> tags.                                                              –>

<!–        Next is your image. The two lines shown below in black will work EXACTLY as

shown IF you have a pic named ‘flowers.jpg’ stored in the same folder as this

HTML file. Feel free to use your own pic instead.                                                              –>

<img src=”flowers.jpg” alt=”Flowers, Longwood Gardens”

style=”width:150px;height:100px; “><br>

<!—Finally, include a link. Replace the brown-colored text with an actual link and

link text that describes where the link will take you to.                                                   –>

<a href=”exact url of web site goes here between the quotes”> Link text goes here </a>

</body>

</html>

Solved:

15% off for this assignment.

Our Prices Start at $11.99. As Our First Client, Use Coupon Code GET15 to claim 15% Discount This Month!!

Why US?

100% Confidentiality
100% Timely Delivery
100% Original Writing

100% Money Back

Cheap Essay Writing

Do my Assignment

Order custom essay

Sample Essays

Custom term paper

Write My Research Paper

Affiliate program

Custom essay

Research paper

Write my essay

Write my paper

Essay writers

Become a Freelance Writer

Contact us

Glossary

Sitemap

Terms and conditions

Privacy policy

Proficient Concepts  is a professional writing service that provides original papers. Our products include academic papers of varying complexity and other personalized services, along with research materials for assistance purposes only. All the materials from our website should be used with proper references.