1 Creating a professional website I Mutsumi Ogawa - LG 400 – wk10

2 General Information  Course homepage   Updated after session runs  2

33 Introduction  Making your work available online opens it up to the rest of the academic and non-academic world.  This session focuses on helping you build a very simple webpage where you can include information about your academic activities.

Outline  Topics of this week’s session will include:  Typical structure of a webpage  What a professional website may include  Introduction to web building using Word  Inserting hyperlinks  Inserting headings and font formatting (bold, italics)  Hosting your website on the University’s privatewww server 4

Typical structure of a webpage Header Main body Footer 5

Typical structure of a webpage Header 6

Typical structure of a webpage Header Main body 7

Typical structure of a webpage Header Main body Footer 8

What a professional website may include  Bio information  Research interests  Teaching  Research (assignments, papers, talks, projects)  Favourite links  Possibly a link to a personal page or a page of personal interest 9

University Web Server  All essex users have got space on the webserver where they can upload information about their academic activities. For more information see the privatewww. privatewww  Your website is of the form essexusername where essexusername is your essex username  Navigate to it and see what it looks like! 10

Where can I find the Web server?  In the labs:  Double click on my computer icon  Locate the ‘MyWeb’ drive near your M: drive  Double click on this – you are now in your web space drive!  ‘index’ file is the first page of your website. 11

Creating your first webpage  Using Word 2007, open a new document.  Click on the view tab – and select web layout.  Type your page content  Do not forget to use headings and subheadings to make the structure of your webpage clearer  Include sections like bio, papers, talks, teaching etc. 12

What a professional website may include  Bio information  Research interests  Teaching  Research (assignments, papers, talks, projects)  Favourite links  Possibly a link to a personal page or a page of personal interest 13

Saving your webpage  Save as.htm or.html:  Click on Save as, then select Other formats  In the dialogue box that will appear, type index.html and select Web Page, Filtered (*.htm; *.html)  Click on save 14

Uploading your webpage to the Web server  All essex users have got space on the webserver where they can upload information about their academic activities. For more information see the privatewww. privatewww  Your website is of the form where essexusername is your essex username  Navigate to it and see what it looks like! 15

Uploading your webpage to the Web server  Now locate the index.html file you created earlier  Copy it into your www server  Open a browser and navigate to where essexusername is your essex username  You should now be able to see your homepage!!! 16

Edit your website  Go back to your www server.  Left click on the index.html file and select Open with then choose programme.  In the list of programmes that will appear, locate Microsoft Word. Select this and click OK.  This should open the file you were working on earlier.  If you directly click on the index.html file, it opens your webpage on Internet Explore, or Chrome, etc, in which you cannot edit the page. 17

Inserting hyperlinks  hyperlink (or link): a reference to a document that the reader can directly follow. The reference points to another document or to a specific element within a document (wikipedia)wikipedia  Your hyperlink will have two parts: the text and a link. 18

Inserting hyperlinks  write or select some text that you would like to create a link from  Select the insert tab and click on hyperlink.  Type the URL address of the form ( in the box, then press OK  You can also create links to other documents or other pages, by selecting from the pages in your www server directory. 19

20 Next session  More on creating your website such as:  Inserting images  Changing the font and background colour of your page  Inserting an embedded object (video, other objects)  Academic social networking sites  Alternative hosting options  For PG students: If you would like your homepage linked from the dept website, please let me know. 20