HTML Basics #2: Dig Deeper

This article is outdated. If you are interested in learning HTML and CSS, check out my new course ➡️ HTML & CSS: A Practical Guide.

• HTML Basics #1
• HTML Basics #2 ← You are here
• CSS Basics #1
• CSS Basics #2
• CSS Basics #3

Previously, we talked about some basic concepts in HTML, such as elements and attributes, and we studied the basic structure of an HTML document, as well as how to create an HTML page with block and inline-level elements. In this article, we are going to talk about a specific set of elements that makes our HTML page more fun, including how to embed media files such as images and audio inside HTML files and how to create HTML forms, allowing users to interact with the web page.

Embedding media files into HTML #

First of all, let’s talk about media files. Media files include images, videos, and audio files. These media files are very important components in web design. They improve the appearance of the web pages and make them more informative and interactive.

Image files #

The <img> tag is used to display an image in HTML. The syntax is as follows:

1

<img src="url" alt="alternatetext" />

The <img> tag is empty. It contains attributes only and does not have a closing tag. There are two attributes that are required by the <img> tag, src specifies the path to the actual image file, and alt indicates the alternative text for the image. When the image fails to load for some reason, the browser will display the alternative text instead.

1

<img src="image1.jpg" alt="This is an image" />

There are also optional attributes for the <img> tag, width and height, for example, specify the size of the image. The unit is in pixels (px).

1

<img src="image2.jpg" alt="..." width="500" height="600" />

You should always specify the width and height of an image. If width and height are not specified, the web page might flicker while the image loads.

Another interesting concept I’d like to mention is the image map. It allows you to create clickable areas on an image. Here is an example from w3schools.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" />

<map name="workmap">
  <area
    shape="rect"
    coords="34,44,270,350"
    alt="Computer"
    href="computer.htm"
  />
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm" />
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm" />
</map>

The first line loads the image, and the usemap attribute links this image to the map, whose name is workmap. Line 4 to 6 each defines a clickable area, whose destination is specified using the href attribute.

Video files #

The <video> element is used to embed videos into the webpage.

1
2
3
4
5

<video width="640" height="480" controls>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

The width and height attributes define the size of the video. If they are not set, the page might flicker while the video loads. The control attribute adds video control buttons like play, pause, and volume.

The <source> element allows us to specify the video file using the src attribute. The type attribute is used to declare the type and format of the file. When there are multiple <source> elements, the browser will play the first one that it recognizes.

The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

To start a video automatically, use the autoplay attribute:

1
2
3
4
5

<video width="640" height="480" autoplay>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

Add muted after autoplay to let your video start playing automatically, but muted:

1
2
3
4
5

<video width="640" height="480" autoplay muted>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

Audio files #

The <audio> element is used to embed videos into the webpage, and it works just like the <video> element.

1
2
3
4
5

<audio controls>
  <source src="horse.ogg" type="audio/ogg" />
  <source src="horse.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

The control attribute adds audio control buttons, the <source> element specifies the audio file, and if the browser does not support the <audio> tag, the text will be displayed.

The autoplay and the muted attributes also work here:

1
2
3
4
5

<audio controls autoplay muted>
  <source src="horse.ogg" type="audio/ogg" />
  <source src="horse.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

SVG Graphics #

Scalable Vector Graphics (SVG) is used to define graphics for the Web. For example, the following code defines a circle:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<svg width="100" height="100">
  <circle
    cx="50"
    cy="50"
    r="40"
    stroke="green"
    stroke-width="4"
    fill="yellow"
  />
</svg>

We can use SVG to draw some relatively complicated shapes like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">
    SVG
  </text>
  Sorry, your browser does not support inline SVG.
</svg>

If you are interested, here is a tutorial on SVG graphics. But right now, it is not the focus of this tutorial.

Creating forms in HTML #

The form is a very important part of HTML. It allows us to collect user input from the client and send it to the server to be processed. All forms in HTML are wrapped inside the <form> element like this:

1

<form>. . . form elements . . .</form>

The <form> element #

The <form> element acts as a container for different types of input elements, such as text fields, checkboxes, radio buttons, submit buttons, etc. We’ll talk about all of them in this article, but first, let’s start by discussing some attributes associated with the <form> element.

The action attribute

1

<form action="/action_page.php">. . .</form>

The action attribute defines the action to be taken when the form is submitted. Usually, the data in the form will be sent to the server, and that data will be processed by a program. In this example, the program is called “action_page.php”. After the data is processed, there will usually be a response sent from the server back to the client.

This will make more sense when we get to the backend part of this web development course.

The target attribute

1

<form action="/action_page.php" target="_blank">. . .</form>

The target attribute specifies where to display the response that was sent from the server. It works just like the target we talked about in the links (<a>).

1

<form action="/action_page.php" method="get">. . .</form>

The method attribute specifies the HTTP method for submitting the form data. Like we talked about at the very beginning of this course, the two most common methods are GET and POST.

Difference Between GET and POST

They are both able to send the form data to the server, but the difference is that POST will put the data inside the body of the HTTP request, while GET will append the data to the URL in name/value pairs, which makes POST a safer way to send information.

In the example above, the GET method will send the data in the URL like this:

1	www.example.com/action_page.php?name1=value1&name2=value2

All the data are appended after the question mark (?), and different name/value pairs are joined by the ampersand (&).

As for the POST method, the data is “hidden” in the HTTP request body like this:

1 2 3

POST /action_page HTTP/1.1 Host: www.example.com name1=value1&name2=value2

If you don’t understand this part, don’t worry, we are going to revisit this topic when we talk about JavaScript.

The autocomplete attribute

1

<form action="/action_page.php" autocomplete="on">. . .</form>

The autocomplete attribute specifies whether a form should have autocomplete on or off. When autocomplete is on, the browser automatically completes values based on values that the user has entered before.

The novalidate attribute

1

<form action="/action_page.php" novalidate>. . .</form>

The novalidate attribute is a Boolean attribute. When present, it specifies that the form data (input) should not be validated when submitted.

Input Elements #

Next, to make this form usable, we need to add some input elements to the form.

The <input> element

The <input> element is the most important element in HTML forms. It can be displayed in several different ways depending on its type. For instance, when the element has the type text, your browser will display a text box.

1
2
3

<form>
  <input type="text" />
</form>

The <label> element

The <label> element can be used to define labels for any form elements. This is very useful for screen-reader users. It improves your website’s accessibility, which plays a significant factor in website ranking.

The <label> element has a for attribute, which should match the id of the form element it is trying to label.

1
2
3
4
5
6
7

<form>
  <label for="firstname">First Name:</label><br />
  <input type="text" id="firstname" /><br />
  <br />
  <label for="lastname">Last Name:</label><br />
  <input type="text" id="lastname" /><br />
</form>

The <select> element

The <select> element defines a drop-down list like this:

1
2
3
4
5
6

<label for="fruits">Pick A Fruit:</label>
<select id="fruits" name="fruits">
  <option value="Apple">Apple</option>
  <option value="123">Banana</option>
  <option value="eprag">Grape</option>
</select>

In this example, each <option> element defines an option that can be selected, and it has a value attribute and content. The content will be displayed and the value of the selected option will be sent to the backend when the form is submitted. The content and the value do not have to match each other. For instance, if the Apple option is chosen, the value "Apple" will be sent to the server, and if the Banana option is chosen, the value "123" will be sent.

By default, the first option of the list is chosen, you can change that by adding the selected attribute to a different option:

1
2
3
4
5

<select id="fruits" name="fruits">
  <option value="Apple">Apple</option>
  <option value="123">Banana</option>
  <option value="eprag" selected>Grape</option>
</select>

You can also use the size attribute to specify the number of visible values:

1
2
3
4
5

<select id="fruits" name="fruits" size="2">
  <option value="Apple">Apple</option>
  <option value="123">Banana</option>
  <option value="eprag">Grape</option>
</select>

And now, because we can see multiple options, we can choose multiple options using the multiple attribute:

1
2
3
4
5

<select id="fruits" name="fruits" size="2" multiple>
  <option value="Apple">Apple</option>
  <option value="123">Banana</option>
  <option value="eprag">Grape</option>
</select>

The <textarea> element

The <textarea> element defines a input box that allows you to have multiple lines:

1
2
3

<textarea name="message" rows="10" cols="30">
    Lorem ipsum dolor sit amet...
</textarea>

The rows and cols attribute specify the size of the input box.

The <button> element

The <button> element defines a clickable button:

1

<button type="button">Click Me!</button>

This button has the type button, which means when you click on it, it doesn’t do anything, but don’t worry, we’ll use it to do some interesting stuff once we get to the JavaScript part of this course.

The <fieldset> element

The <fieldset> can group different input fields together, and <legend> creates a name for that group:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<form>
  <fieldset>
    <legend>Personalia:</legend>
    <label for="firstname">First Name:</label><br />
    <input type="text" id="firstname" /><br />
    <br />
    <label for="lastname">Last Name:</label><br />
    <input type="text" id="lastname" /><br />
  </fieldset>

  <fieldset>
    <legend>Add to Shopping Cart:</legend>
    <label for="fruits">Pick A Fruit:</label>
    <select id="fruits" name="fruits">
      <option value="Apple">Apple</option>
      <option value="123">Banana</option>
      <option value="eprag">Grape</option></select
    ><br />
    <br />
    <label for="vegetables">Pick A Vegetable:</label>
    <select id="vegetables" name="vegetables">
      <option value="098">Ginger</option>
      <option value="987">Kale</option>
      <option value="876">Eggplant</option>
    </select>
  </fieldset>
  <br />
  <button type="button">Click Me!</button>
</form>

Other available types for the <input> element #

As we just discussed, there are many different types for the <input> element, as shown in this example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

<form>
  <fieldset>
    <legend>Input Type Text:</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" />
  </fieldset>

  <fieldset>
    <legend>Input Type Email:</legend>
    <label for="email">Enter your email:</label>
    <input type="email" id="email" name="email" />
  </fieldset>

  <fieldset>
    <legend>Input Type Password:</legend>
    <label for="pswd">Password:</label>
    <input type="password" id="pswd" />
  </fieldset>

  <fieldset>
    <legend>Input Type Radio:</legend>
    <input type="radio" id="male" name="gender" value="male" />
    <label for="male">Male</label><br />
    <input type="radio" id="female" name="gender" value="female" />
    <label for="female">Female</label><br />
    <input type="radio" id="other" name="gender" value="other" />
    <label for="other">Other</label>
  </fieldset>

  <fieldset>
    <legend>Input Type Checkbox:</legend>
    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike" />
    <label for="vehicle1"> I have a bike</label><br />
    <input type="checkbox" id="vehicle2" name="vehicle2" value="Car" />
    <label for="vehicle2"> I have a car</label><br />
    <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat" />
    <label for="vehicle3"> I have a boat</label>
  </fieldset>

  <fieldset>
    <legend>Input Type Color:</legend>
    <label for="favcolor">Select your favorite color:</label>
    <input type="color" id="favcolor" name="favcolor" />
  </fieldset>

  <fieldset>
    <legend>Input Type Date and Date Time:</legend>
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday" /><br /><br />
    <label for="birthdaytime">Birthday (date and time):</label>
    <input type="datetime-local" id="birthdaytime" name="birthdaytime" />
  </fieldset>

  <fieldset>
    <legend>Input Type File:</legend>
    <label for="myfile">Select a file:</label>
    <input type="file" id="myfile" name="myfile" />
  </fieldset>

  <fieldset>
    <legend>Input Type Number:</legend>
    <label for="quantity">Quantity (between 1 and 5):</label>
    <input type="number" id="quantity" name="quantity" min="1" max="5" />
  </fieldset>

  <fieldset>
    <legend>Input Type Submit and Reset:</legend>
    <input type="submit" />
    <input type="reset" />
  </fieldset>
</form>

HTML entities #

Before we move on to the topic of CSS, let’s consider this scenario, you are making an online article about HTML, and you want the browser to display an HTML tag, <p>HTML</p>, so this is what you did:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>My HTML Tutorial</title>
</head>

<body>
    <h1>HTML Tutorial</h1>
    <p> <p>HTML</p> </p>
</body>

</html>

But then you realize, the <p>HTML</p> tag will be rendered instead of displayed. How can you solve this problem? How can you display HTML tags in HTML documents?

Some characters in HTML are reserved, and to display these characters, we must replace them with HTML entities. An HTML entity has the format &entity_name; or &#entity_number;. One commonly used entity is the non-breaking space  . Remember we talked about paragraphs (<p>) and how these two paragraphs are the same?

1
2
3

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

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

Now, this example leaves us with a problem, what if we want multiple spaces between two words? The answer is the HTML entity  :

1
2
3

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

<p>This&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;is a paragraph.</p>

Here is a list of HTML entities from W3Schools if you need them.

If you think my articles are helpful, please consider making a donation to me. Your support is greatly appreciated.