Scribd
Upload
7 views20 pages

3

The document is a tutorial on frontend web development focusing on HTML elements such as <abbr>, <hr>, <a>, <button>, <img>, <figure>, and list elements. It provides examples and explanations for each element, including attributes and usage tips. The document serves as a comprehensive guide for understanding basic HTML structure and functionality.

Uploaded by

Sümeyye Öztürk
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views20 pages

3

The document is a tutorial on frontend web development focusing on HTML elements such as <abbr>, <hr>, <a>, <button>, <img>, <figure>, and list elements. It provides examples and explanations for each element, including attributes and usage tips. The document serves as a comprehensive guide for understanding basic HTML structure and functionality.

Uploaded by

Sümeyye Öztürk
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

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


[email protected]

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

You might also like