Setting up Web Material. An introduction

Size: px

Start display at page:

Download "Setting up Web Material. An introduction"

Audrey Bryan
8 years ago
Views:

1 Setting up Web Material An introduction

2 How to publish on the web Everyone with an Aberystwyth University account can publish material on the web The URL of your home page (index.html) Where you might put assignment 2 A better place to put it February 2013 Web Development Tools 2

3 For Windows users On your M: drive Look for the directory public_html Should be there already Create files in that directory using your favourite text editor (gwd, notepad, etc) You ll need to set the permissions right have to use UNIX for that February 2013 Web Development Tools 3

4 For UNIX users On the CS machines, the directory you want is: /aber/you9/public_html Create the files in there using your favourite UNIX text editor (gvim, gedit, emacs, whatever) Make sure the permissions are set correctly (coming up...) February 2013 Web Development Tools 4

5 On central Information Service s central UNIX machine using X or a terminal session (from another UNIX machine, use ssh central.aber.ac.uk) Directory public_html Use your favourite UNIX text editor gedit, vi, gvim, kate... February 2013 Web Development Tools 5

6 From your own computer map (mount) your central filestore as usual Locate the public_html directory under the drive letter/mount point February 2013 Web Development Tools 6

7 Any files can go in there Pictures: jpeg, gif, png and svg are accepted standards, but you can use any; avoid proprietary formats such as bmp though, wherever possible Sounds (wav, mp3, rm, ogg need browser plugins etc) Arguments about whether ogg or mp3 should be the standard with browser support Other files a browser may not be able to display, but you want to let people download BUT certain programs you want the user to run go somewhere else see later in this course February 2013 Web Development Tools 7

8 HTML Hypertext Markup Language History back into early 90 s Started simple (version 1) Got complicated Latest version (4.01): poor structure HTML 5 has just moved to a candidate recommendation (December 2012) ( It is not a full recommendation - yet Web page source can be messy and not as easy to parse as they could be February 2013 Web Development Tools 8

9 XHTML Almost the same as HTML (and incorporated into HTML5) W3C (the World Wide Web consortium: wants us to go that way So we will Based on HTML, but the language itself is defined in a different way For the curious, HTML was a doc type definition (DTD) of SGML, XHTML is a DTD of XML (see later in course) Stricter, tidier, more consistent February 2013 Web Development Tools 9

10 Structure of a Web Page The first line tells the browser what sort of page it is: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " -transitional.dtd"> Don t worry about that for now; just copy it in to your pages February 2013 Web Development Tools 10

11 The markup <html> <head> </head> <body> </body> </html> Starts the document Opens the header Closes the header Opens the body Closes the body Ends the document February 2013 Web Development Tools 11

12 XHTML The markup on the previous slide should appear in all your xhtml documents Note how each markup tag is opened (e.g. <head>) and closed (e.g. </head>) XHTML (unlike HTML) REQUIRES all tags to be closed But does the browser care? Maybe not, but we want to write proper code! February 2013 Web Development Tools 12

13 Closing tags Who knows HTML? Think of an HTML tag which it doesn t make sense to close If you don t know HTML, so much the better. You won t have picked up the bad habits that people who write HTML have! We have to close it in XHTML E.g. in HTML: <HR>. In XHTML: <hr /> We re allowed to open and close it in one go; it s neater than writing <hr></hr> Also note XHTML tags are always written in lowercase February 2013 Web Development Tools 13

14 Important elements <head> (etc) is called an element. Other important elements are: <p> delimits (defines) a paragraph <br> gives a line break (use <br />) <h1>, <h2>, <h3> etc. for headings <a> to create a hyperlink <hr> creates a horizontal rule (dividing line across the page) February 2013 Web Development Tools 14

15 Attributes <a href=" Elements can have attributes: attributes have values E.g. the <a> element has an attribute which specifies what it links to In XHTML, all values of attributes must be quoted (either using single or double quotes) HTML users take note! February 2013 Web Development Tools 15

16 Content Things between opening and closing tags are that element s content <h1>this is my heading</h1> <a href=" This is the hypertext link</a> February 2013 Web Development Tools 16

17 UNIX permissions Your web pages are hosted on a UNIX machine You can t use Microsoft Explorer to set the permissions You must log on to Information Service s central UNIX machine to set the permissiosn Full instructions are on the CS15020 web site here racticals/permissions.pdf February 2013 Web Development Tools 17

18 Practical 1 You now know everything you need to start on Practical 1! Do this in your own time; it will help you when you come to the assignment. The practical worksheet is on the web, linked from the CS15020 course pages We ll go much further into XHTML over the next few lectures If you re completely new to (X)HTML, take a look at this excellent guide from the W3C: February 2013 Web Development Tools 18

CREATING WEB PAGES USING HTML INTRODUCTION

CREATING WEB PAGES USING HTML INTRODUCTION Web Page Creation Using HTML: Introduction 1. Getting Ready What Software is Needed FourSteps to Follow 2. What Will Be On a Page Technical, Content, & Visual