HTML TAGS

Table
Code What it does Options
Caption <caption> hello </caption> allows you to display a
(comes after the table tag) caption center aligned on
top of the table

Table <table border=“1”> shows/hides table gridlines 1, 0

attributes
<table align= “center”> aligns a table in a window left, right, center

Style attributes within an HTML tag (embedded css)

Code What it does Options
<table style= “width:40px; Changes table width and
height:40px;”> height

<td style= horizontally aligns cell left, right, center

“text align:center;”> content

<td style= Vertically aligns cell content Top, middle, bottom

“vertical-align:middle”>

border <table style= “border-collapse: Collapse- The table and Collapse, separate
collapse” table cells’ borders are
joined and shared between
them.
Separate- the table and its
cells all have distinct
borders.

<table style= “border:solid Border style can be applied Solid, dotted, dashed,
4px”> to external gridlines double, groove
Or internal gridlines where Can pick thickness of
<td style= “border:solid 4px”> this attribute is added to the border here too
cells

<table style= “ Sets spacing between the To values are passed

Border-spacing: 15px 30px”> borders of individual cells to this property: the
horizontal spacing
first, then the vertical
spacing between cells
second

padding <table style= “padding: 25px”> Adds cell padding, which is the space between the
Can be added to individual cells cell content and the border of the cell
in their <td> tag This assigns all padding sides to be 25px.

Made by Habiba 10E

 Specific padding: Used when the sides of the padding have different
values, to specify the size of each side individually.
<table style= You don’t need to add a padding to every side, if top
“padding-top: 25px; padding is required, use padding-top; if all sides are
Padding-bottom: 20px; required then use all the rest too
Padding-right: 15px;
Padding-left: 13px;”>
To efficiently add padding to every side of the table.
Is the same as Order of padding sides when putting values in, are:
Center, right, bottom, left
<table style= “
Padding: 25px 15px 20px
13px”>

colors <h1 style= “color:#0000ff”> Sets the text in between <h1> and </h1> to the color
This is blue </h1> picked in the #RRGGBB format

<td style=”background-color: Sets color of the background to the color picked in

#0000ff”> the #RRGGBB format
Note that the hash symbol tells the browser that the
number is in hexadecimal

Inserting images, videos, audio

Images A typical image tag: <img src= “turtle.png” alt= “company logo” width= “150px” height=
“150px”>

More on the image source (src)

absolute reference of a file is the complete file path of that file in a computer.
Relative reference of a file is when you refer to the file in relation to where you are.
When mentioning the source of an image, make sure the image is in the same folder
the web page is in, and write the image name with its file type (which is relative
referencing)
e.g. turtle.png
when absolute referencing is not used, the browser looks into the current folder fo the
image. This means that as long as the image is stored in the same folder as the web
page, it will work properly, even if the web page is opened on another computer

absolute referencing wont work e.g <img src= “c:/My websites/My pictures/ turtle.png”>
because the other computer would need to have the same folder structures (and most
computers don’t have the same folder structures and will be different compared to your
computer)

more on the image alternative text (alt)

if the image was not found in the same folder as the web page and relative referencing
was used OR absolute referencing was used and the web page was opened on
another computer, the image is not displayed, and the alternative text of the image will
be displayed.

Made by Habiba 10E

 Resizing image
Has 2 methods:
- Resizing in the markup
- Resizing in a graphics package like IrfanView

In markup:
Uses the height and width attributes in the image tag
If only one of these attributes are specified, the aspect ratio is maintained.
If both the height and width were specified, the image is distorted

In markup In IrfanView/ any graphic package

Eaiser to do Requires a whole different program

Uses large image files, slower to Reduces the file size of the image,
upload and delays the display of the the web page will be displayed faster
web page

Uses low resolution images which

can appear pixelated, particularly if
inlarged

A typical video tag

Videos <video width= “300px” height= “224px” controls>
Your browser doesn’t support this type of videos
<source src= “wreck.mp4” type= “video/mp4”>
</video>

Attributes:
- Controls
Allows the user to control the video
- Width and height
- Text between <video> and </video>
Text for when the video is not displayed because of an error
- Type
Tells the browser the type of the video to be shown

Audio A typical audio tag

<audio controls>
Your browser doesn’t support this type of videos
<source src= “whale.mp3” type= “audio/mpeg”>
<audio>

Lists
Ordered Also known as numbered lists
<ol> 1. apples
<li> apples </li> 2. bananas
<li> bananas </li>
</ol>
Made by Habiba 10E
 unordered <ul>
<li> apples </li> • apples
<li> bananas </li> • bananas
</ul>

nested Bullet lists can be nested by placing a bullet list

within another list • fruits
e.g. o apples
<ul> o bananas
<li> fruits </li> • vegetables
<ul> o potatoes
<li> apples </li> o lettuce
<li> bananas </li>
</ul>
<li> vegetables </li>
<ul>
<li> potatoes </li>
<li> lettuce </li>
</ul>
</ul>

Hyperlink (read more in the book)

A hyperlink is defined between <a> and </a>
anchor <a href= “#top”> top </a> Used to set a hyperlink to allow
A typical anchor tag you to navigate within the page
or to an external page
Attributes:
Href- hyperlink reference, which is the name of the
destination anchor
The name is always inside speech marks “” and has
# before it

The text between the placeholder <a> </a> defines

an ID for the hyperlink

<a name="top" id="top"></a>

This is the hyperlink reference tag for the location
the anchor takes you to when it is clicked. It is
placed in the location you want the anchor to take
you to.
To other <a href= “http://www.cie.org.uk”> cie website</a>
web
Here the link to the other page is written in the href attribute with no #
pages
Make sure not to use an absolute address since it only works on your computer
e.g. href=”C:my documents/my folder/next_page.html”

Made by Habiba 10E

 if the anchor takes you to a web page you made, make sure this web page has a
hyperlink reference
e.g. href= “next_page.htm”
there’s no need for an address if this web page is in the same folder as the web page
that has the anchor

Made by Habiba 10E