Setting up Web Material. An introduction

(1)

Setting up Web Material

(2)

February 2013 Web Development Tools 2

How to publish on the web

●

Everyone with an Aberystwyth University

account can publish material on the web

•

http://users.aber.ac.uk/you9/

–

The

URL

of your home page (index.html)

● http://users.aber.ac.uk/you9/asmt2.html

– Where you might put assignment 2

• _{http://users.aber.ac.uk/you9/asmt2/index.html}

(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…

(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...)

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

(6)

From your own computer

●

map (mount) your central filestore as usual

●

Locate the public_html directory under

(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 http://www.w3.org/Graphics/ ● 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

(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)

● (http://www.w3.org/TR/html5/)

– It is not a full recommendation - yet

●

Web page source can be messy and not

(9)

XHTML

● Almost the same as HTML (and incorporated into HTML5) ● W3C (the World Wide Web consortium: http://www.w3.org/) 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

(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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -transitional.dtd"> ●

Don’t worry about that for now; just copy it in to

your pages

(11)

The markup

<html>

Starts the document

<head>

Opens the header

</head>

Closes the header

<body>

Opens the body

</body>

Closes the body

</html>

Ends the document

(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!

(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

(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)

(15)

Attributes

• <a

href="http://my.url.com"

>

– 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)

(16)

Content

●

Things between opening and closing tags are

that element’s content

• <h1>This is my heading</h1>

• <a href="http://my.url.com">

This is the hypertext link</a>

(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 ● http://www.aber.ac.uk/compsci/Dept/Teaching/CourseNotes/current/CS15020/p racticals/permissions.pdf

(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:

http://www.w3.org/MarkUp/Guide/

http://www.w3.org/Graphics/

http://www.w3.org/TR/html5/)

http://www.w3.org/)

here

http://www.w3.org/MarkUp/Guide/