Skip to content

Latest commit

 

History

History
87 lines (56 loc) · 2.53 KB

1-setup.md

File metadata and controls

87 lines (56 loc) · 2.53 KB

Getting going: A basic page with tags…

Before doing anything you need to know what your website is going to be about. Have a think… you could pick anything you want. Here are a couple of ideas:

  • A game you're playing?
  • A TV show or film?
  • A sports team?
  • A band?

Open up Visual Studio Code or Sublime Text (or your preferred text editor) and create a new file called index.html file.

The index.html file is really important; it tells your computer that it is the homepage for your website. Any other pages you create can be called anything else.

index.html should like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Page title</title>
  </head>

  <body>

  </body>

</html>

Now open a browser and open up the file in your browser. You should have an empty page…

Tags

HTML is a markup language. That's what the ML stands for in HTML. It provides structure to content… if you look at this page some of the text are headings… other bits of the text are paragraphs. HTML allows us to create that structure for a web browser to understand.

Content is surrounded by tags that tell the browser what type of content they are…

Here is an example of a paragraph tag:

<p>
  This is a paragraph. Really!
</p>

A tag is made up of three parts:

  1. An opening tag
  2. The tag contents
  3. A closing tag

Can you see the three parts in the paragraph tag? There is the opening tag: <p>, the closing tag: </p>, and the contents in the middle.

Any text that you want to appear on your page needs to be added to your HTML as the contents of the <body> tag.

Let's try adding a paragraph to our page now. Your <body> tag should now look like this:

<body>
  <p>
    This is a paragraph. Really!
  </p>
</body>

As you can see tags like <body> can have other tags as their content.

Save your file, and go to your web browser, open your index.html file. Refresh the web page and you should see the your text appear on screen.

A few more tags…

There are a couple of other tags that you can use… try adding them to your <body> tag:

  1. <h1> is a big heading…
  2. <h2> is a smaller heading. You can go all the way down to <h6>
  3. <hr /> is a self closing tag. It just creates a divider on your page.

Challenge

For your first page write some text with headings (<h1>, <h2>, etc), paragraphs (<p>) and dividers (<hr />);

Go to the next sheet: Building a template >