The web relies primarily on two languages for displaying information that we see in an everyday website:
Before you start writing in HTML and CSS, you’re going to need something to write with. This decision is completely up to you, but we suggest a great tool from Adobe for developing on the web called Brackets. If you are on a Windows machine without admin rights, you can download this portable version.
Alternatively, if you want a more online solution, jsFiddle will let you develop code for the web in your browser.
HTML is responsible for every website you visit, in a way. It carries information for the browser to display, and it does this through markup. You create this information using tags, and the syntax for those tags is as follows
<element attribute="value"> <nestedelement> Text </nestedelement> <selfclosingelement /> </element>
You can put the syntax down to a few core aspects:
>signs, which open up an element.* Everything you put inbetween that tag and the closing tag is inside that element, and you can even put more elements within it.
>sign in the tag.
attribute="value"notation within the tag, after its name. These will come to mean more later on
That’s pretty much all you need to know to start writing in HTML. Please bear in mind that you need to follow this syntax pretty rigidly. As long as you write with the correct syntax, you won’t have too many problems.
To begin, make a new folder for your project in whatever software you are using, and then make a new file called
.html files store HTML data, funnily enough. Then write the following code in your new file
<!DOCTYPE html> <html> <body> <p>Hello HTML!</p> </body> </html>
Alright, so what’s going on here? Let’s go through the code line by line:
<p>, the text you want to display,
Hello HTML!, and then a closing tag for the pargraph,
To display this HTML as you would a website, simply open the file up in your browser. In jsFiddle, you can click the “Run” button up at the top, and in Brackets you can click the lightning bolt up at the top right to start a live preview in Google Chrome. With any luck, once you start this up, you should see the text “Hello HTML!”
With this knowledge, being an expert in HTML is really arming yourself with several different kinds of elements, there are quite a few. Here are some more to get you started:
You’ve learned about the
<p> element for making paragraphs, you can use similar elements for making headings, which help to differentiate between sections of text (for example, the big text “Headings” in this section is a heading). There are six different heading elements, from
<h6>. They are numbered in order of rank, so
<h1> is the biggest and most significant while
<h6> is the smallest and least significant. Try adding the following to the beginning of your body tag
<h1>This is my first heading!</h1>
Anchors can do a lot, but at first you’ll probably use them for links to other pages. Anchors are denoted by the
<a> tag. All of the text inside that will go to the URL you specify when clicked. To specify the url you use the
href attribute. So to make a link to google, you would write it like this
<a href="http://google.co.nz">Go to Google</a>
If you use this, you’ll notice that it takes you to the link in your current tab/window. To make it open a new tab/window (depending on browser), set the
<a href="http://google.co.nz" target="_blank">Go to Google</a>
If you want to make your text bold or italisized with pure HTML, just use the
<i> tags, it’s that simple.
<b>This is bold</b>, <i>this is in italics!</i>
Take all of these new elements and put them into one document, you can copy this into your own computer and it will render as planned
<!DOCTYPE html> <html> <body> <h1>A Great Document</h1> <h6>A Subheading</h6> <p>Hello HTML! <b>This is bold</b>, <i>this is in italics!</i> <a href="http://google.co.nz" target="_blank">Go to Google</a></p> </body> </html>
You now have a basic understanding of HTML! This tutorial is designed to get you started, but there are plenty of resources all over the web to learn about all of the elements in HTML and to get some more comprehensive knowledge.