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.

Save your time - order a paper!

Get your paper written from scratch within the tight deadline. Our service is a reliable solution to all your troubles. Place an order on any task and we will take care of it. You won’t have to worry about the quality and deadlines

Order Paper Now

 

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>