HTML
CHAPTER 1: Hello World program
1.Open notepad and write “Hello HTML” and save it as
hellohtml.txt and open the file in browser.
2.Open notepad and write “Hello HTML” and save it as
hellohtml.html and open the file in browser.
Q.What is the difference in the above two?
A.When we save it with .txt extension it displays the output as follows.
<HTML>
Hello Html
</HTML>
Output: <HTML>
Hello Html
</HTML>
When we save it with .html extension it displays the output as follows.
Output:Hello Html
1.What is HTML and why it is?
A.HTML(Hyper text markup language) is used for
designing the web pages.
2.What are the editors used for HTML?
A.Adobe Dreamweaver,Kompozer,HTML -Kit,Microsoft Expression Web,etc...
3.What are the basic tags used in HTML?
A.Basically html tags are divided into three types
1.Constant tags:These are compulsory tags and these have both opening and closing tags.
Eg:<html>,<head>,<body>.
2.Fixed tags:Except constant tags which tags having both opening and closing tags.
Eg:<font>,<pre>,<center> etc..
3.Independent tags:The tags which are having only opening tags.
Eg:<br>,<hr> etc..
4.Write a simple html code to print “Hello world” ?
A. <html>
<head><title>Simple html code</title>
<body>
Hello World
</body>
</head>
</html>
5.HTML sample program on notepad editor?
A.<html>
<head><title>Sample program</title>
<body>
Hello World
</body>
</head></html>
6.HTML sample program on editplus editor?
A.<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
Hello computer world
</body>
</html>
CHAPTER 2:
1.To write your name and print in browser using HTML headings i.e, h1,h2,h3,h4,h5,h6
A. <!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>Nagesh</h1>
<h2>Nagesh</h2>
<h3>Nagesh</h3>
<h4>Nagesh</h4>
<h5>Nagesh</h5>
<h6>Nagesh</h6>
</body>
</html>
Output:
2.What are HTML Elements and Attributes ?
a.Elements with start and end tags:
Eg:<head>,<body>,<html>,<center>,<pre>,<font>,<p>,<u> etc...
b.Elements with single tag:
Eg:<br>,<hr>,<embed src> etc…
c.Difference between HTML elements and attributes
An HTML element is an individual component of an HTML (Hypertext Markup Language) document or web page.
An attribute is a characteristic. In HTML, an attribute is a characteristic of a page element, such as font size or color. Attributes are used to amplify a tag.
3.Write a program and print in browser using HTML attributes
A.Href: This attribute is used with anchor tag for linking purpose.
Eg:<!doctype html>
<html lang="en">
<head
<title>Document</title>
</head>
<body>
<a href ="hellohtml.html" >Click here</a>
</body>
</html>
Output:
B. Src:This attribute is used for multimedia tags.
A.<!DOCTYPE HTML>
<HEAD>
<TITLE>src attribute</TITLE> </HEAD>
<BODY><IMG src="src_files/nature.jpg"> </BODY></HTML>
C. Width and height attribute
A.<!doctype html>
<html lang="en">
<head>
<title>height and width attributes</title>
</head>
<BODY><IMG src="src_files/nature.jpg" width = 400px height = 300px>
</BODY>
</html>
D. What is the purpose of “alt” ?
A. This attribute is used for image tag as alternative image .If we give the image
source as wrong then “alt” attribute value will be displayed on the screen.
Eg:<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body><IMG src="src_files/natur.jpg" alt=sample image></body>
</html>
4. To write some text and print in browser using the text formatting tags.Add <p> tag to the
above program and write some paragraph in <p> tag.
- <!doctype html>
<html lang="en">
<head>
<title>Text Formatting</title>
</head>
<body>
<center>
<h1><u><i>WELCOME TO TURBO MODUS</i></u></h1></center>
<p align = justify>The availability bias is the human tendency to think that examples of
things that come readily to mind are more representative than is actually the case.
The psychological phenomenon is just one of a number of cognitive biases that hamper
critical thinking and, as a result, the validity of our decisions.</p>
things that come readily to mind are more representative than is actually the case.
The psychological phenomenon is just one of a number of cognitive biases that hamper
critical thinking and, as a result, the validity of our decisions.</p>
</body>
</html>
5.Print some text on the browser using the following text formatting tags
<b>
<strong>
<i>
<em>
<mark>
<small>
<del>
<ins>
<sub>
<sup>
Eg:<!doctype html>
<html lang="en">
<head>
<title>text tags</title>
</head>
<body>
<center>
<b>welcome to turbo modus</b><br>
<i>welcome to turbo modus</i><br>
<strong>welcome to turbo modus</strong><br>
<del>welcome to turbo modus</del><br>
<em>welcome to turbo modus</em></br>
<mark>welcome to turbo modus</mark></br>
<small>welcome to turbo modus</small></br>
<ins>welcome to turbo modus</ins></br>
H<sub>2</sub>o</br>
(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab
</center>
</body>
</html>
6.Give font family - Arial, font size - 14, font color - Orange to the above output
<!doctype html>
<html lang="en">
<head>
<title>text tags</title>
</head>
<body>
<center>
<font size=14 color=orange face=arial>
<b>welcome to turbo modus</b><br>
<i>welcome to turbo modus</i><br>
<strong>welcome to turbo modus</strong><br>
<del>welcome to turbo modus</del><br>
<em>welcome to turbo modus</em></br>
<mark>welcome to turbo modus</mark></br>
<small>welcome to turbo modus</small></br>
<ins>welcome to turbo modus</ins></br>
H<sub>2</sub>o</br>
(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab
</center></font>
</body></html>
CHAPTER 3: Styles and CSS
Output: Apply different Styles to your bio-data
Eg:<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<style>
table,th,td{
border:2px solid blue;
border-collapse:collapse;
border-radius:2px;
text-align:center;}
table{
width:300px;
height:250px;}
tr:hover
{background-color:yellow ;
font-weight:bold;
font-size:20px;}
tr:nth-child(even){
background-color:orange ;}
caption{
font-size:30px;
text-transform:uppercase;
font-style:italic;}
</style>
</head>
<body><center>
<table>
<caption>Student Bio-Data</caption>
<tr>
<th>Name</th><th>MobileNo</th><th>City</th>
</tr>
<tr>
<td>Nagesh</td><td>9550076770</td><td>Hyderabad</td>
</tr>
<tr>
<td>Nagesh</td><td>9550076770</td><td>Hyderabad</td>
</tr>
<tr>
<td>Nagesh</td><td>9550076770</td><td>Hyderabad</td>
</tr>
</table></center></body></html>
1. 3 different types of styles to a html page
a.Inline
We will discuss in detail about css in later chapters as of now just write the simple styles to your html page
with the inline and internal styles
1.Apply the styles to HTML elements using class and idwith the inline and internal styles
a.Adding a class to html element
b.Adding ID to html element
c.What is the main difference in adding styles using Class and ID
Eg:<!doctype html>
<html lang="en">
<head>
<style>
#top{
background-color:#abc;
padding:20px;
text-align:center;
font-size:40px;
}
.name
{
color:red;
font-weight:bold;
}
</style>
<title>Document</title>
</head>
<body>
<div id = top>
<p class = name>This is my first paragraph</p>
</div>
</body></html>
Output:
CHAPTER 4: Basics of Tables
Output: Build a simple table with 2 rows and 2 columns
<!doctype html>
<html lang="en">
<head>
<title>TABLE TAGS</title>
</head>
<body>
<table border = 5px>
<tr>
<th>Name</th>
<th>ID No</th>
</tr>
<tr>
<td>Nagesh</td>
<td>101</td></tr>
</table>
</body>
</html>
A. Table is used to store the data in the form of rows and columns.
2.What are the basic tags used for Table?
A. <table> ,<tr>,<th>,<td> .
3.Difference between th and td?The <td>(table data)tag will contain the content of the HTML table.
C.solid - Defines a solid border
D.double - Defines a double border
E.groove - Defines a 3D grooved border. The effect depends on the border-color value
F.none - Defines no border
G.hidden - Defines a hidden border
A. Border property used in html to provide border for table but in this case double
lines will be appear for the border this will be controlled by border_collapse property
in css.
CHAPTER 5: Different attributes in Tables
Output: Build one table with row-span of 2 and build another table with col-span of 3 and give cell-spacing and border-spacing
Eg:<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<table border=3px>
<tr>
<th colspan=2>Student Details</th>
</tr>
<tr>
<th>Name</th>
<th>ID</th>
</tr>
<tr>
<td>Nagesh</td><td>100</td></tr>
</table>
</body>
</html>
Eg:<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<table border=3px>
<tr>
<th rowspan=3 >Student Details</th>
</tr>
<tr>
<th>Name</th>
<th>ID</th>
</tr>
<tr>
<td>Nagesh</td><td>100</td></tr>
</table>
</body>
</html>
Rowspan attribute is used in <td> tag for merging rows together.
The border-spacing property sets the distance between the borders of adjacent cells.
Eg: <!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<table border=3px cellspacing=30>
<tr>
<th rowspan=3 >Student Details</th>
</tr>
<tr>
<th>Name</th>
<th>ID</th>
</tr>
<tr>
<td>Nagesh</td><td>100</td></tr>
</table>
</body>
</html>
4. What is cell-padding?
Cell-padding is nothing but spacing between the content to the cell wall.
Eg: <!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<table border=3px cellpadding=30>
<tr>
<th rowspan=3 >Student Details</th>
</tr>
<tr>
<th>Name</th>
<th>ID</th>
</tr>
<tr>
<td>Nagesh</td><td>100</td></tr>
</table>
</body>
</html>
CHAPTER 6: Tables with different styles
Output: Build two tables and apply different styles using Class and ID.
1.Apply different background colors to tables.2.Apply different alignments to data in two tables.
3.Apply different values of cell-padding to cells in two tables.
4.Apply different types of borders (Collapsed and normal) to two tables.
Eg:
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<table border = 5px cellpadding=10 bgcolor=yellow>
<tr>
<th>Name</th>
<th>ID No</th>
<th>City</th>
</tr>
<tr>
<td align=center>Nagesh</td>
<td align=center>101</td><td align=center>Hyderabad</td></tr>
<tr><td align=right>Bharath</td>
<td align=right>102</td><td align=right>Bangalore</td></tr>
<tr><td align=center>Tarun</td>
<td align=center>103</td><td align=center>Chennai</td></tr>
<tr><td align=center>Nayan</td>
<td align=center>104</td><td align=center>Hyderabad</td></tr>
</table>
</body>
</html>
CHAPTER 7: Build the below table
Output:
<!doctype html>
<html lang="en">
<body>
<center>
<table border=5 width=400 height=250>
<tr>
<th bgcolor=#808B96 >First_Name</th>
<th bgcolor=#808B96 >Last_Name</th>
<th bgcolor=#808B96 >Marks</th>
</tr>
<tr>
<td align=center bgcolor=#E5E7E9 >Sonoo</td>
<td align=center bgcolor=#E5E7E9>Jaiswal</td>
<td align=center bgcolor=#E5E7E9>60</td>
</tr>
<tr>
<td align=center>James</td>
<td align=center>William</td>
<td align=center>60</td>
</tr>
<tr>
<td align=center bgcolor=#E5E7E9>Chetna</td>
<td align=center bgcolor=#E5E7E9>Singh</td>
<td align=center bgcolor=#E5E7E9>72</td>
</tr>
<tr>
<td align=center>Swati</td>
<td align=center>Sironi</td>
<td align=center>82</td>
</tr>
</table></center>
</body>
</html>
CHAPTER 8: Build the below table using rowspan and colspan commands
Output:
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body><center>
<table border=5>
<tr>
<th>No</th>
<th>Competition</th>
<th>Name</th>
<th>Details 1</th>
<th>Details 2</th>
</tr>
<tr>
<td rowspan=5>1</td>
<td rowspan=5>Swimming</td>
<td>John</td>
<td rowspan=3>This info is relevant to John,Steven,and Mark</td>
<td rowspan=2>This info is relevant to John and Steven</td>
</tr>
<tr>
<td>Steven</td>
</tr>
<tr>
<td>Mark</td>
</tr>
<tr>
<td>Peter</td><td>This info is relevant to Peter</td>
<td>This info is relevant to Mark and Peter</td>
</tr>
</table></center> </body></html>
Insert a background image in the above table :
Output:
1.Build nested tables:
Eg:<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<style>
tr,td{
text-align:center;}
</style> </head>
<body>
<table border=3 align=center width=300px height=200px bgcolor=#95A5A6 >
<td colspan=2>HTML Table</td>
<tr>
<td>Cell1</td>
<td>Cell2
<table border=3 align=center>
<td colspan=2>Nested HTML Table</td>
<tr>
<td>cell2.1</td>
<td>cell2.2</td>
</tr>
<tr>
<td>cell2.3</td>
<td>cell2.4</td>
</tr></table>
</td></tr></table> </body></html>
Output:
Eg:
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<style>
table,tr,td,th{
border:2px solid black;
text-align:center;
border-collapse:collapse;
width:400px;
height:50px;}
.table2{
margin:10px 10px 10px 10px;}
</style>
</head>
<body>
<table align=center>
<th>Header Column1</th>
<th>Header Column2</th>
<th>Header Column3</th>
<th>Header Column4</th>
<tr>
<td>Row2-item1</td>
<td>Row2-item2</td>
<th rowspan=2>Row2-Nested Table1
<table class=table2>
<tr><th>Row 1 header</th><td>item</td></tr>
<tr><th>Row 2 header</th><td>item</td></tr>
<tr><th>Row 3 header</th><td>item</td></tr>
</table>
</th>
<td>Row2-item4 A secondline</td>
</tr>
<tr>
<th>Row3:Nested Table 2
<table class=table2>
<tr><th>Row 1 header</th><td>item</td></tr>
<tr><th>Row 2 header</th><td>item</td></tr>
</table>
</th>
<td>Row3-item 2</td>
<td rowspan=2>Row3-item 3</td>
</tr>
<tr>
<td>Row4-item1</td>
<td>Row4-item2</td>
<td>Row4-item3</td>
</tr>
<tr>
<td colspan=4>Row 5 -Last row of outer table</td></tr>
</table></body></html>
Output:
Comments
Post a Comment