Scribd
Upload
198 views

Cape Notes Unit 2 How To Make A Webpage

This document provides instructions for creating a basic HTML webpage using HTML tags and CSS styling. It explains how to add headings, paragraphs, background colors, fonts, font colors, font sizes, tables, and images. Key HTML tags covered include <html>, <body>, <h1>-<h6>, <p>, <img>, and <table>. CSS styling is demonstrated through style attributes added to tags to control text alignment, background color, font, font size, and font color. The document provides a step-by-step guide for beginners to build their first webpage.

Uploaded by

Pratima
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
198 views

Cape Notes Unit 2 How To Make A Webpage

This document provides instructions for creating a basic HTML webpage using HTML tags and CSS styling. It explains how to add headings, paragraphs, background colors, fonts, font colors, font sizes, tables, and images. Key HTML tags covered include <html>, <body>, <h1>-<h6>, <p>, <img>, and <table>. CSS styling is demonstrated through style attributes added to tags to control text alignment, background color, font, font size, and font color. The document provides a step-by-step guide for beginners to build their first webpage.

Uploaded by

Pratima
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Hampton School

Information Technology CAPE


HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is not a programming language, it is a markup language
HTML uses markup tags to describe web pages
HTML markup tags are usually called HTML tags
HTML tags are keywords surrounded by angle brackets like <html>
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is the end tag
Start and end tags are also called opening tags and closing tags
In this tutorial we use a plain text editor (like Notepad) to edit HTML. I believe this is
the best way to learn HTML.
You save the document ALWAYS with whatever name you chooses ending with
.html
HOW TO MAKE A WEB PAGE
To make a web page you can type the following codes using note pad or any text
editor of your choice
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

The code <html> </html> tells us that you want to create a web page. Please note
a webpage must have an open and a close tag.
The code <body></body> defines what will be shown on the web page. Please note
the body must have an opening and a closed tag
HTML headings are defined with the <h1> to </h1> code. Heading is what we call
the title. You can change the number to different sizes. <h1> is the largest while
<h6> is the smallest. All header tags should have an opening and a closed tag.
HTML paragraphs are defined with the <p> tag.
Whenever you want to start a new paragraph <p> is what you can use. Paragraph
tag should have an opening and a closed tag.
HOW TO ALIGN THE TEXT
This is called text aligning where you can choose for the words to be left, right or
centre. We can do this from within the h tags. For instance if I wanted to centre
the title I would use the following codes.

<h1 style="text-align:center">

Similarly if I wanted to centre the paragraph I would use the following codes.
<p1 style="text-align:center">

HOW TO GIVE THE PAGE SOME COLOUR


We use the following codes when we want to give the web page some life.
<body style="background-color:yellow">

We write the code within the body tag. Also noticed that the word colour is spelt the
American way color as that is the way the computer understands it.
HOW TO CHANGE THE STYLE OF THE FONT
We use the following codes to change the style of the writing. We do this in the
<body> tag, the <p> tag or the <h> wherever you would like to change the style
of the writing.
<p style="font-family:courier new>
<body style=font-family:arial>

<h1 style= font-family:times new roman>


Note that you must type the code font-famly: before the name of the font you
would like to use.
HOW TO CHANGE THE COLOUR OF THE FONT
We use the following codes to change the colour of the writing. We do this in the
<body> tag, the <p> tag or the <h> wherever you would like to change the colour
of the writing.
<p style="color:red>
<body style=color:blue>

<h1 style= color:green>


Note that you must type the code color: before the name of the colour you
would like to use. If you want a particular paragraph to have a different colour you
use the <p> tag or if you want the whole page to have a particular colour you use
the <body> tag and similarly if you want your title to have a different colour you
use the <h> tag.

HOW TO CHANGE THE FONT SIZE


We use the following codes to change the size of the words. We do this in the
<body> tag or the <p> wherever you would like to change the side of the words.
<p style="font-size:10px>
<body style=font-size:15px>

Note that you must type the code font-size: before how big you would like your
words to look. If you want a particular paragraph to have a different size you use
the <p> tag or if you want the whole page to have a particular font size you use the
<body> tag.
HOW TO MAKE A TABLE IN YOUR WEB PAGE
Tables are defined with the <table> tag. A table is divided into rows (with the <tr>
tag), and each row is divided into data cells (with the <td> tag). The letters td
stands for "table data," which is the content of a cell. A data cell can contain text,
images, lists, paragraphs, forms, horizontal rules, tables, etc.
You use the following codes to make a table
<table>
<tr>
<th>Day</th>
<th>Subject</th>
</tr>
<tr>
<td>Monday</td>
<td>Information Technology</td>
</tr>
</table>
The table has an opening and a closed tag. The rows and columns are defined
within these tags <table> </table>
If you would like to make more rows and column simply copy the <tr> to </tr>
code.
Notice in the code above there are some codes called <th></th>. Within this code
is the table header or what gives the title for each of the column.
HOW TO INSERT A PICTURE
A web page would not be a web page without pictures
To put pictures onto your webpage you write the following codes
<img src="mypicture.jpg"/>

You can place the image anywhere you prefer on your web page. However you must
ensure that the picture and the web page are in the same folder for the picture to
show on the page.
The name of the image must be the same as that in the code.

You might also like