At the beginning of this unit, you learned that a web page is a collection of information that you can access from a web browser. Every web page has a distinct URL. You’ve probably entered a web page’s URL into your browser whenever you wanted to view the contents of that particular page. For example, https://sophia.org/ takes us to a web page that looks like this:
HTML stands for HyperText Markup Language. As you might have gathered from its name, HTML is a markup language. Like programming languages, markup languages are a type of code. Unlike programming languages, markup languages aren’t used to write algorithms. Instead, they’re used to group, annotate, and categorize content to describe the content’s semantics in a way that computers will understand.
For example, here’s that screenshot of the Sophia home page again:
As humans, it’s easy for us to understand the structure of this page. We have the benefit of being able to use contextual clues and our past experiences of navigating similar web pages to analyze the page and make sense of it. For instance, we can tell that the black bar at the top is used for navigation because it’s a design pattern employed in many other web pages. We can also assume that the color-shifting box below the navigation bar is a special announcement because its bold background makes it distinct from the rest of the page.
Computers, on the other hand, can’t determine any of those things without our help. This is what the Sophia home page might look like to a computer if HTML didn’t exist:
Even humans will have trouble making sense of the content above! It’s much harder to tell where the navigation bar starts and ends. Also, it’s nearly impossible to distinguish between the content that’s part of the special announcement and the content that’s outside of it.
Now, compare the text above to the text below. It contains the exact same content but, this time, we’ve added some HTML:
Even without a complete understanding of HTML, it’s a lot easier to tell that certain parts of the page are associated with one another. HTML allows developers to tell the computer that, for example, all the content between <nav></nav> represent the section of the page whose purpose is to provide navigation links between different web pages and that Menu and Search aren’t just random words, they’re buttons.
Notice how, in the screenshot above, we can see all the content of https://sophia.org/ but it doesn’t look right. The fonts are wrong, the navigation menu doesn’t have a black background, and the buttons look boring! HTML is just one of the components that make up a webpage and it’s only responsible for determining the contents of a page. To make those contents look stylish and visually appealing, you’ll need a language that’ll specify how documents are presented. That’s where CSS comes in.
CSS (Cascading Style Sheets) is used to specify how a document should be presented to users. Here, presenting a document to a user means converting it in a way that’s usable by your audience. When a web browser presents a document to a user, it converts HTML source code into a visual format that can be displayed on a computer screen.
CSS has many capabilities. It can be used for basic text styling like changing the font, color, size, and weight of headings, paragraphs, and links.
It’s also used to create the layout of a page so that content is displayed across two columns instead of just one.
CSS can do complex things too like drawing shapes, adding animations, adding effects when users click on a certain element, and more. CSS has so many features that web developers are even able to make complex illustrations using CSS and a bit of HTML.
It’s a bit bland though, so let’s spice it up with CSS:
By the way, the example above is interactive. Try clicking on Hello, friend!and see what happens.
Browser APIs come built into your web browser. You can use them to hook into your computer’s environment or do all sorts of complex things. For example, in the examples above, we used a browser API to manipulate HTML. There’s an API that you can use for geolocation and geographical information and there are APIs for creating 2D and 3D graphics.
Third-party APIs don’t come with your browser so you have to acquire or install their code separately. Many companies publish APIs that allow developers to access their data. For example, Google has an API that allows you to use Google Maps’ location data and traffic information. Spotify has an API you can use to look up musicians, albums, and songs. There are a lot of cool APIs available to use for free, thanks to the fact that software engineers have established a culture of freely sharing knowledge and code with each other.