simple website with html
khaleel96
Assignment-Eight7.pdf
EECS1520 Assignment #8: Web Development This assignment consists of creating a simple web page. The result will be one .html file with the
following requirements. Save your web page as a .html file and submit it through moodle.
Requirements a) Add your name as heading (H1)
b) Make the heading italic and change its font color to red
c) Add two paragraphs of text about yourself
d) Add a secondary heading (H2), change the font color of this heading to blue
e) Add a short story about best foods that you had including where you had them
f) Make the 2nd word in the paragraph bold
g) Add title “My First Webpage” to the webpage
h) Change the background color
i) Add a line break after the food paragraph
j) Add a couple of images about foods you’ve liked
Overview: This assignment is to learn how to create a simple webpage. The purpose is to familiarize you with some
basic web technologies and terms.
Step-by-step instructions: A .html file can be created using any plain text editor, e.g. notepad, notepad++, atom. Note that you
should NOT use MS Word to create .html files because it injects additional mark-up to the file.
Open up your text editor of choice and open the example file. The example file consists of the basic
structure for a webpage. This includes 4 things: The document type <!DOCTYPE html>, the <html> tag,
the <head> tag, and the <body> tag as follows. A good resource for the introduction can be found here.
- The DOCTYPE tells the web browser what type of document it is currently trying to parse.
- The <html> tag should be the first tag on the html page and the closing </html> tag should be
the last thing on the page. This tag tells the webpage where the content is located.
- The <head> tag should be the next tag you see. Here you insert all the header information such
as the title and any styling you wish to add.
- The <body> tag consists of that actual body of the webpage. This means everything you see on
the page lives here.
- IMPORTANT: Always remember to close any tag you open. When you type in an opening tag e.g.
<p>, always remember to close it right after with a closing tag </p>. As you can see, to close a
tag, all you need to do is write the same tag over with a forward slash in front.
Previewing your HTML file is very easy. Go into your choice of browser and either drag/drop the file into
the browser or double-click the file from its containing directory. This will automatically render the file
into a webpage for you. Now if you make and save changes into the file using your text editor and
refresh the page on the browser, it’ll automatically render with the new changes.
Adding a title To add a title to your page insert a <title></title> tag inside the <head> tag at the top. Type ‘First
Webpage’ inside the <title></title> tag.
This will add a title to your page. The title will be visible in the tab of your browser.
Adding a heading Just like in MS Word, html has different heading types. For a closer look, please read here. Inside the
<body> tag add a level 1 heading tag <h1></h1>. Inside this tag type in your name.
Add a paragraph To create paragraphs, we need to use the <p></p> tag. Insert this tag after the heading tag. Write two
paragraphs of information (like biography) about yourself. Each paragraph should be surrounded by a
pair of <p> and </p>.
Change color of heading You can also change the color of the text. To do this you need to use Styling. There are multiple ways of
styling html, but here we will learn how to insert styles into a specific tag. Go to the <h1> tag that you
created before. Inside this tag, after the h1, type in: style="color:red;". This will change the color of this
specific tag to be red.
To make the text italic you need to use a <i></i> tag. So, inside the <h1> tag, insert a set of <i> tags so
that it goes around the text in the header. Only the text inside the <i> tag will be italic. To learn more
about styles read here and for colors read here.
Adding a second header and paragraph Now add a second header tag <h2></h2> and change the color to blue. Add the text: My Favourite
Foods. After this header, add another paragraph of text about the foods you have liked the most and
where you had them. Make only the second word of this paragraph bold.
Adding a line break You perhaps have noticed that adding a <p> tag will automatically add line breaks in-between your
paragraphs. If you want to add more space, you can use a <br/> tag to add a line break. Add a line break
after the paragraph of text that is about foods you’ve liked.
Add an image Adding an image into the text is also done by tags. An <img/> tag takes an image from your file system
or from the internet by using its URL and places it inside your webpage. Now insert an <img/> tag after
the line break and insert the following link into it:
src = “https://www.w3schools.com/images/w3schools_green.jpg”
Make sure this is inserted before the slash. This will render the image on the page. To learn more about
images go here. Add at least two more images related to foods you’ve liked the most.
Adding a background color To add a background color to the page, add a <style></style> tag into your <head> tag at the top. Inside
the style tag, type in: body {background-color:powderblue;}. To learn more about colors go here.
Example:
