Advanced Html Notes
Comments in HTML:-
The comment tag is used to insert a comment in the HTML source code.
A comment can be placed anywhere in the document and the browser will ignore everything inside the brackets.
<p>This html comment would<!-- This is a comment --> be displayed like this.</p>
Note:-You don't see the text between the tags<--and-->.If you look at the source code,you would see the comment.To view the source code for this page,in your browser window, select View and then select Source.
HTML TEXT FORMATTING:-
1. <b> :- Defines bold text.
2.<Strong> :- Defines Important text.
3. <i> :- Defined Italic text.
4. <em> :- Defined Emphasized text.
5. <mark> :- Defined Marked text.
6. <small> :- Defined Small text.
7. <del> :- Defined deleted text.
8. <ins> :- Defined Inserted text.
9. <sub> :- Defined Subscript text.
10. <sup> :- Defined Superscript text.
HTML LIST :-
1.Ordered List:-
2. Unordered List:-
1.Ordered List:-
The type attribute of the <ol> tag, defines the type of the list item marker :-
# The ol tag is used to provide a number list of objects that are arranged in sequences according to importance.
The <ol> tag comes first,then the <li> (list item) tag.
Example:-
<ol>
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
<li>Papaya</li
</ol>
# Some Type of attributes are :-
Type="1" - The list's elements will have numbers next to them by default.
Ex : <ol type="1">
Type="A" - The list item's number will be in uppercase letters.
Ex : <ol type="A">
Type="a"- Lowercase letters will be used to indicate the list item's numbers.
Ex : <ol type="a">
Type="i"- The list item's numbers shall be roman numbers in lowercase.
Ex: <ol type="i">
2. Unordered List:-
The type attribute of the <ul> tag,defines the type of the bulleted list item marker :-
# The unordered list is used when the list of item's are not to be displayed in any particular order.
# The html <ul> tag is used for unordered list.
# The browser will display the bullets before the list of items.
Example:-
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
Some type of attributes are:-
There are 3 types of attributes in <ul> tag.
1. Disc :- This is the default style,Specifies a filled circle.
Ex:- <ul type ="Disc">
2. Circle :- Specifies a non filled circle.
Ex:- <ul type="Circle">
3. Square :- Specifies a filled square bullet.
Ex:- <ul type="Square">
HTML Background:-
The <body> tag has two attributes where you can specify backgrounds.The background can be a color of an image.
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 color name:
<body bgcolor="000000">
<body bgcolor="RGB(0,0,0)">
<body bgcolor="black">
Note:- The bgcolor, background,and the text attributes in the <body> tag are deprecated in the latest version of HTML(HTML 5).
HTML Images:-
Insert image-
You can insert any image in your web page by using <img> tag.
Syntax:- <img src=" ">
The <img> tag is an empty tag , which means that ,it can contain only list of attributes ,and it has no closing tag.
Image attributes are:-
.Src ="...." The address of the image.
.Alt ="...." Alternative text to display.
.Align="...." Deprecated control alignment (left,center,right, justify).
. height="...." height of the image.
.width="...." Width of the image.
.border="...." Border width.
Example:-
<body>
<p>Simple image insert </p>
<img src=" " height=" " width=" " alt=" ">
</body>
Note:- You can use jpeg,png,gif image file based on your comfort,but make sure you specify correct image file name in Src attribute. Image name is always case sensitive .
The alt attribute is a mandatory attribute which specifies an alternate text for an image,if the image cannot be display.
Image alignment:-
There are five types of alignment which can be applied on the image:
1.Left
2.Right
3.Top
4.Bottom
5.Middle
Note:- by default images are left aligned.The image with the top and bottom alignment will be set at the top of the line or bottom of the line.
HTML link:-
Webpages in a website can be linked with each other with the help of tags.HTML uses the <a> anchor tag to create a link to another document or web page.
There are Two types of linking in html-
1. Internal
2. External
Syntax:- <a href=" "> </a>
The target attribute:-
You can define where the linked document will be opened. By default,the link will open in the current window. The code below will open to he document in a new browser window:
<a href=" " target="_blank">Visit IICS</a>
# Tables:-
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag),and each row is divided into data cells(with the <td> tag).
For example:-
<table>
<tr>
<td>Id</td>
<td>Name</td>
<td>salary</td>
</tr>
<tr>
<td>101</td>
<td>Riya</td>
<td>20,000</td>
</tr>
</table>
Tables and the Border attribute:-
To display a table with borders,you will use the border attribute.
Example:-
<table border="1" >
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
Inserting Audio and video:-
Inserting Audio -
To insert an audio <audio>tag is used in a web page.It can be used for any file format like: .MP3, .wav, etc.
Syntax:- <audio controls src=" " ></audio
The attribute of <audio> tag are as follows:
Src : specifies the URL of the audio file.
Controls : Display the controls on the web page.
Autoplay : place the audio file automatically when the webpage is loaded.
Loop : Replays the audio file.
Inserting Video:-
To insert video in the HTML pages video tag is used it supports file formats like:.MP4, etc.
Syntax:-<video controls src=" " height=" " width=" " ></video>
The attribute of <video> tag are as follows:
Src : Specifies the URL of the video file.
Controls : Displays the controls on the web page.
Autoplay : The place the audio file automatically when the webpage is loaded.
Height : Specifies the height of the video player displayed.
Width: Specifies the width of the video player displayed.
Frames:-
Frames allow multiple HTML documents to be displayed as independent windows within one browser window. It divides into multiple windows in which each window displays the separate HTML page or web page.
Syntax:-
<iframe src=" " height=" " width=" ">
</iframe>
Forms:-
It is a container element started by <form> tag and ended by </form> tag. It is used to create a form on a web page.
Comments
Post a Comment