Chapter-5.pptx introduction to HTML and CSS

Introduction to
HTML and CSS
CC1/L
Introduction to Computing

Learning Objectives
• Learn to make a simple website
• Learn the basics of HTML and CSS
• Learn how a website works

HTML means Hypertext Markup Language. It’s basically just a
text file with codes that tell the browser how to display the
information. To let the browser know the text file contains
HTML, we use the file extension .html rather than .doc or .txt or
.rtf.
Simple HTML

The first thing you need to know is how to give instructions to the
browser. This is done by using tags. The format used to enter a tag
is to enclose it in <>. You will need an opening tag and a closing
tag. Inside the <> characters, you give the browser and instruction.
Simple HTML

So for illustration, to tell the browser that a block of text is tag_one,
the opening tag would be:
Simple HTML
<tag_one>
A closing tag is indicated with a forward slash /. So to tell the browser
that we are finished with tag_one, we would write:
</tag_one>

Now let’s get into the structure of an actual HTML document and real
tags that are used. The first line in your file is this one:
Simple HTML
<!DOCTYPE html>
As the name implies, this is called the Document Type Declaration. It
lets the browser know what type of HTML you are using. As written
above, this tells the browser we are using the most recent version of
HTML which is HTML 5.

We also need the opening and closing tag, so our file should look like
this:
Simple HTML
<!DOCTYPE html>
<html>
</html>
Hence anything that falls between <html> and </html> is interpreted by
the browser as being html.

We need a second tag called the head tag contains metadata and other elements that
provide information about the webpage. Which is not directly displayed to the user.
Simple HTML
<!DOCTYPE html>
<html>
<head>
</head>
</html>
It includes :
Metadata storage
Title Specification
Stylesheets Links
Script Loading
Browser Behavior Control
Favicon Linking

In the third tag called the body tag that indicates where the content of the
web page is placed. So we update our file as follows:
Simple HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

Now we can put the actual
content of our web page in
between and. To put text, you
simply type it as if you were
using a web processor.
Following the usual practice in
teaching computer topics, we’ll
add “Hello World” to our web
page.
Simple HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
“Hello World”
</body>
</html>

Now let’s move forward by adding some text formatting. First let’s add a
couple more lines of text. Maybe we want to print the following:
Line breaks and
Center Tags
<!DOCTYPE html>
<html>
<body>
Hello World!
My name is Jayrald.
23 years old.
</body>
</html>
Hello World!
My name is Jayrald.
23 years old.
Our HTML looks like this:

To center text, what you do is add a center tag. The open tag to use is
<center> and the closing tag is </center>. So we can center the Hello
World! string in the following way:
Centering Text
<!DOCTYPE html>
<html>
<body>
<center>Hello World!</center>
My name is Jayrald.
23 years old.
</body>
</html>

We can change the appearance of the
page again and make it more readable
by adding some line breaks. This is
done with the tag <br>.Unlike other
tags, a closing tag isn’t necessary. You
just add one for each line break you
want. For now let’s remove the center
tag and just add line breaks. So let’s add
a line break after the Hello World!
string:
Line Breaks
<!DOCTYPE html>
<html>
<body>
Hello World!<br>
My name is Joe.
My friend is Sally.
</body>
</html>

You can set different attributes using the same font tag. Let’s suppose that
we wanted the text to appear red and set the font size to 5. This could be
done by writing:
<font size=“5” color=“red”>My name is Joe.</font>
Font Size and
Type Face
To change the typeface, we can set the face attribute in a font tag. For
example, to set the font of a text string to verdana, we write:
<font face=“verdana”>My other friend is Bob.</font>

Next we explore two more formatting tags that can be used to improve the
appearance of your web pages and present content in a meaningful way.
The first is the paragraph tag. It does exactly what it says, it creates a
formatted paragraph for any text enclosed within the tags (by adding
margins and spacing). The paragraph tag is defined by <p> and you must
add a closing tag </p> where you want the paragraph to end.
Paragraph and
Div Tags

The div tag is used to group together elements into a section and apply
formatting to them. So in short it defines a section in your html document.
For a simple example, we will take some of the text above and define a
section out of it using the div tag, and color the font blue. The div tag is
written as <div style=…> and you use a closing tag to end the section as
</div>.
Paragraph and
Div Tags

Chapter-5.pptx introduction to HTML and CSS

More Related Content

Similar to Chapter-5.pptx introduction to HTML and CSS

Recently uploaded

Chapter-5.pptx introduction to HTML and CSS