University Requirement Courses

For All Programs

Scientific Applications of Computers (CSE012) : (Internet Research)

Dr : Israa Mohamed Date : 11 / 09 / 2023

18/ 09/2023
Who Needs a Website?

2
Everyone Needs a Web Presence
• All businesses need websites:
• Large businesses
• Government agencies
• Non-profits
• Small businesses
• Personal websites:
• Prospective employers look
at personal websites
• Post resumes
• Control information to be
shared

3
ONYXprj/Shutterstock
What is a Browser?

4
A Browser is an App
• Browsers have two main jobs:
• Communicate with your ISP
(Internet Service Provider)
• Send requests for web pages
out, receive the web pages
• Display web pages on a
monitor
• Browsers interpret code used
by web developers to display
the pages.

• Common browsers:
• Chrome

• Firefox

• Edge

• Safari

5
Rawpixel.com/Shutterstock
What is a URL (Uniform Resource Locator)?

6
URL
• The URL identifies the location of any file on the
Internet.
• The actual address of a file is a list of numbers and
characters but the URL makes that address
comprehensible.
• URLs all have some required and some optional parts.
• Protocol
• Host
• Domain
• path
• Optional: query string

7
koya979/Shutterstock
Internet Protocols

8
Internet Protocols
• Internet protocol: a set of rules that governs the
format of data sent over the Internet or any other
network. IP ensures that all machines on the Internet
speak the same language.
• HTTP: HyperText Transfer Protocol, allows for
transfer of HTML and other scripts between servers
and clients
• HTTPS: HyperText Transfer Protocol Secure, adds a
layer of security to HTTP
• SSL: Secure Sockets Layer, adds security by allowing
apps to encrypt data that goes between client and
server
• FTP: File Transfer Protocol, used by web developers
to quickly transfer thousands of files between the
developer’s computer and the host server

9
Stephan Karg/123RF
Domain Names and IP Addresses

10
Domain Names
• The domain name is, in effect, the
name of a website. Each domain name
is unique and has two parts:
• The name part expresses what the site
is about.
• The suffix (or extension) tells you what
type of site it is.
• Example:
• Petcare.com is a business
• Petcare.org is a non-profit
company
• Petcare.net is a personal
website 11
scanrail/123RF
Putting Together a URL

12
Putting Together a URL
• A URL consists of the protocol, the domain, and the path to the
actual web page. The path includes the name of any folders
where the file is stored on the site’s server and the filename.
Unless all of these parts are included in proper order, the page
cannot be found.
• Example:
• https://www.mheducation.com/highered/home-guest.html
 https - the protocol
 www - means the site is on the World Wide Web
 mheducation.com - the domain name for
McGraw Hill and the .com indicates that this is
a business
 highered - a folder name
 home-guest.html- the filename for the web
page you see
13
What Is a Server?

14
Servers
• ‘Server’ has two meanings:
1. physical server - a large computer that stores
web pages which can be accessed over the
Internet.
2. A server - also refers to the computer software
that manages and processes server requests and
delivers data to other computers.
• The client-server model:
• The server program waits for and fulfills
requests from client programs.
• At home your computer is the client.
Your browser sends a request to a
server. The server returns all data to
your browser. The browser interprets the
information and displays the requested
web page.
•.
15
CasarsaGuru/Getty Images
What Is a Host?

16
Web Hosts
• A web host, or web hosting service provider, is a business that
provides the technologies and services needed for a website or
webpage to be viewed on the Internet.
• Hosting companies:
• help clients purchase domain names
• provide space for a website
• may provide software to help you build a site.
• Cost varies, depending on services. Popular web hosts:
• Bluehost
• HostGator
• GoDaddy
• And many more

17
deniskot/123RF
How Are Websites Created?

18
Using Website Creation Tools and Hosting
• Many free website creation tools
can be used by people with
minimal knowledge of scripting
languages. Most offer:
• Site-building
• Acquiring a domain name
• Site hosting
• Remember: you get what you pay
for! Free often means no live
support is available.
• Popular website builders:
• Wix
• WordPress
• Squarespace 19
NicoElNino/Shutterstock
Content Management Systems
• A content management
system (CMS) is software that
helps users create, manage,
and modify content on a
website without requiring
specialized technical
knowledge.
• Two core parts of a CMS:
• The content management
application (CMA) allows you to
add and manage the content of
the site.
• The content delivery
application (CDA) is managed
20
by the company. It takes ©David M G/Shutterstock.com
Considerations When Choosing a CMS
• Important things to consider when
choosing a CMS:
 Level of support: live or through FAQs?
 Does it offer SEO and if so, at what level? SEO
tools increase a site's visibility.
 Does it allow for users to pay for goods?
 Are templates customizable? Can you use your
own template or purchase one elsewhere and
use it with this CMS?
 Are audio and video allowed?
 Are analytics and reports provided?
 What are the security and backup features?
 If you decide to move your site, can you take
your domain name with you?

21
mangpor2004/Shutterstock
Do-It-Yourself Website Creation

22
Do-It-Yourself Skills
• Web programmers write the
code, including interactivity
which is a higher level of
coding.
• Graphic designers deal with
page and site design.
• Database administrators work
on a site’s databases.
• Network administrators
ensure the back-end and
front-end work smoothly.
• Others include: ADA REDPIXEL.PL/Shutterstock
23
Anatomy of a Web Page

24
What’s In a Web Page
• Websites consist of linked web pages. Each web page
has two main parts: the head section and the body.
• The head section includes:
 Supporting files: stylesheets, scripts, images, and multimedia files.
 API calls: links to code provided by various places which can invoke various tasks the site may
need.
 Documentation: information about the author of the page and information needed by future
developers.
 Meta tags: many types of meta tags but most common ones are description and
keywords.
 Page title: tell the browser what to display in the browser tab at the top of the
screen.
 Character set: identifies which character encoding to use.

• The body includes:

• HTML tags 25
A First HTML Web Page

26
Code Behind a Simple Web Page

27
Browser Display of Code

28
Screenshot: Microsoft Corporation. Photos: Evgeny Karandaev/Shutterstock, Denys Prykhodov/Shutterstock, hudiemm/E+/Getty Images
HTML Elements

29
Basic HTML Elements
• HTML documents are divided into elements. Elements are enclosed in tags. Most elements are enclosed in tag pairs
which means there is an opening tag and a closing tag. Everything between the opening and closing tags will be
displayed according to the rules for that specific tag.

• Basic HTML Elements:

 Text headers, denoted using the <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, or <h6></h6> tag pairs
 A paragraph, denoted using the <p></p> tag pair
 A link, denoted using the <a></a> (anchor) tag pair
 A list, denoted using the <ul></ul> (unordered list), <ol></ol> (ordered list), and <li></li> (list element) tag pairs
 An image, denoted using the <img> empty (single) tag
 A divider, denoted using the <div></div> tag pair
 A text span, denoted using the <span></span> tag pair

30
Basic Attributes of Elements
• Elements also have attributes which can
affect how the content is displayed.
• Common Attributes:
 an id denotes a unique identifier for an element in a page and is used to
locate elements through links or scripting languages, like JavaScript
 a class refers to a CSS class of an element and is one of the tools used to
change the appearance of the content of an element
 a style describes the CSS styles that will be applied to an element

31
What’s In the Head Section?

32
Code For a Sample Head Section

• Explanation is on the next slide.

33
Explanation of Code For a Sample Head Section
• What does it all mean?
 Lines 3-5: comments - Anything between an opening <!-- tag and closing --> tag are ignored
by the browser
 Lines 6 & 14: opens the head section with a <head> tag (line 6) and closed with the </head>
tag (line 14).
 Line 7: The character set is identified.
 Line 8: The Page Title will appear on the browser tab when the page is displayed. It goes
between opening <title> and closing </title> tags.
 Lines 9-11: These lines are various types of metadata.
o Line 9 uses the description meta tag to describe the content of the page.
o Line 10 uses the keywords meta tag. These help search engines find the page.
o Line 11 is the viewport metadata and is the user’s visible area of a web page. Used to
ensure that a web page will respond to the size of the user’s screen.
 Line 12: links to a stylesheet. Stylesheets describe how HTML elements are displayed in a web
page. .css stands for Cascading Style Sheet.
 Line 13: links the page to a JavaScript page, identified by .js. JavaScript can be used to allow
the user to interact with a page in many ways. In this example, the JavaScript would swap
images on the web page when the user rolls a mouse over an image.
 Line 14: This closes the <head> section.

34
What’s In the Body?

35
Header and Paragraph Tags
•All HTML elements have a default display. Here is how the
basic elements would be displayed, including text size, font
face, and color unless the developer changes these defaults
with other code.

36
Ordered and Unordered Lists
• Lists also have a default display. The following shows how
the ordered and unordered lists would be displayed,
including text size, font face, color, spacing, and bullets or
numbering unless the developer changes these defaults
with other code.

37
Images
• Images are not part of a web page. They must be saved as separate files and linked from the
body of a web page to that file.

• A common beginner’s error is to create a page on a computer with images and forget to
upload the images to the server or to upload the images into an incorrect location.

• When displayed on the Internet, the images appear to be missing:

•An image tag has no closing tag. A sample image tag looks like this:
•<img src=“path to image file” alt=“text description of image”>

38
Screenshot: Microsoft Corporation
Code For a Sample HTML Body
• Explanation is on the next slide.

39
Explanation of HTML Body Code
•What does it all mean?
 Lines 15 & 27: Everything a user sees must be enclosed in <body></body> tags.
 Lines 16, 18, & 22: comments.
 Line 17: encloses text within the <h1></h1> header tags so this text will be a lot larger than other element text. Note: header
tags are not the same as the <head></head> tags.
 Line 19: The <h2></h2> header tags are used here for a subtitle.
 Lines 20, 21, & 24: All the text between the opening <p> tag and closing </p> tag are paragraph text.
 Lines 23, 25, & 26: links to images. Line 23 will display a picture of a laptop computer named laptop.jpg; line 25 will display a
picture of a tablet computer named tablet.jpg; and line 26 will display a picture of a cell phone named smartphone.jpg.
All images are inside a folder named images. The alt = “something” is a short description of the image. It stands for
alternate text and is displayed when the mouse hovers over an image and is used by screen readers.
 Lines 27 & 28 are closing tags.

40
What is HTML5?

41
What is HTML5?
• HTML5 is the latest version of HTML.
• A new version of the HTML scripting language
• A set of technologies allowing for building more diverse
and powerful websites

42
Kinjugraphics/Shutterstock
HTML5 Tags
• HTML5 has an expanded list of elements.
• Some new elements:
 semantic elements: <header>, <footer>, <article>, <aside>,
and <section> make it easier for developer to define
presentation aspects of page sections
 graphic elements: <svg> and <canvas>:
 <svg>: Scalable Vector Graphics
 <canvas>: used to draw graphics on the fly
 multimedia elements: <audio> and <video> allow the
developer to include audio and video files with controls

43
Code For a Sample HTML5 Body
• Explanation is on the next slide.

44
Explanation of HTML5 Body Code
•What does it all mean?
 Lines 15 & 36: what a user sees is enclosed in <body></body> tags.
 Lines 16 & 20, 21 & 32, 33 & 35: The <header></header>, <main></main>, and <footer></footer> tags
define three HTML5 elements. They separate a page sections to allow for consistent headers and footers.

 Lines 17 – 19: This is what the top part of every page will look like since every page will have the same
header.
 Lines 22 & 26 and 27 & 31: The <section></section> and <aside></aside> tags define two HTML5
elements and are nested inside the <main></main> element. These elements allow developers to
position various parts of a web page.
 Line 34: This the content that will show in the footer of every page on the site.
 Lines 35 & 36 are closing tags.
•The display that this code creates is shown on the next slide.

45
The Sample HTML5 Web Page

46
Screenshot: Microsoft Corporation. Photos: PeopleImages/Getty Images, Evgeny Karandaev/Shutterstock, Denys Prykhodov/Shutterstock, hudiemm/E+/Getty Images
What is a Cascading Style Sheet?

47
CSS and How It Defines Styles
• A Cascading Style Sheet (or CSS)
is used to describe how
elements are displayed on a
screen.
Styles can be defined in three
places:
• in the HTML code in the page
<body>
• in the <head> section
• in a separate file called an
external CSS
Styles are also used for layout
which defines where each element
will be placed on a page. CSS allows
the developer to define one layout
for a desktop screen, another for a
smartphone, and another for a
48
tablet. Chaosamran_Studio/Shutterstock
Code For Presentational CSS Styles
• Explanation is on the next slide.

49
Explanation of CSS Code
•What does it all mean?
 Lines 1, 5, 16, & 20: comments

 Lines 2 - 4: The styles between the curly brackets ({ and }) will be applied to everything in the page <body>
unless a different style overrides them. Here all the fonts on the page will be Arial or Helvetica, sans-serif.

 Lines 6 - 11: identifies styles for any <h2> element in the <header> section. The <h2> elements will be 250% of
their default size, green, italic, and indented 30 pixels from the left.

 Lines 12 - 15: identifies styles for any <h3> element in the <header> section. The <h3> elements will be 150% of
their default size and indented 30 pixels from the left.

 Lines 17 – 19: all <p> text in the <main> section will be increased to 110% of its default size.

 Lines 21 – 24: puts a dark green solid border on the top of the <footer> section. The border thickness is 5 pixels.
The comment on line 22 can be ignored.

 Lines 25 – 27: aligns the <p> text in the footer to the center and decreases its size to 85% of the default.

• The display shown in the next slide is the original page with these new styles.
50
The Web Page With Styles Applied

51
Screenshot: Microsoft Corporation. Photos: PeopleImages/Getty Images, Evgeny Karandaev/Shutterstock, Denys Prykhodov/Shutterstock, hudiemm/E+/Getty Images
Styles For Page Layout

52
CSS and Page Layout
•With CSS page layout techniques elements that are contained in a web page can
be positioned relative to their default position, to other elements, and anywhere
on the viewing window.
•After applying CSS page layout styles, the developer can place images side by
side, center elements, and so on.
•To demonstrate, the next three slides will show CSS page layout styles and,
finally, how the new page looks. The CSS shown in the next slide will be applied to
the following <main> section in the sample web page:

53
Code For Page
Layout Styles
•What does it all mean?
•To save space, styles covered previously have been
replaced with ellipses (…).
 Lines 1, 7, 14, 22, & 30: comments
 Lines 3 & 4: the width style sets the viewing width of
whole web page to 800px with a margin on the left
(margin-left) of 20px. This ensures that the page
will not appear jammed on the left edge of a viewer’s
screen.
 Lines 7-10: the text-indent styles indent any <h2>
element in the <header> section by 30px and any
<h3> element in the <header> by 200px.
 Lines 11-13: the padding style is applied to any
<img> element in the <header>. There will be no
padding on the top and right side and 35px of padding
on the bottom and left right side. This is shorthand for
defining the padding as:
•padding-top: 0px;
•padding-right: 0px;
•padding-bottom: 35px;
•padding-left: 35px;
•Explanation continued on next slide.
54
Page Layout Styles cont’d
• What does it all mean? (continued)
 Lines 15-19: all elements in the <section> area will have these styles. The width of the <section> element is set to
300px. The float property ensures that the <section> will be on the left side of the page and will have no padding
on top or right side but will have 20px of padding on the bottom and 60px on the left.
 Lines 20 & 21: images in the <section> area will be centered. The float property allows a developer to align images
or text either left, right, or center.
 Lines 23 - 27: elements in the <aside> area will have these styles. The width of the <aside> element is set to 300px.
The float property puts the <aside> element on the right side of the page with no padding on top or right side but
20px of padding on the bottom and 60px on the left.
 Both areas of the <main> section have now been formatted to be the same size and to display side by side.
 Lines 28 & 29: images in the <aside> area are centered.
 Lines 31 - 34: the <footer> element has 15px of padding around all four sides.

• The display shown in the next slide is the original page with these new styles.

55
The Web Page With Layout Styles Applied

56
Screenshot: Microsoft Corporation. Photos: PeopleImages/Getty Images, Evgeny Karandaev/Shutterstock, Denys Prykhodov/Shutterstock, hudiemm/E+/Getty Images
The Form Element

57
The Form Element
•Forms are used when the site needs input from the user. Form
elements allow the browser to communicate with a web server when
the user enters and submits information on a form.
•Form elements begin and end with the <form></form> tag pair.
Between the opening and closing tags a developer may include various
types of form controls (or form elements). The form elements used
to create the form shown below are listed on the next slide.

58
Form Elements Used in Sample Form
 Text boxes are used to allow the user to enter a
name and email address. These fields are denoted
required so the form will not be submitted until they
are filled out.
 A drop-down menu for the user’s age allows the user to
select from a drop-down list. This element is called a
<select></select> list.
 Check boxes allow the user to pick more than one
item from a group of items (devices are the items in this
form).
 The textarea boxes allow the user to add extra
information if desired.
 The submit and reset buttons automatically submit
the user’s information or reset (clear) all the fields.
 Similar items are grouped together in what are called a
fieldset.
 The <legend></legend> tag pair is used to identify
the topic of a fieldset.
 The <label></label> tag pair tells the user what an
element is about.
•Code for this form is on next slide.

59
The Code For the Sample Form

60
External and Internal Links

61
External Links
• If your website has more than one page, navigation is probably the
most important thing. Broken links lose viewers!
• Two types of links: external and internal
•External links take the user away from the site and back onto the Internet. Be careful
that the link does not replace the current window!
•An external link that goes from anywhere on the Internet to the McGraw Hill’s website
looks like this:
• <a href=https://www.mheducation.com/>McGraw Hill</a>
•But the user will no longer be at the original site.
•A better way allows the linked site to open in a new window by using
code, as shown:
• <a href=https://www.mheducation.com/ target=”__blank”>McGraw
Hill</a>

62
Internal Links
•Internal links go from one page on a site to another page. The developer must make
sure the link goes to the correct path. Be careful that the link does not replace the
current window!
•An internal link is created with the <a></a> tags but the path to the requested file
does not include http:// or the domain name.
•Example: An internal link from the home page of a site to a second page named
operating_systems.html which is in a folder named documents would look
like this:
•<a href=”documents/operating_systems.html”>Operating Systems</a>

• The path to the file is inside the quotes.

• The text that the user will see is between the <a></a> tags.
• When the user clicks on Operating Systems the browser will go to the page
with the filename operating_systems.html.

63
Graphics and Images

64
Graphics and Images
• It’s hard to imagine a website without images!
• Each image is not part of the page but is a separate file that must
be linked to the page.
• Put the link where you want the image to appear.
• Image links begin with the <img src> tag and do not have a
closing tag.
• Normally all images are stored in an images folder.
•To include an image named kitten.jpg on an index.html page,
include the exact path to the kitten.jpg file. The path would look like
this:
•<img src=”images/kitten.jpg” alt=”my kitten”>

•If the path is incorrect, you would see:

65
Screenshot: Microsoft Corporation. Photo: Elizabeth Drake/McGraw Hill
Using Text For Images
• Not all browsers or computers have access to every font.
• You cannot always be sure a page will display exactly as you want.
• If a user’s computer does not have the font you used, the computer will
substitute something else.
• If you really want certain text to use a specific font, you can create an image
of that text with the font you want.
• Instead of typing in the text, insert it on your page as an image.
• Your text will look exactly as you want it all the time, regardless of the user’s
computer or browser.

66
Including Multimedia

67
Multimedia: Audio and Video
•Multimedia files include video files, audio files, and slide shows.
• Using multimedia is a good way to enhance your site and keep viewers interested.
• It is a good way to include instructions about how to do something.
• To include multimedia on a website is similar to embedding an image.
• You can use different commands such as:
• Should the file to play when the page loads or should the user click to start play?
• Should the user have access to controls, such as volume, start-pause-stop, and so
on?
• If you make your own video files, you may want to include those files as part of your
website or create YouTube videos and link to those instead.
•

68
Interactive Web Pages

69
JavaScript
• JavaScript is a programming language which allows the client-side (the browser) to
interact with the user, alter the document content, communicate asynchronously,
and more.
• JavaScript uses the same programming skills needed to write code in any language.
• The next slide shows sample JavaScript code to create a simple game. It creates a
Secret Encoder that allows the user to enter a message. The message will be
encrypted.

70
JavaScript Secret Encoder Code

71
jQuery
•jQuery is a JavaScript library designed to ease the client-side scripting of HTML.
•The jQuery code shown here uses the animate()method of jQuery to move
an object on a web page from one place to another when the user
clicks on the object.
•Note: for this to work, you must include a link to the jQuery library
(the first line of the code).

72
PHP
•PHP stands for Hypertext Preprocessor.
•It is a server-side scripting language so PHP scripts run on the server, not on the user’s computer.
•Some PHP functions:
 PHP performs system functions. It can create, open, read, write, and close files.
 PHP can handle forms and form data.
 PHP allows the owner to add, delete, and modify elements within a database.
 PHP allows a website access to cookies and to set cookies.
 PHP can encrypt data.

• The sample PHP code shown here will sort an array of names, each associated with an age, in
ascending order and display the results on the screen.

73
Anatomy of a Website

74
Anatomy of a Website
•A website consists of several web pages.
•Each page includes items such as stylesheets,
images, multimedia files, and JavaScript pages.
•Everything must be organized.
•Organization consists of folders that each hold
similar items.
•Organizing a site’s files into folders allows the
developer to use files on numerous pages, as
necessary.

75
Files and Folders
• Folder structure of a typical website:
 The images folder holds all the images.
 The documents folder might hold relevant
documents such as PDF files.
 The js folder is for JavaScript files.
 The multimedia folder holds audio and video
files.
 The styles folder holds various stylesheets.
Often a site needs different stylesheets for
different browsers or for different device sizes.
•By keeping all the files needed for a site in folders, it
is easy to use relevant files, such as the site logo, on
every web page.

76
Microsoft Corporation
Responsive Web Design

77
Responsive Web Design
(Mobile-Friendly Sites)
• Designing sites for all devices is known as RWD or Responsive Web
Design.
• Requires a lot more coding than simply changing font sizes for smaller
screens.
• Most smartphone websites use the ‘hamburger’ (the three dashes) to
indicate a navigation drop-down menu.
• Elements need to be repositioned for a small screen.
• Various techniques are used by web developers to plan and
implement how a website should look, depending on the user’s
device. These techniques include:
• fluid layout
• the flexbox model
• the grid model

78
Screenshot: Microsoft Corporation. Photo: Umberto Shtanzman/Shutterstock
Designing a Website

79
What Is Your Goal?
•Your goals drive your decision about how to
proceed.
• You can choose a free host and web design
companies and create the site using their tools.
• You could take classes on web development and
create your site from scratch.
• If you have a business, you could hire a developer.
• Remember: you need to be closely involved with
the project. You must:
• Supply the content of your pages
• Supply images or multimedia
• Supply the text of your pages
• Make decisions that affect both how the site is
available and on cost factors

80
GaudiLab/Shutterstock
Who Are Your Viewers?
• Consider your audience.
• Bright colors and lots of images are great for a
site geared to children.

• A different approach is needed if your site is

about Yoga classes.

81
blue jean images RF/Getty Images. Caiaimage/Glow Images
Consider Flow and Layout
• You want people to visit your site but you
also want them to stay there once they find
your site!
• Consistent navigation tools make it easy for
users to roam around your site. Pick a
navigation scheme and stick with it.
• Images are wonderful but don’t overdo it.
• Save long explanatory text for when
absolutely necessary. Consider using short
videos instead of detailed text.

82
Wireframes
•A wireframe is a
two-dimensional
illustration of a
page’s interface.
•Wireframes focus
on how space is
allocated and how
content is
prioritized.
•Wireframes allow
you to connect the
site’s information to
its visual design by
showing paths
between pages.
83
PhuShutter/Shutterstock
Consistent Design
• The home page is also called the splash page or landing
page.
• Every page should maintain the same basic design
features.
• Maintain a consistent color scheme.
• Some elements must be on every page:
• the header
• the footer
• navigation
• Once a viewer has arrived on your site, you want to
make sure he or she stays on your site. If various pages
look completely different, the viewer might think he or
she inadvertently left your site and become frustrated.

84
Remember Mobile Design!
•Sites are normally designed for three sizes—laptop/desktop
screens, tablets, and smartphones.
•Styles for each of the various screen sizes are develop using a
viewport tag to tell the browser which styles to use, based on the
device’s screen size.
•The most popular screen sizes for various devices are:
 Laptops/desktops: 14” – 17”
 Tablets: 7” – 9.7”
 Smartphones: 5” – 5.6”

•Viewports are set with a <meta> tag in the <head> section of a web
page. This tag tells the browser which styles to use, depending on
the screen width of the device.
•Sample <meta> tag:
• <meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

85
Cost Factors: Nothing is Really Free

86
Can You Build a Free Website?
•A website can never be completely free.
• You must purchase a domain name which must be
renewed yearly.
• You can create your website from scratch with
technical knowledge. Courses cost money or you can
study on your own.
• You need a host. You could purchase your own server
but they are expensive and hard to maintain.
• Once created, getting your site seen will probably
involve spending money on SEO.

87
tassel78/Shutterstock
Search Engine Optimization

88
Search Engine Optimization (SEO)
•A search engine is a program.
•Search engines don’t search on the web.
•Search engines look for items in a database that
correspond to a user’s search terms.
•Search engines troll the web to add sites to their
databases.
•Sites are ranked and rankings determine how and when
a site will appear in a search.
• Not all sites are given equal priority. Businesses pay to
have their sites get a higher rank.

89
wwwebmeister/Shutterstock
Introduction to SEO
•Search engine optimization (SEO) refers to making websites visible in a user’s search.
•Websites are ranked. Higher ranking means:
• A site will appear in search result lists more often.
• A site will appears close to the top of the list of results.
• This means more visitors and more prospective customers.
•Tools used by companies to achieve higher rankings:
• considering how search engines work to match user queries with sites
• understanding computer programs that dictate search engine behavior
• understanding how users search
•How SEO experts help website owners:
• editing the site’s content
• adding content
• changing the coding to increase relevance to keywords
• removing barriers to the ways search engines index websites
• SEO can cost a little… or a lot.
• Most developers include some SEO as a feature of the site’s development or add
advanced tools for added fees.
90
Maziar Roohi/123RF
The Jobs of a Web Developer

91
The Jobs of a Web Developer
•Web developers come in all shapes and sizes.
• A single person can create a static website.
• Some teams of developers only develop the appearance
of the site.
• Some teams may offer a back-end database.
• Some include site maintenance.
• Some offer SEO services.
• Some developers provide hosting as well as maintenance
and security.
•A website requires the combined efforts of many types of
people
• logical coders
• creative artists
• mathematical database analysts
• network mechanics
•There’s a place for everyone in the field of web development.

92
Rawpixel.com/Shutterstock
Front-End Developers

93
Coders
•Coders are people who write the HTML5, CSS,
JavaScript, and other programming code that goes
into creating a website.
• Write the code that becomes the site which will
be seen on the web
• Write the code that allows users to order goods
and services through a database
• Write the code to switch out images when the
seasons change and so on
• Coders must know various programming
languages and learn new techniques continuously.
• There are no absolute requirements but those with
higher level degrees are normally preferred over
self-taught or Associate's degrees.

94
Monstar Studio/Shutterstock
Graphic Designers
•Graphic design is also known as
communication design.
•Graphic designers are visual
communicators.
•They communicate ideas to inspire,
inform, or captivate consumers through
art forms that include images, words, or
graphics.
• A degree in a Graphics Design, Digital
Media, or Fine Arts is always helpful
along with a portfolio of work.

95
wavebreakmediamicro/123RF
SEO Experts
•A search engine optimization consultant analyzes and
reviews websites to provide advice, guidance, and
recommendations to business owners who want to
increase search engine traffic and achieve higher ranking
positions.
•SEO experts normally come from a background in IT.
•Since SEO is relatively new, there are few college degrees
in the field but there are many certifications available.

96
dizanna/123RF
Back-End Developers

97
Database Administrators
•Database administrators (also called DBAs)
make sure that data analysts and other users
can work with the database.
•A DBA oversees the development of the
site’s database.
•DBAs work with the front-end developers so
the website can communicate with the
database.
•A database administrator normally has a
college degree in Database Administration.

98
Gorodenkoff/Shutterstock
Server Administrators
•A server administrator (also called a systems
administrator works with computer networks to
ensure that they run efficiently.
•The server administrator:
• maintains software updates
• designs and implements new system structures
• monitors server activity
• oversees server security
• The job normally requires work experience in a
related IT role and at least an Associate's degree
in a computer-related field.
• You can get systems administration certification
through vendors such as Microsoft and Cisco.

99
Maximumm/Shutterstock
Full Stack Developers

100
Full Stack Developers
•A Full Stack Web Developer is someone who is able to work on both
the front-end and back-end portions of an application.
•A Full Stack Developer doesn’t have to be an expert in everything but
can work on both sides (front and back ends) and understand what is
going on when building an application or website.
•Full Stack Developers are in great demand but good ones are rare.
•To become a Full Stack Developer, the person:
• Must have worked in multiple languages
• Must have worked on various platforms
• Must have worked in various industries

101
Africa Studio/Shutterstock
Help Desk and Quality Assurance

102
Help Desk
•While a Full Stack Developer knows a lot
about everything website-related, there is
room in the IT field for people who know
virtually nothing—and for anything in
between.
•Every tech-based company needs people to
man the Help Desk and Customer Services
phone lines and chat rooms.
•Beginners may be hired with no experience.
•Companies also hire technicians with more
knowledge to be a second or third tier of a
Help Desk.

103
P Stock/Shutterstock
Quality Assurance
•Often companies hire people with little or no knowledge of how web
development works to perform Quality Assurance (also sometimes referred to
as Quality Control).
•Companies want people to test out websites as true end-users to ensure that
the site performs as desired for the ordinary user.
•Even with no technical knowledge, anyone interested in a job relating to
websites can start a job search today.
•The more you learn, the more you can identify which aspect of web
development is for you and there is always room for advancement.

104