HTML Basics

Home  >>  Computer Science  >>  HTML Basics

HTML Basics

24
Nov,2015

0

HTML

 Hypertext Markup Language(HTML)

HTML (Hypertext Markup Language) is the set of markup symbols or codes inserted in a file intended for display on a World Wide Web browser page. The markup tells the Web browser how to display a Web page’s words and images for the user. Each individual markup code is referred to as an element (but many people also refer to it as a tag). Some elements come in pairs that indicate when some display effect is to begin and when it is to end.

Structure of HTML

Learning HTML basics

<!DOCTYPE HTML>

<html>

<head>

<title>Learning HTML basics</title>

</head>

<body>

<h1>Welcome to thezenith.xyz</h1>

<p>You will learn basics of HTML</p>

</body>

</html>

The !DOCTYPE declaration defines the document type to be html.Other ways to declare:-

i.DOCTYPE HTML

ii.DOCTYPE html

iii.doctype html

The text between <hmtl> and </hmtl> describes the html documentary.

<head>provides information about the document.

<title>provides title for the webpage.

<body>describes the visible page content to user.

<h1> is the haeding.

<p> is the paragraph.

HTML Images

<img src=”xyz.jpg” alt=”thezenith” style=”width:20px;height:60px”>

HTML Links

<a href=”http://thezenith.xyz/”>Click Here</a>

Sample Web Page

<!Doctype html>
<html>
<head>
<title >Welcome to my Webpage</title>
</head>
<body bgcolor=”black”>
<h1 style=”color:white”><img src=”lion.jpg” style=”width:400px; height:200px”><b>WELCOME TO “ZENITH” OFFICIAL SITE
</b></h1>

<h2 style=”color:white”><center><b>Welcome to zenith official site.The link is given as: thezenith.xyz</b>
</center></h2>

<Pre style=”color:white”><center>This website consist of the following topics:
i. <a href=”http://thezenith.xyz/spirtual-path/bhagavad-gita”>The bhagavad-Gita</a>
ii. <a href=”http://thezenith.xyz/thezenith/the-secret-of-life”>The secret of life</a>
iii. <a href=”http://thezenith.xyz/thezenith/last-stage-of-lifeold-age”>Last Stage of Life</a>
iv. <a href=”http://thezenith.xyz/computer-science/top-10-keyboard-shortcuts”>Top 10 keywords shortcuts</a>

Can explore more,click on the given link.<a href=”http://thezenith.xyz/”>thezenith.xyz</a>
</center></Pre>
</body>
</html>

Block Level Elements

These elements always start on new line and take up full width available.For example-

<h1>——-<h6>

<p>

<div>

<form>

Inline Elements

These do not start with new line and only take required necessary space.For example:-

<img>

<a>

<span>

Use of div

<!DOCTYPE html>
<html>
<head>
<title>hello</title>
</head>
<body>
<div style=”background-color:yellow;color:blue;padding:20px”>

<h1>
jai jai shri radhe
</h1>
<p>
Radhe krishna radhe krishna..krishna krishna radhe radhe ..radhe sham radhe shama..
shyama shyama radhe radhe ..
</p>
<p>
shagun
</p>
</div>
</body>
</html>

HTML Tables

<!DOCTYPE html>
<html>
<head>
<style>
thead{color:green;}
tbody{color:red;}
tfoot{color:pink;}

table th,td
{
border:3px solid black;
}
</style>
</head>
<body>

<table>

</thead>
<tr>
<th>month</th>
<th>savings</th>
</tr>
</thead>

</tfoot>
<tr>
<td>sum</td>
<td>1000</td>
</tr>
</tfoot>

<tbody>
<tr>
<td>september</td>
<td>500</td>
</tr>
<tr>
<td>august</td>
<td>500</td>
</tr>
</tbody>

</table>
</body>
</html>

HTML Layouts

<header> it defines a header for a document or for section.

<nav> it defines a container for navigation links.

<section> it defines a section or an article in a webpage.

<aside> it defines a content in a sidebar.

<footer> it defines footer for a document.

Example:-

<!DOCTYPE HTML>
<html>
<title>My new project</title>
<head>
<style>
#header
{
background-color:orange;
text-align:center;
}
#nav
{
line-height:40px;
background-color:pink;
height:50px;
width:1300px;

}
#section
{
width:500px;
height:160px;

}
#footer
{

line-height:100px;
background-color:pink;
height:20px;
width:1300px;

}
</style>

 

<body>
<div id=”header”>
<h1 style=”color:white”>Welcome to thezenith.xyz</h1>
</div>

<div id=”section”>
<pre> <img src=”logo.png”>
</div>

<div id=”nav”>
<pre>
<h3 style=”color:white”><a href=” provide a link”><b>HOME </b></a>

<a href=”provide a link”><b>Subscribe</b></a>

<a href=”provide a link”><b> Contact us</b></a></h3>
</div>

<div=”nav”>

<pre>

<h2 style=”font-family:Monotype Corsiva”>
<marquee><img src=”xyz.jpg”> <img src=”10.jpg” style=”width:400px;height:300px”> <img src=”16.jpg” style=”width:400px;height:300px”></marquee>

<center>Welcome to my webpage.</center></h2>
</div>

<div=”footer”>
<pre ><h3>
</b> <u>Links Available:</u></b> <a href=”http://thezenith.xyz/computer-science/android-projects”>Learning Android</a>

</h3>

</div>

</body>
</html>

Project:- Application Form

<!DOCTYPE html>
<html>
<head>
<title> APPLICATION FORM</title>
</head>
<body>

<form action=”http://thezenith.xyz/electronics/ralph-baer-the-father-of-video-games”>
<fieldset style=”background-color:white”>
<legend><b>Application Form:</b></legend>

<b>Firstname</b>:<br>
<input type=”text” name=”Firstname”>

<b>Lastname:</b>
<input type=”text” name=”Lastname”><br>
<b>Gender</b>
<input type=”radio” name=”sex” value=”male” checked>Male

<input type=”radio” name=”sex” value=”female”>Female
<br>
<b>Email:</b><br>
<input type=”text” name=”Email”>

<br><b>Phone Number:</b><br>

<input type=”text” name=”Phone Number”>
<br>

<b>Available Start Date:</b><br>
<input type=”text” name=”Available Start Date:”>

<br>
<b>What position are you applying for:</b><br>
<select name=”job”>
<option value=”Teacher”>Teacher</option>
<option value=”Professor”>Professor</option>
<option value=”Doctor”>Doctor</option>
<option value=”Police(IAS)”>Police(IAS)</option>
<option value=”None”>None</option>
</select><br>
<br><b>What is the current state of the employee:</b><br>
<select name=”Current State”>
<option value=”Employed”>Employed</option>
<option value=”Self-employed”>Self-employed</option>
<option value=”Unemployed”>Unemployed</option>
<option value=”Student”>Student</option>
<option value=”None”>None</option>
</select><br>

<center><table style=”width:100px” border=2>
<caption><b><center>EDUCATION</center></b></caption>
<tr>
<th>School Name</th>
<th>College School</th>
<th>Address</th>
<th>12th %age</th>
<th>Graduation %age</th>
</tr>
<td><input type=”text” name=”type of school”></td>
<td><input type=”text” name=”type of school”></td>
<td><input type=”text” name=”type of school”></td>
<td><input type=”text” name=”type of school”></td>
<td><input type=”text” name=”type of school”></td>
</tr>

</tr>
<td><input type=”text” name=”type of school”></td>
<td><input type=”text” name=”type of school”></td>
<td><input type=”text” name=”type of school”></td>
<td><input type=”text” name=”type of school”></td>
<td><input type=”text” name=”type of school”></td>
</tr>

</tr>
<td><input type=”text” name=”type of school”></td>
<td><input type=”text” name=”type of school”></td>
<td><input type=”text” name=”type of school”></td>
<td><input type=”text” name=”type of school”></td>
<td><input type=”text” name=”type of school”></td>
</tr>

</tr>
<td><input type=”text” name=”type of school”></td>
<td><input type=”text” name=”type of school”></td>
<td><input type=”text” name=”type of school”></td>
<td><input type=”text” name=”type of school”></td>
<td><input type=”text” name=”type of school”></td>
</tr>

</tr>
<td><input type=”text” name=”type of school”></td>
<td><input type=”text” name=”type of school”></td>
<td><input type=”text” name=”type of school”></td>
<td><input type=”text” name=”type of school”></td>
<td><input type=”text” name=”type of school”></td>
</tr>
</table>
</center>

<br><b>I am capable for this job..</b><br>
<textarea name=”message” rows=”10″ cols=”30″>
Because..
</textarea>
<br><br>
<b>Upload Your Resume</b><br>
<input type=”submit” value=”Upload”>

<div style=”background-color:yellow;padding:10px”>
<input type=”radio” value=”agree”>
<b><i>
I am agree to above statements for the respective post.</div></i></b>
<br><input type=”submit” value=”Submit”>
</fieldset>
</form>
</body>
</html>

Text Shadow

<DOCTYPE HTML>
<html>
<head>
</head>
<style>
.abc
{
text-shadow:4px 3px yellow;
outline:3px solid black;
}

.xyz
{
text-shadow:4px 4px pink;
border 10px dotted;
margin:10px 20px 30px 40px;
}
</style>
<body>
<h1 class=”abc”>
<center>History is made by those,whose language is sun.</center></h1>
<h2 class=”xyz”>
<center>While writing the story of your life,don’t let anyone to hold the pen.</center>
</p>
</body>
</html>

JavaScript in HTML

<!DOCTYPE html>
<html>
<head>
<title>javascripts</title>
<body>
<h1>welcome</h1>

<p id=”demo”>we will learn cse in our class</p>
<button type =”button” onclick=”document.getElementById(‘demo’).innerHTML=’HTML CSS'”> click here</button>

</body>
</head>
</html>

Using “window alert” for showing the addition of two numbers

<!DOCTYPE html>
<html>
<haed>
<body>
<script>
window.alert(“Addition is”+(2+3));
</script>
</body>
</head>
</html>

Using “document write” for showing the addition of two numbers

<!DOCTYPE html>
<html>
<head>
<body>
<script>
var x=6;
var y=10;
var z=20;
document.write(“Number is”+(x+y+z));
</script>
</body>
</head>
</html>

Checking a number is odd or even.

<!DOCTYPE html>
<html>
<head>
<body>
<script>
var x=prompt(“enter the number:”);
if(x%2==0)
document.write(“even”);
else
document.write(“odd”);
</script>
</body>
</head>
</html>

Finding the largest number among three numbers

<!DOCTYPE html>
<html>
<head>
<body>
<script>
var x=prompt(“enter the number:”);
var y=prompt(“enter the number:”);
var z=prompt(“enter the number:”);
if(x>y && x>z)
document.write(“first number is greatest”);

else if(y>x && y>z)
document.write(“second number is greatest”);

else
document.write(“third number is greatest”);
</script>
</body>
</head>
</html>

Finding the factorial

<!DOCTYPE html>
<html>
<head>
<body>
<script>
var n=prompt(“enter the number for calculating factorial:”);
var m=1,i;
for(i=1;i<=n;i++)
{
m=m*i;
}
document.write(“the factorial of a number is:” +m);
</script>
</body>
</head>
</html>

 Printing the 2’s Table

<!DOCTYPE html>
<html>
<head>
<body>
<script>
var n=prompt(“enter the number:”);
var i,m;
for(i=1;i<=n;i++)
{
m=2*i;
document.write(“2*” +i “=” +m);
}
</script>
</body>
</head>
</html>

Form validation

<html>
<head>
<script type=”text/javascript”>
function sub()
{
if(document.getElementById(“t1”).value == “”)
alert(“Please enter your name”);
else if(document.getElementById(“t2”).value == “”)
alert(“Please enter a password”);
else if(document.getElementById(“t2”).value != document.getElementById(“t3”).value)
alert(“Please enter correct password”);
else if(document.getElementById(“t4”).value == “”)
alert(“Please enter your address”);
else
alert(“Form has been submitted”);
}
</script>
</head>
<body>
<form>
<p align=”center”>
User Name:<input type=”text” id=”t1″><br><br>
Password:<input type=”text” id=”t2″><br><br>
Confirm Password:<input type=”text” id=”t3″><br><br>
Address:<textarea rows=”2″ cols=”25″ id=”t4″></textarea><br><br>
<input type=”button” value=”Submit” onclick=”sub()”>
<input type=”reset” value=”Clear All”>
</p>
</form>
</body>
</html>

Another form validation with condition

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms[“myForm”][“email”].value;
var atpos = x.indexOf(“@”);
var dotpos = x.lastIndexOf(“.”);
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
alert(“Not a valid e-mail address”);
return false;
}
}
</script>
</head>

<body>
<form name=”myForm” onsubmit=”return validateForm();” method=”post”>
Email: <input type=”text” name=”email”>
<input type=”submit” value=”Submit”>
</form>
</body>

</html>

CSS + Javascript

<html>
<head>
<script type=”text/javascript”>
function sub()
{
if(document.getElementById(“t1”).value == “”)
alert(“Please enter your name”);

else if(document.getElementById(“t2”).value == “”)
alert(“Please enter a password”);

else if(document.getElementById(“t2”).value != document.getElementById(“t3”).value)
alert(“Please enter correct password”);

else if(document.getElementById(“t4”).value == “”)
alert(“Please enter your address”);

else
alert(“Form has been submitted”);
}
</script>
</head>
<body>

<form>
<p align=”center”>
User Name:<input type=”text” id=”t1″><br><br>
Password:<input type=”text” id=”t2″><br><br>
Confirm Password:<input type=”text” id=”t3″><br><br>
Address:<textarea rows=”2″ cols=”25″ id=”t4″></textarea><br><br>
<input type=”button” value=”Submit” onclick=”sub()”>
<input type=”reset” value=”Clear All”>
</p>
</form>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *