Building a website: HTML, CSS, & JavaScript

html-css-javascript

Anatomy of a Website, Day 2

Have you ever found yourself wondering how a website is built? There are a lot of terms that get thrown around, like “responsive design” and “search engine optimization”, and most of us have heard of HTML & CSS. What I want to do in this article is try to teach you the three basic building blocks of a website: HTML, CSS, & JavaScript. I like to think of these blocks in more practical terms: form, style, and function.

HTML is how websites are formed

The first building block of a website is HyperText Markup Language, or HTML. A markup language uses tags to define page elements for display. There are many types of markup languages, but HTML is a descriptive markup language that tells browsers about the semantics of the element being tagged. HTML is built on 2 important aspects of markup: an element nested inside of tags.

Tags are identified with an opening < > and a closing </ >, the element is what rests inside both the opening and closing tags, and the content itself goes between the opening and closing set of tags. So HTML markup will look like this: <element>the content of the element</element>. There are all sorts of HTML tags in 2020 and new markup is constantly being discussed by the World Wide Web Consortium (also known as W3C).

To date there have been 4 distinctive generations of HTML standard, but the 5th generation, HTML 5, has been designed to act more as a living standard. Meaning, the structural declarations are unlikely to change, even though a browser may choose not to adopt new standards of HTML elements. For this reason, cautious developers are typically pretty slow to adopt new HTML elements.

The important thing to know about HTML is that it gives a website its form, so if you want to identify a heading, you have 6 hierarchal heading levels (h1, h2…h6), and each declaration will cause the heading to appear slightly smaller than the one before it.

A lot of the elements in HTML are pretty easy to remember such as <p> for paragraph or <form> for to declare a form. There are also elements that are important, but aren’t necessarily self-explanatory, for example, the div. A div tag, or <div>, is a “division” of a page, and it’s how you break your page into sections. Obviously, I can’t go into detail over all the HTML elements, but hopefully you get the idea on how HTML is structured and what it does.

<!DOCTYPE html>
<html>
<head>

<title>Page Title</title>
</head>

<body>
<h1>This is a Heading</h1>

<p>This is a paragraph.</p>

</body>
</html>

The basic web structure of an HTML document is broken into 4 parts: the document declaration (this sets up HTML as the document type), the HTML tag (that contains all the HTML coding), the head section (this is where you title the page, load scripts, styles, fonts, and meta-data), and the body section (this is where all your site content lives).

CSS is how websites are styled

The second building block of a website is Cascading Style Sheets or CSS. Style sheets are how a browser is instructed to display HTML elements. For example, you can give all your text a specific font, color, and size. CSS styling is built on a declaration, or set of declarations, followed by a defining set of styles. There are many important things to understand about CSS: how the cascade works, styling targets, such as HTML elements, IDs, and classes, and media queries.

CSS can be declared inside an HTML elements tags (this is called inline styling), it can be declared in an HTML head section (this is called internal styling), or it can be declared in a separate file that is called from a web pages head section (which is called external styling). The most common method of styling a website is by using external styling.

What is a cascading style sheet?

You can use as few, or as many, external style sheets as you need. The browser will read them in a cascading sequence and in the order the sheets are loaded into the browser in. As the instructions are loaded, the browser begins building page elements based on their styling instructions, and when the styles conflict, it takes the last known rule processed.

If you have multiple style sheets it can be difficult to keep all of your styles straight, and that is why it is important to remember the rule of specificity. The rule of specificity dictates that when styles conflict the rule that is the most specific will win out over all the other rules.

In the cascade, this means that the style loaded most recently will win out over all the others. So if your first style sheet says that your body typography is blue and your fifth style sheet says that it is red, then the type will be red. However, there is a way to be even more specific, and that’s through using classes. A class is a way to give some elements “special” styling, instead of using the default styling of HTML elements. To be even more specific, you can combine classes and IDs with HTML elements. So if you wanted to style all the paragraph elements inside a div with the class “box” your style might look like this:

.box p { color: blue; } 

Elements vs. IDs vs. Classes

So now that we know how style rules are determined, and how to add specificity, it would probably be helpful to understand how to declare styles using elements, IDs, and classes.

An element (surprise, surprise!) refers to an HTML element. An element tag’s style will affect any content inside an HTML element tag that is declared in a style sheet. So if you wanted all of your page’s text to be set to a default color of blue and a size of 18 pixels you might style your body element (the visible part of an html page) like this:

Body {color: blue; font-size 18px;}

Any tagged HTML element is eligible to be styled with CSS and that brings us to the question, what happens when you want two HTML elements to have two different styles? There are all sorts of use cases when you would want to do this, for example, you will probably want to have different sections on your webpage that have different color fonts and backgrounds. You can break styling out of HTML elements and make them more specific by declaring ID’s or classes.

Declaring an ID or a class in HTML is very simple and is added to the HTML element tag like this:

<p class=“paragraph”> Some content </p> 

or…

<p id=“paragraph”> Some content </p>

And at this point you might be wondering, what’s the difference? The answer is simple; an ID is declared when an element will only appear once per page (or site wide). To give you an idea when an ID is useful, consider that before HTML had a <header> tag, I used to build my site’s header in a div like this:

<div id=“header”> All my header content</div>

Using an ID declaration allowed me to tell browsers that this div would house basic site information such as a logo, business name, and site navigation and I wouldn’t have to worry about style conflicts. These elements would be unlike any other anywhere else on the page. The important thing to remember is that IDs are unique.

Classes, on the other hand, can be used anytime you need a particular style. Your entire site content can be styled with a blue font on a white background, but with a class, you can create sections where the font is white on a red background. Adding a class to an HTML element is the same as when you add an ID:

<div class=“redbg”> All my white font on a red background </div>

Using a class declaration allows you to create reusable design sets in order to keep your designs consistent. You may also find it helpful to know that you can declare multiple classes on a single element like this:

<div class= “redbg whitefont”> All my white font on a red background content </div>

Leave a space between the two classes, and both classes apply to the element.

While declaring ID’s and classes in HTML is nearly identical, on the style sheet they are declared by preceding the ID name with a “#” and a “.” precedes the name of a class. So if we use our previous examples our header ID would look like this:

#header {some header rules}

Where our two classes would look like this:

.redbg {background: color:red;}

.whitefont {font-color: white;}

CSS takes a little practice, but with trial and error you get used to it pretty fast. It just takes practice, especially if you want to keep your CSS files from getting any larger than they need to be. The real magic happens when you learn how to style elements based on page positioning and heredity, but that’s outside the scope of this article.

So far at this point, I’ve told you that HTML is how the page is formed and that CSS determines how the page will look, but what I haven’t told you is how to make page elements interactive…and that’s where JavaScript comes in.

You can create dynamic content with JavaScript

When website content changes through user activity, it is said to have dynamic content. With JavaScript you can change all sorts of site behavior based on user input, for example, you can control multimedia, animate images, swap page content, or pretty much anything you can think of.

JavaScript can get complicated, but there are three important factors to JavaScript functions variables, operations (also called strings), and events.

Variables are used to store useful information, a string is used in conjunction with variables, and the event handler tells the script under what circumstances it is to run the script. Easy right!? No? OK, let’s try something different.

Let’s say you want your page to show today’s time and date when a page loads. To keep it simple, we will eliminate the string, and just display the current date. You need to create a variable called “today”, which will be used to store and call the current date. You also need an event handler that says when the page loads you want to open an alert box with the current date displayed. The event in this case is “onload”. The JavaScript looks like this:

In the head section you need to create the script:

<SCRIPT LANGUAGE = "Javascript"> var today= new Date() </SCRIPT>

Then you call the script from the page like this:

<BODY onload=alert(today)>

This is a really simple example; you can have event handlers tied to mouse clicks (onclick), changing content (onchange), or when a mouse rolls over content (onmouseover), and a lot more.

You can pass almost anything off as a variable, and a string is just content you want to specify, which when you combine a string with a set of operators, the possibilities for what you can do with your web content is almost endless.

JavaScript (.js) can get so complicated that there is no benefit in creating a custom .js function every time you want to use the same basic functionality. For this reason, developers create .js libraries to collect and simplify complex scripts into smaller easy to execute chunks. One of the most popular examples of a .js library is jQuery.

jQuery is a collection of complex JavaScript that makes it easier to simplify interaction with HTML elements, CSS animations and transitions, and basic page structure. The jQuery library is so robust, that I have met many developers who have never bothered to fully learn JavaScript and instead rely on jQuery for their dynamic content manipulation. And for those times when you don’t need much functionality with JavaScript, you can find all sorts of specialized libraries that perform singular tasks like creating content sliders or animating page transitions to look like flipping over paper.

HTML, CSS, and JavaScript: Bring it all together to create a modern web experience

These three building blocks are the basic anatomy of a website. While JavaScript can be configured to work on the server-side, these three blocks are all rendered and processed by the user’s computer on the frontend of a website. There are two other important elements for a modern website, a server-side scripting platform, and a database. I am going to write about these two elements in another article because not all websites require server-side content handling or a database to store content in.

I know that this article hasn’t by any stretch of the imagination made you capable in HTML, CSS, or JavaScript, but I hope it gave you a bird’s eye view of how websites are built and function. With some basic terminology and a good idea where to start learning, should you be interested in learning to build your own web content.

Jason Usher

Jason has been studying design and web programming for over 10 years. He's a big fan of brand-oriented design with an emphasis on value for value growth. When he is not neck-deep in market research, he enjoys photography, time with his wife and kids, and a good movie.

Leave a Comment