Setting up a (academic?) webpage - WWU edition

A tutorial in setting up a very simple personal webpage in \(n\) simple steps, for some small enough \(n \in \mathbb N\).

The template

For this tutorial I will use a variation of the source of my personal webpage; you may find the code in this Git repository and use it however you like. (If you just want to download and use it for your webpage, click on "Code" → "Download ZIP".) You can probably skip the following explanation and just play with the template, if you want an easy road into having a webpage, but maybe the following paragraph will help you understand how to tweak the source as much as possible.
The file has been 'commented' with indications on using it. In the '.html' file, everything you find between '<!--' and '-->' is a comment, much like lines starting with '%' in LaTeX. It won't show in the output. Similarly, comments in the '.css' file are written via /* COMMENT */. You can see the template in action (with some small tweaks) on my webpage. If you are using Firefox, you can right-click → "Show source" to check the index.html file.

Hosting your website

The WWU has a way to host your page (i.e. put it on the web and give it an address accessible by everyone) via Sciebo. You can find a surprisingly clear explanation here. Basically,
  1. Create a Sciebo account.
  2. Create a folder in Sciebo, with some name, and upload your 'index.html', 'style.css' and whatever else you need in that folder.
  3. Create a shared link for that folder (there should be a button for that).
  4. Go here and copypaste the link.
  5. Your webpage should now be available at https://www.wwu.de/IVV5WS/WebHop/user/YOUR_WWU_ID/.

Three or four ideas around HTML and CSS

Caveat: the following has been written in an imcodecise way, with mathematicians who know LaTeX in mind. If you are a purist of HTML and CSS and would like to complain about some imcodecise terminology or incorrect use of this sacred language, please fill the void in your heart with social media/drugs/alcohol/Netflix like everybody else.
→ Webpages are written in HTML. Hence, all '.html' files will be the main source of your webpage. Particularly, index.html will always be the page loaded first when you go to some website. The bread and butter of HTML are the tags, i.e. environments that are used by writing 

        <environment>
        Content of the environment
        </environment>
You can think of this as writing 

        \begin{environment}
        Content of the environment
        \end{environment}
in LaTeX. Any .html page is built with the following structure: 

        <html>
        <head>
        <!-- think of this as the LaTeX preamble before \begin{document} -->
        </head>
        <body>
        <!-- this is the content *after* \begin{document} -->
        </body>
        </html>
→ The style of the webpage is written in CSS. One can either include the CSS code in the head of the HTML file, between the style tags, or import it from an external '.css' file with the command 

             <link rel="stylesheet" href="NAME-OF-THE-CSS-FILE.css"/>
This is what I do in my template, because I like modularity, but it's not strictly necessary. A '.css' file is structured by a sequence of blocks of this form 

        NAME-OF-THE-OBJECT {
        styling options;
        }
In other words, each block tells your browser how the object named before it will look like. You can style any tag (just using the name of the tag, e.g. body) or use divs. Styling options are declared with the format "style-option: your-choice;". For example, if I want my font-size (which, as you can imagine, is the size of the text) to be 12px, I will just write "font-size: 12px;".
→ Usually, one builds a webpage using the tag div. A div is like a box, that can be styled to your convenience and contains your content. To each div can be assigned an id or a class, which can then be styled in the CSS file. For example, you might want to use a div named container to isolate the main content of your webpage. Then you'd write 

        <div id="container">
        Content here
        </div>
in the '.html' page, and then 

        #container {
        style options here;
        }
in the '.css' page. The identifier for an id is the hashtag #, the identifier for a class is the dot (e.g. you'd write '.container' in the CSS if this was a class). The main difference between class and id is that an id is a unique identifier, so it should be used only for one div, whereas a class can be used as desired for several divs. But I have only discovered this two weeks ago - after \(\aleph_0\) years of writing HTMLs, so I can safely say that one can survive without this pedantic detail.
→ When writing CSS, you're gonna be mainly interested in the following options (these are written for the div id we used before, but you can substitute '#container' with 'body' and style the whole webpage, or with whatever tag you want to style that tag): 

        #container {
        font-family: Arial, sans-serif;
        /* whatever font family you want */
        /* if you declare a name, e.g. Arial, that has to be either available on your browser or loaded somehow */
        /* writing 'sans-serif' afterwards tells the browser 'if you don't know Arial, just load some sans-serif font */
        font-size: 12px;
        /* the size of the text, in pixels */
        color: black;
        /* the color of the text, in words or code */
        background-color: white;
        /* the color of the 'box', as above */
        width: 60%;
        /* the width of the box, relative to the whole page (using %) or in pixels */
        margin: 20px;
        /* the *external* margins of the box */
        padding: 10px;
        /* the *internal* margins of the box */
        border: 1px solid black;
        /* a border, if you want */
        }
All of this is easier to understand via examples rather than via theory, so I'd recommend you check out my 'style.css' file in the GitHub project.
→ Some general ideas on how to write paragraphs in HTML: the tag b makes your text bold, e.g. 

        <b>This will be bold.</b>
Similarly, the tag i makes your text italics. The tag u underlines your text, but don't use it. The tag a identifies links, and it is used in the following way: 

        <a href="URL">DISPLAYED TEXT</a>.
If you want to upload slides or notes to your webpage, just put the files in the same folder where the 'index.html' file is and write their name (with the extension, e.g. 'slides.pdf') instead of URL.
The tag ol creates a numbered list, whereas the tag ul creates an unnumbered one. The tag li identifies the single bullet points, e.g. 

        <ul>
        <li>one point</li>
        <li>another point</li>
        </ul>
→ Please, for the love of God, make your webpage responsive. We are in 2022, and I don't want to suffer through the pain of opening a webpage on my phone and having to zoom in to read the text. A responsive webpage adapts to the device that opens it. This is not immediate to do, but it has been done on my template, so you can probably extrapolate how you do that from its source.

What if...

→ ...you want to use a coloured background? Don't. You might want to use something slightly darker than white to improve readability. Anything in a shade of gray (including, if you want, dark grey with white text) is not too bad. But I'd stay away from an orange background. Just change the property after 'background-color:' with your favourite HTML Color Code. For example, black is #000000.
→ ...you want to include more pictures? Be careful, sizing them is not always easy. But the tag is img, in the form 

            <img src="FILE-NAME">
→ ...you want to use more fonts? Head over to something like Google Fonts. It's gonna give you a code of the form 

            <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
(this loads the 'Roboto' fonts, which is the one you see on this webpage). Put it in the head area, and load the font with its name, e.g. 

            body {
            font-family: Roboto, sans-serif;
            }
Please don't use Comic Sans.
→ ...you want to include math? You need to load something like MathJax. Place some script like 

            	<script id="MathJax-script" async 
				src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
		    </script>
in the head of your HTML file. You can now write in-line math with \( MATH \).

Good practices

→ Accessibility. There are many things that can be done to make your webpage more accessible e.g. for screen readers. One of them is using id as a unique identifier, the 'pedantic detail' I have mentioned before -- it is actually very important. Similarly, assigning an id to titles (i.e. the tags h1, h2, ...) makes them more readable. If you want to use colours -- warning: it is not as easy as it might seem, and bad taste is always lurking behind the corner -- you might want to use a palette that is colourblind-friendly. You can find many on the internet.
-- Simone