bloginfo: May 2013

WHAT IS HTML

HTML stands for Hyper Text Mark up Language. It is the native language of all the browsers.

HTML documents comprises of html tags and text. These tags contain the html document content for example,

< color > blue </color >

Where, <colour> - tag and blue - text

The html content is given between a pair of tag names. Start tag comes with a pair of brackets such as <colour> and the end tag comes with a pair of brackets which includes a backslash such as </colour>. This start and end tags indicates html keywords.

Let’s have a look at the sample html code for web page structure.

<html>

<body>

<h1> 1^st heading </h1>

<p> 1^st paragraph </p>

</body>

</html>

You can see in the above sample that every keyword has its own start and end tags.

DOC TYPE DECLARATION

The document type declaration should be given in the beginning of the script. The syntax appears as shown below.

<! DOCTYPE html>

This is required to inform the browser about the HTML version used by the document.

In order to create a web page, you just need a note pad to write your HTML codes and to view your page you need a browser. Create your HTML document using note pad.

CREATE WEB PAGE USING NOTE PAD

To create a webpage using note pad, follow the steps given below.

Open a note pad and enter the html code

Save the notepad as “.html” file.

Now open your browser, click on File->open file->select the note pad name and click on open.

The web page output appears as shown below for the html code that you have coded.

HTML ELEMENTS

Every HTML element is the basic building block of HTML and is typically made up of two tags: an opening tag and a closing tag.

For example, the heading element <h1> </h1> is made up of the opening tag <h1> and the closing tag </h1>.

Different html elements are explained in the following sections.

Let’s learn about each basic tag in the following sections.

<body>

This tag defines the body content of the html document. It is the place where the entire content of the html document lies.

<Body> content </body>

ELEMENTS RELATED TO HTML FORMATTING

PARAGRAPHS

HTML paragraphs are defined with the <p> tag.

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

HEADINGS

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

<h1>This is a heading</h1>

<h2>This is a heading</h2>

<h3>This is a heading</h3>

<h4>This is a heading</h4>

<h5>This is a heading</h5>

<h6>This is a heading</h6>

OUTPUT

THE <STRONG> ELEMENT

To highlight the strong importance on the text, you can use this element <strong>.

<p><strong>Attention Please :< /strong> Maintain Silence.<p>

OUTPUT

Attention Please: Maintain Silence.

THE <EM> ELEMENT

To emphasize a piece of text, you can use this element <em>.

<p>Chocolates from Ooty are really <em>delicious</em></p>

OUTPUT

Chocolates from Ooty are really delicious

LINE BREAKS

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

<p> This is a <br> line break </p>

OUTPUT

This is a
line break

HORIZONTAL RULE

To create a horizontal rule, you can use <hr> element.

Below find the horizontal rule <hr>

That was a horizontal rule J

OUTPUT

Below find the horizontal rule

That was a horizontal rule

UNORDERED/UNNUMBERED LIST

You can list text in bullets. Use the element <ul> (to define the list) and <li> (to list each item).

<ul>

</ul>

OUTPUT

list1
list2
list3

ORDERED (NUMBERED) LIST

You can list text in numbers. Use the element <ol> (to define the list) and <li> (to list each item).

<ol>

</ol>

OUTPUT

list1
list2
list3

IMAGES

HTML images are defined with the <img> tag. To add an image into your webpage, make sure that your image is already uploaded in the internet.

If not, choose the image that you want to add to your webpage from the internet.

Copy the source location of that image and paste the source URL in the image source tag as shown below.

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

COLORS

You can add colours to your web page easily by using the style attributes. The following sections details about the style attributes.

FOREGROUND COLOR

To add colour to the text, you can use

Style=“colour :{ colour}”

Colour indicates the “colour value”

<h3 style="color:aqua">HTML Colors</h3>

<h3 style=”color:#000ff”>HTML Colors</h3>

<h3 style=”color:#000069”>HTML Colors</h3>

BACKGROUND COLOR

To add background color to an HTML element, use

Style=”background-color:green”

<h3 style="background-color:green">HTML Colors</h3>

BORDER COLOR

To add border to an HTML element, you can use style="border :{ width} {colour} {style}", where {width} is the width of the border.

<h3 style="border: 2px orange solid;">HTML Colours</h3>

COLOR NAMES

TRANSPARENCY

To add transparent background colours to the text you can use the “Decimal Code RGB”.

<h3 style="background-color:rgba(0,255,0,1)"> Non Transparent </h3>

<h3 style="background-color:rgba(0,255,0,0.5)"> Less Transparent </h3>

<h3 style="background-color:rgba(0,255,0,0.1)"> Highly Transparent </h3>

OUTPUT

HTML ATTRIBUTES

Attributes are the additional information about an element. They are denoted in the start tag. Attributes are represented as name = “value”.

An apt example for attributes is

<a href="http://www.blogger.com/blogger.g?blogID=4304750498922198879&pli=1#allposts/postNum=1"

target="_blank">This is Lavanyas blog</a>

If you set the target attribute to "_blank", the link will open in a new browser window/tab.

Every attribute should be within quotes only; it can be either single or double quotes.

Even HTML attributes are case insensitive.

There are many HTML attributes, of which a few are mentioned below.

1.  - This is meant for comments.

Example -

2. <!DOCTYPE> - It defines the document type.

Example -

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

</html>

3. <a> - It defines a hyperlink.

4. <abbr> - It defines an abbreviation. Sample html codes appear as shown below.

<!DOCTYPE html>

<html>

<body>

<p>The <abbr title=" Bharat Heavy Electronics Limited"> BHEL</abbr> It has its branches all over India.</p>

</body>

</html>

5. <address> - It defines the contact information of a person i.e., the document owner.

<address>
Write to us at <a href="Lavanya@yahoo.com">lavanya</a>.<br>
Visit me at:<br>
<I>techriting2012.blogspot.in</I>

</address>

6. <b> - It defines the bold text.

7. <Button> - It defines a clickable button.

<!DOCTYPE html>

<html>

<body>

<button type="button" onclick="alert('Have a Great Day!')">Click Me!</button>

</body>

</html>

8. <code> - It defines a piece of computer code.

<!DOCTYPE html>

<html>

<body>

<em>Emphasized text</em><br>

<strong>Strong text</strong><br>

<dfn>Definition term</dfn><br>

<code>A piece of computer code</code><br>

<samp>Sample output from a computer program</samp><br>

<kbd>Keyboard input</kbd><br>

<var>Variable</var>

</body>

</html>

9. <footer> - It defines the footer of a document.

<footer>
<p>Posted by: Lavanya</p>

</footer>

10. <header> - It defines the header of a document.

<header>
<h1>Internet Explorer 9</h1>

</header>

11. <time> - It defines the date/time.

<p>we open at <time>10:00</time> every morning. </p>

12. <textarea> - It defines a multiline input control (text area).

This document is all about HTML basics which allow you to get clear idea about making of web pages using a note pad.

</textarea>

13. <Video> - It defines a video or movie

Your browser does not support the video tag.

</video>

14. <title> - It defines the document title

<title>Title of the document</title>

</head>

META TAG

· The <Meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page.

· The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

· <Meta> tags always goes inside the <head> element.

· Meta tag is a tag which provides information about the web page such as who created the web page, what the page is about, web page updation and the keywords that represent the page’s content.

· Information available in Meta tag is meant for the search engines

Define the author of a page:

Refresh document every 30 seconds:

Later down the road, you may need to redirect traffic to another domain.

A common reason might be that you have just purchased a better domain name and would like to retain your old visitors, yet still use your new domain.

With the refresh Meta tag, you will be able to redirect visitors to the website of your choice or simply refresh your own page to update dynamic content automatically.

For the refresh Meta tag, the content attribute accepts two arguments separated by a semicolon (;).

The first argument specifies the number of seconds between refreshes or redirection and the 2nd argument is a URL of where the browser will relocate.

<head>

</head>

Define Meta tag description:

Search engines are the compasses of the web and help users navigate from site to site.

The description Meta element allows the developer to summarize the content that can be found on the page and is often the first chance you'll have to attract visitors.

<head>

</head>

Define Keyword Meta tag:

Keywords and/or phrases may be placed inside the keyword Meta element. You should specify the most popular search terms you believe someone would use to reach your website.

<head>

</head>

bloginfo

Monday, 20 May 2013

HTML Tutorial

WHAT IS HTML

CREATE WEB PAGE USING NOTE PAD

HTML ELEMENTS

ELEMENTS RELATED TO HTML FORMATTING

LINKS

IMAGES

COLORS

HTML ATTRIBUTES

META TAG

About Me