HTML/CSS
COHORT:
GIGABYTES
Structuring Web Pages with HTML
Aim: The aim of this module is to teach students how to structure web pages effectively using
HTML, including understanding document structure, creating web content, and utilizing
semantic HTML tags.
2.1 Document Structure
2.2 Creating Web Content
2.3 Semantic HTML Tags
2.11 Structuring Web Pages Properly
The head & body
elements separate the
HTML document into
two sections
2.12 Basic HTML Elements – The Div Tag
The <div> tag is short for division, and it defines a section in an HTML document.
The <div> tag is used within the body element as a container for other HTML elements which is
then styled with CSS.
The <div> tag is styled using the class or id attribute.
2.13 Basic HTML Elements – The Class Attribute
The class attribute – It is used to specify a class for an HTML element. It categorizes and identifies
specific elements within the HTML document. To create a class, write a period (.) character,
followed by a class name. Then, define the CSS properties as normal.
2.13 Basic HTML Elements – The Class Attribute
HTML elements can belong to more than one class.
Syntax: <div class = “className1 classname2”>
Example: <p class = “city main”> Roseau </p>
HTML elements can share the same class name.
Example: <h5 class = “city”> Bridgetown </h5>
<p class = “city main”> Roseau </p>
<h3 class = “city”> Kingstown </h3>
2.14 Basic HTML Elements – The Id Attribute
The id attribute – It is used to specify a unique id for an HTML element. More than one element
cannot have the same id in an HTML document. To create an id, write a hash (#) character,
followed by an Id name. Then, define the CSS properties as normal.
2.21 HTML Lists
Web developers group related items in lists.
There are three types of lists in HTML:
1. An unordered list
2. An ordered list
3. A description list
2.21 HTML Lists – Unordered List
The unordered list is created with the <ul> tag. Each list item starts with the <li> tag.
There are three unordered list bullet types: disc, circle and square. Each item will be marked with
a disc by default. To change the bullet type, use the type attribute.
2.21 HTML Lists – Ordered List
The ordered list is created with the <ol> tag. Each list item starts with the <li> tag.
Each item will be marked with a number beginning with one by default. To change the start value
to a different number, use the start attribute.
2.21 HTML Lists – Description List
The description list is created with the <dl> tag. Each term starts with the <dt> tag and each
description starts with the <dd> tag.
2.22 Basic HTML Tags – The Img Tag
The <img> tag is used to embed an image in a web page. The <img> tag is empty, meaning it has
no closing tag. It contains attributes only.
Syntax: <img src= “url” alt = “alternateText”>
Example: <img src = “img_girl.jpg alt = “A happy girl”>
2.22 Basic HTML Tags – The Img Tag
The <img> tag requires the alt and src attributes.
The alt attribute specifies alternate text for an image. The value of the alt will be displayed if the
user cannot view the image.
The src attribute specifies the file path to the image.
2.22 Basic HTML Tags – The Img Tag
A file path describes the location of a file in a website’s folder structure. There are two types of file
paths:
1. Absolute File Paths – the full URL to a file.
E.g. <img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">
2. Relative File Paths – the location of the file relative to the current web page.
E.g. <img src="/images/picture.jpg" alt="Mountain">
2.22 Basic HTML Tags – The Img Tag
2.22 Basic HTML Tags – The Img Tag
Three additional attributes can also be used with the <img> tag to specify the width and height of
an image:
1. style
<img src = “img_girl.jpg” alt = “A happy girl” style = “width:500px;height:600px;”>
2. width & height
<img src = “img_girl.jpg” alt = “A happy girl” width = “500” height = “600”>
2.22 Basic HTML Tags – The Img Tag
The CSS float property is used to float the image to the left or right of some text.
2.22 Basic HTML Elements – Tables
Tables arrange data into rows and columns. Tables are created using the <table> element
An HTML table consists of table cells inside rows and columns. Each table cell is defined by a <td>
element. Everything between this element is the content of the table cell.
Replace the <td> element with the <th> element to create a header row. By default, the text in this
element is bold and centered.
Each table row is defined by a <tr> element.
2.22 Basic HTML Elements – Tables
Congratulations on Completing
HTML/CSS Module 2
COHORT:
GIGABYTES