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:

  1. 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].
  2. 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.

  1. Important Terms
  2. Abstract Overview of the WorldWideWeb: Understanding Paths, Part i
  3. Getting Web Server Space
  4. Understanding Paths, Part ii
  5. File Structure


Important Terms

This textbook contains links to terms in a dictionary (dictionary icon) 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 Weba link to Wikipedia's definition of the Web: a server with publicly acessible web space can be reached by devices such as laptops, tablets, and phones over the Internetlink out. Abstract drawing of the Internet



A URL (Uniform Resource Locator) a link to the term's definition 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/. Slightly less abstract view



Through Reclaim Hosting, I purchased the domain name a link to the term's definition "MaryLeapor.org" and server space to go with it ($30/year). The url https://www.maryleapor.org



After 24 to 48 hours, I can go to maryleapor.org: Reclaim Hosting has put up a default "splash" pagea link to the term's definition: a splash page is where users land when they go to the URL of maryleapor.org. The default splash page provided by Reclaim Hosting



What maryleapor.org actually TAKES you to, however, is a folder.

image of 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

a code view and a user view, side by side


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. The digital edition folder's location in File Manager


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/. a MaryLeapor folder inside a public_www folder



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. abstract view of URLs as paths

Back to Top

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. logos for hosting companies

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:

the default page inside the public_www folder



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? The splash page for any web space is called index.html



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. An index file in Reclaim Hosting's public web space



(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.) public_www folder with only the index.html file in it



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). Client area of Reclaim Hosting



You will need to scroll around until you find the "FileManager" icon and click on that. the control panel in Reclaim Hosting



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. an image of File Manager in Reclaim Hosting



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. an image of File Manager in Reclaim Hosting


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.


Back to Top

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: a local path on your computer


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:

the path from my computer's hard drive to the MaryLeapor folder on my Desktop


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).

an Absolute Path


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.

a Relative Path


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).


blurry view of the code comprising the HTML file, with the image path standing out


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,

transfer from desktop to the public_www folder


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.


Web view of the splash page, working properly



However, if I encode my index.html folder using Absolute paths on my local computer, blurry view of the code comprising the HTML file



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. Web view of the splash page, broken


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.

there are many relative paths in index.html

Back to Top

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. click on this icon to download


Unzip it by double-, ctrl-, or left-clicking on it:

unzipping a zip file



This sample digital edition contains all the folders that you will need to have inside the main folder of your digital edition. file structure necessary


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!

make folders and name them

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

what your digital edition folder will look like

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:

MaryLeapor folder in Host Papa


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.

Image showing the public_html folder in Host Papa

To summarize:


Behind the scenes:

Web address for Public Viewing:


  1. In webspace containing multiple things besides the digital edition, the digital edition folder ("MaryLeapor") will be transferred over in its entirety.
  2. 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.
  1. http://www.diged.org/MaryLeapor
  2. 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!



Back to the top

Home