For Part 1 of The Anatomy of a Web Page, HTML will be the focus.
Take a deep breath, this article is not intended for individuals who understand code. Please keep in mind that “tech” terminology can be sound deceptively confusing and grandiose, when in actuality the underlying meaning is relatively simple.
For example, the word “Parse”. If someone were to state that a document was parsed, then you may think this refers to a convoluted progress of number crunching, analysis and many years of post-secondary education. Well, this could be the case in some instances but to “parse” a document simply refers to the “reading” of a document. To parse is to read. Simple enough right?
If you would like to take a peak behind the curtain at what makes a webpage tick, without becoming thoroughly confused, then let’s get started!
The 3 Language Of A Web Page
Essentially, there are three languages that are used to create a webpage: HTML (Hypertext Markup Language), CSS (Cascading Style Sheets) and JS (JavaScript). Please try not to get too concerned with the meaning behind terms like “Hypertext” or “Cascading”. All in due time.
The Hype of HTML
Since the early days of the internet, as we know it today, HTML has been floating around cyberspace in some form or another. If you came online around the same time I did, approximately August of 1995, then you would have encountered simple web pages containing text and maybe some images (if you could wait long enough for them to download and display). Back then, what you were viewing was the result simple HTML. Web pages started off as very simple for a reason; A web page was just a simple document that was used by Academics (perhaps a previous college or university professor) to write and exchange essays, lab reports, research or any other text-based form of information, with their colleagues. Image support was to arrive later when the internet and web page creation started to move beyond the confines of post-secondary institutions.
HTML can be viewed as the bones, or better yet, the backbone of a web page; Remove it and what you are left with is an uncoordinated and visually indecipherable mess. In the context of a web page, remove HTML and you are left with nothing that useful – basically a blank page. Okay, so what is it used for? Simply put, it is used to organize information. Let’s take a look at how this is done:
Paragraphs In HTML
<p>Text inside a paragraph element.</p>
Above is a single HTML Paragraph element. You will see that the paragraph element is composed of three things:
- an opening paragraph tag – <p>
- the content of the paragraph element – “Text inside a paragraph element.”
- an closing paragraph tag – </p>
Lists In HTML
There are many more HTML elements to choose from other than Paragraphs but the essence of writing HTML is the grouping of related information together using tags; The process of grouping information together with tags is marking (or marking-up) the types of information present within a document such as a web page. Now, let’s take a look at what grocery list would look like in HTML:
From here on out, I am going to use a service called CodePen to display the HTML code examples, like the one above. On the left, you will see the HTML and on the right, you will see how the code would appear on a web page. Pretty neat!
In the example above we have an Unordered List element which is indicated by the opening “<ul>” tag and the closing </ul> tag. Inside are multiple List Item elements for each grocery item. If we want to create a list that has a sequence or series of steps then an Order List element would be more appropriate:
In the example above, each item in the grocery list is numbered in descending order. “<ol>” are used instead of “<ul>” tags. Simple enough.
Images In HTML
Images in HTML are written differently from a Paragraph or List:
In the example above, you will notice there is no closing tag, such as </img>. With the lack of a closing tag, information is added using attributes – “src” and “alt”. The src attribute contains the URL of the image and is responsible for displaying an image; The alt attribute provides text-based information about the image when the image cannot be viewed.
Links In HTML
Links are the “Hypertext” in Hypertext Markup Language. Hypertext means you can very quickly move to a new page or section of a page. Any time you click or tap on a link to go somewhere on the internet, you are using hypertext – text that quickly brings you somewhere else. This may seem like a very simple concept today – clicking some text that links to another page or website – but it was revolutionary for its time. Links are still at the core of building a usable and relevant website. Did you know links on a web page are actually called Hyperlinks? Let’s have a look at what they look like:
Above is an Anchor element which is composed of an opening <a> tag and closing </a> tag. Between the anchor tags is the text of the link. What gives this element its super-powers is the href attribute, which is where the link is linked to another page or website using a URL.
Putting Web Page HTML Together
Using the examples above, let’s create a slightly more complex web page for a To-Do list:
In the example above, Header elements have been added. The h1 Header element would be the main header for the page, where the h2 Header elements would be considered secondary or sub-headers.
We now have a simple web page built with HTML. But, how do you actually create a web page? You might be asking yourself, do I type out the HTML on a typewriter or word processor and mail it to someone? No, but part 2 of The Anatomy of a Web Page will answer this question and much much more.
