Scribd
Upload
4 views

BASICS of HTML 11-17

HTML (Hypertext Markup Language) is the primary language for creating and formatting web pages, with the latest version being HTML5. It consists of various tags that structure content, such as headings, paragraphs, lists, and links, and can be created using simple text editors. The document provides examples of basic HTML structure, common tags, and how to insert elements like images and tables.

Uploaded by

dmd200201
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

BASICS of HTML 11-17

HTML (Hypertext Markup Language) is the primary language for creating and formatting web pages, with the latest version being HTML5. It consists of various tags that structure content, such as headings, paragraphs, lists, and links, and can be created using simple text editors. The document provides examples of basic HTML structure, common tags, and how to insert elements like images and tables.

Uploaded by

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

HTML stands for Hypertext Markup Language, and it is the most widely used language used

to describe and format web pages using a set of Markup Tags. There have been several
versions of HTML since 1991 with the most recent version being HTML5.

The purpose of a web browser (Chrome, Firefox, Safari, etc.) is to process the HTML
documents and display them in the browser window. Web pages can be developed using a
simple TEXT EDITOR (NotePad in Windows and TextEdit on Macs).

To create an HTML document perform the following steps:

1. Open a simple text editor


2. Start a new page in that editor
3. Save the file by giving it a filename and using a “.html” extension

Basic HTML Document


In its simplest form, following is an example of an HTML document:

<!DOCTYPE html>
<html>
<head>
<title>This is document title that does not display on webpage</title>
</head>
<body>
<h1>This is a heading </h1>
<p>Document content goes here.....</p>
</body>
</html>

Let's create this file and save it in an HTML file named test.html using the NOTEPAD text
editor. Then open it using a web browser like Google Chrome. It will display the following:
HTML Tags
The HTML markup language and makes use of various tags to format the content. These tags
are enclosed within angle braces <Tag Name>. Most of the tags have their corresponding
closing tags. For example, <html> has its closing tag</html> and <body> tag has its
closing tag </body> tag etc.

Above example of HTML document uses the following tags:

Tag Description

<!DOCTYPE...> This tag defines the document type and HTML version.

<html> This tag encloses the complete HTML document and mainly comprises
of document header which is represented by <head>...</head> and
document body which is represented by <body>...</body> tags.

<head> This tag represents the document's header which can keep other HTML
tags like <title> etc.

<title> The <title> tag is used inside the <head> tag to mention the document
title.

<body> This tag represents the document's body which keeps other HTML tags
like <h1>, <p> etc.

<h1> This tag represents the heading.

<p> This tag represents a paragraph.

Typical HTML Document Structure


<!DOCTYPE html>
<html>
<head>
Document header related tags
</head>

<body>
Document body related tags
</body>
</html>
2. HTML– BASIC TAGS

The <!DOCTYPE> Declaration


The <!DOCTYPE> declaration tag is used by the web browser to understand the version of
the HTML used in the document. Current version of HTML makes use of the following
declaration:

<!DOCTYPE html>

Heading Tags
Any document starts with a heading. You can use different sizes for your headings. HTML has
six levels of headings: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. When displaying
headings, the browser adds one line before and one line after that heading.

Example
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5> <h6>This is heading 6</h6>
</body>
</html>

A Browser display of this code will produce the result shown on the next page:
Paragraph Tag

The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of
text should go in between an opening <p> and closing </p>. See example below:

Example
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>

This will produce the following result:

Here is a first paragraph of text.


Here is a second paragraph of text.
Here is a third paragraph of text.
Line Break Tag
Whenever you use the <br /> element, anything following it starts from the next line. This
tag is an example of an empty element, where you do not need opening and closing tags, as
there is nothing to go in between them.

The <br /> tag has a space between the characters br and the forward slash.

Example
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br/>
You delivered your assignment on time.<br />
Thanks<br/>
</p>
</body>
</html>

This will produce the following result:

Hello
You delivered your assignment on time.
Thanks

To display “hello” vertically on a webpage, the break tag would be used as follows:

h<br/>e<br/>l<br/>l<br/>o<br/>
Centering Content
You can use <center> tag to put any content in the center of the page or any table cell.

Example
<!DOCTYPE html>
<html>
<head>
<title>Centering Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>

This will produce the following result:

This text is not in the center.

This text is in the center.


Style Attributes

Formatting of an HTML element can be performed with a Style Attribute. These attributes
have the following syntax:

<TAGNAME> STYLE=”property:value;”>

There are several different properties for styling HTML elements. For example:

- Background color: sets webpage background color


- Color: sets the text/foreground color
- font-family: sets the text font
- font-size: sets size of font
- text-align: sets alignment like left center right
Alignment Tags

<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
</body>
</html>

This will display the following result:

This is left aligned


This is center aligned

This is right aligned

If you use a word processor, you must be familiar with the ability to make text bold, italicized,
or underlined; these are just three of the ten options available to indicate how text can appear
in HTML.
5. HTML – FORMATTING

Bold Text
Anything that appears within <b>...</b> element, is displayed in bold as shown below:

<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>

This will produce the following result:

The following word uses a bold typeface.

Italic Text
Anything that appears within <i>...</i> element is displayed in italicized.

Underlined Text
Anything that appears within <u>...</u> element, is displayed with underline
HTML supplies several element tags to create LISTS.

Most list elements are composed of one or more <LI> (List Item) elements.

UL : Unordered List. Items in this list start with a bullet. For example:

<UL>

<LI> List item 1 …</LI>

<LI> List item 2 …</LI>

</UL>

Will Produce:

• List item 1 …
• List item 2 …

OL: Ordered List. Items in this list are numbered by the browser.

<OL>
<LI> List item 1 …</LI>
<LI> List item 2…</LI>
<LI> List item 3 …</LI>
</OL>
Will Produce:
1. List item 1…
2. List item 2…
3. List item 3…
Inserting Hyperlinks

Hyperlinks are links that take you to another page or web site. You create them by using the code below:

<a href="http://www.thepage.com">Name of link</a>

The link would appear as, Name of link

Creating Email Links

Creating email links are just as simple. All you need is the "mailto" function to get this to work properly:

<a href="mailto:[email protected]">Email Me</a>

Inserting Images

Once you have the image you want to use you can insert it into your web
page.

Let’s say you upload the graphic called "apple.gif" to your "images"
folder on your web server. The image folder is located inside your "root"
directory.

Your HTML code will look like this:

<img src="images/apple.gif">

Now let’s say you have uploaded the graphic to the "fruit"
folder/directory that is located inside of the images folder then the code
would appear as:

<img src="images/fruit/apple.gif">
HTML Tables

An HTML table is defined with the <TABLE> tag. Each table row is defined with
the <TR> tag, and a table data cell is defined with the <TD> tag. The first row
of the table can be defined as a table header using the <TH> tag.

<TABLE>
<TR>
<TH>Column Header 1</TH>
<TH>Column Header 2</TH>
<TH>Column Header 3</TH>
</TR>
<TR>
<TD>column 1 text1</TD>
<TD>column 2 text1</TD>
<TD>column 3 text1</TD>
</TR>
<TR>
<TD>column 1 text2</TD>
<TD>column 2 text2</TD>
<TD>column 3 text2</TD>
</TR>
<TR>
<TD>column 1 text3</TD>
<TD>column 2 text3</TD>
<TD>column 3 text3</TD>
</TR>
</TABLE>
The previous code would produce an HTML table with four rows (the first row
being a header row) and three columns.

Column Header 1 Column Header 2

column 1 text1 column 2 text1

column 1 text2 column 2 text2

column 1 text3 column 2 text3

A border can be added to the table and padding to the data cell. The padding
in the data cell allows spacing between the text in the cell and the border.
The padding is defined in terms of pixels.

The code on the next page declares that each header and data cell should have
a padding of 2 pixels between the text and the border.
<HTML>

<HEAD>
<TITLE> Tables </TITLE>
<STYLE>
table, th, td{
border:1px solid black;
border-collapse:collapse;}
table{ width:50%;}
th,td{
padding:2px;}
</STYLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TH>Column Header 1</TH>
<TH>Column Header 2</TH>
<TH>Column Header 3</TH>
</TR>
<TR>
<TD>column 1 text1</TD>
<TD>column 2 text1</TD>
<TD>column 3 text1</TD>
</TR>
<TR>
<TD>column 1 text2</TD>
<TD>column 2 text2</TD>
<TD>column 3 text1</TD>
</TR>
<TR>
<TD>column 1 text3</TD>
<TD>column 2 text3</TD>
<TD>column 3 text1</TD>
</TR>
</TABLE>
</BODY>
</HTML>

This code produces the webpage display shown next.

You might also like