ICT PROFESSIONAL TRAINING CENTER
CHAPTER 1
HTML (Hypertext Markup Language)
Prepared By: Ang Kimsor 1
1. Introduction to Website Frontend Development
Frontend development is the part of web development that focuses on what users see and interact with on a website. It’s also
called client-side development because it runs in the user’s browser.
Example: Buttons, menus, images, forms, animations, and overall layout are all handled by frontend code.
Frontend development is really important because it’s the first thing users notice about a website. People often judge a site based
on how it looks and how easy it is to use. A well-designed frontend can make a website more enjoyable and effective by improving:
• User Interface/User Experience (UI/UX): focus on how website looks (UI) & how users feel when using our website (UX).
• Accessibility: ensuring everyone, including people with disabilities, can use it.
• Performance: making the site load quickly and run smoothly.
In this frontend course, We will learn about:
• HTML (Hypertext Markup Language)
• CSS (Cascading Style Sheet)
• JS (JavaScript)
• Tailwind CSS
• ReactJS
ICT PROFESSIONAL TRAINING CENTER 2
1. Introduction to Website Frontend Development
Core Languages of Frontend Frameworks & Libraries
ICT PROFESSIONAL TRAINING CENTER 3
2. Introduction to HTML
HTML stand for Hypertext Markup Language is the markup language used to make structure of websites. It tells the browser what things
are on the page, like headings, paragraphs, links, images, etc. You can think of it as the skeleton of a website.
Now, HTML is being widely used to format web pages with the help of different tags available in HTML language.
HTML is important because:
• Every website uses it.
• Without HTML, browsers wouldn’t know what to show.
• It works with CSS (styles) and JavaScript (functionality).
ICT PROFESSIONAL TRAINING CENTER 4
2. Introduction to HTML
• <!DOCTYPE html> → tells browser this is HTML5.
• <html> → html tag contains the content (head tag & body tag) of
web page.
• <head> → head tag contains about the page (meta, link, title, …).
• <title> → title tag used inside head tag that contains the title of
web page.
• <body> → body tag represents the document's body which keeps
other HTML tags like <h1>, <p> etc.
• <h1> → heading, <p> → paragraph
ICT PROFESSIONAL TRAINING CENTER 5
3. HTML Tags, Elements & Attributes
HTML Tag is a special keyword wrapped in angle brackets < > that tells the browser what something is on a
webpage.
There are 2 types of tag in html:
• Paired Tags (Container Tags): use it when you need to wrap or contain text or other elements inside that
tags. (<p>…</p>, <h1>…</h1>, …)
• Unpaired Tag (Self-Closing Tags): use it when the element doesn’t need to hold any content. (<img />,
<input />, <br />, <hr />, …)
ICT PROFESSIONAL TRAINING CENTER 6
3. HTML Tags, Elements & Attributes
HTML element is the complete part of a webpage made from a start tag, content, and an end tag (or a single
self-closing tag).
Example:
<p>Hello world</p> This is called paragraph element.
<p> (start tag), content inside that (Hello world), </p> (end tag).
ICT PROFESSIONAL TRAINING CENTER 7
3. HTML Tags, Elements & Attributes
HTML attribute is extra information added inside a tag to control how an element behaves or looks.
Example:
<img src="[Link]" alt="My Photo" />: The 'src' (value = [Link]) and 'alt' (value = My Photo) are
attributes of the image.
<p class="important" align="center">This is a paragraph</p>:The 'class' (value = important) and 'align' (value =
center) are attributes of the paragraph.
ICT PROFESSIONAL TRAINING CENTER 8
4. HTML Basic Tags
Headings (h1 - h6) Element: HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most
important heading. <h6> defines the least important heading.
ICT PROFESSIONAL TRAINING CENTER 9
4. HTML Basic Tags
Paragraph Element: The HTML paragraph always starts on a new line, and browsers automatically add some
white space (a margin) before and after a paragraph.
ICT PROFESSIONAL TRAINING CENTER 10
4. HTML Basic Tags
Other Elements
ICT PROFESSIONAL TRAINING CENTER 11
5. HTML Formatting Tags
Formatting: HTML contains several elements for defining text with a special meaning with each of that like b for bold text,
i for italic text, del for delete text, etc.
ICT PROFESSIONAL TRAINING CENTER 12
6. HTML Phrase Tags
Phrase: used to give meaning or style to a part of text inside a paragraph or block. They usually affect text semantics
(what the text means) rather than layout.
ICT PROFESSIONAL TRAINING CENTER 13
7. HTML Image, Video & Audio
Image: is a closing tag in HTML used for display the image using src attribute for the file location in website
and the alt attribute for showing the text if the image is not showing
ICT PROFESSIONAL TRAINING CENTER 14
7. HTML Image, Video & Audio
Video: is used to display videos on a website. It uses the src attribute to set the video file location, and the controls attribute
to show play, pause, and volume buttons for the user. If the browser cannot play the video, the text inside the <video> tag
will be shown instead.
ICT PROFESSIONAL TRAINING CENTER 15
7. HTML Image, Video & Audio
Audio: is used to play sound or music on a website. It uses the src attribute for the audio file location, and the controls
attribute to show buttons like play and pause. If the audio cannot be played, the text inside the <audio> tag will appear.
ICT PROFESSIONAL TRAINING CENTER 16
8. HTML Table
Table: used to create tables on a webpage. Tables organize data in rows and columns.
tr = table row, th = table header, td = table data
ICT PROFESSIONAL TRAINING CENTER 17
8. HTML Table
Cellpadding & Cellspacing Attributes: The cellspacing attribute defines the width of the border, while
cellpadding represents the distance between cell borders and the content within a cell.
ICT PROFESSIONAL TRAINING CENTER 18
8. HTML Table
Colspan & Rowspan Attributes: use colspan attribute if you want to merge two or more columns into a single
column. Similar way you will use rowspan if you want to merge two or more rows.
ICT PROFESSIONAL TRAINING CENTER 19
8. HTML Table
caption, thead, tbody, tfoot: You can specify table width or height in terms of pixels or in
terms of percentage of available screen area.
caption tag used for title or explanation for the table and it shows up at the top of the table.
thead tag used for creating a separate table header.
tbody tag used for creating a separate table body.
tfoot tag used for creating a separate table footer.
ICT PROFESSIONAL TRAINING CENTER 20
8. HTML Table
ICT PROFESSIONAL TRAINING CENTER 21
9. HTML Lists
There are 3 lists in HTML:
• Unordered List (ul) will list items using plain bullets.
• Ordered List (ol) will use different schemes of numbers to list your items.
• Definition List (dl) arranges your items in the same way as they are arranged in a
dictionary.
Unordered List attribute types (disc, circle, square) & its child is li tag.
Ordered List attribute types (1, I, i, a, A), start (number) & its child is li tag.
Definition List’s child dt = definition title & dd = definition description.
ICT PROFESSIONAL TRAINING CENTER 22
9. HTML Lists
ICT PROFESSIONAL TRAINING CENTER 23
10. HTML Links
Link is specified using HTML tag . This tag is called anchor tag and anything between the
opening tag and the closing tag becomes part of the link and a user can click that part to
reach to the linked document.
href: is an attribute in anchor tag that its value is the location where to navigate to when
user click on the anchor tag content.
target: is an attribute in anchor tag that its value is where the location of that link to show at
_self (show on the current page) & _blank (show on the new tab of browser).
ICT PROFESSIONAL TRAINING CENTER 24
10. HTML Links
ICT PROFESSIONAL TRAINING CENTER 25
11. HTML iframe
The <iframe> tag defines a rectangular region within the document in which the browser
can display a separate document, including scrollbars and borders.
It can use to show such as web page, external youtube video, map, …
The src attribute is used to specify the URL of the document that occupies the inline frame.
ICT PROFESSIONAL TRAINING CENTER 26
12. HTML Form
HTML Forms are required, when you want to collect some data from the site visitor. For
example, during user registration you would like to collect information such as name, email
address, credit card, etc.
A form will take input from the site visitor and then will post it to a back-end application
such as ASP Script or PHP script etc. The back-end application will perform required
processing on the passed data based on defined business logic inside the application. There
are various form elements available like text fields, textarea fields, drop-down menus, radio
buttons, checkboxes, etc.
Form tag is where we put all of the form child like input, select, label, …
ICT PROFESSIONAL TRAINING CENTER 27
12. HTML Form
ICT PROFESSIONAL TRAINING CENTER 28
12. HTML Form
Label is a tag used to give a name or description to a form input so users
know what the input is for.
Input is a form element that lets users enter data, such as text, numbers,
passwords, files, dates, etc.
Textarea is an HTML form element used when you want the user to type
multiple lines of text (long messages, comments, descriptions).
Select is a form element that lets users choose an option from a
dropdown list.
Button is an element that users can click to submit a form, reset a form, or
perform an action on the page.
ICT PROFESSIONAL TRAINING CENTER 29
12. HTML Form
ICT PROFESSIONAL TRAINING CENTER 30
13. Block & Inline
Block elements always start on a new line and take full width, while inline elements stay in the same line and
only take the space of their content.
Block elements:
<div>, <p>, <h1>–<h6>, <ul>, <ol>, <li>, <section>, <article>, <header>, <footer>, <table>, …
Inline elements:
<span>, <a>, <img>, <strong>, <em>, <label>, <br>, <small>, <code>, <input>, …
ICT PROFESSIONAL TRAINING CENTER 31
14. HTML Head Tag
Head is the part of an HTML document where you put meta-information about the page, not
the visible content. It goes inside <html> but before <body>.
Child Tag Purpose
<title> Sets the title of the webpage shown in the browser tab.
<meta> Provides metadata like charset, description, keywords, author, viewport, etc.
<link> Links external resources like CSS files, icons, or fonts.
<style> Contains internal CSS styles for the page.
<script> Embeds or links JavaScript code that may run on page load.
ICT PROFESSIONAL TRAINING CENTER 32
15. HTML Semantic Tag
Semantic tags are the tags that clearly describes its meaning or purpose, both for the
browser and for humans, instead of just defining how it looks.
ICT PROFESSIONAL TRAINING CENTER 33
15. HTML Semantic Tag
Tag Purpose / Meaning
<header> Top section of a page or section
<footer> Bottom section of a page or section
<nav> Navigation links
<main> Main content of the page
<article> Independent content like a blog post
<section> A section of content
<aside> Sidebar or related content
ICT PROFESSIONAL TRAINING CENTER 34
END OF DOCUMENT
ICT PROFESSIONAL TRAINING CENTER 35