Every PG student is strongly encouraged to maintain their own website with both mathematical and personal content.
Note that a personal website is practically an essential component of a CV/resume for a job application!
Here is a brief guide to creating your own website on the School system:
htdocs.
For Windows users create the directory/folder in drive H:.
index.html.index.html.
http://www.maths.ed.ac.uk/~myloginname/.
HTML is a markup language (in a very similar way that LaTeX is), which means that it is plain text with certain passages marked up to indicate a certain meaning.
Each bit of meaning is contained in an appropriate element, and each element is marked up by a start tag and a corresponding end tag. Here is an example of the fictitious element of type “bob” (the start and end tags are highlighted):
... outside text ... <bob>content of the "bob"-element</bob> ... more text ...
Elements may be nested, i.e. one element may (and very often will!) contain other elements, until the most deeply nested elements contain only text, or even nothing at all — there are also empty elements! Finally, elements may have attributes, which are specified inside the start tag. The following example (this time real HTML) illustrates all these ideas:
<p> And the student approached the supervisor and said, <q lang="en">Please, no more work for this week!</q> but the supervisor only replied, <q lang="fr">Quoi?</q> <br> And he was never heard from again. </p> <p> This is what the student looked like: <img src="student.png" height="300" width="400" alt="The Student"> </p>
The elements of type "p" indicate paragraphs, while "q" denotes a quote. The element of type "br" is a line break, and hence empty (there is no content in a line break!), and the "img" element is also empty — it stands for an image, and the filename (and other attributes) of the image are specified via element attributes. When nesting elements, make sure you always end the inner element before ending the outer element!
Lastly, there are special tags that open with "<!" and close with ">". The most important of those is the comment, which is the special element "--", like this:
... and this concludes my thesis. <!-- I still need to prove Theorem 1, but I'm too tired now. -->
Like in most other languages, comments are simply ignored when the HTML document is processed.
Let us now look at the sample file:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="en"> <head> <title>[Your page title]</title> <meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1"> <meta name="keywords" content="Your Name, University of Edinburgh, Mathematics"> <meta name="description" content="PhD student website..."> </head> <body> <h1>[Your name (or an appropriate heading)]</h1> <p>(Make sure that any body text is inside a <strong>paragraph</strong>, like this.)</p> <h2>Publications</h2> <h2>Research interests</h2> <p>I am a student of <a href="http://www.example.com/">Dr. A. N. Other</a>, and I am working on a thesis in ...</p> <h2>Contact</h2> <address> <!-- This is a comment. It will not be displayed in a browser. --> <!-- The 'address' element is _only_ for the address of the page author! --> <em>Your name</em><br> School of Mathematics<br> University of Edinburgh<br> Room nnnn, James Clerk Maxwell Building<br> The King's Buildings, Mayfield Road<br> Edinburgh EH9 3JZ<br> Telephone: +44 131 314159<br> Email: p.g.student@ed.ac.uk </address> </body> </html>
This may look a little overwhelming at first, but just step away a little and look at the global structure of this model HTML document: There is one top-level (or "root") element, whose type name is just "HTML". There must be precisely one such element in your document. (Our "HTML" element also has a language attribute to tell the user in which language you are writing!) The "HTML" element contains precisely two child elements, namely "HEAD" and "BODY".
As you may have guessed, the document body is contained in the "BODY" element. Before we go there, let us look at the remainder of the document. You may have noticed the special tag <!DOCTYPE...>. This tells us (where to find) the precise syntax and grammar of the HTMLanguage we are using, since there are many different dialects and versions. Since HTML is a formal markup language, it is important to specify the rules which govern the language!
Next, the "HEAD" element contains a "header" for the document. The most important element in the header is the "TITLE" element, which is what you will see in your browser window title and in your bookmarks and which is one of the most important pieces of information for internet search engines. The subsequent "META" elements contain meta information, i.e. information about the document. Note the keywords and the long description, which are not displayed anywhere on the page but are very important for search engines and aggregators. There is more to the "HEAD" element, but not now.
Finally, the main document goes in the "BODY" element. You have already encountered <p>aragraphs. The other important structural elements are headings, of which you have six hierarchical levels given by the element types "H1" to "H6" — use them wisely and in the correct order only! Other important structural elements are various lists ("UL": unordered list, "OL": ordered list, containing list items "LI"; and "DL": definition list) and the "ADDRESS" element, which should be used to indicate the address of the page author.
Inside a paragraph, there are various semantic elements to highlight passages of text: "EM" for emphases, "STRONG" for stronger emphases, "Q" for quotes, "CODE" for pieces of code, "VAR" for names of variables, "KBD" for keystrokes, "ABBR" and "ACRONYM" for abbreviations and acronyms, respectively (the latter are very useful elements: Consider a screenreader for blind users — instead of trying to pronounce an abbreviation, it knows that something is an abbreviation and can pronounce it letter by letter.) For a full list of HTML element types, see the W3C HTML Specification!
Finally, two very important inline elements are the "IMG" element for images, which we have met earlier, and the anchor "A": An anchor indicates the start or destination of a hyperlink, i.e. a link to a different document — it is the crucial difference between mere “text” and “hypertext”! To make a hyperlink, make an anchor element and set the "href" (hyperlink reference) attribute to the destination of the link.
After all this you may ask, “But how do I make my text red and blinking?” HTML is not a presentational language, it merely captures the semantics, i.e. the meaning of your text. In order to style it according to your taste, you will need to employ a styling language, namely CSS. But that is a different story… (But if you look at the actual source of the sample file, you will find a clue, and you will see that I cheated slightly during our dissection here.)
Written by Thomas Köppe
©2010 School of Mathematics, University of Edinburgh