Write a comment on this article

Your first HTML page

Are you ready for your first HTML page, your first website? All you need to begin is a simple text-editor like Notepad on Microsoft Windows. Start your preferred editor and you are ready to begin. We will now create a valid HTML file which can be viewed with any webbrowser.

We will use one of the most common document types, XHTML 1.1. This means, we have to stick to some more rules than in HTML, but we will do fine. One important difference between XHTML and HTML is that each element needs to be closed, e.g. <br> becomes <br />.

The following code defines the document type and the head of our HTML file. The head contains the title of the document and some meta (descriptive) information. Copy the code to your editor and save the file as "My_first_HTML_page.html". It's important that the file ending is html, so your browser will open it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>My first HTML page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
select code
 

If you open your HTML file with your browser now, the result will look something like the following screenshot. It's a blank page because we have not inserted a body yet. It just has a title ("My first HTML page").

Figure 1: HTML head of an XHTML document

Now we insert some content. The following code contains many different element types, like headings, a paragraph, a table, a link, form elements including a textfield, a textarea, a select-list and a submit-button, a block element (div) and a line break. The code also includes the body-tags and the closing tag for <html xmlns="http://www.w3.org/1999/xhtml">.

  <body>
    <h1>This is a big heading</h1>
    <h3>And this is a small heading</h3>

    <p>
      Here comes a paragraph with some more text followed by a form in a table.
      It also contains a line break:<br />And here is a link:
      <a href="http://www.plohni.com/wb">http://www.plohni.com/wb</a>.
    </p>

    <form method="post" action="My_first_HTML_page.html">
      <table border="0" cellpadding="2" cellspacing="2">
        <tr>
          <td>Your name</td>
          <td><input type="text" name="your_name" /></td>
        </tr>
        <tr>
          <td>Your gender</td>
          <td>
            <select name="your_gender">
              <option value="female">female</option>
              <option value="male">male</option>
            </select>
          </td>
        </tr>
        <tr>
          <td valign="top">Your comment</td>
          <td><textarea name="your_comment" cols="40" rows="10"></textarea></td>
        </tr>
        <tr>
          <td> </td>
          <td><input type="submit" name="submit_form" value="submit" /></td>
        </tr>
      </table>
    </form>

    <div>Finally, we also create a div-element.</div>
  </body>
</html>
select code
 

If you add this code to your existing file you get a complete HTML page which will look like this:

Figure 1: Simple HTML page containing different elements

And that's it! Try other elements and use different attributes and attribute values. You can also view this example here: My_first_HTML_page.html.

Tags

HTML, XHTML, head, body

Comments (0)

Leave a comment

If you have a question or a problem and you're looking for a solution, please use the forum. Comments might not be answered.

Your name (required, maximum 255 characters) ( remember)
Your message (required, maximum 5000 characters)
 
Insert these letters into the textfield below: cGWQ (required, case-sensitive)
Drag the slider to the right (required)