INTRODUCTION OF HTML
HTML stands for "Hyper Text Markup Language" and its mostly used to create and design static web pages.
Difference between Static and Dynamic web page
Ø Static web page: these type of web pages does not change its contents during a certain time.
Ø Dynamic web page: the contents of dynamic web pages can be change at any time.
Features of HTML
1. Simple markup language: html is a simple markup language, so it can be easily learn and use.
2. Using tag: html tags work like a predefined commands and every tag is used to perform a specific task.
3. Use simple text editor: Any HTML program can be created by using notepad, notepad++, Dream-viewer and other text editor.
4. File extension: Every HTML file should be saved with .html or .htm file extension.
5. Program Execution: To execute HTML programs, we can use any web browser such (Internet Explorer, Google chrome, Mozilla Firefox)
Common HTML TAG
HTML Tag: Its an important tag for every html document (web page) and it is used to define a document as HTML web page.
Note: Its a base tag for all other tags, all other tags should write under this tag.
Example
<html>
statement 1
statement 2
</html>
Title Tag: This tag is used to create title for a html web page.
Example
<title> My first web page </title>
Body Tag: This tag is responsible to define body part such (Headings, paragraphs, Forms controls, background color, etc.) in a HTML web page.
Example
<body>
<h1> My first Heading </h1>
</body>
A Complete Example of HTML, Title and Body
<html>
<h1> Welcome in my web page </h1>
</body>
</html>
Heading Tags
Note: Its a base tag for all other tags, all other tags should write under this tag.
Example
<html>
statement 1
statement 2
</html>
Title Tag: This tag is used to create title for a html web page.
Example
<title> My first web page </title>
Body Tag: This tag is responsible to define body part such (Headings, paragraphs, Forms controls, background color, etc.) in a HTML web page.
Example
<body>
<h1> My first Heading </h1>
</body>
A Complete Example of HTML, Title and Body
<html>
<title> My first web page </title>
<body><h1> Welcome in my web page </h1>
</body>
</html>
Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>
Example
<h1> My first heading </h1>
Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening <p> and a closing </p> tag as shown below in the example:
Example
<p> A simple example of
paragraph </p>
Line Break Tag
Whenever you use the <br /> element, anything following it starts from the next line. This tag is an example of an emptyelement, where you do not need opening and closing tags, as there is nothing to go in between them.
The <br /> tag has a space between the characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break, while if you miss the forward slash character and just use <br> it is not valid in XHTML
Example
<html>
<body>
My first line
<br>
My second line
</body>
</html>
Centering Content
You can use <center> tag to put any content in the center of the page or any table cell.
Example
<center> Hello world </center>
Horizontal Lines
Horizontal lines are used to visually break up sections of a document. The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly.
Example
<hr color red=Red width=500>
Preserve Formatting
Sometimes you want your text to follow the exact format of how it is written in the HTML document. In those cases, you can use the preformatted tag <pre>.
Any text between the opening <pre> tag and the closing </pre> tag will preserve the formatting of the source document.
Example
<pre>
Name Address
</pre>
Comments in HTML
HTML comments are placed in between <!-- ... --> tags. So any content placed with-in <!-- ... --> tags will be treated as comment and will be completely ignored by the browser.
Example
<!--
An simple example of comment in html
-->
Bold Text
Anything that appears within <b>...</b> element, is displayed in bold as shown below:
Example
<b> Bold effect </b>
Italic Text
Anything that appears within <i>...</i> element is displayed in italicized as shown below:
Example
<i> Italic effect </i>
Underlined Text
Anything that appears within <u>...</u> element, is displayed with underline as shown below:
Example
<u> Underline effect </u>
Strike Text
Anything that appears within <strike>...</strike> element is displayed with strike through, which is a thin line through the text as shown below:
Example
<strike> Example of strike tag </strike>
Superscript Text
The content of a <sup>...</sup> element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed half a character's height above the other characters.
Example
12<sup> th </sup>
or
1<sup> st </sup>
Subscript Text
The content of a <sub>...</sub> element is written in subscript; the font size used is the same as the characters surrounding it, but is displayed half a character's height beneath the other characters.
Example
CO<sub> 2 </sub>
Deleted Text
Anything that appears within <del>...</del> element, is displayed as deleted text.
Example
<del> Deleted text </del>
Marked Text
Anything that appears with-in <mark>...</mark> element, is displayed as marked with yellow ink.
Example
<mark> Marked text </mark>
Larger Text
The content of the <big>...</big> element is displayed one font size larger than the rest of the text surrounding it as shown.
Example
<big> I am in large size </big>
Smaller Text
The content of the <small>...</small> element is displayed one font size smaller than the rest of the text surrounding it as shown below:
Example
<small> I am in small size </small>
Font Tag
This tag is used to change font size, font color and font style of any selected text.
Example
<font size=”4” font color=”Red” font face=”Arial”>
Hello world
</font>
Note: in the above code “font size” is used to change font size, “font color” is used to change font color and “font face” is used to change font style.
The <bdo>...</bdo> element stands for "Bi-Directional Override" and it is used to override the current text direction.
Example
<bdo dir="rtl">This text will go right to left.</bdo>
How To Insert A Image File
<img src="file address">: this tag is used to insert an image file in a html document and here "img" stands for image, "src" stand for source, file address stands for image file address.
Example
<img src="nature.jpg" width=100 height=150>
Links in HTML
<a href>: this tag is used to create a link in HTML document and can connect with any type of file and folder.
Example
<body link=red vlink=green>
<a href="Main.html"> Click here </a>
</body>
No comments:
Post a Comment