HTML
HTML is the language behind the web, the thing that your web browser interprets in order to display text and images. Writing an HTML document doesn't require expensive software, it can be done for free in a regular text editor (e.g. Windows: Notepad, Notepad++; Mac: TextEdit, TextWrangler).Note: If you use an editor like Apple's TextEdit then make sure it is in Plain Text mode – Shft+Cmd+T toggles between rich text and plain text.
An HTML document in its simplest form can be written:
<html>My first HTML document</html>
The angle brackets are important, they contain the "tag" that describes the content. Tags are "paired", i.e. there is an opening tag and a closing one. The closing one is identical except for the forward slash.
What do I do now?
Create a (plain) text document containing the above HTML and save it with a .html extension (i.e. replace .txt in the filename with .html). Next drag (or open it) in a web browser (e.g. Chrome, IE, Firefox, Safari) and you will see the text appear but not the "tags".Congratulations this is your first HTML document!
Well, done now keep going
Next you need to be aware of some structural conventions. First the overall document structure should contain a head and a body, like this:
<html>
<head></head>
<body>My first HTML document</body>
</html>
<head></head>
<body>My first HTML document</body>
</html>
The purpose of this subdivision is to create an area (the head) where invisible things can take place before the page loads and the body, which is where the content will reside.
I'm not going to discuss the head here, we just need to be aware of it. So let's push it to one side and discuss how we add further structure to our content.
So you want even more structure?
In order to structure content we have a number of additional tags at our disposal that can be used inside of the body tag. The first is <h1> and it represents a first-level heading, there are five further sub-levels h2–h6, and we identify these headings in the following way:
<html>
<head></head>
<body>
<h1>My first HTML document</h1>
</body>
</html>
<head></head>
<body>
<h1>My first HTML document</h1>
</body>
</html>
Now we've got a heading, we probably want to write some text underneath it. For this we typically use <p> which signifies a paragraph.
<html>
<head></head>
<body>
<h1>My first HTML document</h1>
<p>I'm really proud of this, doesn't it look great!</p>
</body>
</html>
<head></head>
<body>
<h1>My first HTML document</h1>
<p>I'm really proud of this, doesn't it look great!</p>
</body>
</html>
Hyperlink time
Finally we need to add one of the Internet's most important elements: a hyperlink. This links between our page and the rest of the Internet. We do this by using an <a> (or action tag) in the following way.
<html>
<head></head>
<body>
<h1>My first HTML document</h1>
<p>I'm really proud of this, doesn't it look great! <a href="http://sketchytech.blogspot.co.uk">I learn't how to do it here</a>.</p>
</body>
</html>
<head></head>
<body>
<h1>My first HTML document</h1>
<p>I'm really proud of this, doesn't it look great! <a href="http://sketchytech.blogspot.co.uk">I learn't how to do it here</a>.</p>
</body>
</html>
Inside the action tag you'll notice the "href", or hypertext reference. This provides the destination to which clicking the text will take you. The way this is written with the equals sign and quotation marks is significant and you will use this style of instruction elsewhere in HTML, for example when inserting images. It is a good thing to learn!
Nearly there
Now there's one last thing that our page needs, a doctype declaration, and this goes at the very start of the document.
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>My first HTML document</h1>
<p>I'm really proud of this, doesn't it look great! <a href="http://sketchytech.blogspot.co.uk">I learn't how to do it here</a>.</p>
</body>
</html>
<html>
<head></head>
<body>
<h1>My first HTML document</h1>
<p>I'm really proud of this, doesn't it look great! <a href="http://sketchytech.blogspot.co.uk">I learn't how to do it here</a>.</p>
</body>
</html>
I'm not going to go into detail about the doctype here, just be aware that this is required and also that it doesn't need a closing tag.
All done
All you have to do now is to update your HTML file and open in your web browser once again (or press refresh if you still have it open).I recommend you now search and explore the whole range of HTML tags that can be found on sites across the Internet. There are plenty of them but you could start with images and tables.
This is brilliantly clear in terms of the tags, etc. but is a "regular text editor" the same as a wordprocessing program. I've tried two (Word and notebook) and neither with let me save as .html Word will let me save as a webpage but when I open with Chrome it displays the tags as well as the text.
ReplyDeleteWhat blindingly obvious mistakes am I making??
Thank you. I'd recommend you:
Delete(1) Open Notepad and paste the code in
(2) Use Save As... from the file menu
(3) in the file name box type index.html
(4) select encoding type UTF-8 from the dropdown menu (I'm using Windows 8 here, so if there is no dropdown box ignore this at the moment).
(5) Press Save
(6) you should now be able to drag your file from your documents (Windows Explorer) or double-click it to open in your web browser (or right-click to Open with...)
Please let me know if this doesn't get things working. Once you get into coding on Windows you might want to look at a free text editor like Notepad++ http://notepad-plus-plus.org/ first of all, but for an exercise like this the added complexity isn't required.
For Mac users, TextEdit comes bundled with OS X - but see my note in the article about rich text and plain text - and TextWrangler is free from the Mac App Store or from here http://www.barebones.com/products/textwrangler/
DeleteIf your Mac text editor won't allow you to save a text file with a HTML extension, all you need to do is locate the file in Finder and to click on the text part (i.e. the file name not the icon) and then change it so that it ends in .html
Linux users - I'd be very surprised if you need advice on text editors and file naming.
That worked Anthony, thanks! This is a very useful blog btw.
Delete