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. [email protected], 08038458590
Course Status: 2 Credit Compulsory

MODULE III (Images, Tables and Forms):

What is an Image HTML: The HTML image <img> tag serves the purpose of embedding an image

into a web page rather than being physically inserted, images are linked to web pages and the <img>

tag creates a space to hold the referenced image. The <img> tag is void of content and solely contains

attributes; it does not require a closing tag. Two essential attributes of the <img> tag are src, which

specifies the image's file path, and alt, which provides alternative text for the image. Image attributes

refer to the properties that alter the appearance and behavior of an image element in HTML. These

attributes are specified within the <img> tag, which is utilized for embedding images in web pages.

Common image attributes include:

src - A source image in HTML refers to an image that is referenced by the src attribute of the <img>

tag. This particular tag is utilized to embed an image within a web page. The source image can be

indicated through a URL, a relative path, or a data URL. Additionally, the <img> tag necessitates the

inclusion of an alt attribute, which serves to provide alternative text for the image in the event that it

cannot be displayed. For example:

html

<img src="https://www.kwasu.com.ng/html/img_kwasu.jpg" alt="Home Page">

Alt: In HTML, the representation of an alternative image is accomplished by utilizing the "alt"

attribute situated within the "img" (image) element. The "alt" attribute functions to supply alternative
text that is exhibited in the event that the image is unable to be loaded or in the circumstances where

the user utilizes a screen reader. Additionally, it serves as a descriptive element for the image, thereby

enhancing accessibility and furnishing users who may lack visual capability with substantial content.

For example, <img src="example.jpg" alt="A beautiful landscape with mountains and a lake">.

width and height - The dimensions of an image in HTML are determined by the width and height

attributes, which indicate the size of the image in pixels. The width attribute governs the horizontal

dimension, while the height attribute governs the vertical dimension. For instance, the HTML code

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600"> renders an image with a

width of 500 pixels and a height of 600 pixels. It is advisable to always designate both the width and

height attributes for images. This aids the browser in reserving the appropriate space for the image

and prevents any alteration of the page layout during the loading process. Nevertheless, should the

width and height attributes remain unspecified, the browser will utilize the natural size of the image,

which corresponds to the actual size of the image file.

style - The image style in HTML pertains to a methodology employed to modify the visual and

interactive characteristics of an image element by leveraging CSS. This can be accomplished through

the utilization of the style attribute or by employing a style sheet to apply diverse CSS properties,

such as width, height, border, filter, among others. To illustrate, a rounded image can be generated by

utilizing the border-radius property. For instance, <img src="img_girl.jpg" alt="Girl in a jacket"

style="border-radius: 8px;">.

Title - An HTML image title is a technique used to incorporate a tooltip containing text into an image

element. This tooltip is a small pop-up box that appears when the mouse pointer hovers over the

image. Its purpose is to provide additional information or context about the image. There are two

common methods of including an HTML image title in HTML: utilizing the title attribute within the

<img> tag. The value assigned to this attribute can be any string. For example: <img src="pic.jpg"

title="This is a picture of a cat">.

Utilizing a <figure> element for the purpose of structuring a photograph within a document, and

employing a <figcaption> element to define a descriptive caption for said photograph. The caption

shall be positioned beneath the image, while simultaneously being displayed as a tooltip when the

cursor hovers over the image. As an illustration:

<figure>

<img src="pic.jpg" alt="Cat">

<figcaption>This is a picture of a cat</figcaption>

</figure>.

id and class - Specify the identifier and the class name of the image, which can be used for styling or

scripting purposes. For example, <img src="smiley.png" alt="Smiley face" id="smiley1"

class="smiley"> assigns the id “smiley1” and the class “smiley” to the image, which can be referenced

by CSS selectors or JavaScript functions.

loading - The loading attribute plays a crucial role in determining the loading behavior of an image

within a web page. It offers two distinct options: "eager" and "lazy". By default, the "eager" value is

assigned, which signifies that the image should be loaded promptly. Conversely, the "lazy" value

instructs the browser to defer the image loading until it is near the user's viewport. To illustrate,

consider the following code snippet: <img src="smiley.png" alt="Smiley face" loading="lazy">. This

particular example demonstrates the utilization of the "lazy" value, delaying the image loading until

the user has scrolled down the page to view it. This approach can significantly optimize the

performance and overall user experience of the web page.

srcset and sizes - The <source> element contains a srcset attribute that specifies the URL of the image

file, and a media attribute that specifies the media condition. The browser will select the first <source>

element that matches the current media condition, and utilize the corresponding image file for the

<img> element. In the event that none of the <source> elements match, the browser will employ the

default image file specified by the src attribute of the <img> element. For instance,

<picture>
<source srcset="smiley.webp" type="image/webp">

<source srcset="smiley.jpg" type="image/jpeg">

<img src="smiley.png" alt="Smiley face">

</picture> provides three image files with different formats: WebP, JPEG, and PNG. The browser

will employ the WebP image if it is compatible, otherwise it will utilize the JPEG image. If neither

of them is supported by the browser, the PNG image will be used. This can enhance the compatibility

and efficiency of the webpage across various browsers and devices.

picture and source - In HTML, the <picture> element serves the purpose of presenting various

iterations of an image based on factors such as the browser, screen size, or device pixel ratio. Within

the <picture> element, the <source> element is employed to indicate one or multiple image sources

along with their corresponding descriptors. Conversely, the <img> element functions as a fallback

image in case none of the sources prove to be suitable. An illustrative instance of utilizing the

<picture> and <source> elements to showcase a high-density and standard-resolution image is

presented below.

<picture>

<source srcset="logo.png, logo-1.5x.png 1.5x" />

<img src="logo.png" alt="MDN Web Docs logo" height="320" width="320" />

</picture>

What is an illustrative image in Html: An illustrative image serves the purpose of enhancing the

visual appeal or conveying meaning within a web page. This is achieved by embedding it into the

HTML document through the <img> element, which necessitates the inclusion of two attributes: src

and alt. The src attribute denotes the URL of the image, while the alt attribute offers alternative text

to describe the image in situations where it cannot be viewed or accessed by certain users. To

illustrate, consider the following example: <img src="images/dinosaur.jpg" alt="Dinosaur">.

Illustrative images can take various forms and may include photographs, diagrams, charts,

infographics, icons, and other visual elements. They play a crucial role in making web content more

engaging and understandable for users. Examples of illustrative images in HTML might include:

Photographs: Adding real-world images to illustrate concepts or provide visual examples. <img

src="example-photo.jpg" alt="A demonstration of a concept using a photograph">, Diagrams and

Charts: Using graphical representations to explain data or processes, <img src="process-

diagram.png" alt="A diagram illustrating a step-by-step process"> etc.

What is a background Image in Html: In HTML, a background image refers to an image that is set

as the background of an HTML element or the entire web page. This image is used to enhance the

visual appeal of the webpage by providing a backdrop or atmosphere. Background images are

commonly applied to elements such as the body of the HTML document, a section, a div, or any other

container element. To set a background image in HTML, the CSS (Cascading Style Sheets)

background-image property is used. Here is a basic example:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

body {

background-image: url('background.jpg');

background-size: cover; /* Ensures the image covers the entire background */

background-repeat: no-repeat; /* Prevents the image from repeating */

background-position: center; /* Centers the image within the body */

}
 /* Additional styling for content */

.content {

color: white;

text-align: center;

padding: 50px;

</style>

<title>Background Image Example</title>

</head>

<body>

<div class="content">

<h1>Welcome to My Website</h1>

<p>This is some content on the page.</p>

</div>

</body>

</html>

In this example above:

The background-image property is used to specify the URL of the background image.

 background-size: cover; ensures that the background image covers the entire background.

 background-repeat: no-repeat; prevents the image from repeating.

 background-position: center; centers the image within the body.

There are various methods to incorporate a background image in HTML, which vary depending on

the desired appearance on the element. For instance, by employing CSS properties like background-

size, background-position, background-repeat, and background-attachment. Here are some examples

of how to add a background image in HTML, using different CSS properties: To add, one can regulate

the size, position, repetition, and attachment aspects of the background image. Below are a few
examples illustrating different CSS properties used to add a background image in HTML: To include

a background image that spans across the entire page, use the following code:

<style>

body {

background-image: url("img_girl.jpg");

</style>

This code snippet allows the image file named "img_girl.jpg" to be set as the background image for

the body element. It is important to ensure that the image file is located in the same folder as the

HTML file or to provide the accurate file path. To achieve a background image that covers the entire

element without repeating or stretching, the following code can be utilized:

<style>

body {

background-image: url("img_girl.jpg");

background-size: cover;

</style>

This will assign the value "cover" to the background-size property, indicating that the image will be

proportionally scaled to fit the element. To achieve a fixed background image that remains unaffected

by page scrolling, you can utilize the following code:

<style>

body {

background-image: url("img_girl.jpg");

background-attachment: fixed;

}
</style>

The difference between background image and illustrative images is mainly semantic and functional.

Background images are used to enhance the appearance or layout of an element, such as a <div> or a

<body> and are not part of the content. Illustrative images are used to convey information or meaning,

such as a logo, a diagram, or a photo, and are part of the content.

Background images are set using the CSS background-image property, while illustrative images are

embedded using the HTML <img> tag.

What is Html Table: A table in HTML serves as a means to systematically arrange and present data

in rows and columns. Tables prove to be advantageous when presenting structured information with

interrelated data types. For instance, tables can be utilized to exhibit the names and ages of various

individuals or the prices and characteristics of diverse products.

To create a table in HTML, you need to use the following elements:

<table>: This element defines the table and contains all the other elements related to the table.

<tr>: This element defines a table row, which can have one or more table cells.

<td>: This element defines a table cell, which can contain any HTML content, such as text, images,

links, etc.

<th>: This element defines a table header, which is a special type of table cell that usually appears at

the top or left of the table. Table headers are used to label the columns or rows of the table and make

them easier to understand.

<!DOCTYPE html>
<html>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
 </tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>

ADVANTAGES OF HTML TABLES:

 They can organize and display data in rows and columns, making it easy to read and compare.

 They can contain various types of content, such as text, images, lists, links, and other tables.

 They can be styled with CSS to enhance their appearance and functionality.

 They can be accessed by screen readers and other assistive technologies, improving the

accessibility of the web page.

DISADVANTAGES OF HTML TABLES:

 Inefficient and messy code: HTML tables require a lot of tags and attributes to create a grid

structure, which makes the code hard to read and debug. It also increases the file size and

loading time of the web page.

 Lack of flexibility and responsiveness: HTML tables are not designed to adapt to different

screen sizes and devices, which can affect the user experience and accessibility of the web

page. It is also difficult to change the layout or design of the web page using tables, as it

requires modifying the entire table structure.

 Poor semantic meaning and SEO: HTML tables do not convey the logical structure and

meaning of the web page content, which can confuse the search engines and the users. Tables

are meant for displaying tabular data, not for layout purposes. Using tables for layout can also

affect the ranking and visibility of the web page in the search results.
Definition of an HTML Table attributes: A table attribute is a property or characteristic of a table

that defines its appearance or behavior. For instance, the border attribute defines the width of the

border surrounding the table cells, while the align attribute specifies the horizontal alignment of the

table within the document. Typically, table attributes are indicated within the opening <table> tag of

an HTML document. HTML table attributes serve the purpose of altering the presentation and

functionality of tables. Several commonly employed attributes include:

BORDER: This attribute determines the magnitude of the border surrounding the table and its cells.

The value can be expressed in pixels or as a percentage of the table's width. For instance, one may

specify border="1" or border="10%". For border styling via CSS, it is recommended to utilize the

border property instead.

CELLPADDING: This attribute determines the spacing between the content of a cell and its border.

The value can be specified in pixels or as a percentage of the cell width. For instance, cellpadding="5"

or cellpadding="10%". To specify the padding using CSS, the padding property should be employed

instead.

CELL SPACING: This attribute determines the spacing between the cells of a table. The value can

be specified in pixels or as a percentage of the table width. For instance, cellspacing="10" or

cellspacing="5%". To define the spacing using CSS, employ the border-spacing property instead.

COLSPAN: This attribute specifies the number of columns a cell should span. For example, <td

colspan="2"> means the cell will occupy two columns.

ROWSPAN: This attribute specifies the number of rows a cell should span. For example, <td

rowspan="3"> means the cell will occupy three rows.

WIDTH: This attribute sets the width of the table or a cell. It can be either a fixed value in pixels or

a percentage of the available space. For example, <table width="500"> means the table will have a

width of 500 pixels, while <td width="50%"> means the cell will take up half of the table width.

BGCOLOR: This property determines the background color of the table. The value can be specified

as a color name, a hexadecimal code, or an RGB value. For instance, bgcolor="red",

bgcolor="#FF0000", or bgcolor="rgb(255,0,0)". To set the background color using CSS, it is

recommended to use the background-color property instead.

ALIGN: This attribute is used to horizontally align the table on the page. The value can be left, right,

or center. For instance, align="center". To align the table using CSS, the margin property should be

utilized instead.

DEFINITION OF A NESTED TABLE IN HTML: An HTML nested table refers to a table that is

constructed within another table within the same webpage. The inner table is positioned between the

<td> and </td> tags of the outer table. A nested table proves useful for presenting intricate data or

layouts. It is important to note that a nested table does not adopt the formatting of the outer table and

necessitates its own attributes. It is generally discouraged to employ nested tables as they tend to

complicate the markup and diminish accessibility. An example of a nested table in HTML:

<table>

<tr>

<td>Outer table cell 1</td>

<td>Outer table cell 2</td>

<td>Outer table cell 3</td>

</tr>

<tr>

<td colspan="3">

<table>

<tr>

<td>Inner table cell 1</td>

<td>Inner table cell 2</td>

</tr>

<tr>

<td>Inner table cell 3</td>

 <td>Inner table cell 4</td>

</tr>

</table>

</td>

</tr>

</table>

What is HTML Form: A form in HTML refers to a designated section within a document that

facilitates the gathering of user input and subsequent transmission to a server for processing. This

component can encompass a variety of input elements, including but not limited to text fields, buttons,

checkboxes, and radio buttons. The creation of a form is accomplished through the utilization of the

<form> element, which possesses multiple attributes to specify the action, method, and encoding

associated with the form data. Some of the common attributes for HTML forms are:

The action attribute specifies the URL of the file that will handle the form data when the form is

submitted. For instance, <form action="/action_page.php"> will send the form data to a file named

action_page.php on the server.

The method attribute specifies the HTTP method to be used when sending the form data. The two

most common methods are get and post. The get method appends the form data to the URL as

name/value pairs, while the post method sends the form data inside the body of the HTTP request.

The post method is preferred for sending large or sensitive data. For example, <form method="post">

will use the post method to send the form data.

The target attribute specifies where to display the response that is received after submitting the form.

The target attribute can have values such as _blank, _self, _parent, _top, or a frame name. The default

value is _self, which means that the response will open in the current window. For instance, <form

target="_blank"> will open the response in a new window or tab.

The autocomplete attribute specifies whether the browser should automatically fill in the values of

the input fields based on previous entries by the user. The autocomplete attribute can have values such

as on or off. The default value is on, which means that the browser will try to autocomplete the input

fields. For instance, <form autocomplete="off"> will disable the autocomplete feature for the form.

The form attribute specifies the id of the form that the input element belongs to. This attribute can

be used to associate an input element with a form that is not its parent element. For instance, <input

type="text" form="myForm"> will belong to the form with id myForm, even if it is outside the form

element.

The name attribute denotes the name of the input element, which serves as an identifier for the input

value when transmitting form data to the server. For instance: <input name="fname">

The type attribute designates the type of the input element, which can take on various values such

as text, radio, checkbox, submit, button, etc. Each type possesses its own visual representation and

functionality. For example: <input type="text"> or <input type="radio">

The value attribute specifies the initial or default value of the input element. For example: <input

value="John">

The placeholder attribute provides a hint or brief description of the expected input value. It is shown

within the input field until the user enters some data. For example: <input placeholder="Enter your

name">

The required attribute indicates that the input field must be completed before submitting the form.

It can be set to either true or false. For example: <input required="true">

The disabled attribute specifies that the input element should be disabled, meaning it cannot be

edited or clicked. It can be set to either true or false. For example: <input disabled="true">

The readonly attribute specifies that the input element should be read-only, meaning it cannot be

edited but can be clicked or copied. It can be set to either true or false. For example: <input

readonly="true">
The checked attribute designates that the input element should be pre-selected or checked when the

page loads. This attribute is only applicable to radio buttons and checkboxes. It can be set to either

true or false. For example: <input type="radio" checked="true">

The id attribute provides a unique identifier for the input element. It is used to associate the input

element with a <label> element, which describes the input. For example: <input id="fname"> and

<label for="fname">First name:</label>

The class attribute specifies one or more class names for the input element. It is used to apply CSS

styling to the input element. For example: <input class="form-control">

Here is an example of a simple HTML form that asks the user to enter their name and email address:

<form>

<label for="name">Name:</label>

<input type="text" id="name" name="name"><br>

<label for="email">Email:</label>

<input type="email" id="email" name="email"><br>

<input type="submit" value="Submit">

</form>

DEFINITION OF INPUT TAGS: An input tag in HTML is an element type that facilitates user

data input in a web form. It is utilized to create interactive controls for web-based forms, enabling

users to provide data. The input tag contains a type attribute, which determines the display format and

data type that the input element can accommodate. For instance, the following code snippet will

generate a text field for users to enter their name: <input type="text" id="name" name="name">.

There exist various types of input elements, including text, button, checkbox, radio, file, among

others. Each type possesses its own syntax, attributes, and behavior. The following are examples of

input tags namely:

Text: A text field in HTML is an input element that facilitates the input of textual data by the user. It

is described by the <input type="text"> tag and encompasses several attributes that afford
customization of its visual presentation and operational characteristics. These attributes include id,

name, value, placeholder, size, maxlength, readonly, and disabled, which respectively serve to specify

the identifier, name, default value, instructional placeholder, dimensions, maximum length, read-only

state, and disabled state of the text field. A text field is different from a text area, which is another

input element that allows the user to enter multiple lines of text.

A text area is defined by the <textarea> tag, which has similar attributes to the text field, but also

has rows and cols attributes to specify the height and width of the text area in characters. For iinstance,

the following code;

<form>

<label for="name">Name:</label>

<input type="text" id="name" name="name" placeholder="Enter your name"><br>

<label for="message">Message:</label>

<textarea id="message" name="message" rows="4" cols="40" placeholder="Enter your

message"></textarea><br>

<input type="submit" value="Send">

</form>.

Radio Button: A radio button in HTML is an input element that enables the user to choose a single

option from a set of associated options. It is defined by the <input type="radio"> tag, which includes

a name attribute to designate the group name and a value attribute to specify the option value. It is

important to note that only one radio button in a group can be selected concurrently. For example

<input type="radio" id="male" name="gender" value="male">

<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="female">

<label for="female">Female</label>

<input type="radio" id="other" name="gender" value="other">

<label for="other">Other</label>
The code presented above entails the creation of three radio buttons labeled as "gender", each

possessing distinct values namely "male", "female", and "other". It is crucial to note that only a single

option can be selected by the user at any given time. To establish a link between the text and its

corresponding radio button, the <label> tag is employed. The implementation of radio buttons proves

advantageous when the objective is to constrain the user to selecting a sole option from a

predetermined set of alternatives.

Checkboxes Input Tag: A check box input tag in HTML refers to an input element that permits the

user to choose or unchosen one or multiple options from a given list. This specific input element is

characterized by the <input type="checkbox"> tag, which includes a name attribute to specify the

input's name, as well as a value attribute to determine the option's value. Furthermore, a check box

can possess a checked attribute to denote its default selection status.

For example: <input type="checkbox" id="agree" name="agree" checked>

<label for="agree"> I agree to the terms and conditions</label>.

This code snippet generates a checkbox element with the identifier and name of "agree", accompanied

by a corresponding label. The inclusion of the checked attribute denotes that the checkbox will be

pre-selected. The checkbox's value is either "on" or the value specified in the value attribute, if

provided. Notably, the checkbox's value will only be transmitted to the server if it is checked.

A password input tag: A password input tag in HTML is a way to create a text field that allows the

user to enter a password securely. The text is masked with symbols, such as dots or asterisks, so that

it cannot be read by others. The password input tag is created by using the `<input>` tag with the

`type` attribute set to `"password"`. For example: html <input type="password" id="pwd"

name="pwd">, this code will create a password field with the id and name of "pwd". The user can

type any text value into this field, but it will be hidden from view. The value of the password field

will be submitted to the server along with the name attribute when the form is submitted.

Some of the attributes that can be used to customize the password input tag are:
Maxlength: This attribute specifies the maximum number of characters that the user can enter into

the password field. It must be a positive integer value. If the user enters more characters than the

maxlength, the input will be invalid.

Minlength: This attribute specifies the minimum number of characters that the user must enter into

the password field. It must be a non-negative integer value that is smaller than or equal to the

maxlength. If the user enters fewer characters than the minlength, the input will be invalid.

Pattern: This attribute specifies a regular expression that the value of the password field must match

to be valid. The regular expression must follow the JavaScript syntax. For example, `pattern="[A-Za-

z0-9]{8,}"` means that the password must contain at least 8 alphanumeric characters.

Required: This attribute indicates that the user must enter a value into the password field before

submitting the form. If the password field is empty, the input will be invalid.

Disabled: This attribute indicates that the user cannot interact with the password field. The password

field will be grayed out and its value will not be submitted to the server.

Select Menu HTML Tags: A select menu tag in HTML is a way to create a drop-down list that

allows the user to choose one or more options from a set of predefined values. It is created by using

the <select> tag, which contains one or more <option> tags as its children. Each <option> tag

represents an option in the list, and has a value attribute that specifies the data to be submitted to the

server when the option is selected. Optionally, you can also use the <optgroup> tag to group related

options together under a label. Here is an example of a select menu tag in HTML:

<label for="cars">Choose a car:</label>

<select name="cars" id="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="mercedes">Mercedes</option>

<option value="audi">Audi</option>

</select>
The above code will create a drop-down list with four options: Volvo, Saab, Mercedes, and Audi. The

user can select one of them, and the value of the selected option will be sent to the server as the value

of the name attribute, which is “cars” in this case. The label tag is used to associate the drop-down

list with a descriptive text for accessibility purposes. The id attribute is used to identify the drop-down

list in the document.

Some of the attributes that you can use to customize the select menu tag are:

Multiple: This Boolean attribute allows the user to select more than one option at a time. When this

attribute is present, the drop-down list will be displayed as a scrolling list box instead of a single-line

menu.

Size: This attribute specifies the number of visible options in the drop-down list. If the multiple

attributes are also present, this attribute determines the height of the list box. If the multiple attributes

are not present, this attribute has no effect unless the value is 1, in which case the drop-down list will

be displayed as a text box.

Required: This Boolean attribute indicates that the user must select an option before submitting the

form. If this attribute is present, the browser will display a validation message if the user tries to

submit the form without selecting an option.

Disabled: This Boolean attribute indicates that the user cannot interact with the drop-down list. The

drop-down list will be grayed out and its value will not be submitted to the server.

Difference Between Text field and Password tags in Html

A text field and a password field are both types of input elements in HTML that allow the user to

enter text data. Some of the main differences are:

 A text field shows the user’s input as plain text, while a password field masks the user’s input

with a symbol, usually a dot or an asterisk. This is to prevent other people from seeing the

user’s password or other sensitive information.

  A text field allows the user to copy and paste the input value, while a password field does not.

This is to prevent the user from accidentally exposing their password or other sensitive

information to other applications or websites.

 A text field can have different types of validation, such as email, number, url, etc., while a

password field only accepts text values. This is to allow the user to enter different kinds of data

in a text field, depending on the purpose of the input.

 A text field can have a default value, while a password field cannot. This is to avoid displaying

the user’s password or other sensitive information by default.

Definition of Cascading Style Sheet (CSS): CSS (Cascading Style Sheets) is a stylesheet language

that is widely used in web development for the purpose of defining the presentation and visual

appearance of HTML or XML documents. It serves the purpose of separating the structural elements

(HTML) from the presentational aspects (CSS) of a web page, allowing web designers to apply a

variety of styles, including but not limited to colors, fonts, and spacing, to HTML elements. The

utilization of CSS empowers developers to create visually appealing and consistently-designed

layouts across a multitude of web pages, thus enriching the overall user experience and streamlining

the maintenance and updating process of website designs. As an indispensable tool in web

development, CSS offers the means to exert control over the positioning, styling, and overall

presentation of elements within a website, thereby contributing to the creation of professional and

cohesive web interfaces.

CSS works by applying rules to HTML elements that match certain selectors, such as element names,

classes, or ids. Each rule consists of one or more declarations, which specify the properties and values

that affect the selected elements. For example, the following CSS rule sets the text color of all

paragraphs to red:
css

p{

color: red;

The whole structure is called a ruleset, (The term ruleset is often referred to as just rule.) Note the

names of the individual parts:

Selector: This is the HTML element name at the start of the ruleset. It defines the element(s) to be

styled (in this example, <p> elements). To style a different element, change the selector.

Declaration: This is a single rule like color: red; It specifies which of the element's properties you

want to style.

Properties: These are various methods of styling an HTML element. (In this particular instance, color

is a property of the <p> elements.) In CSS, one selects the properties to be affected within a rule.

Property value: Situated to the right of the property—after the colon—lies the property value. This

determines one particular appearance among numerous possibilities for a given property. (For

instance, there exist various color values other than red). In addition to the selector, it is necessary for

each ruleset to be enclosed in curly braces ({}). In each declaration, a colon (:) must be employed to

separate the property from its value or values. Furthermore, within each ruleset, a semicolon (;) should

be used to separate each declaration from the subsequent one.

There are various methods available for incorporating CSS into HTML documents, including inline

styles, internal style sheets, external style sheets, or imported style sheets. The hierarchical order and

placement of the CSS sources can have an impact on how the styles are implemented, as per the

cascade and specificity rules. To incorporate CSS into HTML, it is necessary to establish a linkage

between the style sheet and the HTML document by employing one of the following methods.:
- Inline styles: Inline style in CSS refers to the technique of directly applying CSS styling to an

HTML element using the style attribute. This method allows for the application of a distinct style to

an individual HTML element, while avoiding any impact on other elements or the need for a separate

CSS file. For instance, <p style="color: red; font-size: 20px;">This is a paragraph with inline

style.</p>

- Internal style sheets: An internal style in CSS refers to a technique employed to apply styles

exclusively to a specific HTML document. This is achieved by incorporating a <style> element within

the <head> section. By utilizing this approach, it becomes feasible to customize the visual properties

of the various elements present on said page, including but not limited to color, font, size, alignment,

and more. To illustrate, an internal style could be employed to render all headings in blue and all

paragraphs in red. Nonetheless, it is important to acknowledge that internal styles suffer from certain

drawbacks, namely increased file size, reduced code reusability, and the inherent limitations with

regard to style management across multiple pages. The ensuing example provides a straightforward

demonstration of an internal style implemented via CSS:

<!DOCTYPE html>
<html>
<head>
<style>
/* Internal CSS */
h1 {
color: blue;
text-align: center;
}
p{
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
- External style sheets: An external style in CSS is a method of applying styles to HTML elements

through the use of a distinct file with a .css extension. External styles prove advantageous in

establishing consistent and reusable styles across numerous web pages. To establish a linkage between

an external style sheet and an HTML document, it is necessary to utilize the <link> element within

the <head> section of the HTML file. Here is an example of how to link an external style sheet to an

HTML document:

html

<head>

<link rel="stylesheet" href="style.css">

</head>

Selecting by classes: The utilization of class selection in CSS involves the application of style rules

to HTML elements that possess a specific class attribute. The purpose of a class attribute is to group

elements that share common characteristics or functionality. For example, a class can be used to

centrally align all headings on a webpage or modify the color of all the links. To select elements by

class in CSS, one must utilize a period (.) followed by the class name. For instance, .center selects all

elements that have class="center". Moreover, it is possible to combine the class selector with an

element selector to achieve a higher level of specificity. For instance, p.center selects only the <p>

elements that have class="center". The following example illustrates the practical implementation of

class selection in CSS:

/* This will select all <p> elements with class="center" */
p.center {
text-align: center;
color: blue;
}
/* This will select all elements with class="large" */
.large {
font-size: 24px;
}

What is Selecting by Identity: Selecting by identity in CSS involves utilizing the id attribute of an

HTML element to apply a distinct style to said element. The id attribute is exclusive to each page,

thereby necessitating the id selector to choose a single element. To select an element with a particular

id, simply prepend the element's id with a hash (#) character. For instance, #demo would successfully

select the element with id="demo". For example, the following color add color yellow to the first

name.

<!DOCTYPE html>
<html>
<head>
<style>
#firstname {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Demo of the #id selector</h1>
<div class="intro">
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>

What is Box Model: The CSS box model is a fundamental concept that elucidates how the

dimensions and structure of an element are influenced by its content, padding, border, and margin

attributes. This model can be represented as a box encompassing each HTML element, wherein
individual layers correspond to specific properties. To illustrate this concept, consider the following

exemplar of the box model: <!DOCTYPE html>

<html>

<head>

<style>

div {

background-color: lightgrey;

width: 300px;

border: 15px solid green;

padding: 50px;

margin: 20px;

</style>

</head>

<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of:

borders, padding, margins, and the actual content.</p>

<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px

green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex

ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu

fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt

mollit anim id est laborum.</div>

</body>

</html>

The box model diagram shows the following parts of the box:
Content: This is the innermost part of the box where the actual content of the element, such as text

or images, is displayed. The width and height properties determine the size of this area.

Padding: This refers to the space between the content and the border of the element. The padding

property allows for setting the size of this space individually for each side (top, right, bottom, left) or

for all sides simultaneously. The padding is transparent and does not affect the background color or

image of the element.

Border: This is the line that surrounds the padding and content of the element. The border property

allows for specifying the width, style, and color of this line for each side or for all sides at once. The

border is considered part of the element's background and may have a different color or image

compared to the content or padding areas.

Margin: This refers to the space outside the border of the element. The margin property allows for

setting the size of this space individually for each side or for all sides simultaneously. The margin is

transparent and does not affect the background color or image of the element or its parent element. It

is used to create space between the element and other elements on the page.

Coloring in CSS: Utilizing color in CSS serves as a means to enhance the visual appeal of web pages.

There exist different methods to specify colors in CSS, including:

Color names: One can employ any of the 140 predefined color names supported universally by

browsers, such as red, blue, green, and others.

Hexadecimal values: It is possible to utilize a six-digit hexadecimal value in the format #rrggbb,

where rr, gg, and bb represent the red, green, and blue components of the color, respectively. Each

component's range is from 00 to ff (0 to 255 in decimal). For instance, #ff0000 represents red, #00ff00

represents green, and #0000ff represents blue.

RGB values: By using the rgb() function, one can specify a color as a combination of red, green, and

blue intensities. Each intensity level ranges from 0 to 255. For example, rgb(255, 0, 0) represents red,

rgb(0, 255, 0) represents green, and rgb(0, 0, 255) represents blue.

RGBA values: The rgba() function allows for the specification of a color as a combination of red,

green, blue, and alpha (opacity) values. The red, green, and blue values range from 0 to 255, while

the alpha value ranges from 0 to 1. For instance, rgba(255, 0, 0, 0.5) represents a semi-transparent

red, rgba(0, 255, 0, 1) represents a fully opaque green, and rgba(0, 0, 255, 0) represents a fully

transparent blue. CSS provides the ability to apply color to various elements and properties, such as

text, background, border, shadow, and others.

There are various methods to specify colors in CSS, including the utilization of color names,

hexadecimal values, RGB values, HSL values, and other alternatives. The syntax for implementing

color relies on the chosen property for applying the color. For instance, if there is a desire to modify

the text color of a paragraph, the color property can be employed in the following manner:

p{

color: blue; /* using a color name */

color: #0000ff; /* using a hexadecimal value */

color: rgb(0, 0, 255); /* using an RGB value */

color: hsl(240, 100%, 50%); /* using an HSL value */

If one desires to alter the background color of an element, the background-color property can be

employed in the following manner:

div {

background-color: green; /* using a color name */

background-color: #00ff00; /* using a hexadecimal value */

background-color: rgb(0, 255, 0); /* using an RGB value */

background-color: hsl(120, 100%, 50%); /* using an HSL value */

}
Floating in CSS: The CSS float property is utilized to specify the desired floating behavior of an

element. This property can be assigned one of the following values:

left: This value causes the element to float towards the left of its container.

right: This value causes the element to float towards the right of its container.

none: This value indicates that the element should not float, and instead be displayed in its original

position within the text. This value is the default setting.

- inherit: This value allows the element to inherit the float value from its parent element.

In its most basic usage, the float property is employed to wrap text around images. To illustrate, the

following code snippet demonstrates the use of the float property to make an image float towards the

right within a textual context:

img {

float: right;

What is Positioning in CSS: Positioning in CSS is a fundamental aspect of web page design as it

allows for the precise placement and arrangement of elements. The position property plays a crucial

role in determining the type of positioning method employed for an element. This can range from

static positioning, which is the default behavior, to more dynamic options such as relative, fixed,

absolute, or sticky positioning. Each of these positioning values has distinct implications for how an

element interacts with the normal flow of the document, the viewport, as well as its surrounding parent

and sibling elements. To further refine the element's position, the top, right, bottom, and left properties

are leveraged to adjust its placement along both the vertical and horizontal axes.

Additionally, the z-index property serves as a means to modify the stacking order of the element

relative to other positioned elements. This enables designers to control the layering and visual

hierarchy of elements on the web page, enhancing the overall user experience. For instance the

following code will produce the following output.

/* This element is positioned according to the normal flow of the document */
div.static {
position: static;
border: 3px solid #73AD21;
}
/* This element is positioned relative to its normal position */
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
/* This element is positioned relative to the viewport and stays in the same place even if the page is
scrolled */
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}

/* This element is positioned relative to its closest positioned ancestor or the initial containing block
*/
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
/* This element is positioned according to the normal flow of the document, and then offset relative
to its nearest scrolling ancestor and containing block */
div.sticky {
position: sticky;
top: 50px;
border: 3px solid #73AD21;
}

Definition of Border in CSS: In the realm of CSS, the border property serves the purpose of
establishing a defined border surrounding an element. This property grants the ability to set the desired
style, color, and width of the border. It is applicable to a multitude of HTML elements, encompassing
a <div>, <p>, <table>, and even an <img>. The border property can be specified through the
utilization of shorthand syntax, wherein the style, width, and color values are consolidated within a
singular declaration. An exemplification of this can be observed in the following example:
.example-border {
border: 1px solid red;
}
In this instance, the .example-border class is defined, and the border property is established to a solid
red border with a width of 1 pixel. Alternatively, it is possible to indicate the individual constituents
of the border property independently. Here is an illustration:
.example-border {
border-style: dashed;
border-width: 2px;
border-color: blue;
}
In this particular case, the border-style property is employed to establish a dashed border style, the
border-width property determines a width of 2 pixels, and the border-color property designates the
color as blue. It is also possible to specify alternative border styles such as dotted, double, groove,
ridge, inset, outset, and more. Additionally, you can use the border-radius property to round the
corners of the border. Here's an example that combines different border properties others. Moreover,
the border-radius property allows for the rounding of border corners. An illustrative example that
amalgamates various border properties is provided below:
.example-border {
border-style: dashed;
border-width: 2px;
border-color: blue;
border-radius: 5px;
}
The font property is utilized to determine the visual presentation of text on a webpage. It enables the
specification of different attributes of the font, including the typeface, size, weight, style, and
additional characteristics. The font property serves as a concise mechanism that consolidates
numerous font-related properties into a singular declaration.
The syntax for the font property is as follows:
selector {
font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
}
Let's break down each component of the font property:
Font Style: This component determines the style of the font, such as normal, italic, or oblique. It is
represented by the font-style property. The available options include:
 normal: This displays the text in a regular style.
 italic: This displays the text in an italicized style.
 oblique: This displays the text in an oblique style, which is similar to italic but with a different
slant angle.

Font Variant: This component defines the variant of the font, such as normal or small caps. It is
indicated by the font-variant property. The possible choices are:
 normal: This displays the text in a regular variant.
 small-caps: This displays the text in small capital letters.

Font Weight: This component determines the thickness (weight) of the font, such as normal, bold, or
a specific numeric value. It is represented by the font-weight property. The available options are:
 normal: This displays the text with a regular weight.
 bold: This displays the text in a bold weight.
 Numeric values: Specific numeric values, such as 100, 200, 300, ..., 900, can also be used to
define different levels of font thickness.

Font Size: This component determines the size of the font. It is indicated by the font-size property.
The available choices are:
Absolute size values: These values can be specified using units like pixels (px), points (pt), em, rem,
etc.
Relative size values: These values can be specified using terms like larger, smaller, xx-small, x-small,
small, medium, large, x-large, xx-large, etc.

Line Height: This component determines the height of each line of text. It is represented by the line-
height property. The available options include:
Normal: This displays the text with the default line height.
Numeric values: Specific numeric values can be used to define a particular line height.
Relative values: Relative values like normal, inherit, initial, etc., can also be utilized.

Font Family: This component determines the font family to be used for the text. It is represented by
the font-family property. Multiple font families can be specified, separated by commas, as a fallback
option. The browser will attempt to apply the first font in the list, moving on to the next if it is
unavailable, until a suitable font is found.
Now, let us examine an example that illustrates the usage of the font property:
p{
font: italic small-caps bold 16px/1.5 Arial, sans-serif;
}
In this example:
 font-style is set to italic.
 font-variant is set to small-caps.
 font-weight is set to bold.
 font-size is set to 16px.
 line-height is set to 1.5.
font-family is set to Arial, followed by a fallback of generic sans-serif fonts.
This will result in the paragraphs (<p>) on the web page being displayed in italicized style, with small
capitals, in bold weight, with a font size of 16 pixels, a line height of 1.5 times the font size, and using
the font family "Arial" if available. If Arial is not available, the browser will use a generic sans-serif
font as a fallback.

Text Alignment: In CSS (Cascading Style Sheets), the concept of alignment pertains to the
positioning of elements within their containing elements, as well as the alignment of text within a text
block. CSS offers a variety of properties that can be utilized to control alignment.
Let us delve into some commonly employed alignment properties in CSS, accompanied by illustrative
examples:
text-align: This particular property is used to align the horizontal position of text within its container.
It can be applied to both block-level elements and inline elements. The potential values are as follows:
i. left: Aligns the text to the left.
ii. right: Aligns the text to the right.
iii. center: Horizontally centers the text.
iv. justify: Adjusts the spacing between words in a line in order to justify both the left and right
edges.
p{
text-align: center;
}
In this example, the text within <p> (paragraph) elements will be centered horizontally.
Vertical Alignment: This property serves the purpose of vertically aligning inline or inline-block
elements within their container elements. It can also be employed to align table cells. The available
values are:
 baseline: Aligns the element's baseline with the baseline of its parent.
 top: Aligns the top of the element with the top of the tallest element on the line.
 middle: Aligns the middle of the element with the middle of the parent element.
 bottom: Aligns the bottom of the element with the bottom of the parent element.
 text-top: Aligns the top of the element with the top of the parent's font.
 text-bottom: Aligns the bottom of the element with the bottom of the parent's font.
img {
vertical-align: middle;
}
In this example, the images will be vertically aligned to the middle within their containing elements.

justify-content: This property is employed to align flex items along the main axis of a flex container.
It is applicable when utilizing flexbox for layout purposes. The potential values include: flex-start:
Aligns items to the start of the flex container.
 flex-end: Aligns items to the end of the flex container.
 center: Centers items along the main axis of the flex container.
 space-between: Distributes items evenly along the main axis, with the first item at the start and
the last item at the end.
 space-around: Distributes items evenly along the main axis, with equal space around them.
 space-evenly: Distributes items evenly along the main axis, with equal space between them.
Example:
css
Copy
.container {
display: flex;
justify-content: center;
}
In this example, the flex items within the container will be horizontally centered.
align-items: This property serves the purpose of vertically aligning flex items within a flex container,
specifically in the context of flexbox layout. The available values for this property are:
 flex-start: Aligns items to the start of the flex container.
 flex-end: Aligns items to the end of the flex container.
 center: Centers items vertically within the flex container.
 baseline: Aligns items such that their baselines align.
 stretch: Stretches items to fill the flex container vertically.
Example:
css
Copy
.container {
display: flex;
align-items: center;
}
In this example, the flex items within the container will be vertically centered.
These are just a few examples of alignment properties in CSS. There are other alignment properties
available, such as float, position, and margin properties, which can also influence the alignment of
elements on a web page, depending on the specific layout requirements.