Scribd
Upload
13 views

HTML-CSS Lab F24

Uploaded by

alexsandra sylvestre
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

HTML-CSS Lab F24

Uploaded by

alexsandra sylvestre
Copyright
© © All Rights Reserved
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