HTML Quizzes
HTML
To get started learning HTML you simply need a computer and notepad, that's all.
Update in progress and will be completed shortly.
Thanks for being with us.
HTML is the building blocks for websites
HTML is the Hypertext Markup Language for web.
For building webpage, website or web applications, learning HTML is a must along with other technologies.
It is very easy for anyone to learn.
Browsers read HTML document to display web contents properly.
How the browsers work with HTML
Every browser understands HTML language, because the programming is built-in to the browsers.
Developers write code in HTML to make webpage, or websites.
Browsers read HTML tags and contents within it and know what is the meaning and purpose of each HTML tag.
Finally browser renders the contents on the page, viewers see the web page.
Jump start writing HTML with Notepad or TextEdit
Open the Start Screen (the window symbol at the bottom-left on the screen). Type Notepad. and Enter.
Open the editor and type the following code.
Save file to any location in your computer by any file name for example index.html, Save type as:All files (*)
Open file in any of your browsers.
Output looks like below.
Congratulations! you successfully write and run an HTML program. Now you can go faster.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Example</title>
<meta charset="utf-8" />
<style>
button{
width: 150px;
height: 50px;
background-color: cornflowerblue;
font-size: 14pt;
color: white;
border-radius: 10px;
}
button:hover{
background-color: rgb(17, 87, 218);
color: white;
}
</style>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "w3context JavaScript Tutorials";
document.getElementById("demo").style.color = "blue";
document.getElementById("demo").style.fontSize = "18pt";
}
</script>
</head>
<body>
<h2>HTML Example</h2>
<p>Click this button to trigger a function.</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>
</html>
Click on the "Try it Now" button to see how it works.
Sample Code
Copy each file contents and paste it to your own project and run to see the final output
Example
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Magazzini Alimentari Moctezuma</td>
<td>Yoshi Chang</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Futterkiste</td>
<td>Giovanni Anders</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Trading</td>
<td>Bennett Roland</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Handel</td>
<td>Mendel Helen</td>
<td>UK</td>
</tr>
<tr>
<td>Centro comercial Riuniti</td>
<td>Maria Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>Alfreds Winecellars </td>
<td>Francisco Tannamuri</td>
<td>Canada</td>
</tr>
</table>
</body>
</html>
Click on the "Try it Now" button to see how it works.