Html | Chapter-3 O'level

 HTML BASICS

INTRODUCTION

  • HTML stands for Hyper Text Markup Language.
  • HTML is the standard markup language for creating Web pages.
  • HTML describes the structure of a Web page.
  • HTML consists of a series of elements.
  • HTML elements tell the browser how to display the content.
  • HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

CREATING AND RUNNING HTML CODE



ELEMENTS ,TAGS AND ATTRIBUTES.

An HTML element is defined by a start tag, some content, and an end tag.

 <tagname>Content goes here...</tagname> 

The HTML element is everything from the start tag to the end tag:
 <h1>My First Heading</h1>
 <p>My first paragraph.</p>


 Types Of Element:
1.Empty
2.Container


Empty Element: 

These types of HTML elements have only a start tag and no End tag.
 Ex: Empty tag without attributes is <BR> tag, And empty tag with attribute is <IMG> tag.

 Container Elements:

 These types of HTML elements are specified by pair of tags as start tag and End Tag . The end tag is identical to the start tag but starting with a Slash(/). 
<html> </html> <head> </head>




HTML ATTRIBUTES

HTML attributes provide additional information about HTML elements.

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




BASIC STRUCTURE OF HTML







BASIC HTML TAGS


HTML Section This container tag starts with <HTML> tag and ends by </Html> tag.
It is the outer most section document , all other tags comes in it.
Syntax: <html> Other tags and information </html> 

HEAD Section This container element start with <head> tag and end by </head> tag. 
It defines the web document header and does not affect the appearance of the document. 
Syntax: <head> Header information and title tag </head>


BASIC HTML TAGS

TITLE Section This container element start with </title> tag and ends by </title> tag. 
it contains the title to be displayed in the title bar of the browser window. 
Syntax: <title> <text as a title> </title> 

 BODY Section This container element start with <BODY> tag and end by </BODY> tag. 
It contains the main contents of the document as parameter. 
Syntax: <BODY> Web information </BODY>


HTML HEADINGS

HTML headings are titles or subtitles that you want to display on a webpage. HTML headings are defined with the <h1> to <h6> tags. 
<h1> defines the most important heading. 
<h6> defines the least important heading.



<h1>Heading 1</h1> 
<h2>Heading 2</h2> 
<h3>Heading 3</h3> 
<h4>Heading 4</h4> 
<h5>Heading 5</h5> 
<h6>Heading 6</h6>




HTML PARAGRAPHS

The HTML <p> element defines a paragraph. 
A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph. 
<p>This is a paragraph.</p> 
<p>This is another paragraph.</p>


FORMATTING TAGS

HTML contains several elements for defining text with a special meaning. 
The tags discussed in this section deals with formatting of the web information. Formatting elements were designed to display special types of text:

<b> - Bold text 
<strong> - Important text 
<i> - Italic text 
<em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text 
<del> - Deleted text 
<ins> - Inserted text 
<sub> - Subscript text 
<sup> - Superscript text









Center Element 

The word „center‟ is the tag name for this element and this tag is used To align the text to the center of the page. Syntax: <center> Text……. </center> 


HR Element

HR stands for horizontal rule.
This is an empty tag/element used to draw a horizontal line across the Document window. 
Syntax: 
<hr align =“alignment” size = “thickness” width=“width” color=“color name” noshade>


 Ex: <HR ALIGN=left size =5 width = 150 color=red noshade>


IMAGE ELEMENTS



This is an empty element used to insert an image.
“img” is used as a tag for this element and this tag have many attributes.

 Syntax: 
<img src =location border=n height=height width = width vspace=n hspace =n align= align alt = text> Ex: <img src=“a.jpg” height=145 width=165 hspace=15 vspace=15 align=“right” Border=2 alt = “Can’t display image”>




MARQUEE ELEMENT

Also known as scrolling element. 
The marquee element is used to insert scrolling text anywhere in a web page. 

Syntax:
 <marquee bgcolor = color_name Direction = direction behaviour= behavior Height = height width=width vspace = n hspace = n loop = loop Scrollamount = n >

 ………..text to scroll-------- 
</marquee>

 Ex: 
<marquee bgcolor = yellow direction = left behavior = side height = 25 Width=50% hspace = 30 vspace=30 loop =5 scrollamount=2>

 ……text….. 

</marquee>







0 Comments