WORKSHOP 2

Creating Websites and Webpages

______________________________________________________________________
Do not confuse the web with the Internet. The web is one of the services available through the Internet, but
the Internet is much more than the web. It also includes e-­ mail, chat, FTP, Usenet, etc. You can access many of
these services and protocols with the same browser software that handles the web protocols, particularly
HTML. The Internet is a global and very dynamic computer network. It came into existence quite a few years
before the web was born.

The web is quickly expanding, not to mention the available jobs that go with it. This section of the workshop
will introduce you to Google Sites, an online application used to create webpages and basic HTML commands
as well as give you an appreciation for what you see every day on the web, and for how it is put together.

A website is a set of web pages linked by hyperlinks and managed by a single entity such as a company or
individual. Websites may reside in more than one server, and they include web pages with text, images, audio,
video, and hyperlinks. Web pages include hypertext markup language and Java script.

Objectives of Workshop
1. Website Organization
2. Creating a blank template with a Name and Theme
3. Creating a New Page and Layout
4. Adding tables, images, and other Formatting Options
5. Inserting Internal and External Links

1. Website Organization
_______________________________________________________________________

Websites may involve thousands of files, so it is essential to organize them logically to be able to edit and
manage them. All websites have a point of entry or home folder, where the homepage for the site resides. The
default homepage filename usually is index.html but you can change it to anything you want. A website
address is set up in the server as a reference to the root folder of the website. By default, browsers display the
contents of the index.html file in the site’s root or home folder. When you “publish” your website, the
contents of the site’s root folder are uploaded to the server. If you have a fast, permanent connection to the
Internet and the appropriate software, you can publish your website directly from your computer, which
would be acting as a web server. Even in this case, you would want to serve your site from a mirror copy of
your files, so you can work on your website without disrupting access to your website.

1. Create a folder named MySite. This will be your site’s root folder. Then, create two new folders inside
MySite, one named HtmlPages and another named Assets. You will store the HTML part of the pages in
HtmlPages, and the pictures, audio, and other assets in the Assets folder. For more complex web sites
you would use a more complex tree of folders.
2. Choose a topic for your website and search for appropriate images using one of the Search Engines we
learned about. Save the images to your Assets folder.
3. As you add pages and assets to your website, you will use relative referencing to files and assets from
your own site, and absolute referencing to pages and assets outside your site. The relative referencing
uses the root folder as the pivot for locating files, so whenever you move or copy your whole site to
 other computers, such as the server, the references will still be correct, regardless of the name of the
server, or the location of your root folder.
4. A few things to note specifically: note the URL for the image resource (src=) and note that you see just
a filename there. This reference is "relative" to the page and that file must be in the same folder as the
index.htm file for which you are inspecting the source.

Figure 2. Relative and absolute referencing of files in web pages. The relative referencing uses the root folder
of the site as the pivot to identify local files. Relative referencing of local files allows you to move the website
among computers without breaking the links or references.

Google Sites
In this section of the workshop, you will create a simple website using Google Sites. We are using Google
Sites because it is easy to use and readily available to anyone.

2. Creating a Blank Site

______________________________________________________________________
Start by opening a web browser and go to https://sites.google.com/. You can log in using your UC Davis email
and password, set up a new Google account, or log into an existing Google account.

Once you have signed up for free or logged in, Google Sites will send you to a page asking how you want to
start a new site. There are several premade templates to choose from, but we will start with a blank site.

3. Naming Website
______________________________________________________________________
When starting with a blank site, the default will be one homepage and a simple theme. Google Sites
requires a designated homepage, so this page cannot be deleted until another page is added.
Note: If you choose a theme, it may come with some pre-­ set pages such as ‘About’ and ‘Contact.’
Start by naming your site “PLS21 Example” in the top left corner. This will be the name you see for your site in
Google Sites and Google Drive. This name is different from a domain name, which we will talk about at the end
of this workshop when publishing the site. Notice that changing the site name will also change the name in the
site itself.

These names can be changed later and do not necessarily need to match. For example, if we want to make a
website about puppies, we can change the name on the site itself to “Puppies”. Changing the names so they do
not match is not required.

4. Creating a New Page, Text box, and Header

______________________________________________________________________
Now that you have started and saved your site, you can create a new page by going to the Tabs at the
top and select “Pages”. At the bottom of the right sidebar, select the plus symbol to add a page.
Name the new page “Puppies” and click done. You can create more pages the same way.

Clicking the three dots next to a page will give you several options. For
example, we can make the “Puppies” page our homepage (indicated by
the home icon) which would allow us to delete the page named “Home”.
There are also options to “Duplicate page” and “Add subpage”.

Now, we are left with one page named “Puppies” which is our designated
homepage.

In the “Insert” tab, Google Sites has options for you to choose your own layout options. These can be a
helpful starting point for a new website, but we will not use them in our example.

Above and below the layout section in the “Insert” tab, there are several elements that you can add. This is how
we will add information to the site. To add different elements to your page, you simply click on the element you
would like to add, and it will be added below everything else that is already on the page. Elements can only be
moved after adding them to the page.

For example: Add a Text box by clicking on it. This will add a Text box to your page and give several options
for type of Text box (Normal text, Title, Heading, Subheading, and Small text), Font, Size, Alignment, etc.
To remove an element, click on it and choose the trashcan icon.

Editing Header

To edit your header, hover over the bottom left and you will see options to change the image and change the
header type. The “Change image” option will allow you to upload an image from your computer or select an
image from the internet through Google image search, Google Drive, etc.

Changing the Header type will give you options such as Cover, Large banner, Banner, or Title only. Here,
we have selected Large banner.
5. Adding Tables, Images, and Other Elements
______________________________________________________________________
We will now add a 2x2 Table that contains a picture on the left and a title with
text on the right side.

Inserting an Image

In the “Insert” Tab, click on “Images”. This will give you the option to upload an
image or select one from the internet. We will choose “Select” here which will
open a new window. In the Google Image Search tab, we can search for images
of puppies and insert one. The image can be resized to take up the left half of
the page.
Adding a Title

To add a Title, select the Text box in the “Insert” tab and change it to Title. The Title will be added below the
image. Move it to the right side of the image and title it “Puppy Breeds”.

Adding a body of text

To add a body of text, click the Text box again and drag the box to the right of the picture and below the Title.
Leave the text box as Normal text and choose the numbered list option.

Inserting a Divider

Below the layout section in the “Insert” tab, click on Divider to insert one below the first row of our 2x2
table. A faint divider will be inserted.
Now that we have completed the first row of our 2x2 table, add another row below the divider.

The completed table should resemble the picture below (Images were made smaller to fit in screen).

6. Inserting Internal and External Links

______________________________________________________________________
An internal link is a type of link that brings you to a page within the same
website. To create an internal link, we must create another page within our site.
Add a subpage to the “Puppies” page and name it “Kittens”.
Go back to the “Puppies” page. Below the final divider, let’s add an additional
text box. Click the link option in the Text box and select the
“Kittens” page. Click apply and this will automatically put “Kittens” in the text
box with a link to the Kittens page.
Adding a ‘Button’ with an external link

An external link takes you to a site outside of your website like google.com. Select the Button element to insert
below the internal link. Name the button Google and link to google.com.

This will insert a button below the Kittens internal link that can be clicked to take
you to google.com once your site is published.

7. Publishing your site

_______________________________________________________________________________

After you have finished editing your site and you are ready to show it to the public, you can click the
purple Publish button in the top right corner. Google Sites will ask you for a unique name such as
“pls21puppies” that has not already been taken.
 The URL for this published site is https://sites.google.com/ucdavis.edu/pls21puppies. You will need to
change or add to the name to publish your example site. After you publish, you will be able to view and
share your site.

For more information on publishing sites, we must first understand the relationship between Domain
Names, Domain Network Servers, and IP Addresses.

Definitions:

A Domain Name is used to identify one or more IP addresses. Domain Names are used in URLs to identify
particular Web Pages. For Example, the site sites.google.com/ucdavis.edu/pls21puppies, the domain name is
site.google.

Every domain has a suffix that indicates which top-­ level domain (TLD) it belongs to. There are only a limited
number:
• .gov—Government Agencies • .mil—Military
• .edu—Educational institutions • .com—Commercial
• .org—Organizations (non-­ profit) • .net—Network Organization

Because the internet is based on IP Addresses, NOT domain names, every Web Server requires a Domain
Name System (DNS) server to translate domain names into IP addresses.

To understand DNS servers more completely, we will, first, briefly go over what an IP Address is. Internet
Protocol (IP) Address is a 32-­ bit numeric address written as four numbers separated by periods. Each number
can be zero to 255.

Example: 1.160.10.240

Within an isolated network, you can assign IP addresses at random as long as each on is unique. However,
connecting to a private network to the Internet requires using registered IP addresses (called internet
addresses) to avoid duplicates. There are two different types of IP addresses, Static and Dynamic. A static IP
address will never change, and it is a permanent Internet address. A dynamic IP address is a temporary
addressthat is assigned each time a computer or device accesses the Internet.
Try googling your own IP address.

With a better understanding of IP addresses, we will now see how they correlate with a Domain Name
System(DNS). A DNS is an Internet service that translates domain names into IP addresses. Because domain
names are alphabetic, they are easier to remember. The Internet, however, is really based on IP Addresses.
Every time you use a domain name, therefore, a DNS service must translate the name into the corresponding
IP Address.

For example: The domain name https://sites.google.com/ucdavis.edu/pls21puppies might translate to

198.105.232.4

The DNS is, in fact, its own network. If one DNS server does not know how to translate aparticular domain
name, it asks another one,and so on, until the correct IP address is returned.

Continuing with the Lesson Plan:

Now that you have a better understanding of Domains, you will then select an appropriate domain name. Type
in pls21[your Kerberos ID]. Make sure that the domain is available for use. If it is not available, adjust the
Kerberos ID by adding numbers.

For example, the domain may look like pls21dswoods or pls21dswoods123.

More on HTML
Let's go back to the Page Source and inspect the HTML code. Note that the browser's page source and Google
Sites’ source use character formatting to help you see the tags easier. Those colors and formats are, on in the
file. Only the characters themselves are in the source.

Now that we have gone through this and you have had a chance to work with some html tags, let's do some
review and learn a few new ones. Feel free to try things out.

For more information on writing HTML code, complete the HTML tutorial
at http://www.cwru.edu/help/introHTML/toc.html .

Basic HTML codes:

<html> These tags appears at the very beginning and end of the html file; they tell the browser
</html> that the material between these tags is encoded as hypertext mark-­ up language (HTML).
<body> This command specifies the style of the body. Ex. <body background>, <body link>,<body
</body> vlink>, and <body alink>. Note: When you use multiple body commands, you can list them
all together. Ex. <body background=eyes.gif link=FFFFFF>. It requires the end command
</body>.
<title> Tags to set the title to apear in the windows handle of the browers window. The title is
</title> also what is displayed on someone’s hotlist or bookmark list, so choose something
descriptive, unique, and relatively short. Generally you should keep your titles to 64
characters or fewer.
<font-­­family="(font Tags for changing the font of your text on the page. Different types of fonts include Times
type)"> New Roman, Comic Sans MS, etc. They can be used with multiple commands. Ex. <font
</font> face= “Arial” color= “#0000FF” size= “2”>.
<p> The paragrpah tag
</p>
<br> Line break tag. Forces a blank line
<center> This command centers text, images, etc. It requires the end command </center>.
</center>
<h1></h1> Heading levels for text. This command represents text style adjustments. <h1> is the
... largest size and <h6> is the smallest. These commands require end commands; i.e., </h1>
<h6></h6> is the end command for <h1>.
<img src="(URL file This command stands for IMAGE SOURCE. It requires the name of the picture file that you
name)"> saved onto your disk. Place the name after the equals sign. Ex. <img src= simba.jpg>.
<a href="(URL This command stands for ANCHOR HYPERTEXT REFERENCE. It requires a URL address or
filename)"> text the location of your link after the equal sign but within the brackets. The text that appears
</a> after the brackets will be the hypertext that you see in blue on your web page. The </a> is
the end anchor that complements the initial <a href=(link)>. For example, <a
href=http://www.ucdavis.edu> UCDAVIS </a>.
<dd> This command puts a tab indentation to each paragraph.
<blink> Anything (text or images) between this command and the next will blink.
</blink>
<align=left> This is like the center command, except it allows pictures to be placed on the left of the
page. It is to be used in conjunction with the <img src=> command. For example, <img
src=sarah.jpg align=left>.
<align=right> This is like the <align=left> command explained above, except it puts the picture on the
right.
<a href= mailto: Allows a browser to e-­ mail you from your web page.
“(email address)”>
text </a>
<table> Designates a table. A table is consists of cells and rows. Each individual cell can contain
</table> anything from text to pictures. Generally
<tr> <tr> and <td> tags must be within a <Table> to identify the rows and how these are filled
</tr> with cells: The material between <tr> tags is the content of the row.
<td> Use as many groups of these tags as needed to specify all the cells on any one row.
</td>

Using images and backgrounds

Search for pertinent HTML GRAPHICS or BACKGROUNDS using http://images.google.com or other
search engines to find images, backgrounds, etc. When you find a site with the images you like,
make sure you read the instructions that indicate if and how you can use the resources. Typically,
text, sound, and images are copyrighted and it is required to get written permission to use them.
There are, however, several sites that explicitly indicate you can use the resources with some
limitations.

Once you have found an image or a background, you have to make a choice:

• Placing a copy of the resource into your folder:

 o Place your cursor on the resource and click with the right mouse button. In the Mac
OS, just hold control on the keyboard and click to right click.
o Select SAVE IMAGE AS or SAVE BACKGROUND AS
o Save it like any other document (it is a file); again note the file extension. Make sure
the files saves to a place where you have access (removable flash drive, folder where
you have other images, folder for your files related to the page you are building,
etc).
• Using the resource at its original location (you will not have any control if it is changed or
removed from there)
o simply use the URL as an absolute file reference

Image Editing

There are numerous software packages available to edit photos. You can easily find a variety of
them on the web and the Windows or OS-­­X operating systems also have tools that are useful for
this. For the homework you will need to do some resizing and resolution adjustment. In the
Windows labs the software Irfanview is installed as Image Viewer. Note that every image file has
a specific resolution associated with it. When you open the file, you can generally find
informationabout the picture. The dimensions are generally in pixels (rows and columns of tiny
dots). All image editing software allows you to crop away parts of a photo or picture; this
basically discards entire rows or columns of pixels. Generally, you can also specifically resize so
that the picture has a particular number of rows and columns of pixels but where the image is
interpolated rather than cropped.

For all pictures: the fewer the row x columns, the smaller the file size. For web pages we generally
need to avoid very large files because they take a long time to transmit across the network. So it is
very common practice in a web page to have a picture sized as a thumbnail (perhaps a bit larger
than an icon); if the web designer still want the user to see a higher resolution image (e.g. the
original photo), then that is frequently provided through a link to the file (so that the web page
files include two photo files. To have the image itself be hyperlinked is very simple: you simply
place the <img src=...> tag between <a href="..."> </a> tags. (As always, if you need an example,
find a web page where this is done and look at the page source).