02/23/2025
Internet Based Programming
Frontend web development: HTML (abbr, hr, a, button, img, figure, list elements—ol, ul, li, dl,
dt, dd-)
Asst. Prof. Dr. İnan KAZANCI
ikazanci@bandirma.edu.tr
Frontend web development-HTML: Abbreviation Element
• Abbreviation <abbr>: defines an abbreviation or an acronym, like "HTML", "CSS“ etc.
Marking abbreviations can give useful information to browsers, translation systems and search-
engines.
<!DOCTYPE html>
<html lang = "en">
<head>
<title> Abbreviation element</title>
</head>
<body>
The <abbr title="World Health
Organization">WHO</abbr> was founded in 1948.
</body>
</html>
02/23/2025 2
1
02/23/2025
Frontend web development-HTML: Horizontal rule
• Horizontal rule <hr>: is most often displayed as a horizontal line that is used to separate
content (or define a change) in an HTML page.
<!DOCTYPE html>
<html lang = "en">
<head>
<title> Horizontal rule element</title>
</head>
<body>
<h1> This is heading #1 </h1>
<p> Some paragraph 1... </p>
<hr>
<h2> This is heading #2 </h2>
<p> Some paragraph 2... </p>
</body>
</html>
02/23/2025 3
Frontend web development-HTML: Anchor Element
• Anchor element: defines a hyperlink, which is used to link from one page to
another.
The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.
Example:
<a href="https://www.google.com/"> Click Me</a>
02/23/2025 4
2
02/23/2025
Frontend web development-HTML: Anchor Element
Tips and Notes on using Anchor element:
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue.
A visited link is underlined and purple.
An active link is underlined and red.
If the <a> tag has no href attribute, it is only a placeholder for a hyperlink.
A linked page is normally displayed in the current browser window, unless
you specify another target.
02/23/2025 5
Frontend web development-HTML: Anchor Element
Attributes:
Attribute Value Description
href URL Specifies the URL of the page the link goes
to
hreflang language_code (e.g., en) Specifies the language of the linked
document
target _blank Opens the linked document in a new
window or tab
_self Opens the linked document in the same
frame as it was clicked (this is default)
02/23/2025 6
3
02/23/2025
Frontend web development-HTML: Anchor Element
<!DOCTYPE html>
<html lang = "en">
<head>
<title> Anchor element</title>
</head>
<body>
<h1> This is heading #1 </h1>
<a href="https://www.google.com/"> Click Me</a>
<br>
<a href="https://www.google.com/" target="_blank"> Click Me (_blank)</a>
<br>
<a href="https://www.google.com/" target="_self"> Click Me (_self)</a>
</body>
</html>
02/23/2025 7
Frontend web development-HTML: Anchor Element
02/23/2025 8
4
02/23/2025
Frontend web development-HTML: Anchor Element
• Create a bookmark using the anchor element:
Bookmarks can be useful if a web page is very long.
To create a bookmark:
First, use the id attribute to create a bookmark:
Example: <h2 id="C4">Chapter 4</h2>
Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same
page:
Example: <a href="#C4">Jump to Chapter 4</a>
When the link is clicked, the page will scroll down or up to the location with the
bookmark.
02/23/2025 9
Frontend web development-HTML: Button Element
• Button element: defines a clickable button.
Inside a <button> element you can put text (and tags like <i>, <b>, <br>, <img>,
etc.).
Example: <button type="button">Click<br>Me!</button>
Always specify the type attribute for a <button> element, to tell browsers what
type of button it is.
02/23/2025 10
5
02/23/2025
Frontend web development-HTML: Button Element
Attribute Value Description
autofocus - Specifies that a button should automatically get focus when the
page loads.
disabled - Specifies that a button should be disabled.
Attributes: form form_id Specifies which form the button belongs to.
type button The button is a clickable button.
submit The button is a submit button (submits form-data).
reset The button is a reset button (resets the form-data to its initial
values).
formtarget _blank Specifies where to display the response after submitting the
_self form. Only for type="submit“.
onclick “JS code” Specify the action be performed when the button is clicked. For
type=“button“.
02/23/2025 11
Frontend web development-HTML: Button Element
<!DOCTYPE html>
<html lang = "en">
<head>
<title> Button element</title>
</head>
<body>
<h1> Below is a clickable button: </h1>
<button autofocus type="button"
onclick="alert('HTML')"><b>Click
<br>me!</b></button>
</body>
</html>
02/23/2025 12
6
02/23/2025
Frontend web development-HTML: Image Element
• Image Element: used to embed an image in a web page.
Images can improve the design and the appearance of a web page.
Images are not technically inserted into a web page; images are linked to web
pages.
The <img> tag creates a holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a
closing tag.
The <img> tag has two required attributes:
src - Specifies the path to the image.
alt - Specifies an alternate text for the image.
02/23/2025 13
Frontend web development-HTML: Image Element
Syntax:
<img src="url" alt="alternatetext">
The required src attribute specifies the path (URL) to the image.
The required alt attribute provides an alternate text for an image, if the
user for some reason cannot view it (because of slow connection, an error
in the src attribute, or if the user uses a screen reader).
The value of the alt attribute should describe the image.
02/23/2025 14
7
02/23/2025
Frontend web development-HTML: Image Element
<!DOCTYPE html>
<html lang = "en">
<head>
<title> Image element</title>
</head>
<body>
<h1> Image Element: </h1>
<img src="Pics/googlelogo.png" alt="Google Logo">
</body>
</html>
02/23/2025 15
Frontend web development-HTML: Image Element
If a browser cannot find an image, it will display the value of the alt attribute:
<!DOCTYPE html>
<html lang = "en">
<head>
<title> Image element</title>
</head>
<body>
<h1> Image Element: </h1>
<img src="Pics/googlelogo.png" alt="Google Logo">
</body>
</html>
02/23/2025 16
8
02/23/2025
Frontend web development-HTML: Image Element
Note: we can nested image element for example we can add image to button
element.
<!DOCTYPE html>
<html lang = "en">
<head>
<title> Image element</title>
</head>
<body>
<h1> Image Element: </h1>
<button autofocus type="button"
onclick="alert('HTML')"><img src="Pics/googlelogo.png"
alt="Google Logo"></button>
</body>
</html>
02/23/2025 17
Frontend web development-HTML: Image Element
Image Size - Width and Height: it is possible to use the style attribute to specify
the width and height of an image.
<!DOCTYPE html>
<html lang = "en">
<head>
<title> Image element</title>
</head>
<body>
<h1> Image Element: </h1>
<img src="Pics/googlelogo.png" alt="Google Logo"
style="width:300px;height:400px">
</body>
</html>
02/23/2025 18
9
02/23/2025
Frontend web development-HTML: Image Element
Image Size - Width and Height: alternatively, it is possible to use
the width and height attributes.
<!DOCTYPE html>
<html lang = "en">
<head>
<title> Image element</title>
</head>
<body>
<h1> Image Element: </h1>
<img src="Pics/googlelogo.png" alt="Google Logo"
width="300" height="400">
</body>
</html>
Note: The width and height attributes always define the width and height of the image in pixels.
02/23/2025 19
Frontend web development-HTML: Image Element
Image Size - Width and Height: it is possible to use % operator to determine
the width and height of an image.
<!DOCTYPE html>
<html lang = "en">
<head>
<title> Image element</title>
</head>
<body>
<h1> Image Element: </h1>
<img src="Pics/googlelogo.png" alt="Google Logo"
style="width:5%;height:5%">
</body>
</html>
02/23/2025 20
10
02/23/2025
Frontend web development-HTML: Image Element
Images on Another Server/Website: it is possible to point to an image on another server. To
point to an image on another server, you must specify an absolute (full) URL in the src attribute:
<!DOCTYPE html>
<html lang = "en">
<head>
<title> Image element</title>
</head>
<body>
<h1> Image Element: </h1>
<img
src="https://www.google.com/images/branding/googlelogo/2x/go
oglelogo_color_272x92dp.png" alt="Google Logo">
</body>
</html>
02/23/2025 21
Frontend web development-HTML: Image Element
Animated Images: HTML allows animated GIFs:
<!DOCTYPE html>
<html lang = "en">
<head>
<title> Image element</title>
</head>
<body>
<h1> Image Element: </h1>
<img src="Pics/programming.gif" alt="GIF">
</body>
</html>
02/23/2025 22
11
02/23/2025
Frontend web development-HTML: Figure Element
• Figure element: The <figure> tag specifies self-contained content.
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Figure element </title>
</head>
<body>
<h1> Figure Element: </h1>
<figure>
<img src="Pics/pic_trulli.jpg" alt="Trulli">
</figure>
</body>
</html>
02/23/2025 23
Frontend web development-HTML: Figure Element
Figure caption: The <figcaption> tag defines a caption for a <figure> element.
The <figcaption> element can be placed as the first or last child of the <figure> element (i.e., at the
beginning or at the end).
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Figure element </title>
</head>
<body>
<h1> Figure Element: </h1>
<figure>
<img src="Pics/pic_trulli.jpg" alt="Trulli">
<figcaption>Fig.1- Trulli, Puglia,
Italy.</figcaption>
</figure>
</body>
</html>
02/23/2025 24
12
02/23/2025
Frontend web development-HTML: List Element
• List element: HTML lists allow web developers to group a set of related items in
lists.
There are two types of lists in HTML:
An unordered HTML list: An ordered HTML list:
• Item 1. Item
• Item 2. Item
• Item 3. Item
• Item 4. Item
02/23/2025 25
Frontend web development-HTML: List Element
• Unordered HTML List: in an unordered list items will be marked with bullets
(small black circles) by default.
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
Syntax:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
.
.
.
</ul>
02/23/2025 26
13
02/23/2025
Frontend web development-HTML: List Element
• Unordered HTML List:
<!DOCTYPE html>
<html lang = "en">
<head>
<title> List element</title>
</head>
<body>
<h1>Unordered List Element:</h1>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
02/23/2025 27
Frontend web development-HTML: List Element
• Ordered HTML List: in an ordered list items will be marked with numbers by
default.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
Syntax:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
.
.
.
</ol>
02/23/2025 28
14
02/23/2025
Frontend web development-HTML: List Element
• Ordered HTML List:
<!DOCTYPE html>
<html lang = "en">
<head>
<title> List element</title>
</head>
<body>
<h1>Ordered List Element:</h1>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
02/23/2025 29
Frontend web development-HTML: List Element
• Ordered HTML List: Attributes
Attribute Value Description
reversed reversed Specifies that the list order should be reversed (9,8,7...)
start number Specifies the start value of an ordered list
type Specifies the kind of marker to use in the list
1 Default. Decimal numbers (1, 2, 3, 4)
a Alphabetically ordered list, lowercase (a, b, c, d)
A Alphabetically ordered list, uppercase (A, B, C, D)
i Roman numbers, lowercase (i, ii, iii, iv)
I Roman numbers, uppercase (I, II, III, IV)
02/23/2025 30
15
02/23/2025
Frontend web development-HTML: List Element
• Ordered HTML List: Attributes: Reversed
<!DOCTYPE html>
<html lang = "en">
<head>
<title>List element </title>
</head>
<body>
<h1>Reversed Ordered List:</h1>
<ol reversed>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
02/23/2025 31
Frontend web development-HTML: List Element
• Ordered HTML List: Attributes: Start
<!DOCTYPE html>
<html lang = "en">
<head>
<title>List element </title>
</head>
<body>
<h1>Ordered List start at 50:</h1>
<ol start = "50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
02/23/2025 32
16
02/23/2025
Frontend web development-HTML: List Element
• Ordered HTML List: Attributes: Type
<!DOCTYPE html>
<html lang = "en">
<head>
<title>List element </title>
</head>
<body>
<h1>Ordered List with different marker</h1>
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
02/23/2025 33
Frontend web development-HTML: List Element
• HTML Description Lists: A description list is a list of terms, with a description of
each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name),
and the <dd> tag describes each term.
Syntax:
<dl>
<dt>Item 1</dt>
<dd>Description of Item 1</dd>
<dt>Item 2</dt>
<dd>Description of Item 2</dd>
.
.
.
</dl>
02/23/2025 34
17
02/23/2025
Frontend web development-HTML: List Element
• HTML <!DOCTYPE html>
Description <html lang = "en">
Lists: <head>
<title> List element</title>
</head>
<body>
<h1>Description List Element:</h1>
<dl>
<dt>Coffee:</dt>
<dd>- black hot drink.</dd>
<dt>Milk:</dt>
<dd>- white cold drink.</dd>
</dl>
</body>
</html>
02/23/2025 35
Frontend web development-HTML: List Element
• Summery of list elements:
Tag Description
<ul> Defines an unordered list.
<ol> Defines an ordered list.
<li> Defines a list item.
<dl> Defines a description list.
<dt> Defines a term in a description list.
<dd> Describes the term in a description list.
02/23/2025 36
18
02/23/2025
Frontend web development-HTML: List Element
• It is possible to create a list inside a list (a nested list):
<!DOCTYPE html>
<html lang = "en">
<head>
<title> Nested List </title>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
02/23/2025 37
Frontend web development-HTML: List Element
• It is possible to create a list inside a list (a nested list):
<!DOCTYPE html>
<html lang = "en">
<head>
<title>List element </title>
</head>
<body>
<h1>An ordered list inside another ordered list</h1>
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
</body>
</html>
02/23/2025 38
19
02/23/2025
Frontend web development-HTML: List Element
• It is possible to create a list inside a list (a nested list):
<!DOCTYPE html>
<html lang = "en">
<head>
<title>List element </title>
</head>
<body>
<h1>An unordered list inside an ordered list</h1>
<ol>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ol>
</body>
</html>
02/23/2025 39
02/23/2025 40
20
