This lesson will help you understand how to make a basic web site by using HTML. A lesson mostly dedicated for school children.

2.  What is a web site?
 Different web sites.
 Main Parts of a web site.
 Lets design a web site.
 Reference.

3. A website is a collection of web pages (documents that are accessed
through the Internet).
A web page is what you see on the screen when you type in a web
address, click on a link, or put a query in a search engine.
A web page can contain any type of information, and can include text,
color, graphics, animation and sound.
The data contained in the websites is organized and made accessible to
the online public with the help of programming languages such as
(X)HTML and PHP.
Website programming is the main method of defining the structure of a
website and managing its behavior as visitors browse through its pages.

4. Official
Business
Educational
Personal
Informational
EntertainmentNews

6. Text
Graphic
Audio/ Video
Hyperlink

7. Main elements that
we need to learn
before creating a
site…
Text Editors
HTML language

8. When designing a site by using a text
editor it is necessary to know the codes.
Therefore the designer has to study
there codes before starting to create the
site .
Text editor Description
Notepad Since 1985 Microsoft distributes this application
freely.
GEdit Can use Unicodes as coding.
TextEdit Distributes with Mc Operating system.
TED Notepad Can use with Microsoft Operating system.

9.  Short for Hyper Text Markup Language, the authoring language used to create
documents on the World Wide Web.
 HTML defines the structure and layout of a Web document by using a variety of
tags and attributes.
 The purpose of a web browser is to read HTML documents and compose them into
visible or audible web pages. The browser does not display the HTML tags, but uses the
tags to interpret the content of the page.
 In 1980, physicist Tim Berners-Lee, proposed and prototyped ENQUIRE, a system
for CERN researchers to use and share documents. Berners-Lee specified HTML and
wrote the browser and server software in the last part of 1990.
 In that year, Berners-Lee and CERN data systems engineer Robert Cailliau collaborated
on a joint request for funding. In his personal notes from 1990 he lists "some of the
many areas in which hypertext is used" and puts an encyclopedia first.

10. There are three main parts in this language and they are,
Tags
Attributes
Elements
All the tags are easy to remember because it is similar
to the normal English language.
And it is case sensitive .(Which means it doesn’t
matter whether the letters are simple or capital.)
Although you are a beginner you must know these
three parts therefore you can design a successful site.
But do not worry, it’s very easy to learn. Practice is
what you all need.

11. … that you're not creating the website for you; you already
know about the information or service you have to offer. You're
creating the site for your visitors, so it should contain the content they
want, and be organized in a way that makes sense, even to an outsider.
We'll tell you how to create and improve your website but the
main thing to remember is this: A website is a means of
communication, and it is only successful when its message is received
by the intended user.

12. 1. First of all you have to choose a text editor.
I choose the Notepad because it’s easier for a beginner and it is
free.
2. Then make a folder in a drive so all your work will save in a one place.
When saving your work you should use the .html extension or else
it won’t open as a web page.
Ex : <file name> .html (presentation.html)
3. Then start typing the cords accordingly and accurately, otherwise the
page cannot be viewed through a web browser.
4. If you are willing to add pictures and videos, you have to save it in the
same folder .

13. The layout of the page
After you type and save the codes you can see the
icon of your web browser in that folder. It means
your coding will now open in the browsing
software.

14. Let’s see what each tag
do…
Combination of
<h1>,<p>,<br> tags

15.  When you're designing a web page, it is necessary to use different
font types, styles and sizes. Therefore it makes the page more
attractive.
Tag Definition
<b></b> Displays the enclosed text in the bold type.
<big></big> Increases the size of the enclosed text.
<small></small> Decreases the size of the enclosed text.
 Displays the enclosed text as a subscript.
 Displays the enclosed text as a superscript.
<u></u> Underlines the enclosed text.
<i></i> Italics the enclosed text.
<tt></tt> Displays text in a fixed width, teletype style font.

17. Tags + Attributes
To make the tags more effective we use attributes.
As an example, if we want to change the font size of a text you
have to use the size attribute in the font tag.
<font size = 4>
If you want to change the colors of it, use the color attribute.
<font color = ‘blue’>
When talking about the colors, there you can use the color codes
to get better colors. It can be used as background color or in any
other occasions.
Click here for examples

18. • Lists are important when designing a web site.
• There are two types of lists,
Ordered lists (tag that use <ol>)
Unordered lists (tag that use <ul>)

19. The img tag is used to put an image in an HTML document.
Images should save in the same folder which the whole HTML
document was saved.
<img src = ‘picture.jpg’>
Things might seem a little bland and boring with all of this text formatting. Of
course, the web is not just about text, it is multi-media and the most common
form of media is the image.
Click here for example
(For source)
Essential
(extension)
Essential

20.  When changing the background color, the attributes like
bgcolor, bgtext should type inside the <body> tag.
 Type bg for once only.

21. So far you've been making a stand-alone web page, which is
all very well and nice, but what makes the internet so
special is that it all links together.
The 'H' and 'T' in 'HTML' stand for 'hypertext', which
basically means a system of linked text.
An anchor tag (a) is used to define a link, but you also
need to add something to the anchor tag -
the destination of the link.
Click here for examples

22. Across the worldwide web, HTML tables are used to layout pagers.
The table element defines the table.
The tr element defines a table row.
The td element defines a data cell. These must be enclosed in tr tags, as
shown above.
If you imagine a 3x4 table, which is 12 cells, there should be four tr elements
to define the rows and three tr elements within each of the rows, making a
total of 12 td elements.
Click here for examples

23. By following the above techniques you will be able to create
a basic but attractive web site.
If you are more interested in developing the site you can
visit to the reference page so it will lead you to the correct
path.
Web designing is a popular trend in the present world.
Therefore if you learn, you can be a leading designer in the
too….

24. Grade 11 ICT text book.
HTML DOG - www.htmldog.com
W3school - www.w3schools.com

25. Created by,
Sanduni Palliyaguru

27. Tags
The basic structure of an HTML document includes tags, which surround
content and apply meaning to it.
<html> is the opening tag that kicks things off and tells the browser that
everything between that and the </html>closing tag is an HTML
document.
ALL HTML tags should be closed.
Not all tags have closing tags like this (<html></html>) some tags,
which do not wrap around content will close themselves. The line-break
tag for example, looks like this : <br />.
opening tag → content → closing tag

28. Tag Definition
<html></html> Shows the beginning of a web page.
<head></head> Provides information about the document.
<title></title> Specify the text appears in the web browser’s title bar.
<body></body> This tag encloses all text, images, and other elements that
will be visible to the user on the web page.
<h1></h1>
<h2></h2>
The six levels of text headings ranging from the largest
(<h1>) to the smallest (<h2>). The text headings appear in
the bold face font.
<p></p> Defines the beginning and the ending of a paragraph of the
text.
<br/> A line break in the text.
<&nbsp> A space between two words.
<hr> To insert a horizontal line.

29. Tags can also have attributes, which are extra bits of information.
Attributes appear inside the opening tag and their value is always
inside quotation marks.

They look something like <tag attribute="value">Margarine</tag>.
We will come across tags with attributes later.

30. Elements
Tags tend not to do much more than mark the beginning and end of
an element.
 Elements are the bits that make up web pages.
You would say, for example, that everything that is in between and
includes the <body> and </body> tags is the body element.

As another example, whereas <title> and </title>
are tags, <title> presentation 1 </title> is a title element.

31. Color codes

35. You can change the height
and width of an image

37. With the
border
Without
border