HTML – TABLES

HTML table are used to arrange the data into tabular data. that is-,images, links, text display via a two-dimensional data table.

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, and <td> tag is used to create data cells.

Example

<!DOCTYPE html> 
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table >
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

HTML Table – Adding a Border

The table border attribute could accept two values: 0 for no borders and 1 to display borders around table cells.

header is defined with the <th> tag. By default, and <td> tag is used to create data cells.

Example

<!DOCTYPE html> 
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

Cell Padding

Cell padding means the space between the cell content and its border. if you don’t specify a cell padding the table will take default value.

Cell spacing

Cell spacing means the space between the cell to cell . if you dont specify a cell padding the table will take default value.

<!DOCTYPE html> 
<html>
<head>
<title>HTML Table Cellpadding</title> </head>
<body>
<table border="1" cellpadding="5" cellspacing="5"> >
<tr>
<td>Name </td>
<td>Amount</td>
</tr>
<tr>
<td>a</td>
<td>2000</td>
</tr>
<tr>
<td>b</td>
<td>1500</td>
</tr>
<tr>
<td>c</td>
<td>1400</td>
</tr>
</table>
</body>
</html>

Col span and Row span

You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will use rowspan if you want to merge two or more rows.

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell
3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>

Table Caption

caption tag will serve as a title or explanation for the table and it shows up at the top of the table. This tag is deprecated in newer version of HTML/XHTML.

<!DOCTYPE html> 
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border="1" width="100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, column 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, column 2</td>
</tr>
<table></body></html>

HTML – IMAGES

This article will explain how to insert the image into webpage. In the beginning the web was just text, and it was boring. Some days later the ability was added embed images inside the webpages.

Insert image:

You can inset any image into your webpage by using tag. The below are example

<img src=”Image url…” >

Example:

So for example, if your image called abc.jpg and it is set in the same directory as your html page.

<!DOCTYPE html> 
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Image Insert here</p>
<img src="abc.png" alt="abc" />
</body>
</html>

This will produce the following result:

Image insert here

You can use PNG, JPEG or GIF image file based on your comfort but make sure you specify correct image file name in src attribute. Image name is always case sensitive.

The alt attribute is a mandatory attribute which specifies an alternate text for an image. This will be used for search engine optimization.

Image height and width:

You can give  the image height and width based on your  requirement  using width and height attributes.

The alt attribute is compulsory attribute which specifies an alternate text for an image, if the image cannot be displayed.

Location of the image

All images keep into one separate folder.so let’s keep one html file abc.html in our home directory and create sub directory images inside the home directory where we will keep our image abc.png

<!DOCTYPE html> 
<html>
<head>
<title>Insert Image into Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src="images/abc.png" alt="abc Image" />
</body>
</html>

Set Image Border

Image will have a border around it. You can specify the border width using border attribute.

<!DOCTYPE html> 
<html>
<head>
<title>  Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src="abc.png" alt=" abc Image" border="5"/>
</body>
</html>

Images on Another Server

Some website stored their images on servier. That can be access to below example

<!DOCTYPE html> 
<html>
<head>
<title>  Image On server </title>
</head>
<body>
<p>Setting On server </p>
<img src=" http://tutorwebdesign.com/images/abc.png" alt=" abc Image" border="5"/>
</body>
</html>

HTML – COMMENTS

The comment tag is used to insert the comments in the source code.comments to your code,which can help you when you edit the source code at a later date. comments help you others understand your code.

HTML comments are placed in between <!– … –> tags. so, all content placed with-in <!– … –> tags will be treated as comment and will be ignored by the browser.

Example

<!DOCTYPE html>  
  <html>  
  <head> <!-- Header Starts  --> 
  <title> document  title</title>  
  </head> <!-- Header Ends  --> 
  <body>  
  <p> content.....</p>  
  </body> 
  </html>  

Valid vs Invalid Comments

comment cannot be put inside another comment. Second the double-dash sequence "–" may not appear inside a comment except as part of the closing –> tag.

Example

Here, the given comment is a valid comment .

<!DOCTYPE  html> 
  <html> 
  <head>  
  <title>Valid  Comment Example</title> 
  </head>   
 <body>  
  <!--  This is valid comment --> 
  <p>Document  content goes here.....</p> 
  </body>  
  </html> 

But, following line is not a valid comment and will be displayed by the browser. This is because there is a space between the left angle bracket and the exclamation mark.

<!DOCTYPE  html>  
  <html>  
  <head>  
  <title>Invalid  Comment Example</title>  
  </head> 
  <body>  
  <  !-- This is not a valid comment --> 
  <p>Document  content goes here.....</p> 
  </body> 
  </html> 

This result:

< !– This is not a valid comment –>
Document content goes here…..

Multiline Comments

The above examples we have seen single line comments, but HTML supports multi-line comments as well.
You can comment multiple lines by the special beginning tag <!– and ending tag –> placed before the first line and end of the last line as shown in the given example below.

example

<!DOCTYPE  html><html>  
  <head> 
  <title>Multiline  Comments</title>  
  </head>  
  <body>  
  <!--  
  This  is a multiline comment and it can  
  span  through as many as lines you like. HTML  
  
  --> 
  <p>Document  content goes here.....</p>  
  </body>  
  </html> 

This result:

Document content goes here…..

Conditional Comments

Conditional comments only work in Internet Explorer (IE) on Windows but they are ignored by other browsers. They are supported from Explorer 5 onwards, and you can use them to give conditional instructions to different versions of IE.

Example

<!DOCTYPE  html><html> 
  <head>  
  <title>Conditional  Comments</title>  
  <!--[if  IE 6]>  
  Special  instructions for IE 6 here  
  <![endif]-->  
  </head>  
  <body>  
  <p>Document  content goes here.....</p>  
  </body>  
  </html> 

Using Comment Tag

There are few browsers that support <comment> tag to comment a part of HTML code.

Example

<!DOCTYPE  html><html>  
  <head> 
  <title>Using  Comment Tag</title> HTML  
 
  </head>  
  <body>  
  <p>This  is <comment>not</comment> Internet Explorer.</p>  
  </body>  
  </html> 

Commenting Script Code

if you are using Java Script or VB Script in your HTML code then it is recommended to put that script code inside proper HTML comments so that old browsers can work properly.

Example

<!DOCTYPE  html><html>  
  <head> 
<title> Script Code</title> <script> <!-- document.write("Hello welcome!") //-->
</script> </head> <body> <p>Hello , welcome!</p> </body> </html>

Html Header section

This section will be describing more about the header part. The html is divided into two different parts. One is header part and the second one is body part. The header part is combination of the different tags.

The header is represented by <head> tag.

HTML Title Tag

The <title> element defines the title of the webpage or document. It is very useful to search the particular web page in search engine.

 

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
The content of the document……
</body>

</html>

HTML style Tag

This tag is used to define the style information of the webpage. This tag will be internal purpose only.

<style>   body {background-color: powderblue;}   h1 {color: red;}   p {color: blue;} </style>

HTML Link tag

This tag is used for to link the external style sheets and Google fonts.

<link rel="stylesheet" href="mystyle.css">

HTML Meta Tag

Meta tags are a great way for webmasters to provide search engines with information about their sites. Which character set is used, page description, keywords, author, and others.

Attribute Description
Name Name for the Meta Tag property. Examples include, keywords, description, author, revised, generator etc.
content Specifies the Meta Tag property’s value.
scheme Specifies a scheme to interpret the property’s value.
http-equiv Used for http response message headers. For example http-equiv can be used to refresh the page or to set a cookie.

HTML Meta Keywords

Meta Keywords are a specific type of tag that appear in the HTML code of a Web page and help tell search engines what are the data keywords in the webpage.

<!DOCTYPE html> 
<html> 
<head> 
<title>Meta Tags Example</title> 
<meta name="keywords" content="HTML, Meta Tags, Metadata" /> 
</head> 
<body> 
<p>Hello HTML5!</p> 
</body> 
</html>

HTML Meta Description

Meta descriptions are HTML attributes that provide explanations of the content of web page.

<!DOCTYPE html>  <html>  <head>  <title>Meta Tags Example</title>  <meta name="keywords" content="HTML, Meta Tags, Metadata" />  <meta name="description" content="Learning about Meta Tags." />  </head>  <body>  <p>Hello HTML5!</p>  </body>  </html>

HTML Attributes

Most of the html tags have different type of attributes is available. These attributes are divided into core attributes, internationalization attributes, and scripting events.

Core Attributes

Id: a unique identifier for this element in the document.

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

<P ID=first>My first paragraph.</P>
<P ID=second>My second paragaph.</P>

Class: The CLASS attribute specifies the element to be a member of one or more classes

<DIV CLASS=navbar>

<P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P>

<P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P>

</DIV>

The style sheet of the navbar class

.navbar {
  margin-top: 2em;
  padding-top: 1em;
  border-top: solid thin navy
}

Style: The style attributes allows to specify the styles rules inline for single occurrence of the element.

<P>A popular font for on-screen reading is <SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>

Title: the title tag will be given into the identify the paragraph, links and other elements. these tags most commonly used for tooltip purpose.

<p title="About menueducation ">
menueducation is a web developer’s site.
It provides tutorials and references covering
many aspects of web programming,
</p>

Internationalization Attributes

LANG:

The lang attribute specify the language of the document. They don’t specify their own attribute.

<!DOCTYPE html> 
  <html lang="en-US"> 
  <body> 
  
<h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>

In the above example the first two letters spicy the language and the second two letters specify the region.

DIR

The DIR attribute allows to indicate the browser the direction of the text which way should be display. The tag will give two types of the attributes.

LTR: left to right (this is default way)

RTL: Right to Left (some other country languages like Arabic used this type of the styles)

Align:

This attribute allows to align the text into Horizontally . There are mainly there types.

Left: align text into left side of the document or block

Center: align text into center of the document or block;

Right: align text into right side of the document or block;

Valign:

This attribute allows to align the text into vertically. There are mainly three types that is top, middle, bottom.

HTML Elements

An html elements are defined by a starting tag ,and put the some content of the middle of the tag, after complete the content we are giving the closing tag. Please see the below table there are some of the tags are available.

Start Tag Content End Tag
<p> This is paragraph content. </p>
<h1> This is heading content. </h1>
<div> This is division content. </div>
<br />

In the above example <p>.. </p> is an html element ,<h1>… </h1> is another html element.

Nested HTML elements

Nesting means that when you put several tags into a document, you must balance each tags, making sure they do not overlap. It is used one html tag inside another html tag.

<!DOCTYPE html> 
<html> 
<head> 
<title>Nested Elements Example</title> 
</head> 
<body> 
<h1>This is <i>italic</i> heading</h1> 
<p>This is <u>underlined</u> paragraph</p> 
</body> 
</html>

Empty HTML elements

Some html tags which don’t need the closing tags. That tags are empty html elements.

<br> is empty element without a closing tag. Empty elements can be "closed" in the opening tag like this: <br />.

HTML Basic Tags

Heading Tags

any layout starts with a heading. HTML also provides six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. The heading tags are block elements. It should be display block of the content.

<!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>

html_basic_tags

Paragraph Tag

In the body tag the content will display into the proper structure of the paragraph. The paragraph text should go in the opening <p> and closing </p> tags.

<!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>

Link tags

A link is a connection from one page to another page. Although a simple concept, the link has been one of the primary source to clicking the webpage

Anchor tag defined with the <a> tag.

<a href="http://www.w3schools.com">This is a link</a>

The “href” attribute in each source anchor specifies the address of the destination anchor. Every anchor tag will be different types of attributes is avilabale.

Images

Images are very important to beatify of the your webpage. You can inset into any image in your webpage by using <img> tag.

<!DOCTYPE html> 
<html> 
<head> 
<title>Using Image in Webpage</title> 
</head> 
<body> 
<p>Simple Image Insert</p> 
<img src="/html/images/test.png" alt="Test Image" /> 
</body> 
</html>

Html doctypes


Replacement

Deprecated HTML tags

Deprecated

Description

<applet>

Inserts applet

<object>

<basefont>

sets font styles

font style sheets

<center>

centers elements

< div style="text-align:center"> (W3C help)

<dir>

directory list

< ul >

<font>

applies font styles

font style sheets

<isindex>

adds search field

< form >

<menu>

menu list

< ul >

<s>

strike through

text style sheets

<strike>

strike through

text style sheets

<u>

underline

text style sheets

HTML Introduction

Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus the link available on a webpage are called Hypertext

HTML was developed with the intent of defining the structure of documents like headings, paragraphs, lists, and so forth to facilitate the sharing of all information into the users.

HTML Example

This simple example for How to write the html document.

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 
</head> 
<body> 
<h1>Heading</h1> 
<p>paragraph.</p> 
</body> 
</html> 

The above example of HTML document uses folloiwng tags:

Tag Description
<!DOCTYPE...> 
The DOCTYPE declaration defines the document type to be HTML.

<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>
The text between

<head>
and
</head>
provides information about the document

<title>
The
<title>
tag is used inside the

tag this is provides a title for the document

<body>
This tag describes the visible page content. which keeps other HTML tags like <h1>, <div>, <p> etc.
<h1> This tag represents the heading.
<p> This tag represents a paragraph.

What is HTML?

HTML is a markup language for creating web pages. HTML stands for Hyper Text Markup Language , which is the mostly used language on develop web pages.

HTML (Hypertext Markup Language) is the set of markup symbols or codes inserted in a file. That file display on a World Wide Web browser. The markup tells the Web browser how to display a Web page’s words and images for the user. Each individual markup code is referred to as an tag.

History

The first version of HTML was written by Tim Berners-Lee in 1993. . “HTML 2.0” was the first standard HTML specification which was published in 1995. HTML 4.01 was a major version of HTML and it was published in late 1999. Though HTML 4.01 version is widely used but currently we are having HTML-5 version which is an extension to HTML 4.01, and this version was published in 2012.

Most pages on the Web today were built using either HTML 4.01 or XHTML 1.0. However, in recent years, the W3C (in collaboration with another organization, the WHATWG), has been working on a brand new version of HTML, HTML5. Currently (2011), HTML5 is still a draft specification, and is not yet an official standard. However, it is already widely supported by browsers and other web-enabled devices, and is the way of the future.

How does it work?

HTML consists of a series of short codes typed into a text-file, these are called tags. The text is saved as a html file, and viewed through a browser, like Mozilla Firefox or Google chrome. This browser reads the file and translates the text into a visible format , hopefully rendering the page as the author had intended. Writing your own HTML entails using tags correctly to create your vision. You can use anything from a rudimentary text-editor to a powerful graphical editor to create HTML pages.

Html editors

Experience with any text editor like notepad, notepad++, or Editplus etc.

Basic HTML Document

!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>

RECENT POSTS

Firefox CSS Hacks

admin
Wednesday, May 15th, 2019

Top 15 Web Design Trends 2018

admin
Friday, May 3rd, 2019