HTML tutorial for beginners (PART 2)

Welcome to second HTML tutorial. Hopefully you have read my first HTML tutorial for beginners (PART 1). These are the types of HTML which you have learned before laid out in an order that you might find them on a web page. In this tutorial, I want to spend a few minutes making sure you understand what HTML is and how it different from other languages that you may have heard of and will be learning if you are trying to make a website. HTML is not a programming language. It is a markup language. It defines the structure of a web page it tells the browser which parts of the web page is a heading and which parts are hyperlinks.

What is CSS

What is CSS

CSS is the language used to add style to a web page. You use CSS to define colors and fonts etc. HTML and CSS are the only two languages you need to make a simple website. For more advanced projects, JavaScript is a programming language that can be used to add dynamic features to a website. It has nothing to do with Java. Java is not a language; JavaScript is a client-side language meaning that it is executed on the user’s computer when they load the website.

What is PHP

What is PHP

PHP is a server-side language but i like to recommend you to learning HTML before moving forward.

For now I am going to stick to using notepad to create HTML files. You can find better text editors by searching on Google. Here is a basic structure of a web page let me just get rid of all of that the next type to learn is hyperlink, href equals and then in quotes. The URL which you want the hyperlink to go to. I am going to have this send people to, Remember the HTTP bit then in between the opening and closing tags is the text that you will see on the web site. Now we are going to type click here and having to look at this in a browser. It says click here and it takes us to Google.

Create Bullet Point in HTML

Next lists to create a bullet-pointed list in HTML. We use the UL tag, UL stand for unordered list so we wrap the whole list in UL tags and then each element is wrapped in a li tag. Now we can add as much as we want in li tags. I will just do two and you will see we get a nice bullet-pointed list. You may be wondering what an ordered list is? If this is an unordered one if we swap the UL tags for Oh L tags, you’ll see that it swaps the bullet points for numbers we will see.

Adjust the size of an Image in HTML

We can set the image size height and width. This is done with another attribute called width. Nice and simple with equals and then in quotes a number which is interpreted as the number of pixels. We are going to say I want this image 200 pixel wide. You will eventually get the hang of roughly how big things are in pixels. For now just guess and use trial and error. You see, we have image with small size. We adjust the height of image.

Using alt tag in HTML

The attribute which we will use instead of image is alt tag. This is actually a required attribute and specifies the alternate text for the image. The alt attribute for images is a required attribute that means that if you do not include it, you technically have invalid HTML although will look just fine in a web browser. You would not be following its standards.

Where to use DOCTYPE attribute

I am afraid this is one more thing that is required that I have not told you yet and that is the DOCTYPE, the DOCTYPE tells the browser which version of HTML to expect. The DOCTYPE must be the very first thing on any web page. Locally, the DOCTYPE for HTML5 is very simple. We started like any other tag but then we had an exclamation mark to tell the browser that this is not actually an HTML tag, we write the word DOCTYPE, DOCTYPE in capital letters followed by a space and then in lowercase letters HTML then the closing tag symbol. This must be the first thing on every web page.



These are used to group elements on page intersections. You can imagine the hidden boxes where you can put the other things. You will not see them but a div tag will always cause a line break before and after itself. Nothing can appear next to a div tag only above and below this can be changed using CSS but we are not at that point yet. We can use a div tag to define the header section of a page for example so in our header we could have the biggest heading. Welcome to Test Website and close div tag, after that we can more forward to the main content section. Here we can have a smaller heading. Let’s also have some text in there. Remembering! The P tag can be used for paragraphs of text and finally for example we could have a photo section obviously. It is up to you, which sections you define and how you use div tags and you can have div tags. In the div tags, you can add more tags as much as you want but for now, just a really simple structure.

How to write Copyright Symbol Another quick tip if you want the copyright symbol, type ampersand word copy and the semicolon. If you Google HTML entities, you will find more useful codes like that. Now we have three sections here and if we take a look at this you won’t see the div tags like I said but they are grouping elements together and defining our sections.

Leave a Reply

Your email address will not be published. Required fields are marked *