Scribd
Upload
18 views

HTML-CSS Lab F24

Uploaded by

alexsandra sylvestre
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views

HTML-CSS Lab F24

Uploaded by

alexsandra sylvestre
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

In-class activity:

Create a basic Webpage with html


1. Open File Explorer and create a folder called ‘my-website’.
2. Open a text editor: Notepad, Notepad++, or bbEdit (Mac).
3. Create a new HTML file by clicking File >> Save As. File type
should be selected as ‘HyperText Markup Language (*.html,
*.htm)’
4. Save this file to your ‘my-website’ folder, with the name
“home.html”.

1
In-class activity:
Create a basic Webpage with html
5. Set up the structural tags on your page. (Always close your tags after opening
them so you don’t forget to close them!):
a) DOCTYPE declaration:
<!DOCTYPE html>
b) Opening <html> tag. Only the DOCTYPE declaration should be above.
Closing </html> should be the last thing on your page. Nothing should be below
the </html> tag.
c) <head>…</head> tag (The elements included inside this tag do not appear on
the page. They tell the browser information about your page.):
Add the following elements inside your <head></head> tag:
<meta charset=“utf-8”>
<title>INSERT YOUR TITLE HERE</title>
d) <body>…</body> tag (All elements included inside this tag will appear on your
page.)

2
In-class activity:
Create a basic Webpage with html
6. Using the lecture notes as guide, create a webpage containing
content of your choice. The webpage must contain the
following elements. All elements should be included between
<body> and </body> :
a) At least 2 headings (<h1>, <h2>)
b) At least 3 paragraphs (<p>)
c) An ordered (<ol>) as well as an unordered (<ul>) list

3
In-class activity:
Create a basic Webpage with html
d) At least 1 table (<table>)
(the number of columns and rows, and the content must be
different from that of the examples in the lecture notes).
e) At least 1 image of your choice. Image file should be included in your
‘my-website’ folder:
<img src=“IMAGE FILENAME HERE.jpg” width=“SIZE” height=“SIZE”
alt=“DESCRIPTION OF IMAGE GOES HERE”>
f) At least 2 hyperlinks that link to websites of your choice; when the
links are clicked, they should open in a new tab in your browser.
<a href=“https://URL-OF-YOUR-LINK-HERE.com”
target=“_blank”>TEXT TO BE HYPERLINKED GOES HERE</a>

4
In-class activity:
Create a basic Webpage with html
7. To view the web page, use file explorer to go to the folder
containing your HTML file, then double-click on the filename to
open in a browser.
To edit your file, right-click on the file name and ‘edit with
Notepad++’ (or the text editor of your choice).
8. Upload your ‘my-website’ folder to OneDrive.

5
In-class assignment:
Create a CSS page and apply it to your html code

1. Open Notepad++ text editor and create a new file by clicking


File >> New.
2. Save this file to your ‘my-website’ folder (the same folder as
your home.html file created last week. Name the file “style.css”.

6
In-class assignment:
3. Your lab8.css file should make the following style elements apply:
a) Change the color of h1 to #044882, and have the header align center.
b) Change the background to #f3f2f4.
c) The links should be styled such that when the mouse hovers over
the link, the link changes colour, to a colour of your choice.
d) Change the ordered lists to use lower case letters (instead of
numbers), using list-style-type:

7
In-class assignment:
4. Add the following line of code to the <head></head> tag of your
lab7.html document.
<link rel=“stylesheet” type="text/css" href="lab8.css" />
5. Create a .zip folder of your ‘my-website’ file.
The folder should contain ONLY the following files:
- home.html
- style.css
- The image file you used for home.html
6. Submit your .zip folder to Moodle under Week 8 Lab (HTML-CSS).

You might also like