Electrical and Computer Engineering Computer Science
Computing
OneDrive Web Pages
If you have a Unix account on this server, then you have a web site at the URL https://ececs.newhaven.edu/~username (there is a tilde ~ in this URL). Here username is your UNH username. If you can't access a web site at this URL, then you don't have an account on the server. To set up an account, click Computing > Access in the navigation menu above.
Your files on the server are your server web files. There are copies of your server web files in a folder in your OneDrive. These copies in your OneDrive are your OneDrive web files. Your OneDrive web files sync with your server web files every 60 minutes.
You can access your UNH OneDrive files either by clicking in your UNH webmail, or through the OneDrive app on your laptop or your phone.
The OneDrive web files are in a folder called UNH_department_server or MyFiles/UNH_department_server. If there is no such folder, then your server web files are not connected to your OneDrive web files. Click Computing > Access to set up the connection.
Whenever your UNH password changes, you will need to repeat the instructions in Computing > Access to re-enable the connection between your server web files and your OneDrive web files.
If you are accessing the files through OneDrive online, you can edit the files directly by selecting Open > Open in Text Editor. If you installed the OneDrive app on your laptop, and you are accessing the files through a OneDrive folder on your laptop, use Notepad++ (Windows) or Bbedit (macOS). Both these editors are free.
Since any folder in OneDrive may be shared, you may delegate web page maintenance to others, by sharing the folder with them.
Modifying OneDrive Web Pages
Below are the instructions for modifying your web pages, assuming your web pages are set up using the UNH template. Remember, you are modifying the files in your
All web pages are built using three languages, HTML, CSS, and JS. These languages work together to render web pages: HTML specifies the logical page structure (headings, paragraphs, italics, images, etc), CSS specifies the style (fonts, colors, positioning, background, etc), and JS specifies the dynamic aspects (how the page changes in response to an action on your part).
What are the advantages of using the UNH template? Apart from a consistent look, the UNH template is easy to set up. For the UNH template, no knowledge of CSS or JS is needed, just basic HTML tags. Do not include any of your own CSS or JS unless you know what you're doing, because it will break elements of the template. Use only the basic tags
Each tag <h1> has a corresponding closing tag </h1>. For example, paragraphs are enclosed in <p>...</p>
and the HTML code for the last two paragraphs is
<p>
All web pages are built using three languages, HTML, CSS, and JS. These languages work together to render
web pages: HTML specifies the <i>logical</i> page structure (headings, paragraphs, italics, images,
etc), CSS specifies the <i>style</i> (fonts, colors, positioning, background, etc), and JS specifies
the <i>dynamic</i> aspects (how the page changes in response to an action on your part).
</p>
<p>
What are the advantages of using the UNH template? Apart from a consistent look, the UNH template is easy to set
up. For the UNH template, no knowledge of CSS or JS is needed, just basic HTML tags. <i>Do not include any
of your own CSS or JS unless you know what you're doing, because it will break elements of the template.</i>
Use only the basic tags
</p>
The UNH template is responsive; this means the template layout adjusts automatically to being viewed on a phone. The UNH template also incorporates MathJax, which allows you to write equations/graphs/diagrams/circuits directly in your web page using LaTeX.
Instructions
The WebFolder folder contains files and folders arranged in a tree
WebFolder
└── index.html
└── navbar.html
└── research
└── index.html
└── teaching
└── index.html
└── images
└── selfie.jpeg
└── dropdown
└── index.html
└── a
└── index.html
└── b
└── index.html
Each folder contains a file index.html. This is the default landing page for a browser. When you enter the URL https://ececs.newhaven.edu/~username/folder1/folder2, the web server returns the contents of the file WebFolder/folder1/folder2/index.html.
For example, the contents of the file WebFolder/teaching/index.html are returned when entering the URL https://ececs.newhaven.edu/~username/teaching in your web browser.
All your website URLs start with /~username/ These URLs map to files in username's (that is you) WebFolder.
When inserting links into web pages, no need to include in the URL the server ececs.newhaven.edu or the protocol https. The defaults are assumed, and links are written as above and below.
When you open an HTML file, always open it in an editor (above) as plain or raw text, not in rich or formatted text. This way you can see the HTML tags. For example, the contents of the file WebFolder/teaching/index.html consists of the following four lines
The entire teaching page file, with all its bells and whistles, corresponds to just four lines. If you do not see exactly this when you open your teaching.html file, then you haven't opened it as plain or raw text.
The use of the include statements is a huge time-saving mechanism: The above four lines total 167 bytes, but, when viewed through a browser, the corresponding web page totals 32,018 bytes.
Do not modify the first two and the last lines, only modify the space between: The <h2> header, and any text you want you insert. You can guess what the three lines do: they insert all the UNH heading boilerplate, the footing boilerplate, and your personal navigation menubar. Here are notes to help with file modification.
Careful: Everything is case-sensitive.
These are instructions to modify existing files. To create new files or folders, see the last step below.
Do not copy old web pages blindly. Only copy and paste content, never code. Use View Page Source in your web browser to extract and copy content from an old web page. Do not copy CSS or JS code (anything that you do not understand). Doing so will break your page.
The folder containing your entire website is WebFolder, and the file WebFolder/index.html is the main entry page
Additional files WebFolder/teaching/index.html, WebFolder/research/index.html, etc correspond to menu items in the file WebFolder/navbar.html.
Each menu item x in the file WebFolder/navbar.html has a corresponding file WebFolder/x/index.html.
You may add an item x to the menu, just modify WebFolder/navbar.html accordingly, and add a folder WebFolder/x containing a file index.html set up like one of the others.
The main file WebFolder/index.html assumes there is an image file WebFolder/images/selfie.jpeg (image size: 144x256 pixels)
The folder "dropdown" is there in case you want to add a dropdown menu to the navbar menu. This is optional. To add it to the menu, delete the lines indicated in WebFolder/navbar.html.
To make a new index.html file, it's best to copy over a folder containing such a file then rename and modify contents.
To obtain more information about any step, google it, many have passed this way before.
in your UNH webmail, or through the OneDrive app on your laptop or your phone.