HTML Introduction

Hypertext - It defines the the way webpages are linked together and you can move around webpages using a special text which linked to other webpage is known as Hyperlinks. Markup Language
- HTML is a language used to markup the plain text using various Markup Tags.
HTML is a easy to use and understandable scripting language used to develop website. First invented in year 1990 with the sole purpose of presenting information on internet. HTML defines the logical
organization and formatting of the HTML Entities or content on document.HTML documents are also
known as Web Pages, what we see when we view a web page on the browser is the interpretation of HTML.

Hyper Text Markup Language is a set of special short codes formally know as HTML Markup Tags which can be embedded in text to add formatting and linking of information.
Note:- HTML documents are just text files with the “.html” extension.

HTML Files can be created with the any simple texteditor program like notepad. Some popular HTML editors are FrontPage and Dreamweaver.

Example – Basic HTML page structure

<html> <head> <title>My First Web Page</title> </head> <body> This is where the page content comes. </body> </html> Output of Program:

Elements

HTML documents are text files. This is defined by HTML elements.

Start tag	Element content	End tag
<p>	This is a paragraph	</p>
<a href="index.html">	This is a link	</a>
<b>	Bold Text	</b>

Example of HTML Elements:

<html>

<body>

<p>This is my first <b>paragraph text</b>. </p>

</body>

</html>

OUT-PUT of Program:

Basic Tags

Note: HTML tags (HTML elements) and their respective attributes are used to create HTML documents so that you can view them in browsers and other user agents.

Tag	Description	DTD
<!--...-->	Defines a comment	STF
<!DOCTYPE>	Defines the document type	STF
<a>	Defines an anchor	STF
<abbr>	Defines an abbreviation	STF

<address>	Defines contact information for the author/owner of a document	STF

<area />	Defines an area inside an image-map	STF
<b>	Defines bold text	STF
<base />	Specifies the base URL/target for all relative URLs in a document	STF

<bdo>	Overrides the current text direction	STF
<big>	Defines big text	STF
<blockquote>	Defines a long quotation	STF
<body>	Defines the document's body	STF
<br />	Defines a single line break	STF
<button>	Defines a clickable button	STF
<caption>	Defines a table caption	STF
<center>	Deprecated. Defines centered text	TF


<col />	Defines attribute values for one or more columns in a table	STF
<colgroup>	Specifies a group of one or more columns in a table for formatting	STF

<del>	Defines text that has been deleted from a document	STF

<dir>	Deprecated. Defines a directory list	TF
<div>	Defines a section in a document	STF
<dl>	Defines a definition list	STF

<tr>	Defines a row in a table	STF

<font>	Deprecated. Defines font, color, and size for text	TF
<form>	Defines an HTML form for user input	STF
<frame />	Defines a window (a frame) in a frameset	F
<frameset>	Defines a set of frames	F
<h1> to <h6>	Defines HTML headings	STF
<head>	Defines information about the document	STF
<hr />	Defines a horizontal line	STF
<html>	Defines the root of an HTML document	STF
<i>	Defines italic text	STF
<iframe>	Defines an inline frame	TF
<img />	Defines an image	STF
<input />	Defines an input control	STF

<kbd>	Defines keyboard input	STF
<label>	Defines a label for an <input> element	STF
<legend>	Defines a caption for a <fieldset> element	STF
<li>	Defines a list item	STF
<link />	Defines the relationship between a document and an external resource	STF

<menu>	Deprecated. Defines a menu list	TF
<meta />	Defines metadata about an HTML document	STF
<noframes>	Defines an alternate content for users that do not support frames	TF

<object>	Defines an embedded object	STF
<ol>	Defines an ordered list	STF
<optgroup>	Defines a group of related options in a drop-down list	STF
<option>	Defines an option in a drop-down list	STF
<p>	Defines a paragraph	STF
<param />	Defines a parameter for an object	STF
<pre>	Defines preformatted text	STF
<q>	Defines a short quotation	STF
<u>	Deprecated. Defines underlined text	TF
<samp>	Defines sample output from a computer program	STF
<title>	Defines a title for the document	STF
<select>	Defines a drop-down list	STF

<span>	Defines a section in a document	STF

<strong>	Defines strong text	STF


<ul>	Defines an unordered list	STF
<table>	Defines a table	STF
<tbody>	Groups the body content in a table	STF
<td>	Defines a cell in a table	STF
<textarea>	Defines a multiline input control (text area)	STF
<tfoot>	Groups the footer content in a table	STF
<th>	Defines a header cell in a table	STF
<thead>	Groups the header content in a table	STF

Attributes

HTML Elements can have an optional list of modifiers added to the tag. This modifiers are known as HTML attributes, they defines the characteristics of the HTML Elements on which they are applied.

Whenever HTML Elements is rendered by browser, the attributes gives the more information about the appearance and the behavior the HTML Elements.

Attributes made of a name and a value pair separated by the equals (=) sign.

Syntax:

<tagname attribute-name="attribute-value">content</tagname>

List of some of the Basic Attribute -

Attribute	Attribute Values	Description
align	right, left, center	This attribute specifie the horizontal alignment of an HTML element.
valign	top, middle, bottom	This attribute specifie the vertical alignment of an HTML element.
bgcolor	numeric, hexidecimal, RGB values	This attribute specifie background color for an HTML Element
background	URL	This attribute specifie background image for an HTML Element
id	User Defined	This attribute used to specify the unique identifier for the HTML Element.
class	User Defined	This attribute specifies the CSS Class for the HTML Elemetns.
width	Numeric Value	This attribute specifies the width of HTML Elemetns like tables, images, or table cells.
height	Numeric Value	This attribute specifies the height of HTML Elemetns like tables, images, or table cells.
title	User Defined	This attribute specifies title of HTML Elements.

HTML Formatting

HTML Formatting Tags enable us to organize the HTML Element in manner that enhance the readability of the webpage. Formatting tags allows us to define the proper format or structure for the information to be presented on the webpage. A well organized information is combination of heading, paragraph, listing element, space, line breaks etc.

Example –

<p>An example of <b>Bold Text</b></p>

<p>An example of <em>Emphasized Text</em></p>

<p>An example of <strong>Strong Text</strong></p>

<p>An example of <i>Italic Text</i></p>

<p>An example of <sup>superscripted Text</sup></p>

<p>An example of <sub>subscripted Text</sub></p>

<p>An example of <del>struckthrough Text</del></p>

<p>An example of <code>Computer Code Text</code></p>

OUT-PUT off Program:

HTML Marquees

HTML Marquee used to set a scrolling (vertically or horizontally) text or image. Using <marquee> tag we can set text/images scroll from right to left, left to right, top to bottom, or bottom to top.

Syntax:

One or more lines or text message or image

</marquee>

Marquee Tag Attributes:

Attribute	Value
direction	This attribute specifies the direction of scroll. Example – up, down, left or right.
behavior	This attribute specifies the type of scrolling. Example- scroll, slid and alternate.
scrolldelay	This attribute specifies the interval between each jump.
scrollamount	This attribute specifies the amount of jump.
loop	This attribute specifies the number of time text/image will scroll.

Examples:

Your scrolling text

</marquee>

OUT-PUT of Program:

HTML Images

Images plays a very important role in presenting the information.We can also embed the images into the HTML Document, this can be accomplished using <img> tag.

Syntax:

Image Tag Attributes

Attribute	Value
width	This optional attribute specifies the width of the image element.
height	This optional attribute specifies the height of the image element.
border	This attribute specifies the border around the image.
src	This attribute specifies the path to the image. It can be either an absolute path, or a relative path, it is required attribute
alt	This attribute specifies the alternative text to be displayed when the browser can’t find or render the image.
align	This attribute specifies the horizontal alignment of the image. Example -left, right or center.

Example:

OUT-PUT of Program:

HTML Text Links

HTML Text Links are formally know as hyperlinks or link. Link allows visitors to navigate the website from one page to another page.

A link is created using <a href=”"> tag known as anchor tag and value of href attribute is the URL or PATH where the link is pointing to.

Syntax:

Anchor Attributes

Hypertext references ( href )

This attribute specifies the target url for the linked element. A target can be absolute, relative or root relative URLs.

Absolute URLs – It refers the full path for the target location. Example – http://www.w3school.in
Relative URLs- It refers the target location’s path relative to current location. Example – if we are at http://www.w3school.in/ and want to navigate to http://www.w3school.in/php then we just specify it by “/php”.
Root Relative URLs- It refers path relative to the domain’s root.

Link Target (target)

It specifies where to open the selected link.

_blank – It opens new page in new window to display the target location.
_self – It opens new page in the current window to display the target location.
_parent – It opens new page into a parent frame.
_top – It opens new page into the current browser window, cancelling all frames.

Base href

It is not always required you to complete URL for every link but we can specify a default URL for all links on the page.This can be achieved by putting base tag in the HTML document’s <head> section.

Target Attribute:

With the target attribute, you can define where the linked document will be opened.

The line below will open the document in a new browser window:

Syntex:

<a href="http://www.facebook.com/" target="_blank"> Visit Facebook</a>

Example: HTML Text Links.

<head>

<a href="http://www.facebook.com/">Visit Facebook</a>

</head>

OUT-PUT of Program:

HTML Tables

HTML Table Element used to represent the information in tabular format on the web page that enhance the readability of the information. HTML Tables Elements can also be used to create layouts or structure of the webpages.

Like any other table HTML Tables are composed of one or many rows and rows in turns composed of one or many cells. Table cells can contain the actual information it can be text,image, HTML Element or could be HTML Table itself.

Standard HTML Table Structure -

HTML Tables can be easily created using <table>..</table> tag.

Basic tags required to create a HTML Table -

Tag	Description
<table>	Represent the begining of table element.
<th>…</th>	This tag is used to specify the table column heading.
<tr>…</tr>	This tag is used to represent starts and ends of a table row
<td>…</td>	This tag is used to represent starts and ends of a table cell
</table>	Represent the end a table element.

Table Border:-

Grids/Borders can be set for outside boundaries of the table and table cells using table “Border” attribute, we can pass a numerical value for the this attribute and specifies the thickness of the border, value "0" specifies no borders to be drawn.

Example:

<tr> <td>cell three</td> <td>cell four </td> </tr>

</table>

OUT-PUT of Program:

Table Heading:-

Table Heading allows us to set heading for the columns in the table,using <th>…</th> tag we can define heading cells for column. The Heading cell is same as other cells in table and can be manipulated in the same way. The text between heading tags will displayed in bold and will be aligned centered within the table cell.

Example:

<tr > <th>Column One</th> <th>Column two </th> </tr>

<tr> <td>cell three</td> <td>cell four </td> </tr>

</table>

OUT-PUT of Program:

Table Colspan:

This attribute enable us to specify the span of the cell across the number of columns. We can assign numerical value to the attribute, which means how many columns width will this cell occupy, it depends on how many columns we wish to cell span across.

Example:

<tr > <th>Column One</th> <th>Column two </th> </tr>

<tr> <td>cell three</td> <td>cell four </td> </tr>

</table>

OUT-PUT of Program:

Table Rowspan:-

This attribute enable us to specify the span of the cell across the number of rows. We can assign numerical value to the attribute, which means how many rows height will this cell occupy, it depends on how many rows we wish to cell span across.

Example:

</table>

OUT-PUT of Program:

HTML Backgrounds

HTML Backgrounds gives us a way to set background image for HTML elements like - HTML Table.

We can set various type of background like solid color, transparent background, gradient etc.HTML Backgrounds grow or shrink dynamically as the HTML element grows or shrinks.

Example:

<table height="100" width="150" border="2"

background="file:///C:/Users/Pc%20No%201/Desktop/subhhash.jpg" >

<tr > <th>Column One</th> <th>Column two </th> </tr>

<tr> <td>cell three</td> <td>cell four </td> </tr>

</table>

OUT-PUT of Program:

HTML Forms

HTML Forms gives a way to web developers to collect the information from the visitors. HTML Forms can collect input from the visitors and pass it to the server using the server side scripting languages like- php,asp etc.HTML Form supports various input elements to take the input from the visitor like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.HTML Form is defined using the <form></form> tags. The actual input elements are placed in between these two tags. Example:

<html>

<head>

<form>

<input type="text" name="name" value="Enter your name"

size="25" maxlength="25">Name<br><br>

<input type="text" name=address" value="Address" size="25" maxlebgth="30">Address<br><br>

<input type="text" display="hide" name=password" value="Password" size="25" maxlebgth="30">Password<br><br>

</form>

</body>

</html>

OUT-PUT of Program:

HTML Frames

HTML frames allow you to split the whole window up into different frames. For example, you can have a frame to display your left menu, another frame to display the top menu, and another frame to display the main content area. With frames, your HTML document can be made up of many different pages.
HTML frames were once popular on the web, however, their usage has dwindled over the years. This is probably due to the various usability issues that they can cause, issues with search engine optimization, as well as the fact that frames are being discontinued (as of HTML5).

Syntax for adding an iframe:

Iframe - Set Height and Width

The height and width attributes are used to specify the height and width of the iframe.
The attribute values are specified in pixels by default, but they can also be in percent (like "80%").

Example

Iframe - Remove the Border

The frameborder attribute specifies whether or not to display a border around the iframe.
Set the attribute value to "0" to remove the border:

Example

Use iframe as a Target for a Link

An iframe can be used as the target frame for a link.
The target attribute of a link must refer to the name attribute of the iframe:

Example

Program to Implement Frame Set

<html>

<head>

<title>My Frames Page</title>

</head>

</frameset>

</html>

Output of Program:

To Download Their Project File Click Below

Subhash Collection

Pages

HTML Basic

HTML Introduction

Elements

Basic Tags

Attributes

HTML Formatting

HTML Marquees

Examples:

OUT-PUT of Program:

HTML Images

HTML Text Links

Target Attribute:

Example: HTML Text Links.

HTML Tables

OUT-PUT of Program:

OUT-PUT of Program:

OUT-PUT of Program:

OUT-PUT of Program:

HTML Backgrounds

OUT-PUT of Program:

HTML Forms

Iframe - Set Height and Width

Example

Iframe - Remove the Border

Example

Use iframe as a Target for a Link

Example

To Download Their Project File Click Below

1 comment: