INTRODUCTION TO HTML
HYPERTEXT MARKUP LANGUAGE – A PROGRAM USED TO CREATE STRUCTURE OF A WEBSITE
<html>
<body>
<h1>My First Heading</h1>
<h2>This is a level 2 heading</h2>
<h3>This is a level 3 heading</h3>
<p>My first paragraph.</p>
this is just plain text without paragraph or heading this is just plain text without paragraph or
heading<br /> this is just plain text without paragraph or heading this is just plain text without
paragraph or heading<br /> this is just plain text without paragraph or heading this is just plain text
without paragraph or heading<br />
</body>
</html>
HTML Lists
1. Unordered list
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
2. Ordered list
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
3. HTML description lists (XML)
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML images
<img src="smiley.gif" alt="Smiley face">
<img src="smiley.gif" alt="Smiley face" width="42" height="42">
HTML hyperlink
<a href="http://www.w3schools.com/">Visit W3Schools</a>
<a href=”contacts.html”>contact us</a>
<a href=”about me.html”><img src=”image.jpg”></a>
HTML Tables
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
HTML forms
<form action=”myprocessingcode.php” method=”post”>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
Password: <input type="password" name="pwd">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<textarea rows="4" cols="50" name=”mytext”>
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development
technologies.
</textarea>
<textarea disabled name=”mytext2”>
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development
technologies.
</textarea>
<input type="submit" value="Submit">
</form>
CSS – Cascading Style Sheets
A PROGRAM USED TO ENHANCE PRESENTATION OF A WEBSITE
1. Inline Styles
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
2. Embedded stylesheet
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
3. External Stylesheet
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
JAVASCRIPT
A PROGRAM USED TO DESIGN INTERACTIVE WEBPAGES
1 ALERT WINDOW
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello! I am an alert box!");
}
</script>
</head>
<body>
<input type="button" onclick="myFunction()" value="Show alert box" />
</body>
</html
2 CONFIRM WINDOW
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display a confirm box.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x;
var r=confirm("Press a button!");
if (r==true)
{
x="You pressed OK!";
}
else
{
x="You pressed Cancel!";
}
document.getElementById("demo").innerHTML=x;
}
</script></body></html>
3 PROMPT WINDOW
<!DOCTYPE html>
<html>
<body>
<p>Click the button to demonstrate the prompt box.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x;
var person=prompt("Please enter your name","Harry Potter");
if (person!=null)
{
x="Hello " + person + "! How are you today?";
document.getElementById("demo").innerHTML=x;
}
}
</script>
</body>
</html>
