…

• Web development is the process of creating websites for various purposes such as information

sharing and facilitating online businesses.

World Wide Web

World Wide Web (www), commonly known as the Web, is one of the most important services of the

Internet.

The Internet is a network of networks that the Web runs on. The Web is just one of the services of the

Internet, and the most popular one.

There are also many other services that are provided over the Internet such as email, file transfer and

communication services.
Con’t,..
• The Web is a collection of websites or webpages that are accessed over the
Internet using a web browser.

• Tim Berners-Lee invented the Web in 1989 in the famous laboratory found in
Switzerland known as CERN.

• When the Web was invented, it was formed out of four essential foundations:
HTML, HTTP, a web server, and a web browser.

• HTML, which stands for HyperText Markup Language, is the language that is
used to create webpages.
•…
A web browser is a software used by users to view webpages.

• A web server, on the other hand, is a software that stores webpages

and responds to user requests that come through web browsers.

• HTTP, which stands for HyperText Transfer Protocol, is the set of rules
that web browsers and web servers use to communicate with each
other.

• A website is a publicly accessible collection of interrelated webpages.

Hypertext is used to link a webpage with other resources like another
webpage, videos, images, and the like.
 Cont..
• Nowadays, websites are the most efficient and effective ways for organizations or

individuals to present themselves to their target audiences.

• As a globally accessible platform, the web makes it possible for an organization to

expand its reach to the entire world.

• A website that is physically placed in one part of the world can be accessed from any

other part of the world.

• It is also how online transactions are conducted by e-commerce companies.

• Today, shoppers use websites to make orders of different types of products from their
Cont…
• This avoids the need to physically go to shops, which reduces the cost of transportation and
increases the efficient use of our limited time.

• Similarly, various government e-services are accessed through websites.

• For example, citizens do not need to go to the Immigration Nationality & Vital Events Agency

office in person to make applications for passports.

• They can simply go to the website and make their requests online.

• Education is another example where websites are used to facilitate a lot of activities. For

example, the Ethiopian Ministry of Education established a website to make educational

resources accessible to students. Online learning has also become widespread in many parts of
Website Design
• Website design is concerned with the plan and design of various aspects of a
website, such as layout, navigation, appearance, and graphics.

• The goal of a website design is to create a website that is appealing to its target
audience.

• The design should also make the search for information easy by providing a well-
organized presentation.

• The following are some important guidelines to consider when a website is designed.
 Target Audience
• A website should be designed with the target audience in mind.

• The look and feel, presentation, and all other aspects of the website
should take the target audience of the website into consideration.

• For example, a website that is intended for children in educational

settings should have a presentation different from one that is designed
for adults in the business environment.
 Navigation
• Webpages should be logically organized to allow easy navigation.
• A well-organized website with easy navigation helps users find what they seek
fast.
• A website with poor navigation, on the other hand, confuses and drives away
visitors.
Consistency
The feel and look of webpages on a website should be similar.

Better user experience is achieved with consistent use of backgrounds, colors,

typefaces, and the like throughout the website.
Simplicity
• Simplicity in website design applies to various elements of a website, such as the use of
colors, graphics, typefaces, and the like

• For example, it is recommended not to overcrowd a page with too many graphics.

• It is also recommended to use a maximum of five different colors.

Accessibility.
Designing a website with everyone in mind including people with disabilities is highly
advised to make sure that no one is excluded.

Web development is the actual creation or building of websites while website design
deals with defining the layout and overall look of the website.
2.1 Web Design and Web Development

• The internet is an amazing thing, with a few touches of a button on your phone or
computer you can send text messages and photos, watch YouTube videos while
lying in your dormitory bed or even video call your friend in despite of where
ever he/she is.
• This ability for computers, and their users, to send and receive information over a
global telecommunication network changed the world we live in forever.
• In early computing days, computers were not connected. However, when
computers became available in different institutions like universities, and low-cost
machines started to show up in many places, It became increasingly necessary to
share data and resources.
• This created the bases of the first computer networks.
…
• computer networks created the ability to share physical resources like printers.
Instead of each computer having its printer, everyone could share one attached
to the network.
• These relatively small networks of close-by computers are called Local Area
Networks (LAN).
• A LAN could be as small as two machines in the same room, or as large as a
university campus with thousands of computers.
• The most famous and successful type of LAN was Ethernet, developed in the
early 1970s and still widely used today.
• In its simplest form, a series of computers are connected to a single, common
Ethernet cable.
…
…
• When a computer wants to transmit data to another computer, it writes the data as an
electric signal, onto the cable.
• Because the cable is shared, every computer plugged into the network sees the
transmission. But the data may not be intended for all of them.
MAC Address
• To solve this problem Ethernet requires that each computer has a unique Media
Access Control Address or MAC address.
• This unique address was added to every data sent over the network.
• So, computers simply listen to the Ethernet cable, and only process data when they
see their address in the header.
• Every computer today comes with its own unique MAC address for both Ethernet
and Wi-Fi. Like 6C-01-E0-CE-6F-67.
• Use the command ipconfig /all to see your computer’s MAC address.
• It is alternatively called a Physical Address.
Collision Domain

• Sending data on the Ethernet cable at the same time creates a collision.
• like two people trying to talk on the phone at the same time (no one will be
able to talk to one another).
• Computers can detect these collisions by listening to the signal on the wire.
• The most obvious solution for a computer to stop transmitting while another
computer is transmitting is, to wait for a few random seconds, and then try
again.
• If the Ethernet cable is still in use it will re-try again after a few random
seconds.
• Even with this method, it is very hard to connect many computers on one
shared ethernet cable.
…
• To reduce collisions and improve efficiency, we need to shrink the number of
devices on any shared Ethernet cable to reduce collisions and improve efficiency
which is called the collision domain.
• The above figure is an example of one collision domain because we have six
computers in one shared cable.
• To reduce the likelihood of collisions, we can break this network into two
collision domains by using a network switch.
• A switch is a networking hardware that connects devices in a computer network
by receiving and forwarding data to the destination place.
…
…
• The switch sits between our two smaller networks and only passes data between
them if necessary.
• It does this by keeping a list of MAC addresses on all sides of the network.
• If computer A wants to transmit to C, the switch doesn’t forward the data to the
other network, at the same time, if computer D wants to transfer to F the network
is wide open, and two transmissions can happen at once.
• But if F wants to send data to A then the switch passes it through.
• This is essentially how big networks are constructed, including the biggest of all
which is the INTERNET.
• Which interconnects a bunch of smaller networks to a bigger network, and allows
inter-network communication.
packets
• When a big file is transferring a transferring medium will tide up, even if we had
1-kilo byte email it won't get through.
• It has to wait until the big file gets transferred or take a less efficient route.
• The solution is to cut big transmissions into many small pieces called packets.
• Each packet contains a destination address on the network so that switches know
where to forward them.
• This standard/protocol is called the “Internet Protocol” or “IP”.
Internet of things
• The internet has grown over many years.
• Today, there are an estimated number of 10 billion devices online connected to the
internet, and continues to grow rapidly as refrigerators, TVs, cars, and other
devices from an “Internet of Things” or “IoT”.
• The physical object that connects to the internet like location trackers, thermostat,
lock, light bulbs, fitness tracker shoes, and even your mobile phones and
computers are called IoT Devices.
UDP and Port number.
• In the internet protocol packets contain their destination address, but when they
reach the destination, the computer may not know which application requests that
data.
• Whether it is for a telegram app or a YouTube app.
• For this reason, more advanced protocols were developed that sits on top of IP.
…
• One of the most common is User Datagram Protocol (UDP).
• UDP adds extra headers to the packets like a port number.
• every program wanting to access the internet will ask its host computer operating
system to be given up a unique port number.
• for example, a video downloader app may ask for port number 3323. When a
packet arrives at the computer, the operating system will look inside the UDP
header and read the port number.
• Then, if it sees port number 3323, it will give the packet to the video downloader
app.
• if a packet is missing or data got corrupted at some point by a faulty Ethernet
cable UDP doesn’t offer any mechanism to fix the data, or request a new copy.
• In UDP the sender will send the packets but it will have no confirmation whether
the packets arrive or not.
Transmission Control Protocol

• Programs use Transmission Control Protocol (TCP/IP) if they want to make sure
their data has arrived successfully.
• In TCP packets are given a sequential number, which allows the receiving
computer to sort in the correct order even if they arrive in a different order.
• Once a computer has correctly received a packet it will send back an
acknowledgment.
• Knowing that the packet made it successfully, the sender now can transmit the
next package.
• If the receiver doesn’t acknowledge the sender will retransmit the same packet.
• If a duplicate packet has arrived the receiver will discard it .
UDP vs TCP

• While TCP has amazing features, UDP is still widely used.

• The biggest downsides of TCP are the acknowledgment packets.
• They double the number of messages on the network.
• It will delay the transmission so that it will reduce performance for time-critical
applications like online gaming and video chat applications.
• when you access a website on the internet, you’ll need its IP address and the
webserver’s port number (it is usually 80).
• a website as a resource other people want to access and the webserver as the one
who handles the resources to them.
…
• A website can be any computer on the internet with an IP address and
web server application.
• To access a website, you’ll open your web browser and insert its Ip
address and port number.
Domain Name Server
 Remembering dot-separated 8-bit numbers like 172.123.22.191:80 for
different websites is very hard.
 so people created a dedicated server that contains a list of IP addresses
and their names.
 Like how a phone books work, you add a new contact with a person’s
name and his/her phone number, then when you try to call a person
you’ll search by his name and dial the number associated with him.
…
• These servers work the same way.
• They are called Domain Name Servers or DNS.
• When you write google.com in your browser it will call the DNS
server for the Ip of google.com and then make a TCP request to that
given Ip.
• If the DNS is not resolved the web browser will show an error “DNS
address could not be found.”.
Let’s see some basic terminologies we encounter with the internet and
networks.
1. World wide web (WWW)
2. Web pages and websites.
3 Search engines.
World Wide Web
• the social media you use daily, the face-to-face call application, and online
meetings run on the top of the internet.
• WWW also runs on top of the internet.
• it’s a huge distributed application running on millions of servers
worldwide, accessed using a special program called a Web Browser.
Hyper links
The fundamental building block of the world wide web is a single page.
This page is a document that contains content that can include a link to other
pages.
These are called hyperlinks.
Any texts, buttons, images, or anything you click that jumps to another page
…
• These hyperlinks connect on one page to the other page, which creates a web
of interconnected information, which creates the name ‘web’.
hypertext
 A Text file containing hyperlinks is called hypertext.
 Web pages are a common type of hypertext, they’re retrieved and rendered by
web browsers.
 For pages to link to one another, each hypertext page needs a unique address.
 URL > On the web, this is specified by a Uniform Resource Locator or URL.
 An example web page URL is www.google.com/search.
 As we discussed earlier, when you request a site, the first thing your computer
does is a DNS lookup (this takes the domain name as input like google.com,
and replies with a corresponding computer Ip address from the DNS server).
Web Server
• Knowing the IP address now your web browser will open a TCP connection to a

computer with the given IP address that is running a special piece of software

called a web server.

• This web server app uses port 80 by the standard.

• Any computer can be used as a server, but its resources will be limited like a

processing power and storage.

• People tend to use dedicated computers for this purpose only.

• most of the servers running in the world wide web use the Linux Operating
HTTP
• To ask for hypertext pages, there is a standard protocol called Hypertext transfer
protocol or HTTP.
• It has different commands like GET to read data, POST to create data, DELETE to
delete data, PATCH to modify data, and PUT to replace data.
• When you type a domain name into your browser, it automatically adds http:// to
the front. The previous URL would look like http://www.google.com/search.
HTTP Status codes.
The web server then returns the hypertext we requested.
Then our web browser will interpret the data inside it and render it to our screen.
If the webserver didn’t have the hypertext requested it will return a 404 status
code.
 …
• There are many HTTP status codes a web server will send back 200 if
everything is OK, 500 if there is an error on the server, and so on.
HTTPS
HTTPS stands for Hypertext Transfer Protocol Secure.
It encrypts the information transferred between the server and the client.
Even if the man in the middle sees the packets, he/she won't be able to
understand their content.
HTML
Because the hypertext contains plain text, the browser has no idea which
is a header, paragraph, or image.
It makes it necessary to create a markup language to mark different parts
of the hypertext.
 …
• Inside the plain text file document, you can add some commands.
Like <h1> for a heading, <p> for a paragraph,<img/> for an image and many
others.
When rendered It gives the document a proper look and feel.
They’re also other technologies that can be embedded inside HTML like
Cascading style sheets (CSS) to style color, shapes, and more, and JavaScript
to make the page dynamic and play with different events like mouse
movement and more.
Websites and Search Engine
A website is a collection of web pages grouped in various ways.
Different web pages were offering useful links, but they were maintained
manually by human labor.
Which makes it harder and unmanageable as websites grow in number.
so search engines like Google were developed.
…
• The search engine uses special software called web crawler which opens a
webpage automatically and adds to its list.
• when it finds another link in those web pages it will add them to its list
and follow the same steps.
• Then the search engine uses another software that contains search
algorithms to get requested search data from its list.
• If we search for the term ‘ball’, it will return a list of web pages that
contains the term ball in a different order.
• Google rise from other search engines due to its clever algorithm.
• There are also famous alternative search engines like Microsoft’s Bing
and Yahoo.
…
• A Web Designer is a graphic artist who is responsible for designing the layout and
visual appearance of a website.
• A web designer's main goal is to make sure the site is visually pleasing, user-friendly,
compatible across different devices, and encourages visitors to stay as long as possible.
• Web designers often deal with images, color palettes, fonts, and so on.
• A Web Developer is tasked with converting the web design into a functional website,
using different coding languages like HTML, CSS, JavaScript, PHP, and others.
• Based on their role, web developers can also be divided into three.
1. Front-End Developer: the part of the website that the user interacts with directly is
called a front-end or client-side application.
It includes everything seen on the browser. like tables, images, graphs, navigation
menus, and more.
HTML, CSS, and JavaScript are the languages used for front-end development.
…
2. Back-End Developer: the back-end is the server side of the website.
It is involved with data storage, data processing, authentication, authorization, and
other server-side functions.
PHP, SQL, and Python are a few of the coding languages that are available
for server-side(back-end) development.
3. Full-stack Developer: the ability to design complete applications and
websites. They work on both the front and back ends.
We’ll use HTML to structure the webpage document, CSS for colors and styles, and
Javascript for making it dynamic, and interactive, and manipulate the whole webpage.
PHP to handle server-side logic, and SQL to store Data Permanently.
 HTML is a tool we use to create websites, It is use to give instructions to a
computer, Telling a computer what it is do step by step.
The HTML document has a file extension of .html.
you can use any text or code editor of your choice.
in the upcoming examples, we’ll be using Visual Studio Code, which you can
find at https://code.visualstudio.com/
HTML is a markup language, it is used for structuring hypertext files.
During your lab session create a folder called HTML on your desktop.
Open visual studio code and drag the folder into it.
…

• Add your first HTML file, let's call it first.html for now.
• You can call it whatever you want
…
• A valid HTML file must start with an HTML version declaration.
> It specifies which version of HTML you’re using.

It specifies this HTML document is an HTML5 document.

HTML has come through many versions and modifications.
HTML5 is the latest version of HTML, and it is the one we’ll cover in this
chapter.
…
…
…
…

> This is a simple and valid HTML document. Which is guaranteed to be

displayed perfectly inside any browser.
2.2 HTML Tags and Elements
HTML tags are a set of predefined names enclosed in angle brackets.
Each HTML tag has its specific meaning, and web browsers are
designed to interpret or render HTML tags according to their intended
purposes. Sample HTML tags and their meanings are shown in Table
2.1.
Conti,…
HTML elements are components of an HTML document and
normally have a <start tag> followed by content and an </end tag> .
HTML elements are the building blocks of a webpage. Figure 2.2
shows some examples of HTML elements and their outputs on the
browser.
Conti,…

 Notes In Figure above that while the heading and the paragraph elements
are displayed on a separate line each, the bold and italic texts are
displayed next to each other. This is because the browser inserts a new line
every time it finds HTML elements like <h> and <p> , but it doesn’t insert
new lines for <b> and <i> HTML elements.
 Conti,…
• Though a significant majority of HTML elements conform to the <start
tag> content </end tag> format, there are some HTML elements that have
a different format. These HTML elements are known as void elements.

• The following table shows the format of void elements and their
meanings.

• Void elements do not have an end tag.

Conti,…
Conti,…

• Notes that the two horizontal lines placed above and

below the paragraph are the result of the two <hr>
elements. Also, note that the text “paragraph” is shown
in a new line because the <br> element is inserted
right before it, inside the <p> element.
…
• NOTE: HTML is not case-sensitive, you can write tags either in capital letters or
small letters.
…
HTML attributes

• Html attributes provide additional information about elements.

• Attributes are mostly key-value pairs, written on the start tag of the element.

• Attributes are normally optional to many of the HTML tags. However, there
are some HTML elements that cannot function as intended without the use of
some attributes. The <img> HTML element is one such example.

• The <img> element should have the “src” attribute, which refers to the name
and location of the actual image that is required to be inserted into the
webpage.
…
• For this example, we will use an image file called ethiopian_airlines.jpg which is
located in our HTML folder.
first.html
<img src=“ethiopian_airlines.jpg “ height=“500” width=“600”>
Output
Conti,…

• The src, height, and width attributes give additional information for the
<img> element.

• elements may or may not have attributes. There are optional attributes
and required attributes. For example src attribute for <img> tag is
required, but height and width can be set automatically by the browser.
HTML Headings

• Headings are used for displaying titles and subtitles.

• The most important heading is <h1> and the least important heading is <h6>.
first.html output
<h1> this is heading 1</h1>
<h2> this is heading 2</h2>
<h3> this is heading 3</h3>
<h4> this is heading 4 </h4>
<h5> this is heading 5 </h5>
<h6> this is heading 6</h6>
…

• Don’t use the heading elements to make the text BIG or Bold. You have other
elements for such purposes.

• Your webpage should be structured properly. Very important texts like your main
title on the web page should be <h1> .

• It is not a good practice to add <h1> elements after other heading tags.

• If you ever wanted to have a bigger heading than <h1>. You can use the font-size
property of CSS.
…
HTML Paragraphs
• It is used to write a block of text.

• It always starts on a new line.

• The browsers will remove any extra spaces and new lines.

first.html

<p> this is a simple paragraph.</p>

<p> I used extra spaces at the start and

skipped two lines

Conti,…
Output
this is a simple paragraph.
I used extra spaces at the start and skipped two lines but the browser will
ignore them.
 If you wanted to keep the extra spaces, use the <pre> element,
it preserves both spaces and line breaks. pre stands for preformatted
text
Conti,…
…
• You can also use <br> element for a line break.
• It will break contents into a new line.
Quiz 5%
• Write html coding for the following output
…
• an element called <hr> element. It is called a horizontal rule.
• it is used to separate contents. It draws a horizontal line.
HTML Styles
• After structuring the webpage with HTML, the layout can be styled with CSS.
• CSS can control color, font, animations, spacing between elements, positioning of
elements, and so much more.
…
HTML Text Formatting
• HTML formatting is used to style the text to make it more presentable.
• These tags are used to define how text should be displayed on a web
page.
• used to change the appearance of text, such as making it bold, italic,
underlined, or applying other formatting styles.
• There are several elements for defining text with special meanings like
bold, italic, mark text, superscripted text, subscripted text, and more.
for examples:
<b>- defines bold text with no extra importance.
<strong>-defines Important text. Its content will be displayed in
bold.
Conti,…
• <em>- Emphasized text. It displays the content in italic.
• <mark>- Marked text. It highlights a text, and more.
examples:
first.html
<p> <b>bold text</b> </p>
<p> <strong > important text. </strong> </p>
<p> <i> italic text </> </p>
output
HTML Comments
• Comments are text written inside the HTML code by the web developers to put a
message or explain their code.

• HTML comments are the most important part of the code.

• HTML comments are not displayed in the browser.

• Temporarily disabling or "commenting out" a piece of code without deleting it.

• Providing instructions or reminders for future editing or maintenance.

• Comments are basically used for clean code so that if the new person checks your
code then he/she can easily understand your code.
 Conti,…
• In HTML, comments are denoted by the <!-- And --> delimiters.
• Anything between these delimiters is considered a comment and is
ignored by the web browser when rendering the page.
Syntax
<!-- I’m a comments, so browser will not display me -->
for example:
<p> <b> <!-- I’m-- > bold text</b> </p>
<p> <strong> important text </strong></p>
output will be
bold text
important text
HTML Links
• HTML links are used to navigate from one page to another. It is also known as a

hyperlink.

• Links allow jumping to different web pages. They can be embedded inside a text,

image, or any other HTML element.

• They allow users to click on a text or an image and be redirected to another page

or location on the web.

• The anchor tag (<a> ) is used to create hyperlinks. An HTML element that is

formed from an anchor tag has the following format:

Conti,…
Conti,…
• Syntax
<a href=“URL”> link text, image or any other element</a>
let use image as a link.
first.html
<a href=“https://www.Ethiopian airlines.com/”>
<img src=“Ethiopian_airlines.jpg” height=“350” width=“350”>
</a>
Conti,…
 Clicking on the ethiopian_airlines.jpg will redirect you to the
Ethiopian airline's website.
 the link body will be visible to the user, when clicked it will redirect
you to the URL specified in the href attribute.
Conti,…
• For demonstration, let's create a new HTML document called
about.html
 Conti,…
Output
My About Page
My name is adanech, I’m grade 10 student
my phone number is +2519,…

Note that we have created the about.html In the same directory as first.html
Now, let's link these two pages.
First, add the target URL in first.html which will take us to about.html Inside
first.html use the relative path of the target URL.
…
The Target Attribute

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

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
Absolute Vs Relative URLs.

• The relative path finds the other file relative to its position.
• If the about.html were located inside a directory called pages, the relative URL
will become pages/about.html.

Which tells the webserver to look for about.html inside the pages
directory.
In case you wanted to go one step back through folders, use double
dots and a backslash(../).
> Let's say you are in a pages directory if you want to link that takes
you to first.html which is located one folder back from pages.
this would be your link.
…

On the other hand, the absolute path contains all the information
necessary to locate a resource.
Linking Email address.
Local Links or Bookmarks

• These are links inside the same web page.

• They’re very useful if the web page is very long.
• You can create a bookmark with the id attribute in any element.
• Then access it with the href attribute of <a> element.

Creating Bookmarks
Add the id attribute to the target element.
…
…
 …

Now we have four bookmarks. Binary, decimal, octal, and

hexadecimal.
To create <a> a link that jumps to these bookmarks, create
element with a href attribute value of
href=”#bookmarkname”.
…
• you can also use links like

HTML images
• To embed an image to webpages we use <img> tag.
• Use the src attribute to specify the location of the
image.
• In case the image is not found or not loaded we will
use the alt attribute to specify an alternative message
to display instead of the image.
…
• To set the image size used the height and width attributes.
• The default measurement is in pixels.
• Pixels are the smallest unit in the digital display.
• Many pixels connected horizontally and vertically create every image we see on
our screen.
HTML tables.
An HTML table is used to organize data in terms of rows and columns.
The <table></table> element will contain all the rows and columns.
Tables are one way of organizing contents or defining a layout for contents in a
webpage.
The major HTML tags used for creating tables and their meanings are presented in
the following table.
Conti,..

 The number of rows of a table is determined by the number of<tr>

elements that the <table> has while the number of columns is determined
by the number of <td> elements that are found in each <tr>.
…
…
…
…

o Tables need CSS to style their borders.

o You can use the border property of CSS.
o We gave <table> the css property border with a border size of
1px, a straight non-broken solid line with a color of black.
o Let's try to give each cell a border.
…
…

To avoid the repetitive style attributes in different elements, you

can define them in the <head> section of your document.
Just add <style> element with a few CSS properties inside the
<head> element.
…
To avoid double borders use the border-collapse property

•.
…
• You can also give a background color and border color for the data cells.
 Size of a column.

• Use the width property.

…

HTML tables with multiple columns and rows.

You can use rowspan and colspan attributes if you want some cells to occupy
more rows or columns.
Let's combine the Age and Gender column headers into one column.
…
…
…
• The second cell in the first column took 2 rows consecutively with the rowspan
attributes.
HTML Lists
List is a way to organize and display a collection of related items.
There are two major html list types ordered lists and unordered lists.
The unordered list uses <ul> element with unlimited list items <li> inside.
…
• The default item marker is a small black disk. You can alternatively use Circle,
square, or none.
• Use the list-style-type property to set these values.
You can have a list inside the list.
 Ordered List
• Each item will be marked with a number by default.
• It uses <ol> tag. Each item list uses <li> tag.
…
• It has a type attribute to define the item marker. Use
✓ i or I for roman numbers
✓ a or A for lowercase and uppercase letters.
✓ Use 1 for numbers, which is the default.

HTML Block and Inline Elements

The HTML , all elements have default value how they display.
Conti,…
• Inline element: <span>, <a>, <strong>, <em>, <img>, <input>, <br>,
and <button>.
Block element: <div>, <p>, <h1> to <h6>, <ul>, <ol>, <li>, <header>,
<footer>, <nav>, and <section>.
Inline element:
Inline elements do not start on a new line
They occupy only the space necessary to display their content.
Conti,…
Block element:
• Block-level elements start on a new line
• It take up the full available width of their parent container.
…

Viewport
The viewport is the user's visible area of a webpage, the viewport may vary
from device to device.
a viewport for mobile phones and desktop computers is different.
web pages were initially designed for computer screens only, so they have
a static design and fixed size.
it is very important to scale webpages for different screen sizes.
HTML Forms.

• Html forms are used to collect data from the user, to be processed
either locally by browser or sent to the server.
• The <form> element is used to contain different types of input
elements such as text areas, check boxes, submit buttons, date
pickers, and more.
HTML - Forms
• HTML forms are very important part of web development, allowing
users to input and submit data to a server.
• Html forms are used to collect data from the user, to be processed
either locally by browser or sent to the server.
• They are used for a wide range of purposes, such as user registration,
contact forms, search boxes, and more.
syntax : <form action=“”> </form>.
Inside the <form>
Conti,…

Label: the <label> element, which provides a text description for the
input field.
syntax: <label>….</label>
Conti,…
• Input: the <input> element is used so that user can enter information.
Input filed is created using tag. It is self closing tag.
…
…
…
…
…
Text Areas.
• It creates customizable text fields with specific rows and columns.
• You can hold the bottom right corner of the text area to resize to any
row and column.
…
• The form has an attribute called action which specifies where the
input data should be processed.
• And a method attribute that defines which HTTP method to use for
sending the data to the location specified by the action attribute.
…
Tells the browser to set
✓ the width of the web page's dimension to the device dimension, and
✓ the initial zoom level when the page is loaded initially by the
browser.
Inline Elements
These elements don’t start in a new line.
They only take the necessary width. Like <b>, <a>,
<sub>,<span> and more.
The <span> element is an inline container for part of the
text or document.
It can be used to style part of the text.