You have already learned about JavaScript syntax, arithmetic operators, and comment in the previous chapter. We used console for these purposes. Now, how about you learn something interesting, which will pave the way for you to be a good JavaScript programmer? In this chapter, we are going to study about the HyperText Markup Language (HTML) syntax, Cascading Style Sheets (CSS) syntax, and how to use JavaScript in an HTML page.
HTML is the source code of a web page. All the web pages that you load on your web browser are built with HTML. Go to any website (for example, https://www.google.com) and press Ctrl + U (on Mac, click command + U) on your keyboard, you will get the web page's source code. This works on all modern web browsers, such as Firefox, Google Chrome, UC, and so on.
The entire code that you will see is in HTML. You may also find a few lines with JavaScript. Therefore, in order to understand the structure of a web page (the code behind the page), you need to know about HTML. This is one of the easiest languages on the web.
HTML is a markup language. What does it mean? Well, a markup language processes and presents texts using specific codes for formatting, styling, and layout design. There are a lot of markup languages (for example, Business Narrative Markup Language (BNML), ColdFusion Markup Language (CFML), Opera Binary Markup Language (OBML), Systems Biology Markup Language (SBML), Virtual Human Markup Language (VHML), and so on); however, in modern web, we use HTML. HTML is based on Standard Generalized Markup Language (SGML). SGML was basically used to design document papers.
Before you start learning HTML, let me ask you to think of your favorite website. What does the website contain? A few web pages? You may see some text, few images, one or two text fields, buttons, and some more elements on each of the web pages. Each of these elements are formatted by HTML.
Let me introduce you to a web page. On your Internet browser, go to https://www.google.com. You will see a page as shown in the following image:
The first thing you will see on the top of your browser is the title of the webpage. Let's observe the page that we just loaded:
- Here, the marked box, 1, is the title of the web page that we loaded.
- The second box, 2, indicates some links or text.
- The word Google in the middle of the page is an image.
- The third box, 3, consists of two buttons.
- Can you tell me what Sign in on the right-hand top of the page is? Yes, it is a button.
Let's demonstrate the basic structure of HTML. The term tag will be used frequently to demonstrate the structure.
An HTML tag is nothing but a few predefined words between the less than sign (<) and greater than sign (>). Therefore, the structure of a tag is <WORD>, where WORD is the predefined text that is recognized by the Internet browsers. This type of tag is called open tag. There is another type of tag that is known as close tag. The structure of a close tag is similar to </WORD>. You just have to put a forward slash after the less than sign.
After this section, you will be able to make your own web page with some text using HTML. The structure of an HTML page is similar to the following image. This image has eight tags. Let's introduce all these tags with their activities, as shown in the following:
- 1: The tag
<html>is an open tag and it closes at line 15 with the</html>tag.- These tags tell your Internet browser that all the texts and scripts in these two tags are HTML documents.
- 2: This is the
<head>tag, which is an open tag and closes at line 7 with the</head>tag.- These tags contain the title, script, style, and metadata of a web page.
- 3: This is the
<title>tag, and closes at line 4 with the</title>tag.- This tag contains the title of the web page. The previous image had the title Google. To see this on the web browser, you need to type the following:
<title> Google </title>
- This tag contains the title of the web page. The previous image had the title Google. To see this on the web browser, you need to type the following:
- 4: This is the close tag of the
<title>tag. - 5: This is the closing tag of the
<head>tag. - 6: This is the
<body>tag, and closes at line 13 with the</body>tag.Everything you can see on a webpage is written between these two tags. Every element, image, link and so on are formatted here. To see This is a web page. on your browser, you need to type the following:
<body> This is a web page. </body>
- 7: The
</body>tag closes here. - 8: The
</html>tag is closes here.
You just learned the eight basic tags of an HTML page. You can now make your own web page. How? Why not try with me?
- Open your text editor (You have already installed Atom in Chapter 1, Exploring JavaScript in the Console of this book).
- Press Ctrl + N, which will open a new
untitledfile as shown in the following image:
- Type the following HTML codes on a blank page:
<html> <head> <title> My Webpage! </title> </head> <body> This is my webpage :) </body> </html> - Then, press Ctrl + Shift + S, which will tell you to save your code somewhere on your computer:
- Type a suitable name on the File name: field. I would like to name my HTML file
webpage, therefore, I typedwebpage.html. You may be wondering why I added an extension (.html). - Press the Save button. This will create an HTML document on your computer. Go to the directory, where you just have saved your HTML file.
Note
Remember that you can give your web page any name. However, this name will not be visible on your browser. It is not the title of your web page. It is good practice not to keep a blank space in your webpage's name. For example, you want to name your HTML file
This is my first webpage.html. Your computer will face no problem showing the result on the Internet browsers; however, when your website will be on a server, this name might face a problem. Therefore, I would suggest you to keep an underscore (_) where you need to add a space, such asThis_is_my_first_webpage.html. - You will find a file similar to the following image:
- Now, double-click on the file. You will see your first web page on the Internet browser!
You typed My Webpage! between the <title> and </title> tags, which is why your browser shows this in the first selection box, 1. You typed This is my webpage :) between the <body> and </body> tags. Therefore, you can see the text on your browser in the second selection box, 2.
Congratulations! You created your first web page!
There are a number of HTML tags to format text and objects of your web page. How about we study a few of them now?
|
Description |
Syntax with example |
Result on browser |
|---|---|---|
|
Bold Text |
|
This is bold |
|
Italic Text |
|
This is italic |
|
Underlined Text |
|
 |
|
Deleted Text |
|
 |
|
Subscript Text |
|
CO2 |
|
Superscript |
|
3x108 |
|
Largest headline |
|
 |
|
Smallest headline |
|
 |
|
Paragraph Text |
|
This is a paragraph |
|
Break Tag |
|
This is a break; |
Note
There are six headline tags (<h1> to <h6>). You can add more than one tag for a text if required. For example: <b><i><u> JavaScript </b></i></u> will have the following output: 
. There is no specific order in which you should close the tags. The best practice is to follow the sequence of open tags.
To color an HTML text, we can type the following:
<font color = "Green"> I am green </font>
You can type any standard color name between the two inverted commas (" "). You can also use hex color code, as follows:
<font color = "#32CD32"> I am green </font>
Here, 32CD32 is the hex code of green. Look at the following image. The left-hand side is the code, where we used both color name and hex code. On the right-hand side, we got the output of our browser:
Note
A hex color code consists of six digits (it is a hexadecimal number). It starts with a pound sign or hash sign (#) and we place the six digit hexadecimal number after it. The hexadecimal number represents red, blue, and green colors' amount. Each two digits represents 00 to FF (hexadecimal number). In the example, we used #32CD32 for green. 32, CD, and 32 are the amount of red, blue, and green; respectively; in hexadecimal.
If you don't know what a hexadecimal number is, remember that we use decimal number where 10 digits (0, 1, 2, 3, 4, 5, 6, 7, 8, and 9) are used. However, in hexadecimal numbers, we use 16 digits (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F).
I would recommend you to use this website (http://html-color-codes.info/) to get your favorite color's hex code without thinking about the hex code.
To hyperlink a text, we use an anchor tag as follows:
<a href = "http://www.google.com"> Go to Google </a>
The output of this code will be a link. If you click on the link, it will send you to the URL that we used between the inverted commas (here, http://www.google.com).
If you want to open your link in a new tab of your browser, you need to add a target as shown in the following:
<a href = "http://google.com" target = "_blank" > Go to Google </a>
Here, target = "_blank" is an attribute that tells your browser to open the link in a new tab. There are few more attributes. You can try them at home and let us know what you see on your browser.
The other attributes are _parent, _self, and _top. The following image has the code that has the _blank attribute. It opens http://google.com in a new tab. I would suggest you to find what the other attributes do:
Inserting an image on an HTML document is super easy. You just have to find the image file extensions. The tag that we use to insert an image is as shown in the following:
<img src = "Image_name.extension">
The src attribute is the source of your image. If your image is placed on the same directory of the HTML file, you don't have to write the whole file source. Throughout this book, we will keep our image files on the same directory, where we save our HTML files.
Let's say that I have an image in the same folder where I saved the HTML document. The name of the image is physics and its extension is .png. Now, to add this on the HTML document, I need to add the following code:
<img src= "physics.png">
Note
We use three types of images on an HTML document. Portable Network Graphics (PNG), Graphics Interchange Format (GIF) and Joint Photographic Experts Group (JPG or JPEG). To find your image's extension, right-click on your image, go to Properties, and then, click on the Details tab to scroll down until you find the Name field. You will find the image name with the extension. The procedure might be different on your machine, depending on your operating system.
If you want to set the height and width of the image, you need to use two attributes, as shown in the following:
< img src = "physics.png" width="100" height="40">
Here, 100 and 40 are the pixel of the image. In the previous versions of HTML, it was defined as pixels or percentage.
The output will look similar to the following:
There are more HTML tags; however, we have covered most of the tags that we use to build a web page. Can you imagine the output of the following codes?
<html>
<head>
<title>
Example
</title>
</head>
<body>
<h1> This is a headline </h1>
<h2> This is a headline </h2>
<h3> This is a headline </h3>
<h4> This is a headline </h4>
<h5> This is a headline </h5>
<h6> This is a headline </h6>
<b>This is a bold text</b>. But <i>This is an italic text</i>. We can <u> underline</u> our text. <a href = "http://www.google.com">Go to Google </a> <br>
<font color = "#AA2FF">This is colorful text</font>
<br>
<img src="math.png">
</body>
</html>The output will look similar to the following image:
