HTML Basics Part1

What is HTML?

HTML is the standard markup language for creating Web pages.

· 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

· HTML tags are element names surrounded by angle brackets.

· HTML tags normally come in pairs like and

· 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

HTML code can be written in any text editor like notepad, notepad++, TextEdit etc. File must be save with .htm or .html extention. For eg. Index.htm, myfile.html, first.html etc.

Basic Structure of HTML Page

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>My First Heading</h1>

My first paragraph.

</body>

</html>

The <html> element defines the whole document. It has a start tag <html> and an end tag </html>. The element content is another HTML element (the <body> element).

The <body> element defines the document body. It has a start tag <body> and an end tag </body>. The element content is two other HTML elements (<h1> and ).

Web Browsers

The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display them. The browser does not display the HTML tags, but uses them to determine how to display the document.

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

Do Not Forget the End Tag

Some HTML elements will display correctly, even if you forget the end tag.

HTML tags are not case sensitive: means the same as .

HTML Attributes

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"
bgcolor, title, href, src etc. are attributes

The HTML <head> Element

The HTML <head> element has nothing to do with HTML headings.

The <head> element is a container for metadata. HTML metadata is data about the HTML document. Metadata is not displayed.

The <head> element is placed between the <html> tag and the <body> tag.

HTML Headings

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

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

HTML Paragraphs

HTML paragraphs are defined with the  tag.

HTML Line Breaks

The HTML   element defines a line break.

Use if you want a line break (a new line) without starting a new paragraph.

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.

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.

HTML Formatting Tags

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

HTML uses elements like and for formatting output, like bold or italic text.

Formatting elements were designed to display special types of text:

- Bold text
- Important text
- Italic text
- Emphasized text
- Marked text
- Small text
<del> - Deleted text
<ins> - Inserted text
- Subscript text
- Superscript text

HTML Comment Tags

You can add comments to your HTML source by using the following syntax.

HTML Links

HTML links are defined with the <a> tag.

The href attribute specifies the destination address (https://www.smgc.com/html/) of the link.

The link text is the visible part (This is a link). Clicking on the link text will send you to the specified address.

Eg. <a href="https://www.smgc.com">This is a link</a>

HTML Link Colors

By default, a link will appear like this (in all browsers):

An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red

HTML Links - The target Attribute

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

_blank - Opens the linked document in a new window or tab
_self - Opens the linked document in the same window/tab as it was clicked (this is default)
_parent - Opens the linked document in the parent frame
_top - Opens the linked document in the full body of the window
framename - Opens the linked document in a named frame

This example will open the linked document in a new browser window/tab.

HTML Links - Create a Bookmark

HTML bookmarks are used to allow readers to jump to specific parts of a Web page.

Bookmarks can be useful if your webpage is very long.

To make a bookmark, you must first create the bookmark, and then add a link to it.

When the link is clicked, the page will scroll to the location with the bookmark.

Eg.

First, create a bookmark with the id attribute.

<h2 id="C4">Chapter 4</h2>

Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page.

<a href="#C4">Jump to Chapter 4</a>

Or, add a link to the bookmark ("Jump to Chapter 4"), from another page

<a href="html_demo.html#C4">Jump to Chapter 4</a>

HTML Images

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as attributes.

Eg. <img src="myphoto.jpg" alt="My Photo" width="100" height="100">

Image Maps

Use the <map> tag to define an image-map. An image-map is an image with clickable areas.

The name attribute of the <map> tag is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.

The <map> tag contains a number of <area> tags, that defines the clickable areas in the image-map.

Eg.

Tag	Example	Results
<b>	<b>Bold Text</b>	An example of Bold Text
<big>	<big>Big Text</big>	An example of Big Text
<center>	<center>Center Text</center>	An example of Center Text
<em>	<em>Emphasized Text</em>	An example of Emphasized Text
<i>	<i>Italic Text</i>	An example of Italic Text
<small>	<small>Small Text</small>	An example of Small Text
<strong>	<strong>Strong Text</strong>	An example of Strong Text
<sub>	<sub>Subscript Text</sub>	An example of _{Subscript Text}
<sup>	<sup>Superscript Text</sup>	An example of ^{Superscript Text}
<del> <s> <strike>	<del>Delete Text</del> <s>Strike Text</s> <strike>Strike Text</strike>	An example of An example of ~~Strike Text~~ An example of ~~Strike Text~~
<u>	<u>Underline Text</u>	An example of Underline Text
<tt>	<tt>Teletype Text</tt>	An example of Teletype Text
<blockquote>	<blockquote>Long Quotation</blockquote> <q>Short Quotation Text</q>	An example of Long Quotation Text An example of Short Quotation Text

Example of HTML Tags

<html>

<head>

<title>this is the title</title>

</head>

<body>

<h1>My Heading</h1>

This is the first paragraph of text.

This is the second paragraph of text.

An image: <img src="photo.jpg">

A link: <a href="http://www.matrumandircolleges.com"> Matrumandir College </a>

</body>

</html>

--------------------------------------------------------------------------------------------------------------------------

<html>

<body>

The first paragraph of text, aligned to the right.

This text is now in the second paragraph.

A new line, but still part of the second paragraph.

A third paragraph, and then a horizontal line

<hr>

Some modified horizontal lines:

</body>

</html>

--------------------------------------------------------------------------------------------------------------------------

<html>

<head>

<title>Example - Text Formating Tags</title>

<body>

<h1>Header Size 1</h1>

<H3>Header Size 3</h3>

The Next Line of example text should be in the middle of the document

Bold Text, Italic Text, and underlined text.

</center>

Font size = 5

Font Face = Arial

Font Color = Red

Normal Text, Subscript text, More Normal Text, Supersrpit Text

H2SO4

X2 + Y2

Text in Emphasis

Text in Strong

<cite>Text in citation</cite>

<pre>

This is preformatted text (using the PRE) tag

as it appears in the editor

view the source code and you will

notice that there are no tags until here.

It is dsiplayed the exact way that its been

set out in the editor. If required the font can be changed

like this using

the FONT FACE= tag.

</pre>

This text falls within the <tt>blockquote</tt> tag

</blockquote>

<tt>This text should appear as if it has been typed by a typewriter</tt>

The fine print (small text)

<hr>

--- End Of Example ---

</body>

</html>

પટેલ સમાજનો ઈતિહાસ જાણો : કોણ અને ક્યાંથી આવ્યા હતા પાટીદારો

June 13, 2018

Search This Blog

IT & Programming Information