This makes it fundamentally different from many other programming languages.
We’ll start by opening up your browser’s Developer Tools. This will look something like this:
Within your developer tools, open the Console tab. You can do this in Google Chrome by clicking the button indicated below:
2 + 2
Here’s what this looks like in the console:
2+2 command and returns
4, the correct answer.
document.body.style.background = 'black'
Here’s what happens when you run this command on the Google website:
Of course, developers do not actually write code into their browser console when they’re developing real applications. They embed it in script tags within an HTML document. We explore how to do this in the next section.
Websites are built with HTML, which stands for Hypertext Markup Language. HTML specifies the content of the website.
Here is an example of HTML code that builds a website.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>This is the title of the website!</title> </head> <body> This is where the website's body goes! </body> </html>
If you open this website in a browser, this is what it looks like:
You can see the title of the website in the tab that its open in. Similarly, the body of the website is actually contained in the body of the browser.
This website is very basic, as I’m sure you’ve noticed. We can style a website using a different programming language called CSS.
Throughout this course, I’ll assume that you have a solid understanding of the basics of HTML and CSS, although I will not expect you to write any.
You have successfully loaded the website!
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>This is the title of the website!</title> </head> <body> This is where the website's body goes! <script> alert('You have successfully loaded the website!'); </script> </body> </html>
Here’s what happens when you open this HTML file using a web browser:
.js file extension and then link to it in our
<script> tag using the
alert.js within the same directory as
basic-html.html. Here’s the contents of this file:
alert('You have successfully loaded the website!');
Once this is done, we can link to
basic-html.html with the following syntax:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>This is the title of the website!</title> </head> <body> This is where the website's body goes! <script src="alert.js"></script> </body> </html>
Note that the file path specified within the
src attribute is a relative path that follows the same syntax that we use on the command line. So if the
alert.js file was contained in a child folder called
code, then we would write the
src attribute as
src='./code/alert.js'. Similarly, if
alert.js was contained in a parent folder, we would write