Scribd
Upload
43 views

HTML

Uploaded by

Vickul Taneja
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
43 views

HTML

Uploaded by

Vickul Taneja
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 31

What is HTML

HTML stands for HyperText Markup Language. Developed by


scientist Tim Berners-Lee in 1990, HTML is the "hidden" code
that helps us communicate with others on the World Wide Web
(WWW).

When writing HTML, you add "tags" to the text in order to


create the structure. These tags tell the browser how to display
the text or graphics in the document.
For example, the following document has a simple layout (structure). Notice
there are three major parts: a heading, two paragraphs and a bulleted list.

Why I like to go swimming in the summer. 


•
Swimming is my most favorite activity in the summer. When the sun is shining
and the air is warm, you will find me dipping into my backyard pool. It’s not
an impressive pool, only three feet deep, but it’s mine.
•
There are three reasons I like to swim:

• I get lots of exercise 


• I enjoy the freedom
• I have an opportunity to be in the sun.
•<html>
<head>
<title>Why I like to go swimming</title>
</head>
<body>

<h1> Why I like to go swimming in the summer. </h1>

<p> Swimming is my most favorite activity in the summer. When the sun is shining and the air is warm, you will find me dipping into
my backyard pool. It’s not an impressive pool, only three feet deep, but it’s mine.</p>

<p>There are three reasons I like to swim:</p>

•<ul>
<li>I get lots of exercise</li>
<li>I enjoy the freedom</li>
<li>I have an opportunity to be in the sun.</li>
</ul>
</body>
</html>
Viewing the hidden code!
Go to View on the toolbar and then click on Source for Explorer or Page
Source for Navigator.

• Basic Concepts
• The tools you need
HTML is written in plain text. All you need is a simple text-editor. For
MACs, that would be SimpleText and for Windows, Notepad.
• Some rules
HTML tags are always surrounded by what are called angle brackets < and
>.
• Elements
The words/letters between these two angle brackets are called
elements. These are the coded commands within HTML. Elements
tell the browser how to display the web page.
• For example: <hr> tells the browser to display a horizontal rule;
<br> tells the browser to skip a line.
Cont…

• Container and empty tags


There are two kinds of tags: container and empty.
• The container tag always wraps around text or graphics and comes in a set
with an opening and a closing:
• <html> opening tag
</html> closing tag
• Notice the forward slash (/) on the closing tag. This tells the browser that the
tag has ended.
• On the other hand, the empty tag stands alone. The tag <br> is one that adds
a line break. Empty tags do not have to be wrapped around copy and do not
require a closing.
• Case sensitive
HTML is also not case sensitive. That means, you can use either lowercase or
uppercase. <HTML> is the same as <html>. For consistency, use either one or
the other. It's best not to mix and match. For our purposes, I have written our
code in lowercase.
HTML structure.
All HTML documents are divided into two main parts: the head and the body. It goes something like this:

•
• Primary Tags
• To build any web page you will need four primary tags: <html>, <head>, <title>
and <body>. These are all container tags and must appear as pairs with a
beginning and an ending. <html>…</html>
• Every HTML document begins and ends with the </html> tag. This tells the
browser that the following document is an html file. Remember, tags tell the
browsers how to display information.
• <head>…</head>
• The <head> tag contains the title of the document along with general
information about the file, like the author, copyright, keywords and/or a
description of what appears on the page.
• <title>…</title>
• Appears within the <head> tag and gives the title of the page. Try to make your
titles descriptive, but not more than 20 words in length. The title appears at the
very top of the browser page on the title bar.
• <body>…</body>
• The main content of your page is placed within the body tags: your text,
images, links, tables and so on.
• Creating your first web page
• Using the primary HTML tags, to create your first Web page. Step 1 Open
up a text editor (SimpleText for Mac or Notepad for Windows)

Step 2 Enter the following:


• <html>
<head>
<title> This is my first web page</title>
</head>
<body>
Hello world. This is my first web page. There's more to come.
</body>
</html>

Step 3 Save the document as: firstpage.html


•Basic Text Formatting
•Headline tag
In HTML, bold copy is created by using the headline tag. There are six levels of headlines, ranging from
<h1>…</h1> to <h6>…</h6>. Here is an example of the code for all the headline sizes:
•<h1>Level 1 Headline</h1>
<h2>Level 2 Headline</h2>
<h3>Level 3 Headline</h3>
<h4>Level 4 Headline</h4>
<h5>Level 5 Headline</h5>
<h6>Level 6 Headline</h6>
•Step 1 Load your text editor and open your file: firstpage.html This is what you should see:
•<html>
<head>
<title>This is my first web page.</title>
</head>
<body>
Hello world. This is my first web page. There's more to come.
</body>
</html>
•Step 2 Add the <h1> tag to the words "Hello world." as shown in red. <html>
<head>
<title>This is my first web page.</title>
</head>
<body>
<h1>Hello world.</h1> This is my first web page. There's more to come.
</body>
</html>
Lists
The numbered lists are called ordered lists and the bulleted lists are unordered lists.

• <ol>…</ol>
The ordered list is a container tag and is used for numbered lists.
• <ul>…</ul>
The unordered list is a container tag and is used for bulleted lists.
• <li>…</li>
The listed item tag is a container tag and is nested within the
ordered or unordered tags.
• Here is an example of the differences between ordered and
unordered lists.
• An ordered (numbered) list :

• <ol>
<li>My first item on the list.</li>
<li>My second item on the list.</li>
<li>My third item on the list.</li>
<li>My fourth item on the list.</li>
</ol>
• <html>
<head>
<title>This is my first web page.</title>
</head>
<body>
<h1>Hello world.</h1> This is my first web page. There's more
to come.
• <hr>
<p>
I am learning how to use the horizontal rule, headline,
paragraph and line break tags. Writing HTML isn't as hard as it
appears.
</p>

<p>Here's a list of items I like about school:<br>


Science<br>
Reading<br>
But most of all--recess!<br>
</p>
</body>
</html>
• <html>
<head>
<title>This is my first web page.</title>
</head>
<body>
<h1>Hello world.</h1> This is my first web page. There's more to come.
• <hr>
<p>
I am learning how to use the horizontal rule, headline, paragraph and line
break tags. Writing HTML isn't as hard as it appears.
</p>

<p>Here's a list of items I like about school:<br>


Science<br>
Reading<br>
But most of all--recess!<br>
</p>
<p>I can also create lists using numbers and bullets. Here is an
example of a list with numbers:
• <ol>
<li>My first item on the list.</li>
<li>My second item on the list.</li>
<li>My third item on the list.</li>
<li>My fourth item on the list.</li>
</ol>
</p>
To the body attribute:

• <body bgcolor="#bee3c2">...</body>

• The bracket and tag appear first (<body).


• Always add a space between the tag and attribute.
• Then enter the attribute (bgcolor).
• Equal sign goes next (=).
• Next are quotation marks that contain a description of how the
attribute should look like ("#bee3c2"). In this case, it's a code
for the color green.
• Close with a bracket (>).
• Then, add your closing tag </body>.
Attributes:
• Color Attribute
For instance, let’s say you want to have a green background on your Web
page with red text, like for Christmas time. You would type this code:
• <html>
<head>
<title>Color Page</title>
</head>
<body bgcolor="#bee3c2" text="#ff0000">
Hello. I am a page that can be used for Christmas.
</body>
</html>
• Notice the attributes: bgcolor and text. They are placed within the <body>
tag. Attributes never stand alone. Instead, they always appear inside a body
tag.
bgcolors
Width Attribute

• <html>
<head>
<title>My Spring VacationII</title>
</head>
<body bgcolor="#e3f04a" text="#000000">
<h4 align="center">My Spring Vacation<br> by Russ
Peabody</h4>
<hr align="center" width="40%">
</body>
</html>
• <html>
<head>
<title>This is my first web page.</title>
</head>
• <body bgcolor="#ffff00" text="#000000">
<h1 align="center">Hello world.</h1>
<p align="right"><b>This is my first web page. There's more to come.</b> <hr align="center"
width="50%">
<p>
I am learning how to use the horizontal rule, headline, paragraph and line break tags. Writing HTML isn't as
hard as it appears.
</p>

<p>Here's a list of items I like about school:<br>


Science<br>
Reading<br>
But most of all--recess!<br> <p>I can also create lists using numbers and bullets. Here is an example of a list
with numbers:
• <ol>
<li>My first item on the list.</li>
<li>My second item on the list.</li>
<li>My third item on the list.</li>
<li>My fourth item on the list.</li>
</ol>
</p>

</body>
</html>
Advanced text formatting

• Font styles: <font>...</font>


• Bold: <b>...</b>
• Italic: <i>...</i>
• Indented text: <blockquote>...</blockquote>
• Smaller type: <small>...</small>
• Larger type: <large>...</large>
• Centered type: <center>...</center>
• three attributes used with the font tag:
• <font size= "#">…</font>
<font face= "type style name">…</font>
<font color= "hex code">…</font>
• Font Size
<font size=5> does have it’s advantages, </font>
• Font Face
<font face="Arial, Helvetica">Selecting type styles can be
tricky at times. You must always consider your end
user.</font>
• Font color
<font color="#0033ff">You should always consider your end
user.</font>
Building Web pages with tables
• <html>
<head>
<title> This is a page using tables </title>
</head>
<body bgcolor="ffffff" text="000000">
<h1>A Web Page Using Tables</h1>
<table border="1">
<tr>
<td>This is column one</td>
<td>This is column two</td>
<td>This is column three</td>
</tr>
</table>
</body>
</html>
example

• <html>
<head>
<title> This is a page using tables </title>
</head>
<body bgcolor="#ffffff" text="#000000">
<h1>A Web Page Using Tables</h1>
<table border="1">
<tr>

<td bgcolor="#000000">
<font color="#ffffff">
<b>This is column one</b>
<br>
I enjoy working on HTML code. It gives me a chance to be creative.</font>
</td>
• <td bgcolor="#bee3c2"> <b>This is column two</b></td>

<td bgcolor="#ff8000">
<font color="#804000">
<b>This is column three<br>Notice what happens to the column when you add copy. It gets larger. This can cause
a problem. But we do have a way to control the margins in tables.</b>
</font>
</td>

</tr>
</table>
</body>
</html>
Control table width by percentages
• <html>
<head>
<title> This is a page using tables </title>
</head>
<body bgcolor="#ffffff" text="#000000">
<h1>A Web Page Using Tables<h1>
<table border="1" width="100%">
<tr>

<td bgcolor="#000000" width="20%">


<font color="#ffffff">
<b>This is column one</b>
<br>
I enjoy working on HTML code. It gives me a chance to be creative.
</td>
<td bgcolor="#bee3c2" width="60%"> <b>This is column two</b></td>
<td bgcolor="#ff8000" width="20%"><font color="#804000"><b>This is column
three<br>Notice what happens to the column when you add copy. It gets larger. This can
cause a problem. But we do have a way to control the margins in tables.</b>
</font>
</td>

</tr>
</table>
</body>
</html>
A table with multiple rows and columns/cells

• <html>
<head>
<title> Rows </title>
</head>
<body>
<h1>Here's a table with two rows</h1>
<table border="1">
<tr>
<td>This is column one</td>
<td>This is column two</td>
</tr>
<tr>
<td>This is column A</td>
<td>This is column B</td>
</tr>
</table>
</body>
</html>
Column/cell tag and its attributes

• align: sets your text or image to left, center or


right
• valign: sets your content vertically to top,
center or bottom
• colspan: expands across multiple
columns/cells
• rowspan: expands over multiple rows
• Align attribute
Leaving your text or image to the left of your column
is usually pretty boring, so the align attribute lets
you center things, using "center" or place them to
the right, using "right".
• Valign attribute
When placing copy in a column, the browser will
automatically place it in the center of the column.
You can change this default by using the valign
attributes of "top", "center" or "bottom".
Example

• <html>
<head>
<title> Alignment Attributes </title>
</head>
<body>
<h1>Here are some examples of alignment</h1>
<table border="1" width="100%">

<tr>
<td bgcolor="#ff0000" width="40%" align="right">
This is column one<br>
This is column one<br>
This is column one<br>
This is column one<br>
</td>
<td width="60%">
This is column two<br>
This is column two<br>
This is column two<br>
This is column two<br>
</td>
</tr>

<tr>
<td bgcolor="#ffff00" width="40%" align="center">
This is column A<br>
This is column A<br>
This is column A<br>
This is column A<br>
This is column A<br>
This is column A<br>
</td>
<td bgcolor="#0000ff" width="60" valign="bottom">
<font color="#FFFFFF">
This is column b<br>
This is column b<br>
This is column b<br>
</font>
</td>
</tr>

</table>
</body>
Spanning rows and columns

• When creating a table and you want to expand a column or a row you use the following attributes:
• colspan: expands across a number of columns
• rowspan: expands across a number of rows
• <html>
<head>
<title> Rowspan and Colspan </title>
</head>
<body>
<h1>Here's a table demonstrating rowspan and colspan</h1>
<table border="1">

<tr>
<td rowspan="2">This is an example of rowspan. It is spanning two rows.</td>
<td>This is column B</td>
<td>This is column C</td>
</tr>

<tr>
<td>This is column D</td>
<td>This is column E</td>
</tr>

<tr>
<td colspan="3">This is an example of colspan. It is spanning three columns.</td>
</tr>

</table>
</body>
</html>
Image
• <img src="masks.jpg" width="149"
height="140" alt="You can determine how
large your images are by opening them in
Navigator.">
• <img src="masks.jpg" align="right"
width="149" height="140" alt="This is an
example of a right-aligned image.">

You might also like