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>
