Welcome

Welcome to Kuaiyum HTML Blog

সোমবার, ৬ জুন, ২০১১

HTML Text Formatting and Practice-3


HTML uses tags like <b> for bold, <i> for italic, <u> for under line, <sub> for subscript, <sup> for supper script text………..
These HTML tags are called formatting tags 

HTML Text Formatting Tags

Tag
Description
Defines bold text
Defines big text
Defines emphasized text 
Defines italic text
Defines small text
Defines strong text
Defines subscripted text
Defines superscripted text
Defines inserted text
Defines deleted text

Practice-3 HTML Text Formatting
<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
(a+b)<sup>2</sup>=a<sup>2</sup>+2ab+b<sup>2</sup> This is superscript<br/>
H<sub>2</sub>O This is subscript
</body>
</Html>

The Output look like the following:

This text is bold
This text is strong
This text is big
This text is italic
This text is emphasized
This is computer output
This is subscript and superscript
(a+b)2=a2+2ab+b2 This is superscript
H2O This is subscript

HTML Elements and Attributes


HTML Elements

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

Start tag *        
Element content     
End tag *      
<p>
This is a paragraph
</p>
<a href="kuaiyum.htm" >
This is a link
</a>
<br />


* The start tag is often called the opening tag. The end tag is often called the closing tag.

HTML Element Syntax

  • An HTML element starts with a start tag / opening tag
  • An HTML element ends with an end tag / closing tag
  • The element content is everything between the start and the end tag
  • Some HTML elements have empty content
  • Empty elements are closed in the start tag
  • Most HTML elements can have attributes

HTML Document Example

<html>

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

</html>
The example above contains 3 HTML elements.

HTML Example Explained

The <p> element:
<p>This is my first paragraph.</p>
The <p> element defines a paragraph in the HTML document.
The element has a start tag <p> and an end tag </p>.
The element content is: This is my first paragraph.
The <body> element:
<body>
<p>This is my first paragraph.</p>
</body>
The <body> element defines the body of the HTML document. The element has a start tag <body> and an end tag </body>.The element content is another HTML element (a p element).
The <html> element:
<html>

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

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

HTML Empty Elements

HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line break).


HTML 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"

Attribute Example

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

Example

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

 

Below is a list of some attributes that are standard for most HTML elements:
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)

Practice-2 Heading, Paragraphs, Lines, Comments


<html>
<body>

<h1>This is a largest heading</h1>
<h3>This is a heading</h3>
<h6>This is a smallest heading</h6>

<br/>
<p>The hr tag defines a horizontal rule:</p>
<hr />                     
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<br/>
<!-- This is a comment it will not displayed -->

</body>
</html>


The output will be look like following

This is a largest heading

This is a heading

This is a smallest heading

The hr tag defines a horizontal rule:

This is a paragraph

This is a paragraph

This is a paragraph


Headings Are Important

Use HTML headings for headings only. Don't use headings to make text BIG or bold.
Search engines use your headings to index the structure and content of your web pages.
Since users may skim your pages by its headings, it is important to use headings to show the document structure.
H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on.

Some html tags;
Tag
Description
Defines an HTML document
Defines the document's body
Defines HTML headings
Defines a horizontal line
Defines a comment

HTML Headings, Paragraphs, Lines, Comments


HTML Headings

HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading.

Example

<h1>This is a largest heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h6>This is a smallest heading</h6>

HTML Paragraphs

Paragraphs are defined with the <p> tag.

Example

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

HTML Lines

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

The hr element can be used to separate content:

Example

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

HTML 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.
Comments are written like this:

Example

<!-- This is a comment -->

রবিবার, ৫ জুন, ২০১১

Practice 1


Now we write our first html file like as the following:

<html>                                                                            <!--this is html opening tag-->

<body>                                                                             <!--this is body opening tag-->

<! This is comment and it will not be displayed -- >

<h1>My First Heading</h1>

<p> My first paragraph. </p>

</body>                                                                             <!--this is body closing tag-->

</html>                                                                              <!--this is html closing tag-->


Save the file first.html or first.htm file extension. Now open the file named  by double click or right  click on the file then open with firefox or internet explorer  and output will be look like the following:

My First Heading

My first paragraph.

.HTM or .HTML File Extension

When we save an HTML file, we can use either the .htm or the .html file extension. There is no difference, it is entirely up to you.

Basic Concept About HTML


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 pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:

Hyper Text Markup Language (HTML)


HTML is a language for describing web pages. HTML is not a programming language, but rather  a markup language.
What do we Need to start HTML
Creating an HTML document is easy. To begin coding HTML we need only two things: a simple-text editor and follow any HTML step by step tutorial! Notepad is the most basic of simple-text editors and here I use it.

Some Keywords of HTML
Web Pages-A cheap and easy way to spread information to a large audience. Another medium to market our business. Let the world know about us with a personal website!
Tag - Used to specify ("mark-up") regions of HTML documents for the web browser to interpret. Tags look like this: <tag>
Element - The element content is everything between the start and the end tag
Attribute –Actually Attributes provide additional information about an element. Attributes are always specified in the start tag. Used to modify the value of the HTML element. Elements will often have multiple attributes.
Markup Language- A markup language is a set of markup tags