Content and stuff.
We have a basic framework, ready for content. In this section we'll introduce some basic tags which will be useful for creating content.
HTML headings are created with the h tag. After the h we place a number to specify which level of heading it is.
We may go down to 6 levels of headings. A level 1 heading ( h1 ) is the main heading for the document. Then level 2 headings ( h2 ) are sub headings. Level 3 is a sub sub heading and so on.
Each document should contain only a single h1 tag but may contain as many headings of the other levels as you like. You also don't have to use them in order if you don't want to and it's perfectly fine to skip levels.
It is possible (using CSS) to create your own headings beyond 6 levels but it is generally accepted that if you need more than 6 levels of headings to organise your content you should probably think about splitting it over several pages.
Let's break it down:
Paragraphs are created in HTML using a p tag. You're probably starting to see a pattern here. Most tags are an abbreviation of the word which they represent. This makes it easier to remember them.
<p>My paragraph here</p>
Let's break it down:
Note: From here on in I will only include the HTML body in examples. This is just for the sake of brevity and when you write your own documents you should include the full HTML layout.
This is our first ever paragraph. It's not much to look at but it is a good place to start. It will all build from here.
This is another paragraph. You'll notice that it is separated from the first one by a small amount of space.
You'll notice that in the example above we had the paragraphs over 2 lines in our code but it displayed differently within the browser. There are many different sizes which the browser may be depending on the size of the users screen and their browser window within the screen. The browser will always reformat the content to flow across the size of the screen. It will ignore extra whitespace and newlines in our code.
This is a paragragh with several spaces in it. See how it displays however.
You'll notice that in the examples above we have indented everything inside the body tags. We do this because it makes the code easier to read. When we introduce lists in section 9 you'll see that indenting can really help to make the structure of our code more apparent. You should get in the habit of indenting your code now. The easier your code is to read the harder it is to make silly mistakes like missing a closing tag.
You'll notice that in the first example ( headings.html ) we didn't add any newlines between the headings. In the second example ( paragraphs.html ) we did. Doing so spaces things out a bit and makes it easier to identify the different components of the document.
There is no specific convention for indneting or spacing out your code. Feel free to do so however suits you but always aim to have your code as clean and easy to read as possible. As your HTML gets larger and more complex you will appreciate the impact of this.
Now let's introduce some content.
As we work through this tutorial, each section will add new tags allowing you to do more interesting things. My suggestion would be that you pick a topic or subject of interest to you and create a page about that. As you work through each section, add to and improve the page with the new tags you have learnt.