23AID215
User Interface Design
HTML Basics
Ms. Sreelakshmi K, Assistant Professor
Amrita School of Artificial Intelligence, Coimbatore
What is HTML
• Hyper Text Markup Language
• An HTML file is a text file containing small
markup tags
• The markup tags tell the Web browser how to
display the page
• An HTML file must have an html file extension
Sep 21, 2025 23AID215|UID|AI-DS|Ms. Sreelakshmi K 2
HTML Page Structure
• The <head> is where you
put in all the information
you want to include about
your document.
• The <body> section is what
people see when they view
your HTML document.
Sep 21, 2025 23AID215|UID|AI-DS|Ms. Sreelakshmi K 3
Elements and Tags
• HTML tags normally come in pairs like <b> and </b>
• The first tag in a pair is the start tag, the second tag is the end tag
• The text between the start and end tags is the element content
• HTML tags are not case sensitive, <b> means the same as <B>
Example: <b> This text is bold </b>
Sep 21, 2025 23AID215|UID|AI-DS|Ms. Sreelakshmi K 4
Basic HTML Tags
• <h1>This is a heading</h1>
• <p This is a paragraph</p>
• <p>This <br> is a para<br> graph with line breaks</p>
• <hr width="50%“ align="center">
• <p> This html comment would <!-- This is a comment --> be displayed like this.</p>
Sep 21, 2025 23AID215|UID|AI-DS|Ms. Sreelakshmi K 5
Logical Tags vs Physical Tags
• Logical Tags: provide semantic meaning to the text, helping browsers,
search engines understand the content better.
• Physical Tags: define the appearance or presentation of content. They
focus on how the text looks, regardless of its semantic meaning.
Sep 21, 2025 23AID215|UID|AI-DS|Ms. Sreelakshmi K 6
Logical Tags vs Physical Tags
Sep 21, 2025 23AID215|UID|AI-DS|Ms. Sreelakshmi K 7
Nested Tags
• <p><b><i>This is NOT the proper way to close
nested tags.</p></i></b>
• <p><b><i>This is the proper way to close
nested tags. </i></b></p>
• It doesn't matter which tag is first, but they
must be closed in the proper order.
Sep 21, 2025 23AID215|UID|AI-DS|Ms. Sreelakshmi K 8
Attributes
● href
• Attributes can provide additional ● alt
● align
information about the HTML ● bgcolor
● src
elements on your page. ● height
● width
• The <tag> tells the browser to do ● value
something, while the attribute tells ● href
● hspace
the browser how to do it. ● id
● class
• Example: <h1 style="color: blue; ● style
● title
text-align: center;">Hello ● dir
World</h1> ● lang
Sep 21, 2025 23AID215|UID|AI-DS|Ms. Sreelakshmi K 9
HTML Character Entities
• Some characters have a special meaning in HTML, like the less than
sign (<) that defines the start of an HTML tag.
• If the browser has to display these characters we must insert
character entities in place of the actual characters themselves.
Sep 21, 2025 23AID215|UID|AI-DS|Ms. Sreelakshmi K 10
Non-breaking Space
• Non-breaking space .
– Normally HTML will truncate spaces in your text. If you
add 10 spaces in your text, HTML will remove 9 of them.
– To add spaces to your text, use the character
entity.
Sep 21, 2025 23AID215|UID|AI-DS|Ms. Sreelakshmi K 11
HTML Backgrounds
• Bgcolor
– The bgcolor attribute specifies a background-color for an HTML page. The value of this
attribute can be a hexadecimal number, an RGB value, or a color name:
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
The lines above all set the background-color to black.
• Background
– The background attribute can also specify a background-image for an HTML page. The value of
this attribute is the URL of the image you want to use. If the image is smaller than the browser
window, the image will repeat itself until it fills the entire browser window.
<body background="[Link]">
Sep 21, 2025 23AID215|UID|AI-DS|Ms. Sreelakshmi K 12
Explore HTML Colours and their Values
HTML Lists
• Ordered List
– Attributes: Type and start
– <ol type="a"> will display a, b, c
– <ol type="A"> will display A, B, C
– <ol type="i"> will display i, ii, iii
– <ol type="I"> will display I, II, III
– <ol start="3">
• Unordered List
– <ul type="square"> will display a square filled inbullet.
Sep 21, 2025 23AID215|UID|AI-DS|Ms. Sreelakshmi K 14
Description Lists
HTML Image
• <img src="[Link]" alt="image on your site" width="100"
height="100">
• The <img> tag introduces an image, the attribute src or source
allows you to point to your image file.
• The alt attribute stands for alternative text.
– This is what shows up when the image cannot be shown for some
reason (slow Internet connection or server is not responding).
– The width and height attributes determine the dimensions of the
image.
Sep 21, 2025 23AID215|UID|AI-DS|Ms. Sreelakshmi K 16
Align Images
• To align your images to the left, use <img align="left">
• To align your images to the right, use <img align="right">
• To align your images to the middle, use <img
align="middle">
• To align your images to the top, use <img align="top">
• To align your images to the bottom, use <img
align="bottom">
Sep 21, 2025 23AID215|UID|AI-DS|Ms. Sreelakshmi K 17
HTML Links
• Text Link
• Image Link
• Link to email
Sep 21, 2025 23AID215|UID|AI-DS|Ms. Sreelakshmi K 18
Thank You
Sep 21, 2025 23AID215|UID|AI-DS|Ms. Sreelakshmi K 19