Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
14 views

What Is HTML

Uploaded by

Priyashmita Roy
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views

What Is HTML

Uploaded by

Priyashmita Roy
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 20

What is HTML?

HTML is the standard markup language for creating Web pages. HTML is the language of
the web, used by billions of websites to create the pages that we see every day.
HTML stands for HyperText Markup Language. It is the standard language used to create
and design web pages on the internet. It was introduced by Tim Berners-
Lee in 1991 at CERN as a simple markup language. Since then, it has evolved through
versions from HTML 2.0 to HTML5 (the latest 2024 version).

HTML is a combination of Hypertext and Markup language. Hypertext defines the link
between the web pages and Markup language defines the text document within the tag.

 HTML stands for Hyper Text Markup Language


 HTML describes the structure of Web pages using markup
 HTML elements are the building blocks of HTML pages
 HTML elements are represented by tags
 HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
 Browsers do not display the HTML tags, but use them to render the content of the
page

A Simple HTML Document


Example

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

Example Explained

 The <!DOCTYPE html> declaration defines this document to be HTML5


 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the document
 The <title> element specifies a title for the document
 The <body> element contains the visible page content
 The <h1> element defines a large heading
 The <p> element defines a paragraph
HTML Tags
HTML tags are the building blocks of web pages. By understanding and using HTML tags
effectively, you can create well-structured and informative webpages. Tags are element
names surrounded by angle brackets:

<tagname>content goes here...</tagname>

 HTML tags normally come in pairs like <p> and </p>


 The first tag in a pair is the start tag, the second tag is the end tag
 The end tag is written like the start tag, but with a forward slash inserted before the
tag name

Empty tag: The tags that do not have an end tag, is known as an empty tag. Eg. <hr>, <br>,
<img>. These tags have no effect on the subsequent portion of the document and hence do
not need an ending tag. HTML elements with no content are called empty elements.

<br> is an empty element without a closing tag (the <br> tag defines a line break).

Empty elements can be "closed" in the opening tag like this: <br />.

HTML5 does not require empty elements to be closed. But if you want stricter validation, or
if you need to make your document readable by XML parsers, you must close all HTML
elements properly.

Attributes

Some elements may include attributes, which are the additional information that are included
inside the starting tag (eg. Size, color). An attribute typically consists of an attribute name, an
equal sign and a value. White space is allowed around the equal sign. The value of the
attribute may be either delimited by single quotes or double quotes.

 All HTML elements can have attributes


 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"

Use Lowercase Tags


 HTML tags are not case sensitive: <P> means the same as <p>.

HTML Page Structure


Below is a visualization of an HTML page structure:

<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>

</body>
</html>

The <!DOCTYPE> Declaration


The <!DOCTYPE> declaration represents the document type, and helps browsers to display
web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>

HTML Versions
Since the early days of the web, there have been many versions of HTML:

Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
Head tag
The <head> tag serves to encapsulate the other header tags. It is placed below the <html> and
above the <body> tag in a document. It may contain some other tags that help to define and
manage the document’s content, such as <tittle> tag.

Tittle tag
Whatever we write inside this tag appears at the top of the browser document window. It is
also used by search engines and for book marks.
Body tag
This tag is used to place all other tags inside it.

The background-color property defines the background color for an HTML element.

This example sets the background color for a page to blue:

Example

<body bgcolor=”blue”>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

HTML Editors
Write HTML Using Notepad or TextEdit
Web pages can be created and modified by using professional HTML editors.

However, for learning HTML we recommend a simple text editor like Notepad (PC) or
TextEdit (Mac).

We believe using a simple text editor is a good way to learn HTML.

Follow the four steps below to create your first web page with Notepad or TextEdit.

Step 1: Open Notepad (PC)


Windows 8 or later:

Open the Start Screen (the window symbol at the bottom left on your screen). Type
Notepad.

Windows 7 or earlier:

Open Start > Programs > Accessories > Notepad

Step 2: Write Some HTML


Write some HTML into Notepad.
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Step 3: Save the HTML Page


Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding
for HTML files).

Step 4: View the HTML Page in Your Browser


Open the saved HTML file in your favorite browser (double click on the file, or right-click -
and choose "Open with").

HTML Formatting tags

HTML offers tags and attributes to style a website’s text, images, and more. This improves
visual appeal, helps users navigate the content, and signals important information to users.

HTML <i> Tag

The <i> tag in HTML is used to display the content in italic style. This tag is generally used
to display the technical term, phrase, the important word in a different language. The <i>
tag is a container tag that contains the opening tag, content & closing tag.

Syntax

<i> Now content is Italic </i>

HTML <b> Tag

The <b> tag in HTML makes text bold without adding importance, unlike <strong>, which
signifies importance. It has opening and closing tags and purely changes text appearance.

Syntax

<b> Contents... </b>

HTML <u> Tag


The <u> tag in HTML is used to underline text. It has opening and closing tags and purely
changes text appearance.

Syntax

<u> Contents... </u>

HTML <small> Tag

The <small> tag in HTML is used to define smaller text, reducing font size. It decreases the
font size by one size (from medium to small, from x-large to large

Syntax:

<small> Contents... </small>

HTML <ins> Tag

HTML <ins> tag is used to specify a block of inserted text. The <ins> tag is typically used to
mark a range of text that has been added to the document. The inserted text is rendered as
underlined text by the web browsers. The <ins> tag requires a starting and ending tag.

Syntax:

<ins> Contents... </ins>

HTML <sub> Tag

This <sub> tag in HTML is used to write text below the baseline of the text in a smaller font.
This tag can be used in many ways like we can denote some mathematical variables in the
form of subscript text.

Syntax:

<sub> Contents. . . </sub>

HTML sup Tag

The <sup> tag in HTML describes the text as a superscript text. Here the text is above the
baseline of the text and that text appears in a smaller font.

Syntax:

<sup> Content... </sup>

HTML <strong> Tag

The HTML <strong> Tag is the parsed tag and is used to show the importance of the text.
The content inside it is generally in bold format. The primary purpose of <strong> tag is to
provide semantic meaning to the content, indicating its importance to both browsers and
developers.

<strong> Contents... </strong>

HTML <mark> Tag

The <mark> tag in HTML is used to define the marked text. It is used to highlight the part
of the text in a paragraph. The <mark> tag is new in HTML 5.

Syntax:

<mark> Contents... </mark>

HTML <del> Tag

HTML <del> Tag is used to mark a portion of text that has been deleted from the document.
The deleted text is rendered as strike-through text by the web browsers. The <del> tag
requires a starting and ending tag.

Syntax

<del> Contents... </del>

HTML <em> Tag

HTML <em> tag is used to emphasize text, typically rendering it in italics. It conveys
importance or stress semantically and is widely employed for emphasis within paragraphs or
sentences.

Syntax:

<em> Contents... </em>

HTML Basic Examples

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading:
Example

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 3</h4>
<h5>This is heading 3</h5>
<h6>This is heading 3</h6>

HTML Paragraphs
HTML paragraphs are defined with the <p> tag:

Example

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

You cannot be sure how HTML will be displayed.

Large or small screens, and resized windows will create different results.

With HTML, you cannot change the output by adding extra spaces or extra lines in your
HTML code.

The browser will remove any extra spaces and extra lines when the page is displayed:

Example

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>

HTML Links (anchor tag)


HTML links are defined with the <a> tag:
Example

<a href="abc.html">This is a link</a>

The href Attribute


HTML links are defined with the <a> tag. The link address is specified in the href attribute:

Example

<a href="abc.html ">This is a link</a>

The src Attribute


HTML images are defined with the <img> tag.

The filename of the image source is specified in the src attribute:

Example

<img src="img_girl.jpg">

The width and height Attributes


Images in HTML have a set of size attributes, which specifies the width and height of the
image:

Example

<img src="img_girl.jpg" width="500" height="600">

The alt Attribute


The alt attribute specifies an alternative text to be used, when an image cannot be displayed.

The value of the attribute can be read by screen readers. This way, someone "listening" to the
webpage, e.g. a blind person, can "hear" the element.

Example

<img src="img_girl.jpg" alt="Girl with a jacket">

HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:

Example

<img src="schools.jpg" alt="School pics.com" width="104" height="142">

HTML Horizontal Rules


The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a
horizontal rule.

The <hr> element is used to separate content (or define a change) in an HTML page:

Example

<h1>This is heading 1</h1>


<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

HTML Line Breaks


The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a new paragraph:

Example

<p>This is<br>a paragraph<br>with line breaks.</p>

The HTML <pre> Element


The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it
preserves both spaces and line breaks:

Example

<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.


My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.


</pre>

HTML Fonts
Example

<font face="verdana">This is a heading</font>


< font face ="courier">This is a paragraph.</font>

HTML Text Size


The font-size property defines the text size for an HTML element:

Example

< font size=30>This is a heading</ font >


<font face="verdana" size=30>This is a heading</font>

Text Formatting

This text is bold

This text is italic

This is subscript and superscript

HTML Formatting Elements


In the previous chapter, you learned about the HTML style attribute.

HTML also defines special elements for defining text with a special meaning.

HTML uses elements like <b> and <i> for formatting output, like bold or italic text.

Formatting elements were designed to display special types of text:

 <b> - Bold text


 <strong> - Important text
 <i> - Italic text
 <u> - underline
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Small text
 <big> - big text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

HTML <b> and <strong> Elements


The HTML <b> element defines bold text, without any extra importance.

Example

<b>This text is bold</b>

The HTML <strong> element defines strong text, with added semantic "strong" importance.

Example

<strong>This text is strong</strong>

HTML <i> and <em> Elements


The HTML <i> element defines italic text, without any extra importance.

Example

<i>This text is italic</i>

HTML <small> Element


The HTML <small> element defines smaller text:

Example

<h2>HTML <small>Small</small> Formatting</h2>

HTML <mark> Element


The HTML <mark> element defines marked or highlighted text:

Example

<h2>HTML <mark>Marked</mark> Formatting</h2>

HTML <del> Element


The HTML <del> element defines deleted (removed) text.

Example

<p>My favorite color is <del>blue</del> red.</p>

HTML <ins> Element


The HTML <ins> element defines inserted (added) text.

Example

<p>My favorite <ins>color</ins> is red.</p>

HTML <sub> Element


The HTML <sub> element defines subscripted text.

Example

<p>This is <sub>subscripted</sub> text.</p>

HTML <sup> Element


The HTML <sup> element defines superscripted text.

Example

<p>This is <sup>superscripted</sup> text.</p>

Defining an HTML Table


An HTML table is defined with the <table> tag.

Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By
default, table headings are bold and centered. A table data/cell is defined with the <td> tag.

Example

<table border=”2” align="centre" cellpadding=”10” cellspacing=”10”>


<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

HTML Table - Cells that Span Many Columns


To make a cell span more than one column, use the colspan attribute:

Example

<table border=”2” align="centre" cellpadding=”10” cellspacing=”10”>


<tr>
<th>Name</th>
<th >Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
</tr>
</table>

HTML Table - Cells that Span Many Rows


To make a cell span more than one row, use the rowspan attribute:

Example

<table border=”2” align="centre" cellpadding=”10” cellspacing=”10”>


<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>

HTML Table - Adding a Caption


To add a caption to a table, use the <caption> tag:

Example

<table border=”2” align="centre" cellpadding=”10” cellspacing=”10”>


<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>

HTML List Example

An Unordered List:

 Item
 Item
 Item
 Item

An Ordered List:

1. First item
2. Second item
3. Third item
4. Fourth item

Unordered HTML List


An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Unordered HTML List - Choose List Item Marker


The CSS list-style-type property is used to define the style of the list item marker:

Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square

Example - Disc

<ul type=disc>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Example - Circle

<ul type=circle>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Example - Square

<ul type=square>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Ordered HTML List


An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

Example

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Ordered HTML List - The Type Attribute


The type attribute of the <ol> tag, defines the type of the list item marker:

Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers

Numbers:

<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Uppercase Letters:

<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Lowercase Letters:

<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Uppercase Roman Numbers:

<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Lowercase Roman Numbers:


<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Nested HTML Lists


List can be nested (lists inside lists):

Example

<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

HTML - <marquee> Tag


The HTML <marquee> tag is used for scrolling piece of text or image
displayed either horizontally across or vertically down your web site page
depending on the settings.

Example
Live Demo

<!DOCTYPE html>

<html>

<head>

<title>HTML marquee Tag</title>

</head>

<body>

<marquee>This is basic example of marquee</marquee>

<marquee direction = "up">The direction of text will be from bottom


to top.</marquee>
</body>

</html>

Attributes
The HTML <marquee> tag supports the following attributes −

Attribute Value Description

behavior scroll Defines the type of scrolling.


slide
alternate

bgcolor rgb(x,x,x) Deprecated − Defines the direction of scrolling


#xxxxxx the content.
colorname

direction up Defines the direction of scrolling the content.


down
left
right

height pixels or % Defines the height of marquee.

hspace pixels Specifies horizontal space around the marquee.

loop number Specifies how many times to loop. The default


value is INFINITE, which means that the marquee
loops endlessly.

scrolldelay seconds Defines how long to delay between each jump.

scrollamount number Defines how how far to jump.

width pixels or % Defines the width of marquee.

vspace pixels Specifies vertical space around the marquee.

You might also like