Make Your Own Website For getting and using your University of Michigan webspace general instructions are available here. Directions for uploading files to your existing webspace (you have webspace if you have a umich email account) are available here. If you do not know HTML, you have two options for creating your own website: If you want to use this experience to learn HTML: A template for a general personal research-oriented website is available and can be viewed here. The HTML code can be downloaded here and a walkthrough for your initial website setup is available here. The code in the templates includes enough instructions to get you started at least entering your personal data into the templates. For more thorough explanations and descriptions there are some good HTML tutorials are available online, such as http://www.cwru.edu/help/introHTML/toc.html (which is a very detailed walkthrough of the HTML language) and Dave Ragget's Introduction to HTML. If you do not want to learn HTML: There are a number of programs which can be used to create a website without having to learn HTML. Microsoft FrontPage is one of these, and should not be too difficult to learn for those already familiar with Microsoft Word. Macromedia Dreamweaver is another (can also be used to alter HTML code directly), and you can ask the department secretary to install it on your computer. Walkthrough of Website Setup Using Template Getting ready Download Template Unzip the downloaded zip file Download an HTML text editor Entering your text content into the templates Personalize the header file Personalize the index file (home page) Personalize the static title file (optional) Personalize the menu file (side bar menu) Test your website Personalize the publications page Personalize the cv page Personalize the field work page Create a page of photos Create a page from the generic template How to make and arrange links, images, and lists Making links Inserting and positioning images Making bulleted or numbered lists Altering page aesthetics (backgroundcolors, text colors, fonts, etc.) Definitions and Explanations of syntax and tags HTML tags How tables work include comment colors Getting ready Download the HTML code file Template.zip. Unzip the HTML code file 'Template.zip' - it will expand into a folder 'Template' in the same place as the .zip file. The zip file can now be thrown away. If you do not have an unzipping program follow the links to download a Windows or Macintosh version of StuffIt. Click on the StuffIt icon to install the program. You may have to restart your computer before using the program. Download an HTML text editor An HTML text editor is generally similar to any text editor, and you can also edit HTML code in basic text editors such as wordPad (but not MS Word - it is too fancy and interprets the code the way a browser does, rather than letting you see the code itself), but HTML text editors have a number of helpful features. Most important of these features is color-coding. An HTML text editor will color-code HTML tags, which is very helpful for differentiating between the portions of the code that will actually be displayed in the browser and the instructions for the browser (HTML tags). If you do not have a text editor capable of color-coding and do not want to purchase one, I can suggest the following: Dreamweaver can be used either to directly edit code or to create webpages without having to do any HTML coding yourself, and you can ask the department secretary to install it on your computer. Windows: I use EditPlus, a shareware program that can be downloaded for free here. I am sure there are many other programs out there, but I am not familiar with them. Macintosh: BBEdit is probably the best Macintosh text editor for HTML and other programing languages. A demo can be downloaded for free here (but will stop working after 30 days). Unfortunately the full program is rather expensive. After downloading, click on the icon to install the program. You may have to restart your computer before using the program. Entering your text content into the templates Personalize the header file: The header is not itself a webpage, but is included in each page on your entire site. It helps create a consistent appearance throughout your website. In this case, the header automatically places the main menu along the side (which is itself included). Open 'header.html' Decide on a title for your entire website (could be simply your name) and write it between the <title> and </title> tags. This title will show up in the top bar of the browser, not on the webpage proper. If you want to have a static header like the museum page, remove the comment tags (shown here in red) from where it looks like this: <!--        </td>             <td height='75' valign='top' bgcolor='#99CCCC'> -->        <!-- #include file="staticTitle.html"--> <!--        </td>         </tr> -->    <tr> Do NOT remove the comment tags with #include file inside them. Instead, remove the space between the beginning comment <!-- and #include so it looks like this:     <!--#include file='filename.html'--> Also, open style-sheet.html and follow the directions there for making a static title bar. Personalize the index file: This is your 'home' page, the first one that will be seen by visitors to your site. 'index.html' is the folder a browser automatically goes to if no file has been specified (When you type 'www.umich.edu' it automatically takes you to the 'index.html' page). Open 'index.html' Replace <!-- Your Name --> with your name or the title of your website. Replace <!-- Your Office --> with your office number and building Replace <!-- Your Phone --> with your phone number Replace <!-- Your Email --> with your email address. Be sure to replace YOUR EMAIL in the <a href='mailto:YOUR EMAIL'> link as well as the comment. Replace 'Content' with the content you wish to have on this page. This may be a paragraph describing your interests and/or a picture of yourself or your research subject, etc. See here for placing images in pages. See here for making links.     Hard returns can be made using the <BR> tag. To leave a blank line between blocks of text, repeat the tag: <BR><BR> The line separating the title and the content is optional and can be removed from any page by deleting the lines:     <tr>         <td><hr width='100%'></td>     </tr> Personalize the static title file (optional): This is a static title that can be placed at the top of every page in your website, by including it in the header. See the header and style-sheet instructions for changes that must be made to these documents to activate the static title bar. Open 'staticTitle.html' If you want to have a static title bar, make the necessary changes to the two documents above and then simply type your text where it says <!-- Write Your Static Title Below --> If you wish to include your address in this section, copy and paste the address section of the index.html page (making sure to include the top and bottom <td> tags) and paste it where the comment <!-- Optional: Paste Address Here Copied from index.html --> is. Personalize the side bar menu file: This is the sidebar menu, and like the header, is not itself a webpage, but is included in each page on your entire site. Open 'mainMenu.html' Since you have so far only made your index.html page, you will have to come back and update this page as you make more html pages to link to. However, if you know what you are going to name your html pages, you can put them in the menu before you actually make the pages. Explanations of table tags and making links are available here, and will probably be helpful for making changes to the menu. Text between tags is displayed, and can be changed any way you want. Be sure to update the links to point to the correct .html pages. Test your website Upload the following files to your Public/html/ webspace (See here for uploading instructions): 'header.html', 'footer.html', 'index.html', 'staticTitle.html' (optional), 'mainMenu.html', and 'style-sheet.html' Open your web browser and type in the web address to your page (http://www-personal.umich.edu/~yourname) and look at your first page. Go back and make any content alterations. You can skip ahead a bit and make aesthetic changes as well, or wait until you have made more of your pages. Personalize the publications file: This is the page for displaying citations of your recent (and perhaps not-so-recent) publications. Open 'publications.html' To highlight your name in multi-author papers, use the author class as shown. Italicize by using <i>italicized text</i> tags. Bold by using <b>bold text</b> tags. Underline by using <u>underlined text</u> tags. Personalize the cv file: This is the page for your curriculum vitae. Open 'cv.html' Replace <!-- Your Name --> with your name. Replace <!-- Your Office --> with your office number and building Replace <!-- Your Phone --> with your phone number Replace <!-- Your Email --> with your email address. Be sure to replace YOUR EMAIL in the <a href='mailto:YOUR EMAIL'> link as well as the comment. Enter the appropriate content in each section (Personal, Education, Experience, etc.), changing the titles as appropriate. Personalize the field work file: This is the page for talking about your field work. The page is set up to have a number of section titles at the top which link down to the appropriate section in the middle of the page. The template will, of course, work equally well for any pages for which you wish to have a list of links at the top which take you down to the middle of the page - in that case, re-name the file and put a link to it in the menu. Open 'fieldWork.html' See here for descriptions of the various types of links. In the List of Links section, replace 'Section Title 1' and 'Section Title 2' with titles of your field work In the links <a href='#section1'> replace 'section1' with short descriptors. The # is necessary for within-page links. In the Page Body section, replace 'Section Title 1' and 'Section Title 2' with titles of your field work In the links <a name='section1'> replace 'section1' with the short descriptors you used in the links above. These are where the above links will jump to. Notice this tag uses 'name' rather than 'href' and does not have a #. In the template, images are placed along with the text under each section heading. These can be removed or their placement modified as described here. Create a page of photos: This is the page for showing photos of your research, fossils, field work, friends, families, your hideous baby picture of yourself asleep in your oatmeal, etc. Open 'photos.html' The template is set up with pictures on alternating sides of the page, and associated text beside and wrapping around the images. This arrangement can be altered by following the directions here. Create a generic page: This is the generic page template. It can be used for most other things, such as descriptions of your research interests Open 'generic.html' An image tag is included and can be modified as described here for your page or can be removed if you do not want any images. Enter your page content Save the page with an appropriate name (no spaces, distinctive, something that you will know what it is when you are looking for "that page about biogeography" to edit). Update 'mainMenu.html' to include this file in the menu. How-to make and arrange links, images, and lists Making links between your pages, within a single page, and to outside pages: Links are created in <a href='filename.html'>Display Text</a> tags. The name of the page linked to is placed inside the quotes, while display text forms the visible link. If the page you are linking to is in the same folder as the page being linked from, you can just type the page name. If the page you are linking to is in a different folder then write the whole filepath (e.g. 'http://www-personal.umich.edu/~yourname/folder/filename.html') Link between your pages: <a href='filename.html'>Display Text</a> are the tags to use for linking to pages in the same folder as the page linking from. Link to the middle of the current page: <a href='#identifier'>Display Text</a> are the tags to use for linking to a place within the same page, which is defined by <a name='identifier'>Display Text</a>. The place defined by name will not not visible on the webpage - they aren't that blue underlined style you've come to associate with links. Don't forget the # in the href tag. Link to the middle of a different page: <a href='filename.html#identifier'>Display Text</a> are the tags to use for linking to the middle of a different page, defined by <a name='identifier'>Display Text</a>. Link to outside pages: <a href='http://www.server/fullfilepath/filename.html'>Display Text</a> are the tags to use for linking to pages outside the folder of the page you are linking from. This includes both outside pages as well as pages in other folders, if you have them (that makes the include statements more complicated, so I would suggest keeping all .html pages in the main folder, with images in their own folder to keep things tidy). Inserting and positioning images Image tags are of the form: <img src='images/filename.jpg' align='left' valign='center'> Keeping things tidy: all images should be placed in a folder named 'images' - it makes it easier to update your .html pages if you don't have to hunt around a million image files to find the page you want to edit. If you do this, all images need to include the folder in the pathname as shown in the example above. Images can be placed in one of three horizontal positions using the align attribute: 'left', 'center', or 'right'. If you do not use the align attribute the default position is left. Images can be placed in one of three vertical positions using the valign attribute: 'top', 'center', or 'bottom'. If you do not use the valign attribute the default position is top. Text will wrap around images in the same table cell if there is no break (<BR>) between them. If there is a <BR> between the image and the code, text will appear below the image. Text position can also be decreed using the same attributes align and valign in the <td align='center' valign='top'> tag as shown. Making bulleted or numbered lists Bulleted List (ul tags): <ul>     <li>Bulleted item 1     <li>Bulleted item 2 </ul> Numbered List (ol tags): <ol>     <li>Bulleted item 1     <li>Bulleted item 2 </ol> Definition List (dl tags): <dl>     <dt>Definition Title     <dd>Definition text </dl> Altering page aesthetics (backgroundcolors, text colors, fonts, etc.): This page is never directly seen by the user. It is included in the header and is responsible for directing backgound and text colors, fonts, and font sizes in the entire site, creating a consistent appearance. See here for a discussion of web colors. Open 'style-sheet.html' Each of the following can be defined as a class for the tags they are attached to (e.g. TD.mainMenu can be used like: <td class='mainMenu'> ; .author is the only one not attached to a table element, and it should be used as described here). BODY is responsible for attributes of the entire HTML body: in this case the margin has been set to 0 so there is no extra space around the outside of the page (believe me, it looks rather stupid when there is a tiny white margin all around your colored menu), and background-color has been set to white (#FFFFFF - see here for a discussion of web colors).     You might want to change the background color - this is the background color for the entire page, aside from the menu (the menu background is overlaid by the background-color attribute for .mainTitle and so will still show up TD.mainPgBorder is responsible for the vertical line between the menu and the rest of the page. The border-left-width of this line can be 'thin', 'medium', or 'thick'. border-left-style can be in a variety of different styles: 'none', 'dotted', 'dashed', 'solid', 'double', 'groove', 'inset', 'outset', or 'ridge'. border-left-color can also be set, using hexadecimal colors as explained here. If you want to have a static title bar for your site, copy and paste the following text into this section of the style sheet in addition to the content already there. It will add a line between the static title and the main part of each page, in addition to the line separating the menu from the main page:     border-top-width: medium;     border-top-style: ridge;     border-top-color: #336666; .mainMenu is responsible for attributes of the sidebar menu. Here, only the background-color is set, using hexadecimal colors as explained here. TD.pageTitle is responsible for attributes of the title for each page. Here, color, font-size, font-weight ('normal', 'bold', 'italic'), and font-family have been set. Color can be altered using hexadecimal colors as explained here. Title text can be enlarged or reduced by changing font-size, and the font itself can be changed by setting font-family. Generic font names can be used ('serif', 'sans-serif', 'cursive', 'fantasy', and 'monospace') can be used and will be interpreted based on the capabilities of the user's browser. Specific font names (e.g. 'Times', 'Georgia', 'Courier', 'Arial', 'Helvetica', etc.) can and are used by most web developers, but may not be correctly interpreted by all browsers. TD.address is responsible for attributes of the address displayed in the upper right in your homepage (index.html). Here, the font-size and color are set, using hexadecimal colors as explained here. font-size is set using the normal word-processing "12pt is standard" system. Some browsers will not recognize all values, and I have seen 10pt display correctly in one IE browser but as 12pt in another. I use point-sizes anyway. Font sizes can also be expressed relatively: 'xx-small', 'x-small', 'small', 'medium' (which is standard), 'large', 'x-large', or 'xx-large'). TD.publication is responsible for attributes of the publications. Here, only indentation is set, so lines that wrap are indented relative to the first line of the citation. Optional replacements are listed here, with text in green being what is actually written in the code and the preceeding text is a description of what each code does.     First line indented: text-indent: 10;     Subsequent lines indented: text-indent: -10;     No indentation: text-indent: 0; .author is responsible for attributes of the certain authors (namely, you) in publications. To emphasize yourself in your publications, write: <span class='author'>Your Name</span> Here, only the color is set, using hexadecimal colors as explained here. TD.smallTitle is responsible for attributes of small titles, which the templates use only in 'fieldWork.html', but which could be used anywhere to make section titles. Here, only the color is set, using hexadecimal colors as explained here. Other classes can be made following the same syntax. Definitions and Explanations HTML tags: These are of the form <b> and </b> Start tags are, at their most simple, like <td>, but various attributes can be included here as well to alter the appearance of the content defined by the start and end tags. For example: <td class='title' align='right' valign='center' width='100%'>CONTENT<td> will format everything inside this table cell - class defines which attributes defined in style-sheet.html will apply to this CONTENT, align indicates that CONTENTS will be aligned as far to the right as possible, valign inidcates that CONTENTS will be vertically centered, and width sets the width to the full width of the browser. End tags are much simpler, contain backslash characters "/" and never define any attributes: </td> See here for more about tables and table tags. Basic Structure Tags: HTML: The very first tag in your document <HTML> and the very last </HTML>. HEAD: The second tag in your document. Enclosed within the beginning tag: <HEAD> and the ending tag: </HEAD> is information about the document that will not display in the body of the document. TITLE: The document title, which is enclosed with a begin title tag: <TITLE> and an end title tag: </TITLE>, all of which is enclosed with the HEAD tags above. The title does not display as part of the document itself, but appears in the browser window title. It is also what is used to name your document in a bookmark list. BODY: The complete text of your document is wrapped by a begin body tag: <BODY> and an end body tag: </BODY>. Example of basic document structure:         <HTML>                 <HEAD>                         <TITLE>your document title goes here</TITLE>                 </HEAD>                 <BODY>                         your document text goes here                 </BODY>         </HTML> Formatting Tags: line break: If you wish specify a line break without also having a blank line (which is what paragraph tagging would give you), use the <BR> tag which specifies a line break. Note that it does not have a begin and end tag; there is merely an instance of it when you wish to specify a line break. horizontal rule: A simple separator in the form of a line across the page (a "horizontal rule") can be obtained by placing the <hr> tag where you wish the line to occur. As in the case of the line break tag (<BR>) there is no begin or end, just an instance of it where you wish the line to appear. bold: To make text bold, surround it with the <b> begin tag and the </b> end tag italics: To make text italic, surround it with the <i> begin tag and the </i> end tag underlined: To make text underlined, surround it with the <u> begin tag and the </u> end tag These tags are described in other sections of this document: Table tags Image tags Link tags List tags How tables work: Tables begin and end with <table> and </table> tags. Each row is defined by <tr> and </tr> tags, while individual cells are defined by <td> and </td> tags. Objects in cells (text, images, etc.) can be placed in different positions based on the attributes align (controls horizontal placement: 'left', 'center', 'right') and valign (controls vertical placement: 'top', 'center', 'bottom'). In order to demonstrate this, the HTML code for this table is displayed below it. Cell A: spans all three columns and is aligned right   Cell B: spans two columns, is aligned center and is indented by a non-breaking space Cell C   Cell D: spans one column and is indented by two cells, Cell C is valign='bottom' and the other cell is filled with &nbsp; - this is a non-breaking space and serves as a placeholder so the table doesn't get the idea that the cells are empty and act strangely.   Cell E: spans two columns and is indented by a cell filled with &nbsp; <table border=1>     <tr>         <td colspan=3 align='right'>Cell A: spans all three columns and is aligned right</td>     </tr>     <tr>         <td>&nbsp;</td>         <td colspan=2 align='center'>Cell B: spans two columns, is aligned center and is indented by a non-breaking space</td>     </tr>     <tr>         <td valign='bottom'>Cell C</td>         <td>&nbsp;</td>         <td>Cell D: spans one column and is indented by two cells, Cell C is valign='bottom' and the other cell is filled with &nbsp; - this is a non-breaking space and serves as a placeholder so the table doesn't get the idea that the cells are empty and act strangely.</td>     </tr>     <tr>         <td>&nbsp;</td>         <td colspan=2>Cell E: spans two columns and is indented by a cell filled with &nbsp;</td>     </tr> </table> include:     <!--#include file='file-to-include.html'--> Server-Side Include statements look similar to comments and are used to include separate documents in the current page (unlike comments, there must be no space between <!--#include). When a user requests a page the server looks at the code and include statements are replaced by the .html file being included. The effect is just as if the entire document was typed as one piece, but it allows you, the creator, to only type the included code once rather than in every page. It also makes it so you only have to make changes in one place to affect the entire website. comment:     <!-- comment --> Comments allow things to be written in the code that are not displayed on the screen. Comments are heavily used in the template to indicate where your text should be inserted and to explain certain aspects of the code. colors: Colors in HTML are defined in two possible ways: hexadecimal or RGB (Red, Green, Blue values) - hex is more consise and what I and most web developers use. A very good online resource is the Visibone ColorLab, where you can see all the websafe colors and by clicking on a color can find out its hex code.