View video tutorial

HTML Get started

HTML

To get started learning HTML you simply need a computer and any text editor.

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.

notepad

Open the editor and type the following code.

notepad

Save file to any location in your computer by any file name for example index.html, Save type as:All files (*)

notepad

Open file in any of your browsers.

notepad

Output looks like below.

notepad

Congratulations! you successfully write and run an HTML program. Now you can improve quickly.

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 Basic Example</title>
</head>
<body>
    <p>Welcome to w3context.</p>
    <h1>My First Heading</h1>
    <p>This is a Paragraph.</p>
    <h2>My Second Heading</h2>
    <p>This is another Paragraph.</p>
</body>
</html>
Try it Now »

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>
Try it Now »

Click on the "Try it Now" button to see how it works.