Introduction to Html

1. Chapter one
Internet Technologies and protocols
3/6/2023 1

2. Internet and uses
• The Internet is a large number of computers connected to share information.
• It is a collection of networks (a network of networks) sharing digital information via a
common set of networking and software protocols. It consists millions of private, public,
academic, business, and government networks, of local to global scope, that are linked
together.
• The Internet, commonly referred to as "the Net," is a global wide area network (GWAN) or a
network of networks that links computer systems all over the world.
• Users at any computer can access information from any other computer via the internet
(assuming they have authorization).
• It was known as the ARPANet for the first time, and in 1969, the ARPA, called Advanced
Research Projects Agency Network, conceived the internet. Allowing communication
between users and devices from any distance was the primary objective to create the network.
• Internet used for a variety of purposes including electronic mail, computer file transfers and
access to computer programs, Internet Chat, Search Services etc.
3/6/2023 2

3. Useful terms
• Internet service provider is a company that provides its customers access to the internet and other web
services. A company that provides dial-in or some other type of access to the Internet for a monthly fee.
• Web browser: A software tool that retrieves and displays webpages. Microsoft Internet Explorer, for example,
is included with Windows and Safari is included with Mac OS X. Mozilla Firefox, Netscape Navigator, and
Opera are all available for free.
• Search Engine - A website that helps you find other websites. E.g. Google , Yahoo, Baidu, Bing etc.
• A browser is a piece of software that retrieves and displays web pages; a search engine is a website that helps
people find web pages from other websites.
• Web server - is a piece of computer software that can respond to a browser's request for a page, and deliver the
page to the Web browser through the Internet
• Hypertext - is a text which contains links to other texts.
• Hypermedia is a term used for hypertext which is not constrained to be text: it can include graphics, video and
sound
3
1/26/2023 3

4. Con’t…
• Uniform Resource Locator (URL) An address on the Internet, such as http://www.csed.ef.bdu.edu.et,
which enables computers and other devices to visit it. It is a standard way of specifying the location of a
resources on internet
• The Web – all available resources and information on internet and can be accessed by users using any
browsers
• Web page - A document that contains or references various kinds of data.
• Links - A connection between one web page and another. show you the address of the site or page that
it leads to.
• Website: A collection of related web pages
4
1/26/2023 4

5. World Wide Web (WWW)
• The World Wide Web also called web is collection of interconnected documents and other
resources linked by hyperlinks.
• Hyperlinks (also called hypertext or simply link) are reference or navigation elements in a
document to another document.
• It is a system of interlinked hypertext documents (web pages) accessed via the Internet
• Hypertext documents: Text and Links
• Web
• billions of documents
• authored by millions of diverse people
• edited by no one in particular
• distributed over millions of computers, connected by variety of media
• A key development of the World Wide Web was by Tim-Berners Lee
3/6/2023 5

6. Con’t..
• WWW was created by Tim Berners-Lee in 1989 at the European Nuclear Research Center
(CERN) in Switzerland. Berners-Lee created WWW by bringing together three
technologies that were already in development at the time:
Markup Language – a system of instructions and formatting codes embedded in the
text. Or it is the language used to describe the insides of web documents.
Hypertext – a means of embedding links to other documents, images, and other elements
in a document.
Internet – a global network of computers where clients request service and servers provide
services
• He developed HTTP as a networking protocol for distributing documents and wrote the
first web browser.
• HTTP is a simple request/response protocol in which a Web browser asks for a document,
and the Web server returns the document in the form of an HTML data stream preceded by
a few descriptive headers.
3/6/2023 6

7. A browser(client) retrieving a web page
3/6/2023 7

8. Internet Versus the Web
• The Internet is a network of connected computers and No company owns it; it is a
cooperative effort governed by a system of standards and rules.
• Think of the internet as the roads that connect towns and cities together.
• The World Wide Web (known affectionately as “the Web”) is just one of the ways
information can be shared over the Internet.
• Web is pages/sources you see on internet
• It is unique in that it allows documents to be linked to one another using hypertext links —
thus forming a huge “web” of connected information.
• The Web uses a protocol called HTTP (Hypertext Transfer Protocol).
3/6/2023 8

9. Types of Web Pages (static vs. dynamic)
• Websites that only use HTML and CSS are called static websites (client side).
• Websites with scripting are called dynamic websites (server side).
• Most Web pages are static
• contents (text/links/images) are the same each time it is accessed e.g., online documents,
most homepages
• A static website is the simplest kind of website you can build and are written
in HTML and CSS.
• The only form of interactivity on a static website is hyperlinked.
• If you intend your website to be a small one (3 pages or less), then a static website might
be the easiest way to go. But if you want to share elements between pages (such as
logos or menus), you’ll have to duplicate the HTML on each page.
• Static websites are easier to make than dynamic websites because they require less coding and
technical knowledge.
• However, fully static websites are very uncommon these days, since there is so much that
scripting can do.
3/6/2023 9

10. Dynamic website
• A dynamic website is a website that not only uses HTML and CSS but includes website
scripting as well .
• The main reason why you’d want to use website scripting on your site is you want an
interactive web app that people can use, not just read and you want to be able to share
HTML code between your pages.
• This website also shares the same HTML code for the header, menu, and sidebar between
all pages of the site.
• If you want a dynamic site, you will need to learn a coding language such
as JavaScript, PHP.
• There are two different types of interactivity on a dynamic site – front-end scripts and back-
end scripts.
• Front-end and back-end are sometimes also called client-side and server-side.
3/6/2023 10

11. Frontend Versus Backend
• Frontend refers to any aspect of the design process that appears in or relates directly to the
browser.
• The following tasks are commonly considered to be frontend disciplines: Graphic design,
Interface design, Information design as it pertains to the user’s experience of the site,
including HTML documents, Style Sheets, etc.
• Backend refers to the programs and scripts that work on the server behind the scenes to
make web pages dynamic and interactive.
• In general, backend web development falls in the hands of experienced programmers.
• The following tasks take place on the backend: Information design as it pertains to how the
information is organized on the server, Forms processing, Database programming etc
• Other server-side web applications using PHP, JSP, Java, python and other programming
languages.
3/6/2023 11

12. Client server architecture
• The client-server model describes how a server provides resources and services to one or
more clients. Examples of servers include web servers, mail servers or database servers etc.
• A network architecture in which each computer or process on the network is either a client or
a server
• Components of client/server architecture:
• Communication network,
• Clients and
• Servers
3/6/2023 12

13. Client server architecture
• The client(browser) requests some type of service (such as file or database access) from the
server.
• The server fulfills the request and transmits the results to the client over a network.
• While both the client and the server programs can reside on the same computer, typically,
they run on different computers.
• Specific types of clients include web browsers, e-mail clients, and online chat clients.
• Specific types of servers include web servers, ftp servers, application servers, database
servers, name servers, mail servers, file servers.
• Most web services are also types of servers.
3/6/2023 13

14. WWW architecture
• The WWW is a distributed client-server service, in which a client using a browser can
access a service using a server.(The service provided is distributed over many locations
called sites.)
3/6/2023 14

15. How web works
• When you connect to the web, you do so via an Internet Service Provider (ISP).
• You type a domain name or web address into your browser to visit a site; for example,
google.com, bbc.co.uk, or microsoft.com.
• Your computer contacts a network of servers called DNS servers which acts like phone books;
& tell your computer the IP address associated with the requested domain name.
• An IP address is a number of up to 12 digits separated by full stops. Every device connected
to the web has a unique IP address; it is like the phone number for that computer.
• The unique number that the DNS server returns to your computer allows your browser to
contact the web server that hosts the website you requested.
• A web server is a computer that is constantly connected to the web and is set up specially.
• The web server then sends the page you requested back to your web browser.
3/6/2023 15

16. Con’t…
• Requesting the page http://www.hu.edu.et/iot/index.html
• The browser broke the URL into 3 parts:
The protocol ("http")
The server name ("www.hu.edu.et")
Directory Path contains the file name ("iot/index.html")
• Browser sends a request to the server, asking for the file
"http://www.hu.edu.et/iot/index.html and the server then sends the HTML text for the
Web page to the browser and Browser displays the page based on the HTML tags
3/6/2023 16

17. Applicationsof web
Very wide range of functionality
• web mail, online news, radio, tv, etc….
• online retail sales and auction sites
• wikis, discussion boards, weblogs
• multi-player online role-playing games, etc…
• software components of a web app
3/6/2023 17

18. DNS- Domain Name System
• The Domain Name System is a distributed database of domain name and IP address
bindings.
• A domain name is simply an alphanumeric character string separated into segments by
periods. It represents a specific and unique place in the “domain name space.”
• DNS makes it possible for us to use identifiers such as rabbit.com to refer to an IP address
on the Internet.
• Name servers contain information on some segment of the DNS and make that information
available to clients who are called resolvers.
3/6/2023 18

19. Domain Names
• A name is much easier to remember than a 12 digit number.
• Names used for TCP/IP addresses are called domain names.
• w3schools.com is a domain name.
• When you address a web site, like http://www.w3schools.com , the name is translated to a
number by a Domain Name Server (DNS). All over the world, DNS servers are connected
to the Internet.
• DNS servers are responsible for translating domain names into TCP/IP addresses.
• When a new domain name is registered together with a TCP/IP address, DNS servers all
over the world are updated with this information.
3/6/2023 19

20. Top Level Domain (TLD) names
.com - Originally for commercial organizations, but now used by individuals, government
agencies, and nonprofits as well www.google.com
.Net - Internet service providers and other network-related companies www.ethio.net
 .org - Noncommercial (often nonprofit) organizations www.sourceforge.org
.gov - government agencies www.ena.gov.et
.mil – military www.af.mil Us air force
.edu - Educational domains www.hu.edu.et
.int - International organizations like NATO and the International Red Cross
https://www.apnic.int/ Asia-Pacific Network Information Centre
3/6/2023 20

21. What is TCP/IP?
• TCP/IP stands for Transmission Control Protocol / Internet Protocol and defines how
electronic devices (like computers) should be connected over the Internet, and how data
should be transmitted between them.
• TCP is responsible for breaking data down into small packets before they can be set over a
network, and for assembling the packets again when they arrive.
• IP takes care of the communication between computers.
• It is responsible for addressing, sending and receiving the data packets over the Internet.
3/6/2023 21

22. IP is Connection-Less
• IP is a "connection-less" communication protocol.
• IP does not occupy the communication line between two computers. This reduces the need
for network lines.
• Each line can be used for communication between many different computers at the same
time.
• With IP, messages (or other data) are broken up into small independent "packets" and
sent between computers via the Internet.
• IP is responsible for "routing" each packet to the correct destination.
3/6/2023 22

23. UDP(User Datagram Protocol)
• This is a minimal service over IP, adding only optional check summing of data and
multiplexing by port number.
• UDP is often used by applications that need multicast or broadcast delivery, services not
offered by TCP.
• Like IP, UDP is connectionless and works with datagrams.
• It is alternative to TCP which gives limited amount of services
• Doesn't provide sequencing and Doesn't divide messages in to packets.
3/6/2023 23

24. TCP/IP Protocols For the Web
• Web browsers and servers use TCP/IP protocols to connect to the Internet. Common TCP/IP
protocols are:
• HTTP - Hyper Text Transfer Protocol
• HTTP takes care of the communication between a web server and a web browser.
• HTTP is used for sending requests from a web client (a browser) to a web server,
returning web content (web pages) from the server back to the client.
• HTTPS - Secure HTTP
• HTTPS takes care of secure communication between a web server and a web browser.
• HTTPS typically handles credit card transactions and other sensitive data.
3/6/2023 24

25. Con’t…
FTP - File Transfer Protocol
• FTP takes care of transmission of files between computers.
• The File Transfer Protocol (FTP), which provides the ability to transfer files between
remote hosts
• Transferring data from one host to another is one of the most frequently used operations.
• Both the need to upload data (transfer data from a client to a server) and download data
(retrieve data from a server to a client) are addressed by FTP.
• Additionally, FTP provides security and authentication measures to prevent unauthorized
access to data
• FTP uses TCP as a transport protocol to provide reliable end-to-end connections and
implements two types of connections in managing data transfers.
3/6/2023 25

26. TCP/IP Protocols for Email
E-mail programs use TCP/IP for sending and receiving e-mails. The TCP/IP protocols for
email are:
SMTP - Simple Mail Transfer Protocol
• SMTP takes care of sending emails. Often emails are sent to an email server (SMTP
server), then to other servers, and finally to its destination. SMTP can only transmit pure
text. It cannot transmit binary data like pictures, sounds or movies.
MIME - Multi-purpose Internet Mail Extensions
• The MIME protocol lets SMTP transmit multimedia files including voice, audio, and
binary data across TCP/IP networks. The MIME protocol converts binary data to pure text,
before it is sent.
3/6/2023 26

27. Con’t…
POP - Post Office Protocol
• The POP protocol is used by email programs to retrieve emails from an email server.
• If your email program uses POP, all your emails are downloaded to your email program
(also called email client), each time it connects to your email server
IMAP - Internet Message Access Protocol
• The IMAP protocol works much like the POP protocol.
• The main difference is that the IMAP protocol will not automatically download all your
emails each time your email program connects to your email server.
• The IMAP protocol allows you to look through your email messages at the email server
before you download them.
• With IMAP you can choose to download your messages or just delete them.
• This way IMAP is perfect if you need to connect to your email
3/6/2023 27

28. Con’t…
ICMP - Internet Control Message Protocol
• ICMP takes care of error-handling in the network.
• Internet Control Message Protocol is a set of messages that communicate errors and
other conditions that require attention.
• Some ICMP messages are returned to application protocols.
• A common use of ICMP is “pinging” a host. The Ping command (Packet INternet
Groper) is a utility that determines whether a specific IP address is accessible. It sends an
ICMP echo request and waits for a reply.
• Ping can be used to transmit a series of packets to measure average round-trip times and
packet loss percentages.
3/6/2023 28

29. Web browsers
• A browser: is a program that can retrieve files from the world wide web and render text,
images, or sounds encoded in the files. i.e. IE, Nescape, Mozilla
• Generally, a browser is referred to as an application that provides access to a Web server.
• Depending on the implementation, browser capabilities and thus structures vary.
• A Web browser, at a minimum, consists of an Hypertext Markup Language (HTML)
interpreter and HTTP client that is used to retrieve HTML Web pages.
• Besides this basic requirement, many browsers also support FTP, NNTP, e-mail (POP and
SMTP clients), among other features, with an easy-to-manage graphical interface.
• As with many other Internet facilities, the Web uses a client /server processing model.
• The Web browser is the client component.
3/6/2023 29

30. Web servers
• A computer program that is responsible for accepting HTTP requests from clients (user
agents such as web browsers), and serving them HTTP responses along with optional data
contents, which usually are web pages such as HTML documents and linked objects
(images, etc.).
• Common examples of web server software or application which waits for client requests,
fetches requested documents from disk and transmits them the client are Apache HTTP
server, Sun ONE web server and MS Internet Information Server (IIS)
• Web servers are responsible for servicing requests for information from Web browsers.
• The information can be a file retrieved from the server's local disk, or it can be generated
by a program called by the server to perform a specific application function.
• A lot of public-domain Web servers available for a variety of platforms, including most
UNIX variants, as well as personal computer environments such as Microsoft Windows.
• Some well-known public domain servers are CERN, NCSA, httpd, and Apache servers.
3/6/2023 30

31. Overview of HTTP
• HTTP is based on request-response activity.
• A client, running an application called a browser, establishes a connection with a server and
sends a request to the server in the form of a request method.
• The server responds with a status line, including the message's protocol version and a success
or error code, followed by a message containing server information, entity information, and
possible body content.
 An HTTP transaction has four steps:
• The browser opens a connection.
• The browser sends a request to the server.
• The server sends a response to the browser.
• The connection is closed.
3/6/2023 31

32. Sending the HTTP Request
• The HTTP protocol is a request/response protocol. A client sends a request to
the server in the form of a request method, URI, and protocol
version, followed by possible body content over a connection with a server.
• Request method: signifies the kind of request that the client is asking of
the web server
• URI: Identifies the document or other resource being requested
• HTTP version: Indicates the highest level of the HTTP specification the client –
application understands. Some allowable values are: HTTP/1.0 or HTTP/1.1
3/6/2023 32

33. HTTP message
• HTTP messages consist of the following fields:
• Message types : A HTTP message can be either a client request or a server response.
• Message header : The HTTP message header field can be one of the following: General
header, Request header, Response header, Entity header and Message body
• Message body : can be referred to as entity body if there is no transfer coding has been
applied. Message body simply carries the entity body of the relevant request or response.
• Message length : indicates the length of the message body if it is included. The message
length is determined according to the criteria that is described in RFC 2616 in detail.
• General header field : can apply both request and response messages.
3/6/2023 33

34. Con’t…
• In general, an http request message is sent to the server to take an action on a resource
located on the server.
Requests are formatted in three key parts:
• First, the request line specifies an action (request method) and a target resource on the
server
• Next, the URI that Identifies the document or other resource being requested
• Finally, HTTP version that Indicates the highest level of the HTTP specification the client
– application understands. Some allowable values are: HTTP/1.0 or HTTP/1.1
followed by possible body content
3/6/2023 34

35. HTTP Request Method
• The “request method” tells the server what action to apply to the resource that you have
indicated in your request
• The most basic/common request method is to GET a resource from the server. GET my
feed and send it to me.
• GET and POST are by far the two most important and common request methods
• POST allows you to send extra data with the request
• A POST request can include additional parameters other than the resource to access
3/6/2023 35

36. HTTP Request header fields
• Header and data : the client can specify additional information in the request.
• User-Agent specifies the browser version
• Referrer : tells server where the user came from useful for logging and customer tracking
• From: contains email address of user generally not used for privacy reasons
• Authorization : send username & password, used with documents that require authorization
• If-Modified-Since: only send document if newer than specified date used for caching
• Cookie : an HTTP cookie previously sent by the server,
Cookies are small pieces of text sent to your browser by a website you visit and help that website
remember information about your visit.
3/6/2023 36

37. Con’t…
• E.g. A typical HTTP response status line looks like this: HTTP/1.1 200 OK
• The server responds with a status line, including the message’s protocol version and a
success or error code, followed by a MIME-like message containing server information,
entity meta- information, and possible entity-body content.
The first line of the server’s response contains a status code
• 200 Ok-- request was processed successfully
• 404 Not found --- file could not be found
• 301 Moved permanently-- document has been moved
• 304 Not modified--- if cached version is up-to-date
• 400 Bad request--- syntax error in client’s request
• 403 Forbidden --- client is not allowed access (e.g., protected/ not authorized)
• 500 Internal server error---- server failed
• 503 Service unavailable---- server is overloaded
3/6/2023 37

38. Firewalls
• A firewall is simply a program or hardware device that filters the information coming
through the Internet connection into your private network or computer system.
• If an incoming packet of information is flagged by the filters, it is not allowed to pass
through Methods.
• A firewall is a computer, router, or some other communications device that controls data
flow between networks.
• Generally, a firewall is a first-line defense against attacks from the outside world.
• A firewall can be hardware-based or software-based.
• A hardware-based firewall is a special router with additional filter and management
capabilities.
• A software-based firewall runs on top of the operating system and turns a PC into a
firewall.
• Conceptually, firewalls can be categorized as Network layer (aka Data Link layer) or
Application layer.
3/6/2023 38

39. Con’t…
• Network layer firewalls tend to be very fast. They control traffic based on the source and
destination addresses and port numbers, using this information to decide whether to pass
the data on or discard it.
• Application layer firewalls do not allow traffic to flow directly between networks. They
are typically hosts running proxy servers.
• Proxy servers can implement protocol specific security because they understand the
application protocol being used.
• For instance, an application layer firewall can be configured to allow only e-mail into and
out of the local network it protects.
3/6/2023 39

40. Port
• Uniquely identify different applications or processes running on a single computer
• Associated with the type of protocol used for communication HTTP uses port 80 and HTTPS
uses port 443 http://www.hu.edu.et:80/iot/index.php
• Port numbers are the mechanism for identifying particular client and server applications.
• Servers select a port to wait for a connection. Most services have well-known port numbers.
For example, HTTP uses port 80.
• When a web browser (the client) requests a web page it specifies port 80 when contacting the
server.
• Clients usually have ephemeral port numbers since they exist only as long as the session
lasts.
3/6/2023 40

41. Some well-known TCP port numbers
• Some of the common well-known TCP port numbers are listed in the table
below.
3/6/2023 41

42. Web content validation
• Validating a website is the process of ensuring that the pages on the website conform to the
norms or standards defined by various organizations.
• Validation is important and will ensure that your web pages are interpreted in the same
way (the way you want it) by various machines, such as search engines, as well as users
and visitors to your webpage.
• Conforming to standards and regulations is one of the many ways you can make your
website universally understood. Make sure your codes and styles validate across the board.
• That means they have to meet the “strict” standards set by the W3C Organization and
pass a variety of validations for CSS and XHTML. Not all validators check for the same
things. Some only check CSS, others XHTML, and others for accessibility.
• In simple terms, validation ensures that your website complies with the standards accepted
by most web designers. That also means that it will be accessible to more people, across
more web browsers and operating systems.
3/6/2023 42

43. Con’t….
• You should consider these criteria for evaluating Web resources (Accuracy, Authority,
Objectivity, Currency, Coverage, and Relevancy).
• Accuracy :Is the website well-researched and information properly cited? Are facts and
statistics documented?
• Authority: Can you identify the author of the website? An author can be an individual,
company, educational institution, government agency, non- profit organization, etc.
• Objectivity: Are there biases in the Web page? Are the goals or aims of the author clearly
stated? Is this the site of a company selling products or an individual/organization with a
specific agenda?
• Currency: Is there a date when the website was last updated? Are the links from the site up-
to-date?
• Coverage: How does the information compare with other sources available on the topic?
What is the reading level of the material? Are there references or links to more information?
• Relevancy: The website may be cool, but is the content appropriate for your research needs.
3/6/2023 43

44. Principles of Web design.
1.- Precedence (Guiding the Eye)
• Good Web design, perhaps even more than other type of design, is about information.
• One of the biggest tools in your arsenal to do this is precedence.
• When navigating a good design, the user should be led around the screen by the designer.
• This is precedence, and it’s about how much visual weight different parts of your design
have.
• A simple example of precedence is that in most sites, the first thing you see is the logo.
• This is often because it’s large and set at what has been shown in studies to be the first
place people look (the top left).
• This is a good thing since you probably want a user to immediately know what site they
are viewing.
• But precedence should go much further.
• You should direct the user’s eyes through a sequence of steps.
3/6/2023 44

45. • For example, you might want your user to go from logo/brand to a primary positioning
statement, next to a punchy image (to give the site personality), then to the main body text,
with navigation and a sidebar taking a secondary position in the sequence.
• What your user should be looking at is up to you, the Web designer, to figure out.
• To achieve precedence you have many tools at your disposal:
Position
Color
Contrast
Size
3/6/2023 45

46. 2. Spacing
• Spacing makes things clearer and in Web design there are three aspects of space that you
should be considering:
1.- Line Spacing: When you lay text out, the space between the lines directly affects how
readable it appears.
2.- Padding: Padding is the space between elements and text. The simple rule here is that
you should always have space there.
3.- White Space: used to give balance, proportion and contrast to a page. It refers to empty
space on a page.
3. Navigation
• One of the most frustrating experiences you can have on a Web site is being unable to
figure out where to go or where you are.
• There are two aspects of navigation to keep in mind:
Navigation — Where can you go?
• There are a few commonsense rules to remember here. Buttons to travel around a site
should be easy to find – towards the top of the page and easy to identify.
3/6/2023 46

47. - Orientation — Where are you now?
• There are lots of ways you can orient a user so there is no excuse not to.
• In small sites, it might be just a matter of a big heading or a ‘down’ version of the
appropriate button in your menu.
• In a larger site, you might make use of sub- headings and a site map for the truly lost.
4.- Design to Build
• Life has gotten a lot easier since Web designers transitioned to CSS layouts, but even
now it’s still important to think about how you are going to build a site when you’re
still in Photoshop.
5. -Typography
• Text is the most common element of design, so it’s not surprising that a lot of
thought has gone into it.
• It’s important to consider things like: Font Choices, Font sizes, Spacing, Line
Length, Color and Paragraphing
3/6/2023 47

48. • 6.- Usability
• Web design is not just about pretty pictures.
• With so much information and interaction to be effected on a Web site, it’s
important that you, the designer, provide for it all.
• That means making your Web site design usable.
• We’ve already discussed some aspects of usability – navigation, precedence, and
text.
• Here are three more important ones:
- Adhering to Standards
• There are certain things people expect, and not giving them causes confusion.
• For example, if text has an underline, you expect it to be a link.
-Think about what users will actually do
• Prototyping is a common tool used in design to actually ‘try’ out a design.
• This is done because often when you actually use a design, you notice little things that
make a big different
3/6/2023 48

49. - Think about user tasks
• When a user comes to your site what are they actually trying to do?
• List out the different types of tasks people might do on a site, how they will achieve
them, and how easy you want to make it for them.
7.- Alignment
• Keeping things lined up is as important in Web design as it is in print design.
• That’s not to say that everything should be in a straight line, but rather that you should
go through and try to keep things consistently placed on a page.
• Aligning makes your design more ordered and digestible, as well as making it seems
more polished.
8.- Clarity (Sharpness)
• Keeping your design clear and sharp is super important in Web design.
• And when it comes to clarity, it’s all about the pixels.
• In your CSS, everything will be pixel perfect so there’s nothing to worry about, but in
Photoshop it is not so.
3/6/2023 49

50. To achieve a sharp design you have to:
• Keep shape edges snapped to pixels.
• Make sure any text is created using the appropriate anti-aliasing setting.
• Ensuring that contrast is high so that borders are clearly defined.
• Over-emphasizing borders just slightly to exaggerate the contrast.
9.- Consistency
• Consistency means making everything match.
• Heading sizes, font choices, coloring, button styles, spacing, design elements,
illustration styles, photo choices, etc.
• Keeping your design consistent is about being professional.
• Inconsistencies in a design are like spelling mistakes in an essay.
3/6/2023 50