Setting Up Web Space and your Computer
This section explains how to purchase web space and how to set up your digital edition folder on your personal computer in a way that allows transferring it directly into your web space for a working digital edition. It also explains why, after introducing the terminology that will be used in this open-access textbook. If you already understand how links and paths work, you can skip this section and go directly either to:
- A brief overview of how to set up the file structure for your digital edition [NB: what I mean by "file structure" is explained below].
- or go directly to the HTML section.
If you have web space provided by your university, do use that space: your IT services or library, whoever is providing you with the web space, should a) be able to tell you how to deposit files into that space; b) what the url will be for anything in it. They will give you access to a root folder for your digital edition.
- Important Terms
- Abstract Overview of the WorldWideWeb: Understanding Paths, Part i
- Getting Web Server Space
- Understanding Paths, Part ii
- File Structure
Important Terms
This textbook contains links to terms in a dictionary () of acronyms and terms (you can see the whole
page here, and also a smaller version to
keep open as you read). Many terms are also explained in the Basic Overview of Digital Editing
section of the Introduction.
If you wish to familiarize yourself with some of the terms used here before you begin reading, they include:
Abstract Overview of the WorldWideWeb (www)
In this abstract rendering of the World Wide Web: a server with publicly acessible web space can be
reached by devices such as laptops, tablets, and phones over the Internet
.
A URL (Uniform Resource Locator)
is a path that takes you to web pages on a specific server. The
Wikimedia Foundation has a lot of servers: one (set) of them has the
"Wikipedia" domain name, the address after "www" in the URL https://www.wikipedia.org/.
Through Reclaim Hosting, I purchased the domain name
"MaryLeapor.org" and server space to go with it ($30/year).
After 24 to 48 hours, I can go to maryleapor.org: Reclaim Hosting has put up a default "splash"
page:
a splash page is where users land when they go to the URL of maryleapor.org.
What maryleapor.org
actually TAKES you to, however, is a folder.
After you have logged into to your purchased hosting
or university site, you navigate to a publicly accessible web space where you
put the index.html, the splash page, that you
have created for your digital edition. Pictured to the right is the most basic
web page as seen from your perspective as a web site developer, on the one hand,
and the users' view when they go to your URL, maryleapor.org

I own another domain, diged.org, that points to server space using HostPapa. My public_www folder that contains multiple
websites, including the site you are viewing right now.
A folder inside my HostPapa public_www space is called DigitalEditions, and so the home page /
splash page of this online textbook is reached via the internet at https://www.diged.org/DigitalEditions/, or
really https://diged.org/DigitalEditions/index.html.
While capitals are ignored in domain names, case
matters in folder and file names: using the URL https://www.diged.org/digitaleditions/
will retrieve an error message, whereas with "Digital" and "Edition"
capitalized, it won't.
I could have put the folder for my digital edition of Mary
Leapor's poetry into that space. In that case, the URL would be https://www.diged.org/MaryLeapor/.
Abstractly viewed to the right, a URL is a path taking me
first to the web server, pubic_www, space, and second, taking me to any
folders inside that space.
Getting Web Server Space
I have purchased the domain name "MaryLeapor.org" and server
space through Reclaim Hosting, but there are many options. When you log into your
purchased or university server space, you should be able to navigate to a
folder that is publicly accessible via the Internet.
Reclaim automatically sets the main url, maryleapor.org, to open a default page called
"default.html," and has placed that file,
an html page that they created, into the public_www folder to which maryleapor.org points:

Universally, the page people land on when they go to a url is
called "index.html". Why didn't Reclaim
use that name for its default landing page?
Because when the owner of the URL and the server space
creates their own splash page, they will call it index.html. Now, the URL no longer points to Reclaim's default
page: index.html takes precedence.
(It doesn't matter, in other words, whether I delete
Reclaim's default page and logo or not because, again, universally, a URL
for a domain name takes you to index.html.)
In Reclaim Hosting, as in many other purchaseable hosting
services, you will be able to put web pages into your folders for others to
view through the "CPanel" or control panel (link at top center, marked by a
little wrench).
You will need to scroll around until you find the
"FileManager" icon and click on that.
The folder into which you will deposit documents coded as
HTML for web viewing by the public is usually called something like "www",
"pubilc_www," or "public_html." In Reclaim, you can click on the public_html
folder on the right-hand side or either of the two folders with world icons
(one has a link icon on it as well): All of these will open your main folder
for your public web server space: anything you put in this folder can be
reached by URL.
In Reclaim, you can click on the public_html folder on the
right-hand side or either of the two folders with world icons (one has a
link icon on it as well): All of these will open your main folder for your
public web server space: anything you put in this folder can be reached by
URL.
Notice the extent to which the "File Manager" window
looks like a Finder window on a Mac or File Explorer on a PC: just as these
windows show you the folders on your computer, File Manager shows you the
folders on your purchased web space.
On servers and local computers,
content is structed by folders.
Understanding Paths, Part ii
File Manager in your purchased web space — and indeed,
any directory on your university servers — displays its structure as
paths from folder to folder. Your local computer has the same organizational
structure. When I open a Finder window on my Mac, or a File Explorer window
on a PC, I can see the path to the file that I am viewing at the bottom of
the window:
If my Finder window starts with my hard drive, I follow that local path
from it by going from inside one folder to inside another: /Users / mandell / Desktop / MaryLeapor: "/" means, "go inside a child folder, a
subfolder:

There are two kinds of paths:
Absolute and Relative.
1. An Absolute path always starts with a
forward slash, "/", which takes you to the
absolute root of your local device (your harddrive, pictured in the image below
on the right).

2. A
Relative path never starts with a slash, and that path is
relative to the placement within the file structure of the document you are
coding. In this case, we will talk about a path relative to the page that
visitors will see first, the html file named index.html, directly inside the
MaryLeapor folder. The code in this document "calls" an image to appear on the
page. The image is inside the images folder which is a subfolder of the
MaryLeapor folder.

From within the main MaryLeapor folder, the code
picture immediately above, in the index.html document, will reach out to another
item within the same folder — its "sibling," the images folder (images): no slash for
siblings. Then it reaches down into the image folder (slash) and grabs the Highmore
painting called HighmorePamelaFainting.jpeg: images/HighmorePamelaFainting.jpeg
Below you can see a code view of the index.html in
the MaryLeapor folder. No need to understand the HTML code just yet: focus
instead on the relative path
that calls the Highmore image into this "splash" page (the first place that
visitors to your site come to).

Upon opening the index.html file on my
computer in a browser, I can see the image appear. But
additionally, because I have used a relative path in my code,
if I transfer my MaryLeapor folder into my HostPapa public web space, uploading
all of its contents,

and then I go to my splash page via the URL https://www.diged.org/MaryLeapor (equivalent to
https://www.diged.org/MaryLeapor/index.html), the image appears.

However, if I encode my index.html folder using Absolute
paths on my local computer,
and then transfer index.html and the images folder online,
the path to the image is broken: the Absolute link telling my web page
(index.html) where to find the image no longer points to the proper place
because the index.html file is no longer on my computer.
The pages of your digital edition are not simply
going to have images in them -- perhaps you are not even including page images
for your edition.
But each page links to css files that style them as well as to other pages within the
edition -- all of these links must be made using relative paths.

The File Structure for your digital edition
Included in this web textbook is a "DigitalEdition" folder
containing examples and all the programs and code needed for your digital
edition. Click on the download icon (to the right) to download this
folder.
Unzip it by double-, ctrl-, or left-clicking on it:

This sample digital edition contains all the folders that you
will need to have inside the main folder of your digital edition.
These folders inside the sample DigitalEdition folder
above, arranged just this way, constitute the file structure necessary for all
the instructions found here and for rendering operable all the programs provided
for creating your digital edition.
Make folders in order to create your own digital edition and add files to
it. When naming your main digital edition folder, remember that it will become
part of the URL if you move the whole folder online: don't use spaces!

Your full digital edition folder will look like this, with
the same file structure as the DigitalEdition folder that you have
downloaded.

Still confused about the meaning of the phrase "file structure"? Another explanation here.
The contents of the digital edition folder is
explained broadly in the introduction, and it will be explained in more detail
as you work through the course. But for now, it is important to understand the
following:
The https://www.diged.org web space that
I use (at Host Papa) contains many things besides the digital edition of Mary
Leapor's poetry, so that edition is one folder in the public.www (publicly
accessible web space). The same may be true of either the space that you
purchase or your public_html space on your university servers. In that case, I
transfer the WHOLE MaryLeapor folder into my web space with all of its folders
and documents inside, as you can see below:

Setting up the MaryLeapor folder in my public_www web
space is what I am doing behind the scenes. Publicly, for users to see the
digital edition, the url would be:
https://www.diged.org/MaryLeapor.
However, for the sake of demonstrating how this all works, I also
purchased via Reclaim Hosting the domain name maryleapor.org and web hosting
along with it, space that will be used exclusively for the digital editions of
Mary Leapor's poetry volumes. In that case, I move ONLY THE CONTENTS of the
MaryLeapor folder into my public web space, and the public-facing URL for my
digital edition is https://www.maryleapor.org

In the case of web space associated exclusively with
maryleapor.org, there IS no MaryLeapor folder -- or rather, the public_html
folder IS the MaryLeapor folder. Because of the way that the servers are set up,
the folder has to have the name public_html, and not "MaryLeapor," in order to
be web accessible.
Why could my digital edition's root folder be called
"MaryLeapor" in Host Papa, at https://www.diged.org, while it
cannot be called MaryLeapor in Reclaim Hosting, at
https://www.maryleapor.org? The main diged.org folder at
Host Papa is also called "public_html," in order to be web accessible, but it
contains many things inside it, including the MaryLeapor and the DigitalEditions
folder (this textbook): they are subfolders of public_html. Projects are
separated into separate folders, and the case-sensitive folder names become part
of the public URL.
Any folders and subfolders inside the public_html
folder or directory will be web accessible -- that is, visible to users via
URL.

To summarize:
Behind the scenes:
Web address for Public Viewing:
- In webspace containing multiple things besides the digital edition, the digital edition folder ("MaryLeapor") will be transferred over in its entirety.
- In webspace devoted exclusively to the digital edition, the public_www folder becomes the root, and only the contents of the "MaryLeapor" folder (the subfolders and index.html) need to be transferred over.
- http://www.diged.org/MaryLeapor
- http://www.maryleapor.org
Don't worry now about the process of transferring folders and files -- it will be explained in a later tutorial, when you are ready to publish!