KWARA STATE UNIVERSITY, MALETE

COLLEGE OF INFORMATION AND COMMUNICATION TECHNOLOGY

DEPARTMENT OF COMPUTER SCIENCE
2023/2024 FIRST (HARMATTAN) SEMESTER COURSE

Course Code: CSC 101 Instructor: Muhammed Kolawole Abdulsalam (Mr.)

Course Title: Internet Technology & Programming I. imuhammedkolawole@gmail.com, 08038458590
Course Status: 2 Credit Compulsory

Module II:

What is Web design process: The phrase "web design process" refers to the different actions and

tasks involved in developing a website. It is separated into three stages: discovery, design, and

development. This time around, I'll talk about the discovery phase, which is all about research and

strategy.

The discovery phase is where the user or developer chooses the website's general style, content,

functionality, target audience, and goal. It will be necessary for the user to interview stakeholders,

collect ideas, specify the project's parameters, and provide wireframes and a sitemap. The user will

have a better understanding of the project's objectives and specifications as well as the website's

design and organization by following these steps.

Some tips for the discovery phase are:

- Work with your team and clients on ideation, drawing, and prototyping by using online tools like as

Figma or Miro.

- To determine the goals, desires, and pain points of your target audience, do user research and develop

buyer personas.

- To identify and preserve web design inspiration that fits the intended style and tone of the website,

use resources such as Dribbble or Pinterest.

- Clearly define the project's scope and record it in a proposal or project brief. This will assist you in

controlling expectations and preventing scope creep.

- Create a sitemap to show the hierarchy and navigation of the website. A sitemap is a visual

representation of the web pages and how they are connected.

- Create wireframes to show the layout and content of each web page. A wireframe is a low-fidelity

sketch or mockup of the website that focuses on functionality and usability.

The stage of web development known as "design" is when the website's layout and visual style are

developed. It involves the following steps:

- Creating a rough design: The web designer sketches out a rough draft of the website, using tools like

wireframes, mockups, or prototypes. This helps to define the structure, navigation, and content

hierarchy of the website.

-Making a final design: The web designer then refines the rough design, adding colors, fonts, images,

and other elements that match the brand identity and style of the website. The final design should be

responsive, meaning it adapts to different screen sizes and devices.

-Framing a prototype: The web designer then converts the final design into a working prototype, using

tools like HTML, CSS, and JavaScript. The prototype should demonstrate the functionality and

interactivity of the website, such as buttons, links, forms, and animations.

-Testing the prototype: The web designer then tests the prototype for usability, accessibility, and

compatibility issues. The prototype should be easy to use, follow web standards, and work well across

different browsers and platforms. The web designer should also get feedback from the client and the

users to improve the design.

Introduction to HTML Basic:

HTML is the mainstream technology for building web pages. It is an acronym that stands for

HyperText Markup Language. HTML is made up of elements, attributes, and other properties that

form the structure and content of a web page. Here are some of the important parts of HTML basics:
Elements: HTML elements are the building blocks of a web page. They are surrounded by angle

brackets (< and >) and usually consist of a start tag, an end tag, and some content in between. For

example, <p>This is a paragraph </p> is an HTML element that represents a paragraph. Some

elements are self-closing, which means they do not need an end tag. For example, <img

src="image.jpg" alt="An image"> is an HTML element that represents an image. Elements can be

nested inside other elements to create complex structures. For example, <div><h1>A

heading</h1><p>A paragraph</p></div> is an HTML element that contains two other elements: a

heading and a paragraph.

Attributes: HTML attributes are additional information that can be added to an element to modify

its appearance or behavior. Attributes are specified in the start tag of an element, after the element

name, and consist of a name and a value, separated by an equal sign (=). The value is usually enclosed

in quotation marks (" "). For example, <a href="https://www.bing.com">This is a link</a> is an

HTML element that represents a link, and it has an attribute named href, with a value of

“https://www.bing.com”. Attributes can provide information such as the source of an image, the

alternative text for an image, the style of an element, the class of an element, the id of an element, and

more.

Document type declaration: The document type declaration, or <!DOCTYPE>, is the first line of a

HTML document, and it tells the browser what version of HTML the document is using. The

document type declaration for HTML5, the latest version of HTML, is <!DOCTYPE html>. It must

be written in uppercase and must appear before the <html> tag.

HTML document structure: An HTML document has a basic structure that consists of a head and

a body. The head contains information about the document, such as the title, the character encoding,

the style sheets, the scripts, and the metadata. The body contains the visible content of the document,

such as the headings, the paragraphs, the images, the links, the forms, and the multimedia. The head

and the body are enclosed by the <html> and </html> tags, which indicate the start and the end of the

document. For example, a simple HTML document structure looks like this:
<!DOCTYPE html>

<html>

<head>

<title>My First HTML Page</title>

</head>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

<img src="image.jpg" alt="An image">

<a href="https://www.bing.com">This is a link</a>

</body>

</html>

BASIC HMTL PRINCIPLE:

What is Web Design Principle: Web design principles are rules that assist designers in creating

successful and visually appealing websites that fulfill the requirements and expectations of users. Web

design principles span a wide range of topics, including layout, typography, color, navigation,

usability, and user experience. Some of the most common web design principles are:

- Simplicity: A simple web design is easy to understand and use, and avoids unnecessary elements

that may distract or confuse the user. A simple web design also loads faster and performs better on

different devices and browsers.

- Visual hierarchy: The arranging of web components in a way that conveys their importance and

relationship is known as visual hierarchy. Users may rapidly browse and discover the information

they need by using visual hierarchy. Designers may establish a clear visual hierarchy by using size,

color, contrast, alignment, spacing, and other strategies.

- Consistency: The use of the same or comparable design components throughout the website, such

as fonts, colors, icons, buttons, and navigation, is referred to as consistency. Consistency aids users

in recognizing and navigating the website, as well as creating a sense of familiarity and confidence.

- Accessibility: Accessibility entails creating a website that can be accessed by individuals of various

abilities, preferences, and devices. Following online standards and best practices, such as utilizing

appropriate HTML elements, providing alternate text for pictures, using clear and descriptive

labeling, and ensuring enough color contrast, all contribute to accessibility.

- Responsiveness: Responsive design is creating a website that adjusts to the screen size and

orientation of the device being used by the user. A responsive website guarantees that the information

and layout are optimized for the user's viewing and interaction, and that the experience is consistent

and gratifying across multiple devices.

HTML STRUCTURES: HTML is a markup language that is used to create web pages, which means

that it uses tags and attributes to define the structure and content of a web page. HTML documents

have a basic structure that consists of the following parts:

The `<!DOCTYPE html>` declaration: This informs the browser that the page is HTML5 and should

adhere to HTML5 standards. This is not a tag, but rather a specific command that must be on the first

line of any HTML page.

The `<html>` element: This is the HTML document's root element, which contains all of the other

elements. The 'html>' element has a 'lang' property that determines the document's language, such as

'en' for English.

The `<head>` element: This is a container for metadata, which is information about the HTML

document that is not displayed on the web page. The `<head>` element can include elements such as

`<title>`, `<meta>`, `<link>`, `<style>`, and `<script>`. Some of the common metadata elements are:

 The `<title>` element: This determines the web page's title, which appears in the browser's

title bar or in the page's tab.

  The `<meta>` element: This contains information about the web page such as the character

encoding, viewport, author, description, and keywords. The element '<meta>' contains two

attributes: 'name' and 'content'. The 'name' element identifies the type of metadata, whereas the

'content' field gives its value.

 The `<link>` element: This specifies the connection between the web page and an external

resource, such as a stylesheet, favicon, or typeface. 'rel', 'href', 'type', and'media' are all

characteristics of the '<link>' element. The 'rel' element defines the kind of relationship, the

'href' attribute specifies the resource's URL, the 'type' attribute specifies the resource's MIME

type, and the 'media' attribute specifies the resource's media query.

 The `<style>` element: This defines the style rules for the web page, using CSS (Cascading

Style Sheets) syntax. The `<style>` element can have a `type` attribute that specifies the MIME

type of the style sheet, which is usually `text/css`.

 The `<script>` element: This defines a script that can modify the behavior or content of the

web page, using JavaScript syntax. The `<script>` element can have several attributes, such as

`src`, `type`, `async`, and `defer`. The `src` attribute specifies the URL of the external script

file, the `type` attribute specifies the MIME type of the script, which is usually `text/javascript`,

the `async` attribute specifies that the script should be executed asynchronously, and the `defer`

attribute specifies that the script should be executed after the document has been parsed.

The `<body>` element: This is a container for the visible content of the web page, such as headings,

paragraphs, images, links, tables, lists, forms, and multimedia. The `<body>` element can include

various elements that define the structure and content of the web page, such as `<h1>` to `<h6>`,

`<p>`, `<img>`, `<a>`, `<table>`, `<ul>`, `<ol>`, `<li>`, `<form>`, `<input>`, `<video>`, and

`<audio>`. Some of the common content elements are:

 The `<h1>` to `<h6>` elements: These define headings of different levels, from the most

important (`<h1>`) to the least important (`<h6>`). Headings help to organize the web page

and make it easier for users and search engines to understand the main topics.
  The `<p>` element: This defines a paragraph of text, which is a block of text that is separated

from other blocks by a blank line or by a `<br>` element. Paragraphs help to break up the text

into smaller and more readable chunks.

 The `<img>` element: This defines an image that is displayed on the web page¹. The `<img>`

element has two mandatory attributes: `src` and `alt`. The `src` attribute specifies the URL of

the image file, and the `alt` attribute specifies the alternative text that is shown when the image

cannot be loaded or is not available¹. The `<img>` element can also have other optional

attributes, such as `width`, `height`, `title`, and `style`.

 The `<a>` element: This defines a hyperlink that links to another web page or a section within

the same web page. The `<a>` element has a mandatory attribute: `href`. The `href` attribute

specifies the URL of the destination web page or the ID of the destination section¹. The `<a>`

element can also have other optional attributes, such as `target`, `title`, and `style`.

The `<table>` element: This defines a table that is used to display data in rows and columns. The

`<table>` element can include elements such as `<caption>`, `<thead>`, `<tbody>`, `<tfoot>`, `<tr>`,

`<th>`, and `<td>`. Some of the common table elements are:

 The `<caption>` element: This defines a caption or a title for the table.

 The `<thead>` element: This defines a group of header rows for the table.

 The `<tbody>` element: This defines a group of data rows for the table.

 The `<tfoot>` element: This defines a group of footer rows for the table.

 The `<tr>` element: This defines a row of cells in the table.

 The `<th>` element: This defines a header cell in the table.

 The `<td>` element: This defines a data cell in the table.

The `<ul>` and `<ol>` elements: These define unordered and ordered lists, respectively.

Unordered lists use bullets to mark each list item, while ordered lists use numbers or letters to mark
each list item. Both elements can include the `<li>` element, which defines a list item. The `<ul>` and

`<ol>` elements can also have other optional attributes, such as `type`, `start`, and `style`.

- The `<form>` element: This defines a form that is used to collect user input, such as text, choices,

files, and buttons. The `<form>` element has a mandatory attribute: `action`. The `action` attribute

specifies the URL of the server-side script that processes the form data¹. The `<form>` element can

also have other optional attributes, such as `method`, `enctype`, and `name`¹. The `<form>` element

can include various elements that define the form controls, such as `<input>`, `<select>`, `<option>`,

`<textarea>`, `<label>`, and `<button>`. Some of the common form elements are:

 The `<input>` element: This defines an input field that allows the user to enter text, select a

choice, upload a file, or submit the form. The `<input>` element has a mandatory attribute:

`type`. The `type` attribute specifies the type of the input field, such as `text`, `radio`,

`checkbox`, `file`, or `submit`. The `<input>` element can also have other optional attributes,

such as `name`, `value`, `placeholder`, `required`, and `style`.

 The `<select>` element: This defines a drop-down list that allows the user to select one or more

options from a list¹. The `<select>` element can include the `<option>` element, which defines

an option in the list¹. The `<select>` element can also have other optional attributes, such as

`name`, `size`, `multiple`, and `style`.

 The `<textarea>` element: This defines a multi-line text area that allows the user to enter a

long text. The `<textarea>` element can have optional attributes, such as `name`, `rows`, `cols`,

`placeholder`, `required`, and `style`.

 The `<label>` element: This defines a label for an input field, which helps the user to

understand the purpose of the input field. The `<label>` element has a mandatory attribute:

`for`. The `for` attribute specifies the ID of the input field that the label is associated with.

 The `<button>` element: This defines a clickable button that can perform an action, such as

submitting the form or resetting the form¹. The `<button>` element can have optional attributes,

such as `type`, `name`, `value`, and `style`.

html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name.

What are Tag and Attribute: Tags and attributes are two important concepts in HTML that help to

define the structure and content of a web page.

Tags are special words wrapped in angle brackets (< and >) that tell the browser how to display or

interpret the content between them. For example, the <p> tag tells the browser that the content

between <p> and </p> is a paragraph, and the <img> tag tells the browser that the content between

<img> and /> is an image. Tags can be divided into two types: container tags and empty tags.

Container tags: It have a start tag and an end tag, and they contain some content between them. For

example, <p>This is a paragraph </p> is a container tag that contains the text "This is a paragraph"

as its content. Container tags can also contain other tags as their content, such as <p>This is a

<b>bold</b> paragraph</p>, which contains the <b> tag as its content.

Empty tags: It have only a start tag and they do not contain any content between them. For example,

<img src="mydog.jpg" alt="A photo of my dog." /> is an empty tag that does not contain any content.

Empty tags are usually used to display or embed something on the web page, such as an image, a line

break, or a horizontal line.

Attributes: Attributes are additional pieces of information that are added to the start tag of an element

to modify its behavior or appearance. Attributes usually come in name/value pairs, such as

name="value". For example, the <img> tag has two attributes: src and alt. The src attribute specifies

the Uniform Resource Locator of the image file, and the alt attribute specifies the alternative text that

is shown when the image cannot be loaded or is not available. Attributes can provide various
information about an element, such as its source, size, style, title, link, or type. Here are some

examples of tags and attributes in HTML:

- The <a> tag defines a hyperlink that links to another web page or a section within the same web

page. The <a> tag has a mandatory attribute: href. The href attribute specifies the URL of the

destination web page or the ID of the destination section. The <a> tag can also have other optional

attributes, such as target, title, and style. For example, <a href="https://www.kwasu.com.ng"

target="_blank" title="Search the web with Google" style="color:blue;">Visit

portal.kwasu.com.ng</a> defines a hyperlink that opens the Kwasu student portal website in a new

tab, with a title and a blue color.

- The <table> tag defines a table that is used to display data in rows and columns. The <table> tag

can include elements such as <caption>, <thead>, <tbody>, <tfoot>, <tr>, <th>, and <td>. The

<table> tag can also have attributes, such as border, cellpadding, cellspacing, and style. For example,

<table border="1" cellpadding="10" cellspacing="0" style="width:50%;"> defines a table with a

border, some padding, no spacing, and a width of 50%.

- The <input> tag defines an input field that allows the user to enter text, select a choice, upload a file,

or submit the form. The <input> tag has a mandatory attribute: type. The type attribute specifies the

type of the input field, such as text, radio, checkbox, file, or submit. The <input> tag can also have

other optional attributes, such as name, value, placeholder, required, and style. For example, <input

type="text" name="name" placeholder="Enter your name" required style="width:200px;"> defines a

text input field that asks the user to enter their name, with a placeholder, a required validation, and a

width of 200 pixels.

What is HTML Header: HTML headers are elements that represent the introductory or navigational

content of a web page, such as the title, logo, menu, or slogan. HTML headers are usually placed at

the top of the web page, and they help the users and search engines to understand the main purpose

and theme of the web page. HTML headers are defined by using the <header> tag, which can contain

one or more heading elements (<h1> to <h6>), as well as other elements such as images, links, or
forms. For example, the following HTML code defines a header for a web page that contains the logo,

the title, and the navigation bar of a fictional website.

<header>

<img src="logo.png" alt="Logo of ABCOnline.com">

<h1>ABCOnline.com</h1>

<p>World's no.1 shopping website</p>

<nav>

<ul>

<li><a href="home.html">Home</a></li>

<li><a href="products.html">Products</a></li>

<li><a href="about.html">About</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</nav>

</header>

Below depicts the output of Html Header

Html Paragraph: It is a section of text that is separated from other sections by a blank line or by a

<p> tag. An HTML paragraph can contain any type of content, such as text, images, links, or forms.

An HTML paragraph can also have various attributes, such as style, class, or id, that can modify its

appearance or behavior. Here are some examples of HTML paragraphs:

 A simple paragraph with text only: <p>This is a simple paragraph with text only </p>.
  A paragraph with an image and an alternative text: <p>This is a paragraph with an image and

an alternative text.<img src="mydog.jpg" alt="A photo of my dog."></p>.

 A paragraph with a link and a title: <p>This is a paragraph with a link and a title.<a

href="https://www.bing.com" title="Search the web with Bing">Visit Bing</a></p>.

Html Line Break: An HTML line break is a valuable tool for introducing a new line within text

content without initiating a new paragraph. This feature is particularly useful for formatting scenarios

where line breaks are necessary, such as in addresses, poems, or quotes. The HTML line break is

implemented through the <br> tag, which is a standalone or empty tag, meaning it does not require a

corresponding closing tag. For example, if you want to write the following text with line breaks:

Hello World
You can use the <br> tag like this:
<p>Hello<br>World</p>

The <p> tag is a paragraph tag that defines a block of text. The <br> tag is placed inside the <p> tag
to create a line break between the words “Hello” and “World”. The output of this code will look like
this:
Hello World
You can use multiple <br> tags to create more than one line break. For example, if you want to write
the following text with two line breaks:
Hello
World
You can use two <br> tags like this:
<p>Hello<br><br>World</p>
The output of this code will look like this:
Hello
World
You can also use the <br> tag to create line breaks in other elements, such as headings, links, or

images. For example, if you want to write the following text with a line break between the heading

and the link:

Welcome to Bing Search the web with Bing

You can use the <br> tag like this:

<h1>Welcome to Bing<br><a href=“1”>Search the web with Bing</a></h1>

The <h1> tag is a heading tag that defines the most important heading of the web page. The <a> tag

is a link tag that defines a hyperlink to another web page. The href attribute of the <a> tag specifies

the URL of the destination web page, which is the Bing website in this case.

A HTML list serves as a mechanism for showcasing a collection of interconnected items on a

webpage, allowing for their presentation either in a defined sequence or without a specific order.

These lists find application in various contexts, such as crafting menus, delineating procedural steps,

displaying data, or providing a succinct summary of information.

Notably, HTML supports three primary types of lists: Unordered lists, which lack a predefined order

and are marked with symbols like bullets or squares, Ordered lists, structured with a specific

sequence indicated by numbers or other symbols, and Description Lists, tailored for defining terms

and offering corresponding descriptions. This trio of list types contributes to the versatility and

organization of content within HTML documents.

Unordered lists: Unordered lists, characterized by their lack of a predetermined order or sequence,

are visually marked with symbols such as bullets, circles, or squares. The creation of unordered lists

in HTML involves the use of the `<ul>` tag to encapsulate the entire list, while each individual list

item is denoted by the `<li>` tag. For example:

HTML

<ul>

<li>Apple</li>

<li>Banana</li>

<li>Orange</li>

</ul>

This code will produce the following output:

 Apple

 Banana

 Orange
Ordered lists: Ordered lists, in contrast to unordered lists, maintain a distinct order or sequence and

are visually represented with numbers, letters, roman numerals, or alternative symbols. The

construction of ordered lists in HTML involves employing the `<ol>` tag to define the list, while each

individual item within the list is designated by the `<li>` tag. For example:

<ol>

<li>First step</li>

<li>Second step</li>

<li>Third step</li>

</ol>

This code will produce the following output:

1. First step

2. Second step

3. Third step

Description lists: Description lists in HTML are structured using the `<dl>` (description list) tag.

Each term in the list is defined using the `<dt>` (definition term) tag, and its corresponding description

is provided using the `<dd>` (description) tag. This HTML structure is particularly useful for creating

lists that define or explain terms, concepts, or processes. The `<dl>`, `<dt>`, and `<dd>` tags

contribute to clear and organized content presentation on web pages. For example:

<dl>
<dt>HTML</dt>
<dd>A markup language that is used to create web pages</dd>
<dt>CSS</dt>
<dd>A style sheet language that is used to style web pages</dd>
<dt>JavaScript</dt>
<dd>A scripting language that is used to add interactivity and functionality to web pages</dd>
</dl>
This code will produce the following output:

HTML : A markup language that is used to create web pages CSS : A style sheet language that is used

to style web pages JavaScript : A scripting language that is used to add interactivity and functionality

to web pages.

HTML NESTED LIST

WHAT IS A NESTED LIST: A nested list is a list that contains another list as one of its items. A

nested list can be useful for creating outlines, hierarchies, menus, or other structures that require.

There are two types of lists in HTML: ordered and unordered. Ordered lists use numbers or letters

to indicate the order of the items, while unordered lists use bullets or other symbols. To create a

nested list, it needs to use the two types of HTML elements: <ul> and <li>. The <ul> element stands

for unordered list, which means the items are not numbered or ordered. The <li> element stands for

list item, which represents a single item in a list.

<ul>
<li>Animals
<ul>
<li>Mammals
<ul>
<li>Dog</li>
<li>Cat</li>
<li>Elephant</li>
</ul>
</li>
<li>Birds
<ul>
<li>Eagle</li>
<li>Parrot</li>
<li>Penguin</li>
</ul>
</li>
<li>Fish
<ul>
<li>Shark</li>
<li>Salmon</li>
<li>Goldfish</li>
</ul>
</li>
</ul>
</li>
 <li>Plants
<ul>
<li>Flowers
<ul>
<li>Rose</li>
<li>Lily</li>
<li>Sunflower</li>
</ul>
</li>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
</li>

What are the rules for creating a nested list: When building a nested list, there are a few
guidelines that must be adhere to.:
 A nested list must be inside a <li> element of the parent list.
 A nested list must have the same type as the parent list. For example, we cannot nest an
ordered list (<ol>) inside an unordered list (<ul>).
 A nested list can have any number of levels, but it is recommended to keep it simple and
clear for readability and accessibility.
 A nested list can have any content inside its <li> elements, such as text, images, links, or
other HTML elements.
Benefits of using a nested list: A nested list can have several benefits, such as:
 It can help organize and structure the information in a logical and hierarchical way.
 It can make the content easier to read and understand for the users and the browsers.
 It can improve the SEO (search engine optimization) of the web page by providing keywords
and headings for the search engines to index.
 It can enhance the accessibility and usability of the web page by providing navigation and
landmarks for the screen readers and keyboard users.
WHAT IS HYPERLINK: A hyperlink, often known as a link, is a way of connecting two web

sites or resources on the internet. A hyperlink allows the user to navigate to a new place by clicking

on a word, phrase, image, or other element. A hyperlink can also launch an application or open a

new browser window or tab.

Hyperlink are created using the HTML <a> element, also known as the anchor element. The <a>

element has an attribute called href, which stands for hypertext reference and the href attribute

specifies the URL (uniform resource locator) of the destination page or resource. The content inside

the <a> element is the link text, which is the part that will be visible and clickable to the user for

example <a href="https://www.google.com">Visit Google</a> and by default, hyperlinks have the

following appearance in most browsers:

 An unvisited link is underlined and blue

 A visited link is underlined and purple

 An active link is underlined and red

Sometimes, the user may want to open the linked page or resource in a different browser window or

tab, instead of the current one. This can be useful for external links, pop-up windows, or web

applications. To change the target of a hyperlink, the user need to use the word target attribute of the

<a> element. The target attribute can have one of the following values:

 self – Default: Opens the linked page in the same window or tab as the current one.

 blank - Opens the linked page in a new window or tab.

 parent - Opens the linked page in the parent frame of the current one.

 top - Opens the linked page in the top-level frame of the current one.

For example, the following HTML code creates a hyperlink that opens the MDN Web Docs website

in a new window or tab: <a href="https://developer.mozilla.org" target="_blank">Visit MDN Web

Docs</a>.

Aside from linking to online sites or resources, several forms of hyperlinks may be created such as:

Image links - To utilize a picture as a link, the user just inserts the<img> element inside the <a>

element. For example: <a href="https://developer.mozilla.org"> <img src="mdn_logo.png"

alt="MDN Web Docs Logo"></a>.

Email links - To create a link that opens the user's email application and allows the user to send a

new email, use the mailto: protocol in the href attribute, followed by the email address. For
example: <a href="mailto:imuhammedkolawole@gmail.com">Send email to

imuhammedkolawole@gmail.com</a>.

Telephone links - To create a link that opens the user’s phone app and lets the user dial a number,

its uses the tel: protocol in the href attribute, followed by the phone number. For example:

<a href="tel:08038458590">Call 08038458590</a>

Download links - To create a link that prompts the user to download a file, it use the download

attribute of the <a> element, and optionally specify a new file name. For example: <a

href="resume.pdf" download="John_Doe_Resume.pdf">Download resume</a>.

rel - Specifies the relationship between the current page and the destination page or resource. It can

be one or more of the following values: alternate, author, bookmark, external, help, license, next,

nofollow, noreferrer, noopener, prev, search, or tag.

What is an Absolute and Relative Hyperlinks: An absolute hyperlink is a hyperlink that contains

the full address of the destination file or of the web site. E.g

<ahref=“https://www.kwasu.com.ng”>Visit Kwasu</a> this hyperlink contains the full address of

the destination web site, including the protocol (https://) and the domain name

(www.kwasu.com.ng). It will open the Kwasu home page in the same window or tab as the current

document. The link text is “Visit Kwasu”, which is the part that will be visible and clickable to the

user. Absolute hyperlinks are useful when linking to a web page or file that is outside your domain.

Relative hyperlinks, on the other hand, a relative hyperlink is a hyperlink that contains an address

that is relative to the address of the destination file. The address of the destination file is also known

as the hyperlink base. For example, a document has the following hyperlink base: C:\\Documents

and Settings\\ Username \\My Documents. A document that is named “Sales.doc” is located at the

following file path: C:\\Documents and Settings\\ Username \\My Documents\\April\\Sales.doc. The

relative hyperlink to this document contains only the relative address to Sales.doc. Therefore, the

relative hyperlink contains the following address: April\\Sales.doc.

What is the difference between absolute and relative hyperlinks: The main differences between

absolute and relative hyperlinks are:

 Absolute hyperlinks contain the full address of the destination file or web site, such as

https://www.bing.com. While Relative hyperlinks contain an address that is relative to the

current file or web site, such as images/logo.png.

 Absolute hyperlinks are useful for linking to external resources or web pages that are outside

your own domain or web site. While Relative hyperlinks are useful for linking to internal

resources or web pages that are within your own domain or web site.

 Absolute hyperlinks make your web site or file independent and easy to update, but they can

be hard to maintain and debug while Relative hyperlinks make your web site or file portable

and easy to move or copy, but they can cause duplicate content or broken links.