Main Tags
Lecture 01
<html> tag is used at the beginning and last.
<head> tag is used for the heading.
<body> tag is used to write the main part of the program.
</tag> to close the tag.
All the html codes started with document type declaration as <!DOCTYPE html> also it is not case
sensitive.
<h> tag is used for the heading. This tag is of 6 types
1. <h1>
2. <h2>
3. <h3>
4. <h4>
5. <h5>
6. <h6>
<p> tag is used for the paragraph writing.
We can also use <p lang=”en_us”>
<a href=”pgi.edu.com”/>This is a link</a>
<img src=”address” alt=”name” height=”374” width=”37”></img>
Crtl+U is used to view the address or source of image.
<br> tag is used to break line also <hr>
<p title=”I am tooltip”> </p>
<p style=”color:red;”>To red the paragraph</p>
<b> Bold Text
<strong> important text
<i> italic text
<em> emphasized text
<mark> marked text
<small> smaller text
<ins> inserted text
<del> delete text
<sub> subscript
<sup> superscript
Lecture 02
<blockquote> tag is used to quote a paragraph
<q> tag is used to quote a single line
<abbr title=”Professor”>Prof</abbr>
<cite> is used for the reference of something like book reference
<dt> to represent the term of definition
<dfn> for single definition
<dd> for the definition
<dl> for the definition lists
<address> is used for addressing the mail of author
<a href=mailto:home@gmail.com>
<s> is used to remove the things that are not longer accurate
<ol> is used for order list
<li> is used for the list items
<ul> for unordered list
<a href=”www.google.com”> Google</a> to make link with another page
We can open a link in new window by using target=”_blank” attribute
Align attribute is used in previous htmls not in present time in the present time website designer use CSS
for aligning
In <figure> we use image tag also we used <figcaption> to give the caption of image.
<table> to create the table
In which we use <tr> for the rows in the table and <td> for the columns in the table.
<th> for the heading of the column and row
<th scope=”col”>Column</th> for column heading
<th scope=”row”> Row</th> for row heading
<td colspan=”4”> to merge 4 columns
<tr rowspan=”3”> to merge 3 rows
<thead> used inside of <table> for the headings of the table.
<tbody>all the elements should be inside of the <tbody>
<tfoot> for the footer of the long table
In <table> width=”400” is used for the total width of the table.
Cellpading=”20” for spacing inside each cell.
Cellspacing=”29” for spacing between each cell.
Border=”3” to increase the width of border of table in pixels
Bgcolor=”color name” for background color
<form action=www.google.com method=”get”> to create a form
Method are of two types : get or post
<input> is used to get input of several types
<input type=”text” name=”User name” size=”15” maxlength=”30”/> to get the name of user name of
size 15.
<input type=”password” name=”Password” size=”15” maxlength=”30”/> to get the password.
<textarea name=”Comments” cols=”20” rows=”4”> Enter your comment</textarea>
We use input tag inside of the <p> then
<input type=”radio” name=”genre” value=”Rock” checked=”checked”/> Rock (for the selection among the given
options) and more radio button allow just pick one value.
<input type=”checkbox” name=”Instruments” value=”iTunes” checked=”checked”/> iTunes (this button is used to
select the multiple values at once or single one at a time.
<select name=”devices”>
<option value=”ipod”>ipod</option>
<option value=”laptop”>laptop</option>
</select> (to select the value from the drop down list).
<select name=”courses” size=”3” multiple=”multiple”>
<option value=”BSCS” selected=”selected”>BSCS</option></select>(to hide the dropdown list in a single box with
size 3 by specifying the size with size attribute)
<input type=”file” name=”user_song”/><br>
<input type=”submit” value=”upload”/>( to get the file from the user)
<input type=”email” name=”email”/>
<input type=”submit” name=”subscribe” value= “subscribe”/> to subscribe the email this is for subscribe button.
For subscribe image we have to use the this command:
<input type=”image” src=”address” height and width attributes/>
<button><input type=”image” src=”address” alt=”add” height and width attributes/></button>. this is to make a
button of add
<input type=”hidden” name=”boodmarks” value=”lyrics”/> to hide the controls.
<label> is used to make easy to access the user radio button or and word (if we cursor on the labeled word then it
helps to select rather than to go to specific place to select a word.) we also use for=”word” to label a word.
<fieldset> is used to group the related tags.
<legend> is used to write the main heading of the fieldset. In which <label> is used for the tags that are related and
group.
<input type=”date” name=”Departure”/> to input the date
<input type=”url” name=”website”/> to get the address of the website.
<input type=”search” name=”search”/> to search
Placeholder=”Search” this attribute is used to write the temporary value until user enter value.
<!-- Comment -- > to write the comment.
Id=”pullquote” attribute is used to specify the element uniquely from the other elements on page
Class=”important” this attribute identify different elements differently on a page
Inline attributes are used in paragraphs (in line between words)
<div> attribute is used for grouping texting and elements in a block.
<span class=”Gallery”> uni </span> UNI . ( to make the word in upper case)
<iframe src=”address of map” frameborder=”02” scrolling=”on” ></iframe> to show map on the page some
attributes are used to zoom and scroll.
<meta> is used to provide the information about the web page.
Escape characters :
Like euro ,dollar sign for them we have to use their asci value.
<video src=”address of video” poster=”address of image to show before playing video” height and width
Preload
Loop
Controls> to auto load the video and play again and also provide the controls to control the video.
</video>
<source> is used to provide the different extensions for the video if one not working then the other will work.
<audio src=”address of audio”
Autoplay
Controls>
