How to write a simple page in HTML

element in a document.” style=”margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;”><body>. Don’t forget to save your changed page!

Then put a file named “unicorn_pic.png” in the same folder as your HTML file. When you refresh your browser window (or re-open the HTML file in your browser), you should see the changed content, complete with unicorn! (don’t forget to save your page).

Original file for the unicorn image

Note: You can get a copy of the unicorn picture to use in your experiments by right-clicking above on the image and choosing the “Save Image As…” option from the menu that appears.

The files needed for this page to work now look something like this in your desktop:

Screenshot of the explorer with 2 files : a html file and a picture file

The resulting page should look something like this in your browser:

Screenshot for the example with a picture

You might have noticed that the <img> tag here has attributes which provide additional information needed to build the requested object, in this case, the filename of the image to display and alternative text to show when the image can’t be loaded.

This is an example of how to add a picture to your page, but you can use similar techniques to add music, videos, and more, all using nothing more than HTML.

Deeper dive

This is not a very pretty web page

As you may have noticed, this web page is not a miracle of design and beauty. This is because HTML is all about the content and what the content means (in terms of its context and the relationships between content blocks), rather than design.

CSS enables you to make the content sparkle, by adding layout, color, fonts, and so forth. Pure HTML is good enough for making simple webpages, but more complex pages (or even simple ones with attractive designs) typically need CSS and possibly JavaScript. HTML builds content, CSS styles the content, and JavaScript makes the content dynamic.

Let’s experiment a bit with CSS by making the body text of the page blue:

<!DOCTYPE html>
<html>
<head>
  <title>Hi there</title>
  <style>
    body {
      color: blue;
    }
  </style>
</head>
  <body>
    <p>This is a some blue text</p>
    <img src="unicorn_pic.png" alt="Unicorn picture :)" />
  </body>
</html>

Note the addition of the <style> element to the page’s <head>. This specifies the CSS to apply to the body text.

You want the text to be underlined? Try adding “text-decoration: underline;” rule to your style:

body {
  color: blue;
  text-decoration: underline;
}

You want the text to have a specific size? Try adding “font-size: 42px;” like this:

body {
  color: blue;
  text-decoration: underline;
  font-size: 42px;
}

The end result looks like this:

<html>
<head>
  <title>Hi there</title>
  <style>
  body {
    color: blue;
    text-decoration: underline;
    font-size: 42px;
  }
  </style>
</head>
<body>
  <p>This is a blue underlined big text</p>
  <img src="unicorn_pic.png" alt="Unicorn picture :)" />
</body>
</html>

And if you save the page in your editor, then refresh your browser, the page should now look like this:

Screenshot of the browser with the page with some CSS

Growing to two pages

When you browse the Web, you often come across links, the most useful way to navigate from page to page. Since HTML is about content and links are a form of content, you can create links among pages using only HTML.

Linking between two local pages

For this exercise, you will need to create a second HTML file on your computer. We’ll add a link to each page so you can quickly switch back and forth between them.

In the first file you can keep the same general structure as before. The important thing is to add a new tag, <a>, like this:

<!DOCTYPE html>
<html>
<head>
  <title>Page 1 to ground control</title>
</head>
<body>
  This is page 1.
  <a href="page2.html" title="to page 2">What is going on on page 2?</a>
</body>
</html>

The second page should link back to the first page:

<!DOCTYPE html>
<html>
<head>
  <title>Page 2 :)</title>
</head>
<body>
  This is a page 2.
  <a href="page1.html" title="to page 1">Want to go back to page 1? Click here</a>
</body>
</html>

Note: Make sure the filenames specified in the <a> tag’s href attribute match the names of the files you created on your computer.

You can now navigate between the two HTML documents. Open page 1 in your browser and click the link to open page 2, and vice versa. You can also test the “previous” button in your browser; it will bring you back to the last page you were looking at.

Your file manager should have the two HTML files in the same folder, like this:

Screenshot of the file explorer with two HTML documents in one directory/folder

Page 1 looks like this in the browser:

Screenshot of a file explorer with a html file for local test

And Page 2 looks like this in the browser, after clicking the link on Page 1:

Screenshot of the 2nd page of the 2 pages example in the browser

Note: The link back to page 1 is violet because the browser “knows” that we’ve previously visited the first page.

If you want, you can try this with more than two pages, or continue on to the next section to take this to the next level.

Linking to another website

In this exercise, we will add a link to the HTML file so that the reader can quickly get to some useful page on the Web. You can link to anything available on the public Web. Let’s try linking to Wikipedia:

<!DOCTYPE html>
<html>
<head>
  <title>My page</title>
</head>
<body>
  One day,...Unicorns are great...See you.
  <a href="https://en.wikipedia.org/wiki/Unicorn" title="Unicorn page on Wikipedia">Want to go know more about unicorns? Wikipedia is right here</a>
</body>
</html>

This should look more or less like this in the browser:

Screenshot of the example page with a link to Wikipedia in the browser

Hover the mouse pointer over the link; you’ll see the title attribute displayed in a hovering tooltip. This can be used to provide more information about the link, so the user can make an informed decision about whether or not to click on it.

Reminder: Whenever you edit the page, don’t forget to save the file on your editor and to refresh the page on your browser so that you can see the changes you made.

We will be happy to hear your thoughts

      Leave a Comment

      Web Training Guides
      Compare items
      • Total (0)
      Compare
      0