Scribd
Upload
9 views

HTML

The document discusses HTML and its basic building blocks and elements. It covers HTML tags, attributes, elements and provides examples of how to format text, create lists, links and tables in HTML.

Uploaded by

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

HTML

The document discusses HTML and its basic building blocks and elements. It covers HTML tags, attributes, elements and provides examples of how to format text, create lists, links and tables in HTML.

Uploaded by

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

HTML

Front End Technologies


The front end is the visible part of the website or web application which is
responsible for the user experience. The user directly interacts with the
front-end portion of the web application or website.

Front-end languages:
Front-End Frameworks and Libraries
HTML
HTML stands for Hyper Text Markup Language

HTML is not a programming language, it is a markup language

A markup language is a set of markup tags

HTML uses markup tags to describe web pages.


HTML TERMINOLOGY
Some commonly used terms in HTML are:

Tag: Tags are always written within angle brackets. e.g.<HTML>

HTML tags can be of two types. They are:-


Paired Tags: In paired tags, the first tag is referred to as the opening tag and the
second tag is referred to as the closing tag.

Unpaired Tags: An unpaired tag does not have a companion tag .unpaired tags
are also known as singular or Stand-Alone tags. e.g. <br>,<hr>, etc.
HTML TERMINOLOGY
Attribute:

The attribute is the property of a tag that is specified in the opening angle brackets. It
supplies additional information like color, size, home font style, etc to the browser about a
tag. E.g. most of the common attributes are height, color, width, src, border, align, etc.

Element:

Element is the component of a document’s structure such as a title, a paragraph, or a list. It


can include an opening and a closing tag and the contents within it.
How to create an HTML document
The essential tags that are required to create an HTML document are:
<HTML>
<HEAD>
……………..
</HEAD>
<BODY>
……………...
</BODY>
</HTML>
A simple HTML document
<html>
<body>
This is a very simple HTML document with just some text on it.
</body>
</html>
Including comments in code
<html>
<body>
<!--
This is a comment, it will not be seen on a webpage.
-->
<p>
But this text sure will be seen!
</p>
</body>
</html>
Setting the title and background of a document
<html>
<head>
<title>The page of all pages</title>
</head>
<body bgcolor="black">
<p><font color="white">
The background color of a webpage can be set through the bgcolor attribute.</font>
</p>
</body>

</html>
Displaying bold, italic, or underlined text
<html>
<body>
<b>Here is some bold text</b>
<br />
<i>Here is some italic text</i>
<br />
<u>Here is some underlined text</u><br />
<br />
<b><u><i> Here is some bold, italic, and underlined text </i></u></b>
</body>

</html>
Displaying text in different sizes using headings
<html>
<body>
<h6>Headings</h6>
<h5>come in</h5>
<h4>a few different sizes</h4>
<h3>Use them</h3>
<h2>for page</h2>
<h1>organization</h1>
</body>

</html>
Displaying text in different fonts, sizes, and colors
<html>
<body>
<font color="green">
The font element is deprecated in HTML 4 and CSS should be used instead.
</font>

<font size="6">
Although deprecated, the font element is not obsolete, it can still be used.
</font>

<font face="Courier">
The font element can be used for backward compatibility -
</font>

<font face="Verdana" color="gray" size="8">


for browsers that do not support CSS.
</font>

</body>
</html>
Deleting and inserting text
<html>
<body>
HTML stands for
<del>Hyper Translation Markup Language</del>
<ins>Hyper Text Markup Language</ins>.
</body>

</html>
Creating ordered lists

<html>
<body> <b>An ordered list with uppercase roman numerals:</b>
<b>An ordered list with numbers (default):</b> <ol type="I">
<ol> <li>Telephone</li>
<li>Telephone</li> <li>Cellular phone</li>
<li>Cellular phone</li> <li>Television</li>
<li>Television</li> <li>Fax machine</li>
<li>Fax machine</li> </ol>
</ol> </body>
</html>
<b>An ordered list with lowercase letters:</b>
<ol type="a">
<li>Telephone</li>
<li>Cellular phone</li>
<li>Television</li>
<li>Fax machine</li>
</ol>
Creating unordered lists
<html>
<body>
<b>An unordered list with disc bullets (default):</b>
<ul type="disc">
<li>Telephone</li>
<li>Cellular phone</li>
</ul>
<b>An unordered list with square bullets:</b>
<ul type="square">
<li>Telephone</li>
<li>Fax machine</li>
</ul>
<b>An unordered list with circle bullets:</b>
<ul type="circle">
<li>Cellular phone</li>
<li>Television</li>
</ul>
</body>
</html>
Description lists
<html>
<body>
<b>A description list:</b>
<dl>
<dt>HTML</dt>
<dd>Stands for Hyper Text Markup Language. It is used to create webpages.</dd>
<dt>Guitar</dt>
<dd>A stringed musical instrument.</dd>
</dl>
</body>

</html>
Creating nested lists
<html>
<body>
<b>An unordered nested list:</b> <b>An ordered nested list:</b>
<li>Vehicle types:
<ul> <!-- second nested list begins here -->
<li>Book genres: <ol type="A">
<!-- first nested list begins here --> <li>Car</li>
<ul> <li>Van</li>
<li>Fiction</li> <li>Truck</li>
<li>Non-Fiction</li> <li>Trailor</li>
<li>Adventure</li> </ol>
<li>Educational</li> <!-- second nested list ends here -->
</ul> </li>
<!-- first nested list ends here --> </ol>
</li> </body>
</html>
Displaying preformatted text
<html>
<body>
<b>A sample Java program:</b>

<pre>
class DataClass{
public static void main(String[] args){
System.out.println("Here is some text.");
}
}
</pre>

<p>
Using the pre-element you can display text however you want with all the
spaces and line breaks preserved.
</p>
</body>
</html>
Displaying quotations and subscript or superscript
<html>
<body>
<blockquote>
In 1983, usability was an oppressed discipline. We few pioneers had to
struggle against the prevailing attitude that computing is about power and
features — not ease of use and a pleasurable user experience.
</blockquote>
<q>Hello, I am a quote. A short one.</q>
H<sub>2</sub>O = Water
<br />
75<sup>th</sup>
</body>
</html>
Linking to other websites and directories
<html>
<body>
<a href="http://www.yahoo.com">Go to Yahoo</a>
<br /><br />
<a href="http://www.reddit.com">Go to Reddit</a>

<p>
Linking to a page in a directory ahead of the current
directory. You can do it by using the name of the directory
and the file name as a relative path:
</p>
<a href="file.txt">See some text</a>
</body>
</html>
Linking within the same page
<html>
<body>
<a name="top"></a>
Click <a href="#bottom">here</a> to jump to the bottom of the page

<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>

<a name="bottom"></a>
Click <a href="#top">here</a> to jump to the top of the page
</body>
</html>
Basic HTML table
<html>
<body>
<table border="2">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
<p> About as basic as it gets, really. </p>
</body>
</html>
Table row span and column span
<html> <p>
<body> Spanning more than one row:
<p> </p>
Spanning more than one column: <table border="2">
</p> <tr>
<table border="2"> <td>Cell 1</td>
<tr> <td>Cell 2</td>
<td>Cell 1</td> </tr>
<td colspan="5">Cell 2</td> <tr>
</tr> <td rowspan="2">Cell 3</td>
<tr> <td>Cell 4</td>
<td>Cell 3</td> </tr>
<td>Cell 4</td> <tr>
</tr> <td>Cell 5</td>
</table> </tr>
</table>
</body>
</html>
Queries

You might also like