The document provides instructions on getting a website off the ground, including registering a domain name, finding a web host, using content management systems, and setting up Google Analytics. It explains concepts like domain names and top-level domains, domain registrars, web hosting options like shared, dedicated, and virtual private servers. It also covers content management systems like WordPress, Drupal, and Joomla, and how to install them. Finally, it discusses using Google Analytics code to track website visitors and recommends placing the code before the closing </body> tag for optimal page loading.
Generative AI for Technical Writer or Information Developers
Get Your Website Off the Ground
1. Get Your Website
Off the Ground
Athena Center Leadership Lab
March 3, 2012
Vanessa Hurst
@DBNess
2. Why We’re Here
Plain English
Visual examples
Register a domain name
Find a hosting provider
Administer, add content, and develop an easy-to-use site
Set up Google Analytics to get key information about your visitors
What Content Management System (CMS) can do
3. What really makes a website?
Every single webpage has a URL
URL = Uniform Resource Locator
aka Standard Directions to Locate This Page on the Internet
URL includes Domain + Content
Domain (Location)
http://www.google.com
Content (Specific Resource)
http://www.google.com/analytics
http://www.myblog.com/i-love-websites
5. Domain Registration
The process of claiming / reserving a domain
name.
Lasts for one year, then you must renew the
domain if you want to keep it.
Should cost ~$10/year.
6. URL = subdomain.domain.tld
There are several parts to every URL:
Domain
http://mobile.etsy.com
Subdomain
Top Level Domain
(TLD)
7. Top Level Domains (TLD)
Common Top Level Domains:
.com
.net
.org
.edu
.gov
If possible,always get a .com domain
10. Country Code TLDs
Each country has a top level domain.
Each country has its own requirements and fees for
registering a site using their TLD.
You may need to reside in the country
Some popular TLDs that are country codes:
.ly (Libya)
.me (Montenegro)
.us (United States)
12. Domain Registrars
Lots of choices:
nearlyfreespeech.net
domain.com
register.com
dreamhost.com
networksolutions.com
It’s easiest to register the domain with the same company
you use to host, but you can change your host and keep
your domain
14. Free Sites as Hosts
Instead of paying a hosting provider to host your domain,
you can leverage a service like
Tumblr
Blogger
Posterous
http://lifehacker.com/331865/host-your-domain-with-free-
apps
17. Three Main Website Controls
Domain Registrar
Rents you your domain ($/yr)
Tells the rest of the world you are in charge of the domain
Web Host
Puts your website on their web servers
Email Provider
Handles only Email traffic your domain
Uses MX (mail exchanger) Records to point from your domain to your
email provider
19. A Home for your Website
Once you’ve secured the domain, you need a way to make it
available for others to see!
You need someone to host your domain in order to use a domain
you’ve registered
A hosting service provides you with a web server
The web server is what actually makes your website viewable
from any browser, on any network, anywhere
20. Servers (Jargon Alert!)
I’m so lonely...
I wish someone
would look at my
A server is just a computer! site...
A server is a computer that
sits around waiting for you to call
Servers run special web server software
so they can understand what you ask for
and return information back to you
21. Web Server (Jargon Alert!)
Web Servers are a combination of:
A computer (the server)
Softwarethat knows how to handle website
requests
The job of a web server is to pass a website back to
the client who requested it
It serves you content,
directions, etc.
23. When You Visit a Website
You want to view Etsy’s
website, so I’ll pass you
back the HTML file that
Etsy’s describes it! Your computer
Web Server & web
browser
index.html
index.html
IP DNS:
Address:123.1 Domain Name Server
.2.123
24. The Domain Name System
DNS = Domain Name System
DNS is like a phone book.
It takes a domain (etsy.com) and looks up the
IP address for that domain.
The IP address is the unique identifier for the
server that hosts your website.
25. Domain Registrar vs.
Domain Name System
Domain Registrar
Tracks who controls the domain (you)
Domain Name System
DNS Servers track where a domain should point at
any time
Acts as a global phone book for domains to specific
servers websites live on
26. DNS gives us an Address
Show me
www.Etsy.com
www.Etsy.com ?
Right now, that means
123.1.2.123
What does 123.1.2.123
mean?
What does it point to?
DNS:
Domain Name Server
27. When You Visit a Website
You want to view Etsy’s
website, so I’ll pass you
back the HTML file that
Etsy’s describes it! Your computer
Web Server & web
browser
index.html
index.html
IP DNS:
Address:123.1 Domain Name Server
.2.123
28. Kinds of Website Hosting
Shared Hosting
Dedicated Server
Virtual Private Server
Image by MyDocs
29. Shared Web Hosting
Shared Hosting is when
multiple sites live on the same
web server.
Each site has its own separate
space on the server.
Sites share the server’s CPU
and memory
Cheapest option for hosting
(~$9/month)
Image by MyDocs
30. Dedicated Web Hosting
A dedicated server is a
server that is ONLY for you
You do not share the space
with any other customers
You get to utilize the full
CPU and memory from the
computer just for your site
Most expensive option
(~$99/month)
Image by MyDocs
31. Virtual Private Server
A Virtual Private Server is a mix of shared hosting and
dedicated hosting
You still share space on a server
But your space is separated into a “virtual server”
You get your own dedicated piece of memory and CPU, no
more sharing resources
Price depends on how much memory you want to use
Image by MyDocs
32. Things To Look For in a Host
Don’t get charged per email address
Hosts should have Backup options
Even better, automatic routine backups for your database
and your files
Hosts may only support specific languages and databases
Ease of scale if you’re building an application
Cloud providers like Amazon EC2, Heroku have sliding scale
pricing plans
33. Web Hosting Companies
DreamHost dreamhost.com
A Small Orange asmallorange.com
Liquid Web liquidweb.com
Blue Host bluehost.com
36. Site Admin
Once you have registered a domain and purchased web hosting, you’ll
need to learn you to administer your site:
Adding and configuring email accounts
Managing databases
View details of % space you’ve used
Install CMS software like WordPress
This is typically done from a web-based Control Panel that is provided
by your hosting company
37. Control Panels
Some companies have their own custom control panel
Some have standard panels:
cPanel
Webmin
Open Panel
http://en.wikipedia.org/wiki/Web_hosting_control_pan
el
41. Content Management
Systems
Instead of writing the HTML and CSS from scratch, you
could use a Content Management System (CMS)
CMSes allow users to create, edit, and administer content
without significant technical knowledge
42. Open Source
Open Source Software
lets you see the exact code it uses to run
FOSS = Free & Open Source Software
lets you see the code and use it for free
43. CMS
The most popular CMSes, all mentioned on the previous page,
are Wordpress, Drupal and Joomla!
Wordpress is most commonly used for blogs, though it can also
be used for a more general-purpose website.
Drupal and Joomla! are used for general-purpose sites.
All three of these CMSes are written in the PHP programming
language.
46. Installing WordPress on cPanel
cPanel on certain hosting companies has a feature
called “Fantastico” that allows you to install software
easily
Software / Services section of cPanel’s main menu
47. Dreamhost One Click Installs
Install WordPress, Drupal, etc. without looking at code
48. Redirecting a Domain
Sometimes it’s useful to redirect one URL to another
Maybe you have registered two domains, but you want them
both to point to the same site.
50. HTML + CSS + ? = A Website
Websites are often composed of other kinds of files in
addition to HTML and CSS.
Some common ones are:
JavaScript files (file.js)
Ruby files (file.rb)
JavaScript and Ruby are both programming languages
that let you define the behavior of a website.
51. Content, Presentation,
Behavior
JavaScript or Ruby files contain code that let you do
things like:
Validate a form (“you didn’t enter a password!”)
Save data in a database (“Thanks for creating your new
account!”)
52. HTML + CSS = A Website
CONTENT PRESENTATION
index.html style.css
53. HTML + CSS + Code =
A Dynamic Website
CONTENT PRESENTATION BEHAVIOR
index.html style.css validate.js
talkToDB.rb
54. What is HTML?
HTML tells our browsers how to layout the page.
It describes web pages using markup tags.
We usually just refer to HTML’s markup tags as
“HTML tags”
55. What does HTML look like?
Right-click on ANY website, and choose “View Source”
You can see the HTML and CSS of every single website
on the web!
HTML/CSS are open platforms
56. What does HTML look like?
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
57. HTML vs CSS
HTML defines the content and structure
This is a HEADING
This is a new bullet
CSS defines the formatting and style of the content
This text should be blue
This font should be Monaco
58. Where can I learn HTML?
Athena “How to Build a Website”
http://htmldog.com
http://code.google.com/edu/submissions/html-css-javascript/
(includes video courses)
http://www.w3schools.com
With w3schools.com, if you want to learn and play around,
you don’t need a website, you can use their online tools to
learn.
59. FTP: Getting files onto a web
server
How did the index.html file get to the web server?
Files are copied onto web servers over TCP/IP by using yet
another protocol, FTP: File Transfer Protocol.
It is used in applications like Filezilla to upload lots of files
in bulk.
It requires a username, password, and server address.
64. What is Google Analytics?
Google analytics is JavaScript code that allows you to
obtain information about your website’s visitors.
65. Google Analytics Code
What the Google Analytics code snippet will look like:
<scripttype="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-24017494-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga =document.createElement('script'); ga.type ='text/javascript'; ga.async =true;
ga.src = ('https:'==document.location.protocol ?'https://ssl' : 'http://www') +'.google-
analytics.com/ga.js';
var s =document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
66. Placement of Analytics Code
You have two choices of where you insert the snippet of
JavaScript code that Google provides you:
In what is called the <head>section in your HTML
Right before the closing </body>tag in your HTML
67. Google Analytics Placement
We recommend placing the Google analytics snippet
right before the closing </body>tag in your HTML
This placement makes your page load slightly faster
Why it loads faster has to do with how browsers load
web pages
68. How Browsers Load Pages
Browsers load pages by executing the HTML, CSS and
JavaScript code included in the website
It starts at the top of the file and loads each line one
by one
If you have your Google Analytics code at the top, it’ll
run that code before loading the content of your page
(your links, images and text)
69. Google Analytics Code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>Hello World!</title>
</head>
<body>
<h1>My first website!</h1> Place Google
<!-- OPTION 2 -->
Analytics code
</body>
</html> here!
Right before the </body>