HTML

Lecture – 2
Dr. Aghabi Abosaif
October 2023

1
What is HTML?
 HTML stands for Hyper Text Markup
Language.
 HTML describes the structure of a Web
page.
 HTML consists of a series of elements,
that tell the browser how to display the
content
 HTML elements label pieces of content
such as
 "this is a heading",
 "this is a paragraph",
 "this is a link", etc.
2
HTML

3
HTML Editors
A simple text editor is all you need to learn HTML.

 HTML can be edit Using simple Editor (like Notepad , Text Edit)
or any other Professional Editor (Like Visual Studio, Macromedia
Dreamweaver).
 It can use either .htm or .html as file extension.
 HTML file are Run/ Viewed in Your Favorite browser , Jut the saved HTML file i

4
HTML- Heading
HTML headings are titles or subtitles that you want to display on a
webpage.
 HTML headings are defined with the <h1> to <h6> tags.
 <h1> defines the most important heading.
 <h6> defines the least important heading.

 Headings are Important because Search engines use the headings to index the
structure and content of your web pages.

 Users often skim a page by its headings.

5
HTML - Heading

6
HTML -Paragraph
A paragraph always starts on a new line, and is usually a block of text.

 The HTML <p> element defines a paragraph.

 A paragraph always starts on a new line, and browsers automatically add

some white space (a margin) before and after a paragraph.

7
HTML - Paragraph

8
HTML – Paragraph Display

Large or small screens, and resized windows will create different results.

With HTML, you cannot change the display by adding extra spaces or
extra lines in your HTML code.

The browser will automatically remove any extra spaces and lines when
the page is displayed.

9
HTML – Paragraph -Display

10
 HTML – Making Lists in HTML
 HTML allow web developers to group a set of related items in lists.
 Unordered HTML List
 Starts with the <ul> tag.
 Each list item starts with the <li> tag.
 The list items will be marked with bullets (small black circles) by default.

 An ordered list
 Starts with the <ol> tag.
 Each list item starts with the <li> tag.
 The list items will be marked with numbers by default.

11
HTML – Making Lists in HTML

12
HTML – HTML Description Lists
HTML also supports 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).
 The <dd> tag describes each term.
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
13
HTML – HTML Description Lists

14
HTML – Adding Images
Images can improve the design and the appearance of a web page.
The HTML <img> tag is used to embed an image in 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.

15
HTML – Adding Images

The src Attribute

 The required src attribute specifies the path (URL) to the image.
 When a web page loads, it is the browser, at that moment, that gets the image from a
web server and inserts it into the page.

 Therefore, make sure that the image actually stays in the same spot in relation to the
web page, otherwise your visitors will get a broken link icon.

 The broken link icon and the alt text are shown if the browser cannot find the image.

16
HTML – Adding Images

The alt Attribute

 The required alt attribute provides an alternate text for an image.

 if the user for some reason cannot view it

 slow connection.
 an error in the src attribute.
 if the user uses a screen reader.
 The value of the alt attribute should describe the image

17
HTML – Adding Images

18
HTML – Adding Images

Image Size - Width and Height

 You can use the style attribute to specify the width and height of an image.
 Alternatively, you can use the width and height attributes.
 The width and height attributes always defined the image in pixels.

19
HTML – Adding Images
Images in Another Folder
 If you have your images in a sub-folder, you must include the folder name in
the src attribute.

Images on Another Server/Website

 Some web sites 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
 External images might be under copyright. If you do not get permission to use it, you
may be in violation of copyright laws. In addition, you cannot control external images;
they can suddenly be removed or changed.

20
 HTML – Images As Links
 To use an image as a link, put the <img> tag inside the <a> tag
 Common Image Formats
 Here are the most common image file types, which are supported in all browsers
(Chrome, Edge, Firefox, Safari, Opera)
Abbreviation File Format File Extension
APNG Animated Portable .apng
Network Graphics
GIF Graphics Interchange .gif
Format
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert .jpg, .jpeg, .jfif, .pjpeg, .pjp
Group image
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg
21
HTML – Images As Links

22
HTML – HTML Image Maps
 With HTML image maps, you can create clickable areas on an image.

 Image Maps
 The HTML <map> tag defines an image map.
 The areas are defined with one or more <area> tags.

23
HTML – HTML Image Maps
Try to click on the computer, phone, or the cup of coffee in the image below

24
HTML – HTML Image Maps
How Does it Work?
 The idea behind an image map is that you should be able to perform different actions
depending on where in the image you click.

 The image is inserted using the <img> tag. The only difference from other images is that you
must add a usemap attribute

 The usemap value starts with a hash tag # followed by the name of the image map, and is
used to create a relationship between the image and the image map.
 Add a <map> element to create an image map, and is linked to the image by using the
required name attribute.

 The name attribute must have the same value as the <img>'s usemap attribute .

25
HTML – HTML Image Maps
 Then add the clickable areas, A clickable area is defined using an <area> element.

 Also You must define the shape of the clickable area, and you can choose one of these
values:
 rect - defines a rectangular region
 circle - defines a circular region
 poly - defines a polygonal region
 default - defines the entire region

 You must also define some coordinates to be able to place the clickable area onto the image.

26
HTML – HTML Image Maps- coordinates

27
HTML –HTML Links - Hyperlinks
 Links allow users to click their way from page to page or to jump to another
document.
 When you move the mouse over a link, the mouse arrow will turn into a little
hand.

 The HTML <a> tag defines a hyperlink.

 The href attribute, which indicates the link's destination.

 The link text is the part that will be visible to the reader.
 Clicking on the link text, will send the reader to the specified URL address.

28
HTML – HTML Links - Hyperlinks

29
HTML –HTML Links - Appear

 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

 Links can of course be styled with CSS, to get another look.

30
HTML –HTML Links - Target Attribute

 The target attribute specifies where to open the linked document.

 By default, the linked page will be displayed in the current browser window.

 To change this, you must specify another target for the link.
 The target attribute can have one of the following values:
 _self - Default. Opens the document in the same window/tab as it was clicked
 _blank - Opens the document in a new window or tab
 _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the window

31
HTML – HTML Links –
Absolute URLs vs. Relative URLs

 An absolute URL (a full web address) in the href attribute.

 A local link (a link to a page within the same website) is specified with a
relative URL (without the "https://www" part)

32
HTML – Absolute URLs vs. Relative URLs

33
HTML Tables
 HTML tables allow web developers to arrange data into rows and columns.
 Each table cell is defined by a <td> and a </td> tag. td stands for table data.
 A table cell can contain all sorts of HTML elements: text, images, lists, links,
other tables, etc.
 Table Rows
 Each table row starts with a <tr> and ends with a </tr> tag.
 tr stands for table row.
 You can have as many rows as you like in a table; just make sure that the number of cells
are the same in each row.
 Table Headers
 Sometimes you want your cells to be table header cells. In those cases use the <th> tag
instead of the <td> tag. The th stands for table header.

34
HTML – Tables

35
36