WEB DEVELOPMENT 1
Learning Groups:
Lecturer:
week 3 learning topics
3.0 HTML table
3.1 HTML blocks
3.2 HTML id and classes
3.3 HTML layout
3.0 HTML tables
A table is a grid of rows and columns, the intersections of which form cells. Each
cell is a distinct area, into which you can place text, graphics, or even other tables.
HTML handles tables very well, and you can use them to organize and present complex
data to your site visitors. For example, you could display your store’s inventory in a
table.
Basic Table Structure
Tables are defined with the <table> tag.
Tables are divided into table rows with the <tr> tag.
Table rows are divided into table data with the <td> tag.
A table row can also be divided into table headings with the <th> tag.
1|P a ge
Html table Spanning column
Sometimes you may need the entries in a table to
stretch across more than one column.
The colspan attribute can be used on
a <th> or <td>element and indicates
how many columns that cell should
run across (merging cells)
In the example on the right you can
see a timetable with five columns;
the first column contains the
heading for that row (the day), the
remaining four represent one-hour
time slots.
If you look at the table cell that
contains the words 'Geography' you
will see that the value of the
colspan attribute is 2, which
indicates that the cell should run
across two columns.
In the third row, 'Gym' runs across
three columns.
Html table Spanning rows You may also need entries in a
table to stretch down across more
than one row.
The row span attribute can
be used on a<td> or<td>
element to indicate how many
rows a cell should span down
the table.
In the example on the left
you can see that ABC Tv is
showing a movie from 6pm -
8pm, whereas the BBC and CNN
channels are both showing
two programs during this
time period (each of which
lasts one hour).
If you look at the last
element, it only contains
three elements even though
there are four columns in
the result below. This is
because the movie in the<tr>
2|P a ge
Applying Borders by Using Attributes
By default, a table has no border. To add a one-pixel border around both the table as
a whole and around each individual cell, you can add this attribute to the <table> tag
<table border =”1”>
As shown in the following examples, increasing the number increases the width of the
outer border around the whole table, but not the inner borders:
Difference between Border
and padding
Border –Border is Space outside
padding. has no space inside cell?
Padding- space inside the border
Changing Cell Padding, Spacing, and Alignment
Cell padding, cell spacing, and cell alignment are three different ways you can control
how cell content appears on a page.
Cell Padding -refers to the amount of space between an
element’s content and its outer edge. For a table cell,
padding refers to space between the cell border and the
text or graphic within it.
padding represented in the shaded
region space between border and the text.
Cell Spacing – refers to the amount of space between the
outside of an element and the adjacent element. For a table
cell, spacing refers to the space between the border of one
cell and the border of the adjacent cell.
Alignment -refers to the placement of the content within its
allotted area, either vertically or horizontally. For
normal paragraphs (not in a table), alignment refers only
to horizontal placement between the margins. For a table
3|P a ge
cell, however, there are separate settings for vertical and
horizontal alignment.
Styling HTML table even and odd cell
Output
What does nth-child mean?
It means select the
siblings for styling
alternate table row <tr>,
Table alter tr: nth-
child(odd) but only the
odd number among all
siblings, from the
perspective of their
parent element.
4|P a ge
3.1 HTML blocks
HTML Block and Inline Elements
Every HTML element has a default display value depending on what type of element it
is. The default display value for most elements is block or inline.
A block-level Elements using <div> tag
A block-level element always starts on a new line and takes up the full
width available (stretches out to the left and right as far as it can).
The <div> element is a block-level element.
Examples of block-level elements:
<div>
<h1> - <h6>
<p>
<form>
The <div> element has no required attributes, but style and class are common.
When used together with CSS, the <div> element can be used to style blocks of content:
5|P a ge
Inline Elements using <span> tag
An inline element does not start on a new line and only takes up as much width as
necessary.
This is an inline <span> element inside a paragraph.
Examples of inline elements:
<span>
<a>
<img>
The <span> element is an inline element that is often used as a container for some
text.
HTML Grouping Summary Tags
Tag Description
<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)
6|P a ge
3.2 HTML Id and classes
HTML Id Attribute NB: * very important subtopic to learn and
understand in web development
The id attribute is used to specify the unique ID for an element of the HTML
document. It allocates the unique identifier which is used by the CSS and
the JavaScript for performing certain tasks.
Note: In the Cascading Style sheet (CSS), we can easily select an element with the
specific id by using the # symbol followed by id.
Note: JavaScript can access an element with the given ID by using the
getElementById () method.
Syntax: <tag id="value">
Example illustrating Html Id output
Points to remember
When using id in CSS (cascading
style sheet)
ID Its detonated with # symbol
Two different color defining
cars and bikes represents the
uniqueness of id
7|P a ge
HTML Classes
Class Attribute in HTML
The HTML class attribute is used to specify a single or multiple class names for an
HTML element.
A class attribute can be defined within <style> tag or in separate file
using the (.) character.
In an HTML document, we can use the same class attribute name with
different elements.
Applying class attribute using the
style tag at Html head section and
using (.) character to represent
class attribute.
Example 1 using class attribute. (same color to all headings using class (.)
character, to select multiple headings at once you control all using Class Element)
When should I use class or ID? – id is used for single elements that appear on
the page for only once (e.g. header, footer, menu etc).
Whereas class is used for single or multiple elements that appear on the page for once
or more than once (e.g paragraph, links, buttons, input boxes)
8|P a ge
Another Example with different class name
Let's use a class name "Fruit" with CSS to style all elements.
Class Attribute in JavaScript
You can use JavaScript access elements with a specified class name by using the
getElementsByClassName () method
output
Using JavaScript to access HTML
document we use a method.
GetElementByclassName- <h2
class=” fruit “mango</h2>
declared in Html document to access
that in java script we use method called
GetElementByclassName to select Html
class element and its value “fruits”
Var x – variable NB: in JavaScript data
type is not declared.
9|P a ge
3.3 Html layout
Creating a website layout is the activity of positioning the various elements
that make a web page in a well-structured manner and give appealing
look to the website
Websites often display content in multiple columns (like a magazine or newspaper).
Most modern websites and blogs consist of a header, footer, navbar, perhaps
another sidebar, and let's not forget, the main content area. Something like this:
<header> - Defines a header for a document or a section
<nav> - Defines a container for navigation links
<section> - Defines a section in a document
<article> - Defines an independent self-contained article
<aside/Ads> - Defines content aside from the content (like
a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details
<summary> - Defines a heading for the <details> element
Different methods of creating HTML layout
HTML Table Based Layout
HTML Div Based Layout
Using the HTML5 Structural Elements
10 | P a g e
Warning: Avoid tables and inline styles for creating layouts. Layouts created using
tables often rendered very slowly. Tables should only be used to display tabular data.
HTML Div Based Layout
Using the <div> elements is the most common method of creating layouts in HTML.
The <div> (stands for division) element is used for marking out a block
of content, or set of other elements inside an HTML document. It
can contain further other div elements if required.
11 | P a g e
Technical code terms explanations
. header { point to note value px and unit10 i.e px10
Should not be separated.
padding: 10px 20px; {10px represents height 20px width}
background: #acb3b9;
12 | P a g e
<div class="container"> container is the overall layout defined
for each screen size HTML elements
like:<div><article><section><Form> and [Link] short box layout
that includes from opening tag to closing tag.
We have two container classes
.container class – provides a responsive fixed width container.
.container-fluid class –provides full width of the view point.
<div class="wrapper clearfix"> term wrapper we give it a class,
and that class is responsible for encapsulating (bidding)all
visual elements on the page.
Clearfix – is a way for an element to clear its child
automatically without any additional markup.
Definition 2: - Quickly and easily clear floated content within
a container by adding clear fix utility.
Assignment one practical Question
Due to be submitted on week 7 total marks (10 marks)
1. A TRIBUTE PAGE
Write a tribute of someone you admire and publish as a webpage. This project will
involve working with adding image, nav, links, lists and paragraphs. This project will
require knowledge of HTML to create. However, you can use a bit of CSS to make the
project look better. Use HTML page layout format.
13 | P a g e