Friday 4 November 2016

HTML Tags

HTML Tags: HTML tags are markup 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

HTML Elements: An HTML element starts with a start tag. The element content is everything between the start and end tag. An HTML element ends with an end tag. Some HTML elements have no content. Some HTML elements have no end tag.

HTML Documents: An HTML document consists of HTML elements. HTML elements are defined by HTML tags.

E.g.: <html><body>
<p>This is my first paragraph</p>
</body></html>
The example above contains 3 HTML elements.

The Head Element: The head element contains general information, also called meta-information, about a document. Meta means "information about".

The <body> Element: The <body> element defines the body of the HTML document:

E.g.: <body></body>
The element has a start tag <body> and an end tag </body>
The <html> Element: The <html> element defines the whole HTML document.

E.g.: <html>
<body>
<p>This is my first paragraph</p>
</body></html>
The element has a start tag <html> and an end tag </html>
Lowercase Tags; HTML tags are not case sensitive: <P> means the same as <p>. Plenty of web sites use uppercase HTML tags in their pages.

Basic Html Tags:

a) HTML Headings: Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.

E.g.: <h1>This is a heading</h1>
         <h2>This is a heading</h2> 
         <h3> This is a heading </h3>

Result:  This is a heading

This is a heading

This is a heading

b) HTML Paragraphs: Paragraphs are defined with the <p> tag.

E.g.: <p>This is a paragraph</p>

c) HTML Line Breaks: Use the <br> tag if you want a line break (a new line) without starting a new paragraph.

E.g.: <p>This is<br>a para<br>graph with line breaks</p>

d) HTML Comments: Comments can be inserted in the HTML code to make it more readable and understandable. Comments are ignored by the browser and not displayed. Comments are written like this:

E.g.: <!-- This is a comment -->

e) Backgrounds: The <body> tag has two attributes where you can specify backgrounds. The background can be a color or an image.

i) Bgcolor: The bgcolor attribute specifies a background-color for an HTML page. The value of this attribute can be a hexadecimal number, an RGB value, or a color name.

E.g.: <body bgcolor="#000000">
        <body bgcolor="rgb(0,0,0)">
        <body bgcolor=”black”>

ii) Background: The background attribute specifies a background-image for an HTML page. The value of this attribute is the URL of the image you want to use. If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window.

E.g.: <body background="clouds.gif">
<body background=http://www.yahoo.com>

f) Html Links: The Anchor Tag and the Href Attribute. HTML uses the <a> (anchor) tag to create a link to another document. An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc. The syntax of creating an anchor.

E.g.: <a href="url">Text to be displayed</a>

The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.

i) The Target Attribute: With the target attribute, you can define where the linked document will be opened. The line below will open the document in a new browser window:

E.g.: <a href="http://www.w3schools.com/"  target="_blank">Visit W3Schools!</a>

ii) The Anchor Tag and the Name Attribute: The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for.

E.g.: <a name="label">Text to be displayed</a>

The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use. The line below defines a named anchor.
E.g.: <a name="tips">Useful Tips Section</a>

g) Html Images: With HTML you can display images in a document.

i) The Image Tag and the Src Attribute: In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only and it has no closing tag. To display an image on a page, you need to use the src attribute.          Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page. The syntax of defining an image:

E.g.: <img src="url">

ii) The Alt Attribute: The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text.

E.g.: <img src="boat.gif" alt="Big Boat">

The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. It is a good practice to include the "alt" attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers. 

No comments:

Post a Comment