Structure of a Webpage
In my previous post, we understood and got an idea of what HTML elements, tags, and attributes are. Now it’s time to actually apply what you have learned and start creating your very first webpage. We’ll also be able to finally preview it in this tutorial for the first time.
Basic Building Blocks
Every single website you visit has a required HTML document structure. This consists of several html elements/tags.
<!DOCTYPE html>, <html>, <head>, <body>
Let’s go ahead and open up your text editor (Sublime Text 3 for those that downloaded it) and type in the following code into your editor. Then I’ll break down what each of these elements/tags mean.
NOTE: I suggest you actually type in these HTML tags by hand and not just copy and pasting the code. This will allow your brain to actually get used to typing out these tags and get your mind familiarized with them through cognitive training.
<!DOCTYPE html> <html> <head> <title>My First Webpage</title> </head> <body> </body> </html>
So what do all these weird tags mean?
Let’s break down what we have typed down so far.
The first tag we wrote “<!DOCTYPE html>“, is a special tag that refers to the document type that we want to use. It basically tells the browser how to render the HTML page. You’ll also notice that we also included the html attribute as part of the doctype to signify which version we want the browser to render our page.
NOTE: You don’t need to worry too much about this tag. Just know that you should always include it in each of your pages. To learn more about Doctypes, see https://www.w3.org/QA/2002/04/valid-dtd-list.html. Also, we are using the latest HTML5 Doctype, as it is(will be) the standard moving forward.
The second tag you’ll see is the actual “<html>” tag. You’ll also notice that this tag is used to wrap both the <head> and <body> tags inside of it. The <html> tag is used as a global container that holds all other HTML tags inside of it (excluding the <!DOCTYPE html> tag of course).
The “<head></head>” tags will contain all the browser information that we want our browsers to render. Most of the HTML elements/tags that will be put inside of the <head> tag will not necessarily be visible to us. This will include several other tags such as <meta>, <title>, <link>, and even <script> tags (more on those tags later).
However, you did notice that there is a “<title>” tag in between the opening and closing <head> tags. The <title> tag also contains some text content. That content is used to provide the title of the webpage itself, and also shows up as the title of a new window or tab. You should always include the title in all of your webpages.
The “<body></body>” tags contain all the actual content of our webpage. This is where we will be writing most of our HTML code. All the visible content will be written in between the opening and closing body tags.
Saving and viewing our first web page
Go ahead and save that file that we have just typed with all of the HTML elements in and name it index.html (don’t hit save just yet though).
Now, create a new folder (preferably somewhere on your Desktop) and name the folder something like ‘my-first-site‘ and then finally hit the “save” button to save your index.html file inside that newly created folder.
NOTE: Whenever you want to save a webpage, use the extension .html so that your browser knows that it’s an actual HTML file you can preview in the browser. In most cases, the main homepage of any page is called index.html, hence why we named it as such.
Now, go to your Desktop, and into that “my-first-site” folder and double-click to open the index.html file you just saved. Your default browser should automatically open it for you. Congratulations! You’ve created your very first web page!
“But wait! There’s nothing showing up on the screen…” is what you’re probably thinking. And that’s true since we haven’t created any content just yet.
In the next chapter, we’ll start adding some content and finally be able to preview our first page.