Sunday, September 25, 2011

(Attock VU Group) Complete HTML Tutorial

Complete HTML Tutorial

 

 

 

Introduction:-

 

What is HTML??

 

HTML is a language for describing web pages.

  • 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 Tags

HTML markup tags are usually called HTML tags.

  • HTML tags are keywords surrounded by angle brackets like <html>
  • HTML tags normally come in pairs like <b> and </b>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • Start and end tags are also called opening tags and closing tags

 

HTML Documents = Web Pages

  • HTML documents describe web pages
  • HTML documents contain HTML tags and plain text
  • HTML documents are also called web pages

 

The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser doesn't display the HTML tags, but uses the tags to interpret the content of the page.

 

Ex.

<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

 

The text between <html> and </html> describes the web page

The text between <body> and </body> is the visible page content

The text between <h1> and </h1> is displayed as a heading

The text between <p> and </p> is displayed as a paragraph

 

HTML can be written and edited using many different editors like Dreamweaver and Visual Studio. Using a plain text editor is the best way to learn HTML.

 

Basics:-

Save HTML file by using either the .htm or the .html file extension. There is no difference.

Headings

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

 

Ex.

<h1>This is a heading</h1>
<h2>This is a heading</h2>

.

.

<h6>This is a heading</h6>

Paragraphs

HTML paragraphs are defined with the <p> tag.

Ex.

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

 

Links

HTML links are defined with the <a> tag.

Ex.

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

 

Images

HTML images are defined with the <img> tag.

Ex.

<img src="image.jpg" width="104" height="142" />

HTML Elements

An HTML element is everything from the start tag to the end tag:

Ex.

<p> This is html Class.</p>

 

Here "This is html Class." is the element.

<p> is also called as opening tag & </p> as closing tag.

 

Syntax

  • Element starts with a opening tag
  • Element ends with an closing tag
  • Some HTML elements have empty content
  • Empty elements are closed in the start tag
  • Most HTML elements can have attributes.

Element which contain another element called nested element.

Ex.

<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>

Note: HTML tags are not case sensitive.


Attributes

  • HTML elements can have attributes
  • Attributes provide additional information about an element
  • Attributes are always specified in the start tag
  • Attributes come in name/value pairs like: name="value"

HTML links are defined with the <a> tag. The link address is specified in the href attribute:

Ex.

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

 

 

Attribute

Value

Description

class

classname

Specifies a classname for an element

id

id

Specifies a unique id for an element

style

style_definition

Specifies an inline style for an element

title

tooltip_text 

Specifies extra information about an element (displayed as a tool tip)

 

Lines

The <hr /> tag creates a horizontal line in an HTML page.

The hr element can be used to separate content:

Ex.

<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />

 

Comments

Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed.

Ex.

<!-- This is a comment -->

 

Tag Reference

Tag

Description

<html>

Defines an HTML document

<body>

Defines the document's body

<h1> to <h6>

Defines HTML headings

<hr />

Defines a horizontal line

<!-->

Defines a comment

 


Paragraphs

Paragraphs are defined with the <p> tag.

Ex.

<p>This is first paragraph</p>
<p>This is second paragraph</p>

 

Line Breaks

Use the <br /> tag if you want a line break (a new line) without starting a new paragraph:

Ex.

<p>This is<br />a para<br />graph with line breaks</p>

 

The <br /> element is an empty HTML element. It has no end tag.

 

Tag

Description

<p>

Defines a paragraph

<br />

Inserts a single line break

--
█████████████████████████████████████████████████
██████████████████ Basic Group Rules ███████████████████
Immoral & Rudish talk, Earning program links, Cell number for friendship purpose, Websites/Groups Links, Adult contents, Criticize-able Islamic stuff, Spreading disruption, Spamming are strictly prohibited and banned in group.
█████████████████████████████████████████████████
█████████████████████████████████████████████████
 
Follow these detailed Group Rules, otherwise you will be banned at any time.
https://docs.google.com/document/d/1YJxA8x3_U7C1lRc0EXfLrJpco4A1XkB1vDxOTqOd3Jg/edit?hl=en&authkey=CNDy9tkJ
 
Group Email Address:
Attock-VU-Group@Googlegroups.Com
 
Join group by sending a blank email from University ID at:
Attock-VU-Group+Subscribe@Googlegroups.Com
 
████████████ Click here to Join this group at Facebook:████████████
♥ ♥ ♥ https://www.facebook.com/home.php?sk=group_111877855568034 ♥ ♥ ♥
█████████████████████████████████████████████████

No comments:

Post a Comment