Dire Dawa University Institute of Technology (DDUIoT)
College of Electrical and Computer Engineering (CECE)
Introduction to HTML
Prepared by: Haftu M
Outline
Web development HTML lists
HTML fundamentals HTML table
HTML Tags and Elements HTML form
HTML multimedia
HTML Text formatting elements
HTML links
2
Objectives 10/28/2025
By the end of this session, you’ll be able to:-
Understand the structure and purpose of HTML5.
Build basic web pages using HTML5 elements.
Master semantic HTML for a well-organized and accessible web structure.
Develop webpages using HTML5.
3
Web development... 10/28/2025
4
Web development 10/28/2025
Web development refers to building, creating, and maintaining websites.
It includes aspects such as web design, web publishing, web programming, and
database management.
It is the creation of an application that works over the internet, i.e., websites.
What is a website?
Websites are files stored on servers, which are computers that host ( “store files for”) websites.
These servers are connected to a giant network called the internet.
Browsers are computer programs that load websites via your Internet connection, such as
Google Chrome, while the computers used to access these websites are known as “clients.”
5
What does HTTP mean 10/28/2025
HyperText Transfer Protocol (HTTP) is what connects our website request to
the remote server that houses all website data. It’s a set of rules (a protocol)
that defines how messages should be sent over the internet. It allows us to jump
between site pages and websites.
It’s essentially the translator between you and the internet. HTTP reads our
website request, reads the code sent back from the server, and translates it for
us as a website.
6
How HTTP works 10/28/2025
7
Web development … 10/28/2025
Front-End Development (The Face)
This is what you see and interact with on a website—buttons, images,
menus, colors, and animations. It’s like designing the cover of your
book to grab people’s attention. The key tools here are:
HTML (HyperText Markup Language): The skeleton or structure.
CSS (Cascading Style Sheets): The style, colors, and design.
JavaScript: The action—making buttons clickable, forms interactive, and
pages dynamic.
8
Web development 10/28/2025
Back-End Development (The Brain)
This is what happens behind the scenes. When you fill out a form or log in, the
back-end is the invisible superhero that processes your data, talks to databases,
and gives you results.
Key tools include:
Programming languages like [Link], PHP, or Python.
Databases like MySQL or MongoDB to store information.
9
Web development… 10/28/2025
Development tools
Just like a chef needs knives and pans, a web developer has a set of tools:
Code Editors like VS Code or Sublime Text.
Browsers to test your work (Google Chrome, anyone?).
Frameworks and libraries like React or Bootstrap (think of them as recipe books that
make coding faster).
10
HTML Fundamentals 10/28/2025
HTML stands for Hypertext Markup Language, and it is the most widely used
language to write Web Pages.
Hypertext refers to the way in which Web pages (HTML documents) are linked
together. Thus, the link available on a webpage is called Hypertext.
As its name suggests, HTML is a Markup Language which means you use HTML
to simply "mark-up" a text document with tags that tell a Web browser how to
structure it to display.
11
HTML Fundamentals… 10/28/2025
Here is the basic structure of HTML document:
12
HTML Elements and Tags 10/28/2025
13
HTML Tags… (Heading Tags) 10/28/2025
HTML has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>,
<h5>, and <h6>.
14
HTML Tags… (Paragraph Tag) 10/28/2025
The <p> tag offers a way to structure your text into different paragraphs. Each
paragraph of text should go in between an opening <p> and a closing </p> tag.
15
Line Break Tag 10/28/2025
Whenever you use the <br /> element, anything following it starts from the next
line. It is an empty element, where you do not need opening and closing tags, as
there is nothing to go in between them.
16
Horizontal Lines 10/28/2025
Horizontal lines are used to visually break-up sections of a document. The <hr>
tag creates a line from the current position in the document to the right margin
and breaks the line accordingly.
17
HTML Links 10/28/2025
Link in HTML is used to create hyperlinks to web content. Web content may be
an HTML document or an external webpage or any multimedia content such as
an image, video, audio, animation.
Hyperlinks, also known as anchor tags, allow users to navigate from one web
page to another.
A picture or any other HTML element can be used as a link in addition to text!
18
HTML text formatting tags 10/28/2025
HTML offers various tags for text formatting, which can be broadly categorized
into physical and logical tags.
19
HTML text formatting tags … 10/28/2025
While these HTML tags provide basic text formatting, for more advanced
styling and control over appearance, it is recommended to use Cascading Style
Sheets (CSS). CSS allows for separation of content and presentation, offering
greater flexibility and maintainability in web development.
20
HTML List 10/28/2025
In HTML, list tags are used to structure and display lists of items. There are three
main types of HTML lists:
Unordered Lists (<ul>): These lists display items with bullet points or other markers, where
the order of items is not significant.
Ordered Lists (<ol>): These lists display items with numbered or lettered markers, where
the order of items is important.
Description Lists (<dl>): Also known as definition lists, these lists are used to present terms
and their corresponding descriptions.
21
HTML List … 10/28/2025
Unordered list ordered list Description list
List Item (<li>): This tag is used within <ul> and <ol> elements to define individual items within
the list.
Description Term (<dt>): Used within <dl> to define a term in a description list.
Description Details (<dd>): Used within <dl> to provide the description or definition for a
corresponding term.
22
HTML Table 10/28/2025
The HTML <table> tag is used to create a table, which is a structured grid for
presenting data in rows and columns.
It serves as the container for all other table-related elements.
key elements used within the <table> tag
<tr> (Table Row): Defines a row within the table. Each <tr> element contains one or more
<td> or <th> elements.
<th> (Table Header): Defines a header cell within a table row. These cells typically contain
titles or labels for columns or rows and are often rendered in bold by default.
23
HTML Table … 10/28/2025
key elements used within the <table> tag
<td> (Table Data): Defines a standard data cell within a table row. These cells contain
the actual content or data of the table.
<caption> (Table Caption): Provides a descriptive title or caption for the entire table. It is
typically placed immediately after the opening <table> tag.
<thead> (Table Head): Groups the header content of the table. It is placed after the
<caption> and colgroup elements (if present) and before <tbody>, <tfoot>, or <tr>
elements.
<tbody> (Table Body): Groups the main content (data rows) of the table.
<tfoot> (Table Foot): Groups the footer content of the table.
24
HTML Table … 10/28/2025
Table
25
HTML Forms 10/28/2025
HTML forms are a fundamental component of web pages used to collect user
input. They enable interaction between the user and the website, allowing
information to be submitted to a server for processing.
<form> element:
This is the container for all form elements. It defines the form itself and has
important attributes:
action: Specifies the URL where the form data will be sent for processing.
method: Determines how the data is sent (e.g., GET for appending data to the
URL, POST for sending data in the request body).
26
HTML Forms (Input elements):
These are the interactive controls <input type="checkbox">: For selecting
within the form that allow users to multiple options.
enter data. Common types include:
<input type="radio">: For selecting a single
<input type="text">: For single-line text option from a group.
input.
<input type="submit">: A button to submit
<input type="password">: For password the form data.
input, masking characters.
<textarea>: For multi-line text input.
<input type="email">: For email address
<select> and <option>: For creating dropdown
input with built-in validation.
lists.
10/28/2025 27
HTML Forms (<label> element ) 10/28/2025
Used to associate a descriptive label with a form control. This improves
accessibility, as clicking the label will focus on the associated input field. The for
attribute of the label should match the id of the input it describes.
Attributes for input elements:
name: Identifies the input field when data is sent to the server.
id: Provides a unique identifier for the input, crucial for linking with labels and for
scripting.
placeholder: Displays a hint or example text within the input field.
required: Makes the input field mandatory for form submission.
value: Sets a default value for the input field. 28
HTML Forms (Demo) 10/28/2025
Example
output
29
Computer File paths 10/28/2025
Absolute and relative file paths
File path can direct someone to a file or to a folder.
Absolute reference to the root of the file path.
In a relative file path we can write the file path relative to what we are
writing now.
They are shorter ../ this means go up a level , single dot stay with the
current directory./[Link]
30
HTML Mutlimedia 10/28/2025
HTML multimedia refers to the integration of non-textual content, such as
images, audio, and video, into web pages.
This capability significantly enhances the user experience by providing a richer
and more interactive environment.
Multimedia Formats: Various formats exist for different types of multimedia. Common
examples include:
Images: JPEG (.jpg, .jpeg), PNG (.png), GIF (.gif), WebP (.webp).
Audio: MP3 (.mp3), WAV (.wav), Ogg Vorbis (.ogg).
Video: MP4 (.mp4), WebM (.webm), Ogg Theora (.ogg).
31
HTML embed tag 10/28/2025
Sometimes you need to add music or video into your web page.
The easiest way to add video or sound to your web site is to include the special
HTML tag called <embed>.
This tag causes the browser itself to include controls for the multimedia
automatically provided browser supports <embed> tag and given media type.
You can put any media file in src attribute.
Audio, Text
Applet, PDF, Video
32
Multi Media 10/28/2025
<embed> tag attributes
33
HTML Object tag
• The <object> element, which offers an all-
The <object> element, which purpose solution to generic object
offers an all-purpose solution to inclusion.
<body>
generic object inclusion. <object data="../Train"
type="text/html" width="300"
The <object> element allows height="200" alt="html document not
visible">
HTML authors to specify <a href="../[Link]">[Link]</a>
</object>
everything required by an object </body>
for its presentation by a user </html>
agent
10/28/2025 34
The <iframe> tag
It stands for "Inline Frame," is used • Embedding Content:
to embed another HTML document The primary purpose of <iframe> is to embed
within the current HTML document. external content, such as videos (from
This creates a separate browsing platforms like YouTube), maps (from Google
context within the main page, Maps), advertisements, or even entire
essentially displaying a webpage webpages from other domains or local files.
within a webpage. src attribute: This is the most crucial attribute,
specifying the URL of the document to be
embedded within the iframe agent.
35
HTML Mutlimedia… 10/28/2025
HTML Elements for Embedding Multimedia:
Specific HTML tags are used to embed multimedia content:
<img>: Used for embedding images. The src attribute specifies the image
source, and the alt attribute provides alternative text for accessibility.
<audio>: Used for embedding audio content. It supports attributes like
controls (to display playback controls), autoplay, and loop.
<video> : used for embedding video content. It supports attributes like controls (to display
playback controls), autoplay, and loop.
36
HTML Mutlimedia Example 10/28/2025
37
Embedding a pdf
Embedding a pdf using object tag
10/28/2025 38
Thank You!!
39