Introduction to HTML

Previous Blog                                                                                                                          Next Blog

Brief Overview Of HTML

All right. So now let's tackle what exactly is HTML and how do we use it to structure our websites.

So no matter what you use as your browser, it could be 

• Chrome
• Safari
  
• Firefox

They all have a single purpose and that's to interpret your files, such as your HTML files, CSS files, your JavaScript files into a website that should be displayed.

For example, we've got a little bit of HTML code here that says that our website should have a title called web development and in the body, there should be a heading that says hello world. 

So if we pass that code into our browser, it will open it up and display it like so with the title of the website usually on the top bar and that H1 or that big heading showing up in the body of our website. So before we dive deep into this, it's really important to remember that HTML is the foundation of all websites.

For example, you won't see websites that are created using just a CSS file or just a JavaScript file, but you can create websites using just an HTML file. Now it might not look great. It will probably look like came from the nineties, but it does enable your website to display texts or various elements such as images or forms, or tables, depending on how you code up the HTML file.

HTML stands for hypertext markup language and the really important part here is the word markup because there are many markup languages. For example, you might have heard of things such as 

• XML extensible markup language
• GML generalized markup language

And all of these languages share a common history. They're based on the markup that used to be put into manuscripts where editors would mock up the manuscript and either specify changes to the author or specify structure and layout to the publishers.

For example,

you might have the squiggly line that shows the publishers that this part should be printed in bold, or this part should be printed in italics. And HTML works in much the same way. You can specify the layout and structure of your website by using HTML tags.

So if you had it over to your browser and go to a website called codepen.io, then we can have a look and have a play around with real-life HTML. So you don't have to sign up, just head over to codepen.io and then hit the start coding button to create a new pen. And then we're going to change the view to a format. So this is the live version of our website, and these are the places where we're going to put our code. So as you can see codepen lets you put in HTML, CSS, and JavaScript, which will together get interpreted and get shown on the left as your website.

Now, as we're only working with HTML at the moment, you can also play around with the CSS and JavaScript sections and we are just going to work from the HTML section.

Now we're going to need some text to work with or to have something to which we can give structure. If you head over to http://gutenberg.org you get taken to the inheritance book.

If you have a look down here, you can see that you can view the book as plain text, or you can read this book online as HTML. So this is what the plain text looks like. It has all of the texts in the book, but absolutely no structure.

But when we have a look at the HTML file, you can see that it has laid out the book where a structure that is more human-readable, and this is what we're going to replicate using HTML.So if you go ahead and just copy some part, the book and you copy it and place it into your pen. So in the HTML section here. Now, you can see that all of this text gets put onto the screen with absolutely no structure. And in order for this to start looking like this, we're going to start adding a little bit of HTML.

So the first thing we can see is that this is the largest heading on the page. So we can make our website look like that also by adding an h1 tag into our HTML. So the tag starts with angular brackets and ends with angular brackets and in the middle is the type of element or the type of tag you want to use.

Now, it's really important that when you open tags that you also close them because as you can see here, I've got an open tag but I have yet to close it and it thinks that the entire contents of my page should be made into the largest heading possible. And that's not what I want.

I only wanted for inheritance section to be heading. So in order to close the tag, it's the same angle bracket but then I have to use a forward slash and then write h1. So now only this part is an h1 or a large heading.

So let's make a subtitle with having a smaller heading. And to do that, we can simply wrap this text around an h4 tag. And now we have a heading, but in a smaller size and shown with less important than the big title. 

So now finally, we have this word by, and to give one size smaller than above heading. let's go ahead and wrap this inside an h2. I hope you're starting to get a better look.

The heading tags get smaller as the number goes up. So for example, if I change this to an h4, it gets even smaller, h5, smaller still, and all the way until h6 which is the smallest font size for the heading element. Now, if you keep going to h7, you'll notice that it doesn't do anything anymore. It doesn't change the heading size. And that's because the heading elements only go from h1 to h6.

Now how we can figure out when to use which tag. Simply by getting good at Googling. How do you find the specific piece of information that's going to help you achieve what it is that you want to know? 

That way you'll have a good foundation of knowledge when you start to build and create your own websites. 

Now that's all for this blog and in the next blog, you will learn about the Anatomy of HTML.

  

Previous Blog                                                                                                     Next Blog