1. 1 Creating a professional website I Mutsumi Ogawa - mogawa@essex.ac.uk LG 400 – wk10

2. 2 General Information  Course homepage  http://courses.essex.ac.uk/lg/lg400 http://courses.essex.ac.uk/lg/lg400  Updated after session runs  Email: mogawa@essex.ac.ukmogawa@essex.ac.uk 2

3. 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.

4. 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

5. Typical structure of a webpage Header Main body Footer 5

6. Typical structure of a webpage Header 6

7. Typical structure of a webpage Header Main body 7

8. Typical structure of a webpage Header Main body Footer 8

9. 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

10. 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 http://privatewww.essex.ac.uk/~ essexusername where essexusername is your essex username  Navigate to it and see what it looks like! 10

11. 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

12. 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

13. 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

14. 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

15. 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 http://privatewww.essex.ac.uk/~essexusername where essexusername is your essex username  Navigate to it and see what it looks like! 15

16. 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 http://privatewww.essex.ac.uk/~essexusername where essexusername is your essex username  You should now be able to see your homepage!!! 16

17. 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

18. 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

19. 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 (http://) 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. 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