Scribd
Upload
18 views31 pages

Revision Pack

The document provides an introduction to HTML (HyperText Markup Language), detailing its role in structuring web content with essential tags such as <body>, <table>, <tr>, <td>, <a>, <img>, and <video>. It also covers basic CSS properties like width, height, margin, padding, font-family, font-size, color, and background-color that are crucial for webpage design. The chapter serves as a foundational guide for creating and styling web pages.

Uploaded by

alifatimajodat
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 views31 pages

Revision Pack

The document provides an introduction to HTML (HyperText Markup Language), detailing its role in structuring web content with essential tags such as <body>, <table>, <tr>, <td>, <a>, <img>, and <video>. It also covers basic CSS properties like width, height, margin, padding, font-family, font-size, color, and background-color that are crucial for webpage design. The chapter serves as a foundational guide for creating and styling web pages.

Uploaded by

alifatimajodat
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/ 31

CHAPTER 1: HTML

OBJECTIVES

Define what Binary is.


Define what Decimal is.
Define what transistors
are.
Define what hexadecimal
is.
WHAT IS
HTML?
WHAT IS HTML?

HTML (HyperText Markup Language) is the standard language used to


create and structure content on the web. It defines the structure of web

pages using markup. HTML elements form the building blocks of all
websites, and they are used to embed text, images, links, multimedia,

and more.
SOME ESSENTIAL TAGS
WE NEED TO CREATE A
WEBPAGE
BODY TAG

in between the body tag is where you write your html code, such as tr,
td, etc.., look at the example below:
TABLE TAG

The <table> tag defines a table.


TR AND TD TAG

tr tags create a row, td tags create the cells, each row must have a tr
tag, and each cell must have a td tag.

in this example, we have 2 rows,


and each row has 4 cells
STYLE TAG

the style tag is NOT written between the body tag, but rather between
the head tag, under title.

you can write style codes and make


brackets for any tag, make sure you

use curly brackets


<A> TAG

The <a> tag defines a hyperlink.


When you click a text or image, it opens a new file or goes to a website

The href is short for Hypertext Reference, as in the example below, you
write the new file you want to open in href.

so now, whenever you click on Home, you open the new file

Home_page.html
H1, H2 AND H3 TAGS

These are headings for you webpage, each one with a different size.
h1 is the largest

Put whatever text you want as the heading between the h1 tag
<IMG> TAG

The <img> tag uploads an image in an HTML page.


src is short for source, which you give it the name of the image you

want to upload.
<VIDEO> TAG

The <video> tag uploads a video in an HTML page.


src is short for source, which you give it the name of the video you

want to upload.
additionally, you add the controls attribute to add play, pause and

sound buttons to the video


<OL> AND <UL> TAGS

These tags are used to create lists.


we have 2 types of lists:

ol, which is short for ordered list.


ul, which is short for unordered list ( bullet point ).

between each ol or ul tag, we have a li tag (short for list), that creates

the actual list


<OL> AND <UL> TAGS

this is how ordered list this is how unordered list


is made is made
COLSPAN AND ROWSPAN

colspan merges cells horizontally.


rowspan merges cells vertically
SOME ESSENTIAL CSS
PROPERTIES WE NEED TO
CREATE A WEBPAGE
WIDTH AND HEIGHT

these 2 properties can change the width and height of something.


it can be a table, a row, a cell, an image or a video.

below is how it’s used:


BORDER-COLLAPSE

Specifies whether table borders should collapse into a single border.


BORDER: SOLID 2PX RED

Sets a solid red border with a thickness of 2 pixels.


TEXT-ALIGN

moves the text horizontally


has 3 properties:

left
center

right
VERTICAL-ALIGN

moves the text vertically


has 3 properties:

top
middle

bottom
MARGIN

margin is to move the table left and right.


margin-left: creates space on the left and moves the table to the right.

margin-right: creates space on the right and moves the table to the
left.

you can give margin a value of

pixel or % and the table will move


based on that value
MARGIN

Additionally, you can give margin a value of auto to automatically


move it to the center or the right side of the webpage. ct
rre
co
s is
ay
h w
ot
b

this puts the table in the center


MARGIN

Additionally, you can give margin a value of auto to automatically


move it to the center or the right side of the webpage.

this puts the table on the right


MARGIN

Additionally, you can give margin a value of auto to automatically


move it to the center or the right side of the webpage.

this puts the table on the left


PADDING

padding is the space between the content (text or image) of a cell and
its border.
after paddig

before padding
FONT-FAMILY

Specifies the font of the text.


the below example will change to Arial font as it’s give to the body.

if you want only table to change, you give the property to that tag
FONT-SIZE

Specifies the size of the font.


COLOR

Specifies the color of text.


BACKGROUND-COLOR

Specifies the background color.


if set for body, it will change the page color.

if set for table, it will change only table.


if set for td, it will change only that cell.

You might also like