IT2301

HTML Essentials List

HTML Elements and Attributes It is a way to group a set of related items in HTML. It has two
specifications for ordered and unordered list, but both uses the <li>
Image tag.

It is a way to embed an image or an animated image, such as GIF, on An unordered HTML list starts with <ul> tag and will be marked by
an HTML webpage. The <img> tag has no closing tag and is used bullets, while an ordered HTML list starts with <ol> tag and is marked
with the following syntax: with numbers by default.

<img src="URL" alt="alternate text"> Unordered List Ordered List

<ul> <ol>
The tag contains two attributes: src for specifying the path of the <li>Eggs</li> <li>January</li>
image and alt for determining an alternate text for the image. The <li>Alcohol</li> <li>February</li>
URL includes the file name and the file extension if it is in the same <li>Snacks</li> <li>March</li>
folder. </ul> </ol>

The <img> tag can also contain the width and height attributes for HTML also supports description lists that let users list terms with their
setting the size specification of the image in pixels, such as: descriptions. It uses the <dl> tag to define the description list, the
<dt> tag to define the term, and the <dd> tag to describe each term.
<img src="image.png" alt="display" width="210px"
height="140px"> <dl>
<dt>January</dt>
The style attribute is also used in specifying the dimensions, <dd>- the first month</dd>
preventing styles sheets from changing the image size. The colon <dt>February</dt>
symbol (:) is used for declaring values. <dd>- the second month</dd>
</dl>
<img src="image.png" alt="display"
style="width:210px;height:140px; "> Span

The folder name must be stated in the src attribute if the image is in The <span> tag is used to color or mark up a part of a text or
another sub-folder. document.

<img src="foldername/image.png" alt="display "> <p>My mother

has <span style="color:blue">blue</span> eyes.</p>
The absolute or complete URL must be written in the src attribute if
the image is on another server or website. It acts like the <div> tag, which defines a division or a section in an
HTML document.
<img src="fullurl.com/filename.jpg" alt="display">
02 Handout 1 *Property of STI
 student.feedback@sti.edu Page 1 of 4
 IT2301

Navigation Text Field

It uses the <nav> tag to define a set of navigation links. The tag is only It displays a single-line text input field for text input and uses the
used for major blocks of navigation links and not all links in an HTML <input type="text "> tag. Text fields have different inputs that web
document. It represents a page section with links to other web pages programmers can apply, including a line of text, password, email,
or parts within the same webpage. contact number, and URL.

<nav> <form>
<a href=”#”> <label for="age">Age:</label><br>
Home <input type="text" id="age" name="age"><br>
</a> <label for="bday">Birthday:</label><br>
<br> <input type="text" id="bday" name="bday">
<a href=”#”> </form>
About Me
</a> Radio Button
</nav>
It allows users to select one of the available options and uses the
<input type="radio"> to display a radio button.
In this sample code, # specifies the unique ID of an element in HTML
which is usually followed by an ID name. The ID attribute's value must <p>Best tourist destination:</p>
be unique in the HTML document, unlike the class attribute that <form>
multiple elements within an HTML document can use. <input type="radio" id="baguio" name="best_place"
value="Baguio">
Forms <label for="baguio">Baguio</label><br>
<input type="radio" id="cebu" name="best_place"
Input and Control Functions value="Cebu">
<label for="cebu">Cebu</label><br>
These are used to gather text information from users and are defined <input type="radio" id="davao" name="best_place"
by the <input> tag, which displays a type attribute such as the text, value="Davao">
radio, checkbox, and button. Note that the default width of any input <label for="davao">Davao</label>
field is up to 20 characters. </form>
The <label> tag is used to label any form elements while the <for>
Checkbox
attribute of the <label> tag must be equal to the ID attribute of the
<input> element to attach them, such as: It allows users to select as many options as possible out of the
available options. <input type="checkbox"> is used to display
<label for="ID">Name:</label><br> checkboxes.
<input type="type" id="ID" name="name" value="val">

02 Handout 1 *Property of STI

 student.feedback@sti.edu Page 2 of 4
 IT2301

Sample: Submit Button

<p>Top 2 tourist destination:</p>
<form> It allows users to submit any data entered in the input field. <input
<input type="checkbox" id="baguio" name="top2" type="submit "> is used to display a button for submitting the form
value="Baguio"> data to a form handler, typically a file on the server with a script that
<label for="baguio">Baguio</label><br> processes the data.
<input type="checkbox" id="cebu" name="top2"
value="Cebu"> The form handler is specified using the form’s action attribute, which
<label for="cebu">Cebu</label><br> specifies the address where the submitted data will be sent, such as:
<input type="checkbox" id="davao" name="top2"
value="Davao"> <form action="/action_page.php">
<label for="davao">Davao</label> <label for="age">Age:</label><br>
</form> <input type="text" id="age" name="age"
value="37"><br>
Date and Time Control <label for="bday">Birthday:</label><br>
<input type="text" id="bday" name="bday"
It is used to create various date and time inputs. <label> tag is still value="Feb25"><br><br>
used here, along with the following syntax: <input type="submit" value="Submit">
</form>
• <input type="date"> – has a format of mm-dd-yyyy
• <input type="time"> – has a format of hh:mm Multimedia and Graphics
• <input type="month”> – has a format of yyyy-mm
• <input type="week"> – has a format of Week#-yyyy HTML has features that allow multimedia and graphics to be
embedded in a webpage. Multimedia includes audio and videos that
Button boost user experience, while graphics include images, canvas, and
animations that enhance the appearance of a website.
It is used to create a button with different functions and is also defined
by <input> and <button> tags. Audio

Here are the following button controls in HTML form: It is defined using the <audio> tag and uses the <source> element
for the audio source file. The control attribute is used to add audio
• <input type="reset"> – resets the user’s input. controls such as play, pause, and volume. HTML accepts common
• <img> tag is used inside the <button> tag to make an image audio formats such as MP3, OGG, and WAV.
button.
<button type="submit"> <audio controls>
<img src="Thumbnail.png" <source src="audio.mp3">
alt="buttonpng" width="180" height="100" </audio>
>
<button>

02 Handout 1 *Property of STI

 student.feedback@sti.edu Page 3 of 4
 IT2301

Video

It is defined using the <video> tag and uses the <source> element
for the video source file. The poster attribute is used to display a
thumbnail before playing the video. The control attribute also adds
video controls such as play, pause, and volume. HTML accepts
common audio formats such as MP4, WebM, and OGG.

<video poster=”playbutton.png”
width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>

Canvas

It is defined using the <canvas> tag to draw graphics such as paths,

boxes, circles, text, and adding images. This tag is only a container
for graphics, and it requires JavaScript to draw the graphics.

A canvas has no border and no content on an HTML page, so using

the width and height attributes is necessary to define the size of the
canvas. It is also important to specify its ID attribute such as:

<canvas id="Canvas" width="200" height="100"

style="border:1px solid #000000;">
</canvas>

References:
Casabona, J. (2021). Visual quickstart guide: HTML and CSS. Pearson Education,
Inc.
Donahoe L., Hartl M. (2022). Learn enough HTML, CSS, and Layout to be dangerous.
Addison-Wesley.
W3Schools (2022). HTML Forms. [Web Article]. Retrieved on January 31, 2022, from
https://www.w3schools.com/html/html_forms.asp

02 Handout 1 *Property of STI

 student.feedback@sti.edu Page 4 of 4