Website basics - how to build and understand you home on the web

1. Websites 101:
What is a website?
By: Caity Cogdell

2. Your Home on the Web

3. Your Website: Your House
Your website is your
home on the web.
In fact, there are many
helpful ways in which we
can think of a website in
terms of a house.

4. Hosting: The Empty Lot
A hosting account is a
server (a computer) where
your site files are stored.
The hosting account is like
an empty lot where you
will build your house.

5. IP Address: Latitude/Longitude
The IP address is a string of
numbers that give the exact
address of your hosting
account.
Ex: 198.154.222.140
It’s like latitude and longitude
– an accurate description of
where your house is, but not
very useful for telling
someone how to get there.

6. Domain Name: Street Address
Your domain name is the
address people will
remember. You buy it from a
domain registrar (e.g.,
GoDaddy), which points the
domain to your IP address.
Ex: cardinalwebsolutions.com
It’s like your street address.
This is the address you will
give to visitors.

7. DNS Records: Phonebook
The DNS records are a list of entries
connecting your domain or subdomains
(ex. mail.yourdomain.com) to the exact
IP address or server where they “live.”
Ex:
NAME TTL TYPE DATA
www.example.com. 1800 A 198.154.222.141
It’s like a phonebook – back when people
actually used phonebooks. You can look
up a person or business by name and find
their address.

8. FTP: The Highway
The FTP (File Transfer
Protocol) or SFTP (SSH File
Transfer Protocol) is how you
move files between your
computer and the server
where the site is hosted.
It’s like the highway that the
moving truck takes to bring
your stuff to your new house.

9. HTML: Framework
HTML stands for Hyper
Text Markup Language.
HTML tags are the
building blocks that
make up the structure of
your site.
Ex: <p>Hello, world!</p>
HTML is like the
framework of your
house: the foundation,
walls, and roof.

10. CSS: Paint & Other Styling
CSS stands for Cascading
Style Sheets. It controls the
appearance of HTML
elements. CSS can be used to
make a website responsive.
Ex: p { padding: 10px; }
CSS is your paint, style of
doors, size of window frame,
anything the changes the
surface appearance of your
home.

11. JavaScript: Gadgets
JavaScript (JS) is a programming
language that gives the website extra
behaviors. It can be used for many
things, such as changing content on a
page, animating content, making
content interactive, or tracking
information.
Ex: <script>document.write("<p>My
First JavaScript</p>");</script>
JavaScript is like the many gadgets you
find in a home to make it more useful
or enjoyable, such as clocks,
calculators, TVs, or your security
system.

12. Content: Furniture
Your content consists of the
text and images that fill in
the framework of your
website.
Content is like furniture. It gives a room (or page)
purpose. It should be relevant to the page it’s in and
should fit appropriately – you wouldn’t put a toilet in the
bedroom or try to fit a king-sized bed in the closet.

13. Links: Doors
A link takes you from one page on
your site to either another page
on the same site, or a different
site entirely. Links are created
with the HTML anchor (or “a”)
tag.
Ex: <a
href=“http://cardinalwebsolution
s.com”>Our Website</a>
Links are your doors. Make sure
there’s a door to every room in
your house so that your guests
(and Google) can find their way!

14. Components of a Website

15. Components: Overview
 Domain name
 Hosting
 Site Files
 Database (optional)
 CMS (optional)
 Plugins (optional)
 Browser * (not actually part of the website)
Although these components are
not required for all websites,
they are strongly recommended
for and are present in most
modern websites.

16. Components: Domain name
Your domain name is part of your URL. It is what
people will type in the address bar to go your
site.
You buy it from a domain registrar, such as
GoDaddy or NameCheap, and then you point it
to your hosting account by entering the correct
nameservers or altering the DNS records.
Domain Ex: cardinalwebsolutions.com
URL Ex: http://cardinalwebsolutions.com/about

17. Components: Hosting
Your hosting account is rented space on a server. A
server is a computer that holds your site files.
You can purchase hosting from a company such as
HostGator or BlueHost. There are many options, most
of which also sell domain names, such as GoDaddy.
You can also have your own server if needed. This gives
you more flexibility, but also takes more work to
manage.

18. Components: Hosting
Like any computer, hosting servers run on different
operating systems. Two of the most common
operating systems for hosting servers are Apache
(Linux) and Windows.
Apache Windows
Can run HTML Can run HTML
More likely to use PHP More likely to use ASP.net
Uses .htaccess file for redirects Does not use .htaccess file
Typical URL: index.php Typical URL: default.asp
Like all rules, you’re sure to find exceptions to this list – just use these as general guidelines.

19. Components: Hosting
When you switch hosting accounts, you have
to point your domain name to the new
hosting account.
After you make the switch, the changes need
to propagate, or spread through the Internet,
before you’ll see a difference. This can take
anywhere from 10 minutes to 48 hours.

20. Components: Site Files
Site files can include
images, documents,
templates, HTML files,
anything you upload to
your website. You can
access the files through
the FTP or a File Manager
in the hosting account.

21. Components: Database
A database is essentially a
spreadsheet containing your
website’s content and linking it
together. For example, for a
WordPress site, the database would
contain tables for settings, posts,
comments, users, etc. The website is
coded to automatically pull this
information into the template.
When moving a website to a new hosting account, it is important to
move both the site files and the database (if there is one).

22. Components: CMS
A content management system (CMS) is a user
friendly interface for making changes to a website.
Any site using a CMS will also have a database, but not
every site with a database will have a CMS.
WordPress, Joomla, and Drupal are all popular CMSs.
Ecommerce sites have their own type of CMS called an
ecommerce platform. Magento is one of the most
common, but the WooCommerce plugin combined
with WordPress is also very popular.

23. Components: Plugins
Most of the more common CMSs allow plugins, 3rd party
extensions that add new functionality to the site or CMS.
Plugins save a lot of time and money because you do not
have to write your own code for the features you want.
Although some advanced plugins require payment,
many are free.
Always do your research and read reviews before adding
a plugin, and backup your site beforehand.

24. Components: Browser
A browser is not actually part of
your website; it is the program the
visitor uses to view the site.
Each browser renders code slightly
differently, so it is important to test
a site in multiple browsers before
launching.
Common Browsers
(in order of market share)
 Chrome
 Internet Explorer
 Firefox
 Safari
 Opera

25. In Conclusion

26. Review: What is a website?
A website is a collection of files and sometimes
a database stored on a hosting account and
accessed by users via a domain name. It is
viewed through a browser.
Many websites are edited using a CMS, which
may be bolstered by plugins. You may also have
to transfer files directly using the FTP.