HTML tutorial for beginners (PART 1)
I do not think this tutorial needs much of an introduction. HTML is of course the language used on the internet mainly for the structure and content of websites but used in nearly every website nonetheless. I am going to be using notepad in Windows for this tutorial just to demonstrate how easily you can create an HTML document. Hopefully by the end of this tutorial you will have a good understanding of the structure of HTML.
You will not be an expert but you should have good knowledge of essentially how HTML works, which you can then build on and progress from there. We have got a blank document here in notepad. HTML is made up of tags. Tag is how HTML defines different areas and sections of the document and the To a web browser would read and interpret the code essentially.
The first tag you need in HTML is simply the HTML tag. Most tags in HTML need opening and closing so see up here we have got the opening HTML tag. Simply the words HTML in between these symbols and then down here we have got the closing HTML tag which is nearly the same of course with a forward slash. Put in there and that’s defined a closing tag so everything in this particular HTML file will now go in between these tags.
I am going to use tab to indent, the tags within it and it is good practice and makes HTML much easier to read. Within the HTML tags we have two sections; we have the head section so we have an opening and closing head tag and then the body which sorry needs an opening and closing body tag so this is simply the basis and the basic structure of an HTML file.
Now we will see the vital tags and some really basic ones that you need to know to start building websites in HTML. In the head section this is where like information about the page would go in the body section. This is where the actual content which is displayed to the user would go so we will start on the head section.
All we really need up here for now is the title tag. This is the text displayed in a web browser title bar. I am going to stick in there “Hello world” for example. If we were to save this now you must remember to save it as an HTML file. You can just change in notepad to save as type to all files and then type dot HTML and simply as the file extension.
If we were to save that and then open it in a web browser, we would get a blank page but it would it should say “Hello world” in the title bar. We have got a blank page but it says “Hello world” up here in the title bar. Now we want to add some content to the page so usually the first thing you would want is a title HTML has some handy heading tags.
Font Size Tags
We have got H1 which would create the biggest heading a heading in terms of style. Simply increases the font size and makes it bold so that would be opened and closed just the same as the other tags we have used so far. After H1 you have H2, H3, H4, H5 and H6 which get smaller each time. H6 will be the smallest heading you could have. H1 will be the main heading then you’d use H2 as a subheading.
We are just going to use one for now on stick “Hello world” in there and I keep switching to Internet Explorer. You can see the progress we are making. We have a heading “Hello world” obviously that is what we will just create that. So after the heading, you’d want some text potentially and maybe a paragraph of text. I would use the P tag, P of course for paragraph.
This is also open and then closed with the text inside so we could do that and if we save it refresh the page we get a paragraph of text underneath and because we are using the correct tags the heading tag in the paragraph tag. The H1 and the P the web browser and HTML automatically set the line spacing that indents everything as we would expect to see it.
If you wanted another paragraph, it would be a simple case of adding more P tags and then if I’ll just do that you will see there is another paragraph again with the line spacing automatically added for us. You are building an HTML web based website,
Insert Image in Webpage
You may want an image so we are going to create an image. I am doing all of this from scratch so you can hopefully help you understand exactly how it works. I will just create a new image. Let’s call it image.BMP. Of course it is just an empty file at the moment. We are going to just create an image it of course it does not really matter what in it because it’s the HTML we are working with here. We have got an image. We are now going to look at the tag we need to put the image into the web page.
This uses the IMG tag but of course an IMG tag alone would not get us much of an image. The way this one works is we set properties within the tag itself. We set the path to the image file, we use SRC for this method equals and open and close quote and within the course, we put the path. So I can just use a relative path. I am not going to go too much into how relative and absolute path to work but essentially relative path.
I can simply type image.BMP and since it is in the same folder as this HTML file. It will work. If it was in kind of an image folder, it will be images/images.BMP. It was in a folder one level up you use dot/ to go up a level this is when using relative file paths which is usually much easier. In the image tag you can set things like width and height.
You would do it in the same way; you could do it in pixels ended in percent. If you do not put those properties in, then it just displays the original size of the image. The image tag does not actually have a closing tag because if you think about it, we define everything about the image within the tag itself. If we open and close the tag though, there is nothing to go inside. What we do? We cannot just leave it like that.
It is a self-closing tag we just put a forward slash at the end of the tag before like essentially closing the opening tag and that makes it open and close all at once. If we save that and go back to our webpage, we can see that lovely image. I just created in paint so it is as simple as that to add an image to a web page using the IMG tag.
Finally I hope that you completely understand what we’ve done in this tutorial. Do it again and again and wait for the next tutorial HTML tutorial for beginners (PART 1).