Transcripted Summary
Let's kick off this course by talking about what's in a web page.
A web page is a document on the worldwide web that can be displayed in a browser on a computer or device. Popular websites like Google, Facebook, and Wikipedia all have multiple pages with different content. Users can find web pages using URL addresses or search engines.
Let's look at this Wikipedia article on Giant pandas.
There's quite a bit of content on this page:
A title for the article
Paragraphs of text
Pictures of pandas
A search bar
Links to other articles
Users interact with web pages visually. That's an important facet for web pages. They can scroll to read more text in large pictures and even click links to visit new articles.
Users don't need to know any special commands, and websites with good user experience make interactions intuitive and seamless for the users.
So, what makes web pages so visually interactive?
Under the hood, there's quite a bit of code that users never see. There are three main components, HTML, CSS and JavaScript.
HTML stands for Hypertext Markup Language.
HTML is like the skeleton of the page. It provides the structure for all the content. HTML itself is not a programming language per se, but rather a Markup Language. It simply declares what should appear.
HTML pages have standards sections, and each thing on the page is written as what we call an element. Elements are written like this.
<!--- HTML Element Format -->
<tagName attribute="value">content</tagName>
Each element has a unique tagName. The element declaration begins and ends with the tagName surrounded by angle brackets <>, but the ending name is prefixed with a forward slash / to indicate that it is the ending.
The starting tag may also include attributes to customize the element. Content may be placed between the tags such as raw text or other nested elements.
Here are some examples of common HTML elements.
The
ptag indicates a paragraph of text to be displayed.The
atag is used for links, or hyper references, as thehrefindicates. Clicking one of these will take you to the page here as shown such as Google.Headers for larger text as shown by the
h1tag, will make big letters appear on the page. There are also headers for one, two, three, four and five.Interactive elements such as a
buttonare meant for clicking.Text areas (
textarea) can be used for large input such as this one here, with four rows and 50 columns.And of course, we can also display images (
img) on the webpage such as a smiley face.
Also, for that image tag, notice how there was no ending tag name with a forward slash. Instead, for this particular element, the first name tag ended with a forward slash. Some tags are like that when they don't have any content.
A basic HTML document could look like this.
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
</head>
<body>
<div class="main-content">
<h1>BIG NEWS!</h1>
<p>HTML is awesome.</p>
<div>
</body>
</html>
The parent level or root level attributes will be the html tags. There's almost always a head section and a body section.
The head section provides things like links, scripts and titles. And we'll talk about links and scripts in just a moment here.
The body section will contain the main content of the page.
This particular page doesn't have too much content. It just has a div for the main section, as well as a header and a paragraph. Now, if you were to display this document in a browser, it would look pretty boring.
It's black text on a white background. How can we make it pretty? That's where CSS comes in.
CSS stands for Cascading Style Sheets.
If HTML is the skeleton of the page, then CSS is the skin. It controls style and formatting for the appearance of the page. CSS can control things like:
Colors
Size
Font
Position
Layout
Although CSS can be added directly to any HTML element using the style attribute, it is a best practice to put CSS into separate that .css files for reusability.
It is also common to create CSS "classes" to apply the same styles to specific elements. Here's an example of a CSS document.
body {
background-color: lightblue;
}
.main-content {
Font-family: Helvetica;
}
The
bodystyling will apply to all body elements on an HTML page.The
main-contentstyling will apply to all elements that use the main content class, like thedivelement, in our example HTML document.
If we add the following to the head element of our HTML document, this link for linking the style sheets, then we will see the styling applied in the browser.
<link rel="stylesheet" href="example.css"/>
If we refresh our page in the browser, then we'll see that the font and colors have changed.
HTML and CSS work together nicely, but they are static. They don't make changes happen on the webpage.
Dynamic content most come from JavaScript, a programming language that acts like the muscles of the page.
Developers can use JavaScript to change elements and styling, handle user input, make service calls to backend systems, and more. Practically all modern web applications use JavaScript to deliver a dynamic user experience on the front end because all major web browsers support it. There are countless, and I mean countless JavaScript frameworks available as well, such as Angular, React and Bootstrap.
JavaScript code can be written directly in HTML files, or as a better practice, in separate .js files.
Let's add a JavaScript file to our example.
alert("Here's some JavaScript!");
That triggers an alert. If we add the following script to our head element of our HTML document, then an alert will pop up on the page.
<script src="example.js"></script>
Now when I refresh the page, my alert appears.
The web browser is what brings together the HTML, CSS and JavaScript.
The browser itself is an application that loads and renders content from the worldwide web in these file formats. When a user requests a page through a browser, the website will return those three types of documents for the browser to execute and display on the local device. The browser truly brings the page to life.
As a side comment, note that despite language standards, each browser handles things slightly differently. So, watch out for peculiarities.
We could spend days talking about HTML, CSS and JavaScript. Thankfully, for testing and automation, we just need to know the basics to get started. Nevertheless, I strongly encourage you to learn more on your own so you can become an even better engineer.
