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.
