ANATOMY OF A URL

WEB DESIGN

THE URLURL: Uniform Resource Locator

• Used by web browsers to identify a network resource on the Internet

What are network resources?

• Web pages

• Text documents

• Graphics

• Programs

A URL is like the address to your house

THE PARTS OF A URL

Protocol: The how

• How your browser needs to communicate with the web server when sending or requesting files

Domain: The where

• The unique reference that identifies a web site on the internet (e.g. google.com)

Path: The what

• A file or directory on a web server

THE PROTOCOL

• Often is HTTP, but you may also be familiar with HTTPS

• Hyper text transfer protocol (HTTP) is a set of instructions or commands

HTTP defines:

1. How messages are formatted and transmitted

2. What actions need to happen by your browser and the web server

THE WEB SERVER

• All websites including content, images, videos, files all must live on a web server that

is connected to the internet in order to be available to view

• When you enter in a URL your computer connects with the sever hosing the site and

sends back the necessary files

THE DOMAIN

• When you type in a URL such as www.mohawkcollege.ca, your browser connects with a domain name server (DNS) that translate the server name ”www.mohawkcollege.ca" into an IP Address

• The IP Address it used to actually connect to the server

DNS – Domain Name System:

• The domain names we’re familiar with all have a “machine-readable” IP address

IP – Internet Protocol:

• IP address (e.g. 69.127.23.407) is like your homes mailing address and isn’t easy to remember. To make it easier we use domain names

IP ADDRESS TEST

Type the IP address:

74.125.20.104 into a browser window…

IP ADDRESS TEST

…your browser will take you to:

google.com the domain name for that

IP address

https://www.youtube.com/watch?v=72snZctFFtA

VIDEO: DNS MADE EASY

…AND THE PATH

• The path refers to a file or directory (like a folder) on the web server

• If the page is using programming language to create some or all of it’s content (e.g. loading a specific product or event detail) there may be additional parameters followed by ?’s or other numbers or letters

• URLs can also contain fragments which are typically used to identify a portion of that document – eg. it “jumps” you down the page to a certain section

• This is how “back to top” often works – look in the URL after clicking, it will often have #top included after you click a “back to top” link

WEB BROWSERS & SEARCH

WEB DESIGN

• A web browser is a software application used to enable computers users to locate and access web pages.

• Popular browsers include:

• Firefox

• Internet Explorer

• Firefox

• Chrome

• Safari

• …and more

WEB BROWSERS

Web browsers translate the HTML (Hypertext Mark Up Language) code that makes

up a web page and allows us to:

• See images and video

• Read text and listen to audio

• Click links that let us travel to different web pages

WEB BROWSERS

• Web pages can look different across various browsers

• When designing for the web it important to test your webpages in many different browsers and versions to make sure they render correctly across all

WEB BROWSERS

SEARCH ENGINES

• A search engine is a website running special software that allows users to search for information on the Internet using keywords or phrases

• Keywords and phrases are stored from websites and are based on relevant content found on websites

TAKE A GUESS…

How many

Google searches were there yesterday?

TAKE A GUESS…

A) 150 million

B) 1.5 billion

C) 3.5 billion

… AND THE ANSWER IS…

3.5 billion!

SEARCH HISTORY

SEARCH ENGINES

• Search engines send out “spiders” to read and remember important information about websites

• Once the spiders have “crawled” a website, it returns and stores that information in its database

• This allows you to enter keywords and phrases and find the information you are looking for

https://www.youtube.com/watch?v=BNHR6IQJGZs

VIDEO: HOW SEARCH WORK

Search engine optimization (SEO):

• The process of affecting the visibility of a website or a web page in a search engine's "natural" or un-paid ("organic") search results

SEARCH ENGINE OPTIMIZATION (SEO)

SEARCH RESULTS

Paid Ads

Natural or “organic” results

• The higher and more frequently a site appears in the search results list, the more visitors it will receive from the search engine's users (a good thing!)

• Several techniques can be used to improve SEO – we will talk more about this later in the course

SEARCH ENGINE OPTIMIZATION (SEO)

https://www.youtube.com/watch?v=hF515-0Tduk

WHAT IS SEARCH ENGINE OPTIMIZATION (SEO)?