The UIC Math department has a simple webserver that you can create a personal webpage on. It provides a file folder for you to put your website files in and then serves them up to the internet. The simplest way to do this is to create your website HTML, CSS, and media files on your local computer and put them on the remote server using an SCP/SFTP client.
Instructions for using Cyberduck users running MacOS to transfer files exist in our intranet site. There are instructions available for Cyberduck users using Windows and there are also directions for using WinSCP.
Note that you also have a home folder for storing files that will not be served to the internet. Files you do want to serve to the internet should go in public_html within your home folder.
One more thing that I will note here and repeat later is that it's best to use relative links on your website when you are linking to other parts of your own page. If you do this when you copy the full contents of public_html to your computer you can view and browse the files locally by opening them in a web browser. All of the links will point correctly to the proper file in your local copy of your website. When you upload them to the remote server and then visit the website at:
https://homepages.math.uic.edu/~your-username-goes-here
the links will still point to the proper file on the remote server.
Your website is served canonically at:
https://homepages.math.uic.edu/~your-username-here
but there is also a redirect to that page from the following URLs:
https://math.uic.edu/~your-username-here
https://math.uic.edu/u/your-username-here
https://www.math.uic.edu/u/your-username-here
https://www.math.uic.edu/~your-username-here
https://homepages.math.uic.edu/u/your-username-here
I generally recommend using the canonical URL when providing links to your page, however when manually typing the URL for your page into a browser it is convenient to provide the shortest URL possible and (on phones) to avoid having to input the somewhat inconvenient to type ~ character.
that will redirect to your webpage. I would generally
recommend using this as the URL is shorter. The nesting of file
folders in the public_html folder translates to a
directory component after
the https://math.uic.edu/~your-username-goes-here
part of the URL. To give a concrete example, if you make
a seminar_talks folder in public_html and put
a file called slides.pdf in that folder it will be
available at:
https://math.uic.edu/~your-username/seminar_talks/slides.pdf
I recommend avoiding having spaces in your file and folder names. If you really want to have spaces in your file names you can use HTML entity encoding to link to those files but spaces themselves (as well as other whitespace characters like tab) are not allowed in URLs.
HTML is a markup language with a tagged tree structure kind-of similar to LaTeX syntax. Unlike LaTeX it does not need to be compiled, if you open an HTML file in a web browser, it will render it directly. However, most web browsers are not also text editors suitable for editing an HTML file. You almost certainly need a separate application to edit the contents of your HTML (and other) website files.
An HTML tag is opened with a tag
like <tag> and closed
with </tag>. This works very much like:
\begin{environment}
...
\end{environment}
in LaTeX documents. For example for the paragraph tag <p> you would write:
<p>
...
</p>
A few tags like
the <br> tag are
singleton tags which don't require a separate close tag.
At the outermost level you have
the <html> tag. Only
stuff that goes in
between <html> and
</html> will be rendered
by the web browser so make sure all of your content goes after
<html> and before
</html>.
The second highest level HTML tags
are <head> and
<body>.
The <body> tag
encapsulates the content that will be rendered in the browser
window. The <head> tag
enclose meta-data, like the title of the page that get's
displayed at the top of window (or tab) on a PC browser or the
particular version number of the HTML (or XHTML) specification
that you are using for your document.
Plain text is a file format that stores only character data, e.g. letters, numbers, spaces, punctuation symbols, and even some other wackier types of characters. It doesn't store any sort of formatting data like bold, italic, or font. The vast majority of the world's programming and markup languages must be written as plain text. LaTeX is also written in plain text and you don't need a special editor to write LaTeX, however many people prefer to have an editor that provides buttons to compiled it into a PDF and automatically display the compile log info when you press them. (A LaTeX editor can be used to write HTML but it generally wouldn't be the best choice for that task)
Many text editors provide syntax highlighting (displaying different parts of your code in different colors) and also let you change the font and change other formatting information in your file. It's important to keep in mind that this information is not actually saved in the HTML file, instead it's rendered by the editor program whenever you open the file. If you accidentally save that formatting information in say, RTF format in your HTML file, web browsers will fail to render it properly. The fact that the built-in RTF Editor in MacOS, TextEdit, makes it easy to make this mistake is why I recommend using something else, even though this application comes with your Mac.
Windows comes with a very basic text editor called Notepad. It has no fancy features like syntax highlighting and using it means that you have to care about the historical differences in line termination in DOS vs. Unix. If you don't want to care about that, don't use Notepad.
You could learn the HTML spec completely and fully understand the syntax and semantics before you write anything. It's not that complicated (it's way simpler than TeX/LaTeX) so it's not that hard to do this. But you're a busy person, aren't you? You probably just want to copy another website (like this one) and modify the bits you need to change so that it displays the information you want to present instead of a tutorial on how write a website. It's perfectly reasonable to just learn the minimal amount of things you need to to get the page to properly render the information you want to present.
Besides the <html>,
<body>, and <head> tags that we've already
mentioned there are a few worth mentioning (though the following
list is not exhaustive). Amongst these, the most integral tags
will be annotated with (*).
<a>*
What would the HyperText Markup Language be
without hyperlinks? You use
the <a> tag to put links
from an HTML file to other documents on the web. There are also
other link types like email and phone number links. Links are really what make the world wide web a web.
There are 2 different styles of links: a fully qualified (aka absolute) link and a relative link. An absolute URL gives the full path to the linked object and should be used only for external links outside of your website. For example:
<a href="https://wikipedia.org">
this is an absolute link to wikipedia
</a>
You can also give the path to the linked URL relative to the current URL of the HTML document you are editing. This is only useful for links that are served by the same webserver at the same hostname. However, it is always better to use relative links whenever possible for internal links on your website. If you do this, you can drag and drop your entire public_html folder to your local computer, open the folder in your web browser, and still have all the files point to the correct target. You can also move the contents of public_html within a subfolder or to a completely different webserver and all of the site-internal links will still work. Here is an example of relative link to a file "slides.pdf" which is placed within a seminar_talks folder in the same folder as the current HTML document:
<a href="seminar_talks/slides.pdf">
this is a relative link to a PDF file in the seminar_talks folder
</a>
Please keep in mind that whitespace is not allowed in a URL.
<h1> <h2> <h3> ... *The <h?> tags mark headings in your text. This is similar to how LaTeX has chapter, section, sub-section, etc. environments. You should use these tags to structure the contents of your HTML document. Don't just use visual tags like <b> to mark the headers of sections of your website, use the appropriate heading tag. This allows screen readers to parse and navigate your website better. It's also just good style.
Accessibility guidelines mandate that headings shouldn't skip a label. For example, putting <h3> below <h1> with no <h2> in between would be considered a problem by web accessibility guidelines. If you want to change the visual appearance, use CSS to change your heading styles, don't just skip a nesting level.
This might sound just a bit complicated but in practice the concept is very simple and easily explained by an example.
Example content goes here
This is a sub-topic
Here we get into an even more specific subtopic
Now we move on to the next level 3 topic
<h3>level 3 heading example</h3>
<p>Example content goes here</p>
<h4> level 4 heading example</h4>
<p>This is a sub-topic</p>
<h5>level 5 heading example</h5>
<p>Here we get into an even more specfic subtopic</p>
<h3>new level 3 example heading</h3>
<p>Now we move on to the next level 3 topic.</p>
You will notice none of this example code is indented to show the nesting level. That's not just because the author of this tutorial is lazy, it is because while the heading tags represent the logical structure of your document, the heading tags do not actually encapsulate the section of the HTML document which they provide a heading for. Looking at how the headings are terminated above, that should be clear.
A consequence of this is, though, that if you want to write stylistically correct HTML you have to keep track of how you've nested your headings outside of the tagged structure of the HTML itself
<p>*
This is the "paragraph tag". Properly enclosing your paragraphs
in paragraph tags helps screen readers and search engine
webcrawlers properly parse your website. While you can put bare
text inside <body> or <html> without any additional
enclosing tags, this is sloppy HTML and may cause problems when
other parts of your website get complex.
This code is itself an example of using the paragraph tag:
<p>
This is the "paragraph tag". Properly enclosing your
paragraphs in paragraph tags helps screen readers and search engine
webcrawlers properly parse your website. While you can put bare text
inside <body> or <html> without any
additional enclosing tags, this is sloppy HTML and may cause problems
when other parts of your website get complex.
</p>
<p>
This code is itself an example of using the paragraph tag:
</p>
<em>
The <em>
tag emphasizes text. The exact style of emphasis
is configurable with CSS but the default is usually to
italicize it.
<em>emphasizes text</em>.
<strong>
The <strong>
tag strongly emphasizes text. The exact style of emphasis
is configurable with CSS but the default is usually to
bold it.
<strong>strongly emphasizes text</strong>.
<ol> <ul> <li>*
<ol>
<ul>
<li>
<ul>
<li>
There are 2 kinds of lists we can make in HTML:
<ol>
<li>We make ordered lists with <code class="prettyprint"><ol></code>
</li>
<li>
We make unordered lists with <code class="prettyprint"><ul></code>
</li>
</ol>
</li>
<li>
In both cases a list item is enclosed
by <code class="prettyprint"><li></code>
</li>
<li>
Either type of list tag may be nested within itself or the
other list tag.
</li>
</ul>
<table> <tr>
<td> <th> HTML has tags for creating tables. In the dark ages of web publishing, these were often also used to style websites in certain ways, however CSS obviates the need for using tables for any other purpose than holding tabular data. In the below table we include the key tags you should know if you want to create an HTML table, but there a few more that you can read about in the W3C schools reference page HTML for tables.
| tag | tag function | required for valid HTML? |
|---|---|---|
<table>
|
encloses a table (outermost tag) | yes |
<tr>
|
encloses a table row | yes |
<th>
|
encloses a header cell in the table (could be be a header for row or column) | no |
<td>
|
encloses a normal (non-header) table cell | yes |
Note that we use a bit of external CSS to make the table look a little bit fancier than the default. The HTML part of the source appears below:
<table class="fancytable">
<tr>
<th>
tag
</th>
<th>
tag function
</th>
<th>
required for valid HTML?
</th>
</tr>
<tr>
<th>
<code class="prettyprint"><table></code>
</th>
<td>
encloses a table (outermost tag)
</td>
<td>
yes
</td>
</tr>
<tr>
<th>
<code class="prettyprint"><tr></code>
</th>
<td>
encloses a table row
</td>
<td>
yes
</td>
</tr>
<tr>
<th>
<code class="prettyprint"><th></code&g;
</th>
<td>
encloses a header cell in the table (could be be a header for row or column)
</td>
<td>
no
</td>
</tr>
<tr>
<th>
<code class="prettyprint"><td></code>
</th>
<td>
encloses a normal (non-header) table cell
</td>
<td>
yes
</td>
</tr>
</table>
<div> <span>
The <div>
and <span> tags are HTML tags
that have no semantic meaning. They are useful for enclosing text
blocks to apply CSS without effecting the semantics of your HTML. The
difference between the two is that <div> can be
arbitrarily nested but <span>
should not be nested within itself or certain other tags.
<br> &nbrsp; and
other HTML entities
The <br> tag will cause a
line break to be inserted without semantic meaning. You should
not use it as a substitute for paragraph breaks, but it may be
useful to insert line breaks that are not paragraph breaks. One
good use would be to insert line breaks within a table.
Sometimes, instead of introducing a line break, you want to do
the opposite: you want to keep whitespace between two
characters but you don't want them to be able to be separated by
a newline. This is achieved by separating the two characters
with . That probably looks funny for an
HTML tag, doesn't it? That's because it isn't and HTML
tag, it's an HTML entity. Basically, HTML entities are special
plain text encodings for characters that wouldn't otherwise be
able to be represented in HTML text. One way to render
mathematical symbols in HTML is to look up their HTML entity
codes and put them into your HTML document.
We will serve any files you put in your public_html directory. You can put PDF files, word documents, or whatever you want there and put links to them in your HTML. If you create a a directory without an index.html file in it our webserver will automatically create an HTML list of all the files in that directory and a visitor can download them. There are, however, a couple of other special file types worth mentioning because browsers render them directly.
Let me note something that might seem obvious to some but might not be obvious to everyone: if you have a directory on the webserver that contains a file named index.html (or index.htm or upper case versions of this) then that file gets served when somebody browses to that directory of the webserver. That's why the main page of your personal website should always be named index.html.
Image files are rendered within an HTML document if they are
referenced with an <img>
tag. You should probably use JPEG image files as these are
compressed and save you space in your public_html file
folder (as well as save visitors time/bandwidth downloading your
image files).
The height and width attributes of
an <img> tag adjust the
dimensions you would expect. You can specify either using
absolute units like pixels (a number with no unit will be
interpreted as pixels) or a percentage of the page width a
photo should occupy. If you specify only one dimension, the
other will inferred from the image's aspect ratio. If you want
to modify the images aspect ratio you can specify both
dimensions. You can specify width and height using CSS instead
of setting them using the HTML attributes.
The one other attribute that you should know about
and should always set
is <img alt="alt
text">. This is the text a screen reader reads
instead of displaying an image. If you want to build a website
accessible by the visually impaired, you should always set a
useful alt tag for
your <img> tags. Below
are some examples of using
the <img> tag with
various different ways of specify
the height, width,
and alt attributes.
<img src="img.d/kitty.jpg" width="300" height="300" alt="cute little kitty cat">
<img src="img.d/kitty.jpg" style="width: 100%;" alt="bigger kitty cat, still cute">
<img src="img.d/kitty.jpg" style="width: 100%; height:50px;" alt="wide kitty cat, kinda strange looking">
HTML contains the informational content parts of your page but you also may want to change how it is displayed visually. CSS (Cascading Style Sheets) is used to change the visual style elements like color, font size, font type, ... of elements on your page. You can put your CSS "inline", modifying a specific HTML tag. If you only want to modify the properties of a single specific tag that you will never re-use elsewhere in your website this is a reasonable thing to do.
For example let's say I want to make some text red. I can write:
<span style="color:red;">red</span>
However, if you have a lot of style attributes you want to apply, or you want to change the default width of every image on your page you might want to separate out the CSS stuff from your HTML. This keeps the HTML simpler and easier to manage and puts all the CSS together. Technically you can also put CSS info in a special section of an HTML file instead of on an individual tag but I've never seen this half-measure separation usefully applied in practice.
Create a file named something like styles.css and put
it somewhere in your directory hierarchy. Some super-organized
folks might create styles folder to put their CSS
file into, but for the level of complexity of a personal webpage you
probably just want to have a single CSS file right in your
public_html folder. To reference it in an HTML file you would
add the following to the <head> section of your page:
<head>
<link rel="stylesheet" href="styles.css"type="text/css"/>
</head>
While CSS affects the visual display of a webpage, JavaScript dynamically alters the layout of a page. This is necessary for certain kinds of interactive elements of a page and to accommodate certain kinds of laziness (sometimes even functionally useful laziness) on the behalf of people who write webpages. For example, our main department webpage uses some JavaScript code to render some LaTeX code into HTML for seminar announcements.
This page uses a JavaScript script somebody else wrote to render syntax highlighting in the code snippets. We include it using the code below:
<head>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
</head>
Just like CSS you can also write JavaScript snippets within your HTML document. Just like CSS, if you only need to apply a simple script to a single page and never re-use it, there are times when you might want to just dump a little JavaScript into your page.
While you can do all sorts of fancy things with JavaScript, you can also create complicated, difficult to debug rendering problems for yourself with it as well. Use it if it does something useful for you that can't easily be done with HTML or CSS only.
In fact more generally, it is often a good idea to keep your webpage pretty simple. You probably don't have time to test your website in a bunch of different browsers with different size and/or pixel density displays. A simple HTML page with absolutely no JavaScript or CSS may not look impressive but it will be usable on any device that can manage to connect to the internet and display a picture. (as well some devices that can't display a picture).
Besides keeping things overall simple it's a good idea to write valid HTML and CSS and to check that your page meets accessibility guidelines (so that it can be used by the visually impaired). One of the design decisions made early on about HTML was that when a browser encounters incorrectly formatted HTML it should render something instead of displaying an error message. On one hand, this makes writing pages for a human easier from one point-of-view. On the other hand, there's no standard for rendering incorrect HTML, so just because it looks fine in Chrome, that doesn't mean that it will be readable, let alone look good, in any other browser. That's one reason, amongst others, to check your code with a validator, not just a single browser on a single device.
ctrl+u.
ctrl+shit+I.
It's a time honored tradition of web publishing to copy somebody else's website and change the content of it to be relevant to your needs. You are of course completely welcome to copy this website itself for this purpose. There's even some supplemental information available as comments if you read the HTML source. You can download a ZIP archive of all this page's assets. You may prefer download somebody else's personal website and use that as your template.