Scribd
Upload
2 views3 pages

How To Make A Webpage

This document provides an introduction to HTML, explaining its purpose as a markup language for creating web pages. It covers essential HTML tags, how to structure a web page, style text, create tables, and insert images. The tutorial emphasizes using a plain text editor for coding and includes examples for various HTML elements.

Uploaded by

mikhaila.dailey7
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views3 pages

How To Make A Webpage

This document provides an introduction to HTML, explaining its purpose as a markup language for creating web pages. It covers essential HTML tags, how to structure a web page, style text, create tables, and insert images. The tutorial emphasizes using a plain text editor for coding and includes examples for various HTML elements.

Uploaded by

mikhaila.dailey7
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

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