Web Publishing Essentials - WebLearn · Web Publishing: Essentials TWPA ... click when the mouse...

Web Publishing: Essentials of creating

web pages

Web Publishing: Essentials TWPA

IT Learning Programme 2

How to Use this User Guide This handbook accompanies the taught sessions for the course. Each section contains a brief overview of a topic for your reference and then one or more exercises. Exercises are arranged as follows:

• A title and brief overview of the tasks to be carried out;

• A numbered set of tasks, together with a brief description of each;

• A numbered set of detailed steps that will achieve each task. Some exercises, particularly those within the same section, assume that you have completed earlier exercises. Your teacher will direct you to the location of files that are needed for the exercises. If you have any problems with the text or the exercises, please ask the teacher or one of the demonstrators for help. This book includes plenty of exercise activities – more than can usually be completed during the hands-on sessions of the course. You should select some to try during the course, while the teacher and demonstrator(s) are around to guide you. Later, you may attend follow-up sessions at ITLP called Computer8, where you can continue work on the exercises, with some support from IT teachers. Other exercises are for you to try on your own, as a reminder or an extension of the work done during the course.

Text Conventions

A number of conventions are used to help you to be clear about what you need to do in each step of a task.

• In general, the word press indicates you need to press a key on the keyboard. Click, choose or select refer to using the mouse and clicking on items on the screen. If you have more than one mouse button, click usually refers to the left button unless stated otherwise.

• Names of keys on the keyboard, for example the Enter (or Return) key are shown like this: ENTER.

• Multiple key names linked by a + (for example, CTRL+Z) indicate that the first key should be held down while the remaining keys are pressed; all keys can then be released together.

• Words and commands typed in by the user are shown like this.

• Labels and titles on the screen are shown l i k e t h i s .

• Drop-down menu options are indicated by the name of the options separated by a vertical bar, for example F i l e | P r i n t . In this example you need to select the option P r i n t from the F i l e menu or tab. To do this, click when the mouse pointer is on the F i l e menu or tab name; move the pointer to P r i n t ; when P r i n t is highlighted, click the mouse button again.

• A button to be clicked will look l i k e t h i s .

• The names of software packages are identified like this, and the names of files to be used l i k e t h i s .

TWPA Web Publishing: Essentials

3 IT Learning Programme

Software Used

BlueFish, FileZilla, Firefox, MS Word

Files Used F i l e s a r e s u p p l i e d b y t h e t e a c h e r a n d c o n s i s t o f a s e l e c t i o n o f i m a g e s t o l o a d i n t o t h e l i b r a r y

Revision Information

Version Date Author Changes made 1.0 May 2013 Stephen Eyre Created, IT Services

branding

Copyright

Stephen Eyre makes this document available under a Creative Commons licence: Attribution, Non-Commercial, No Derivatives. Individual resources are subject to their own licencing conditions as listed. Screenshots in this document are copyright of Apple. The Oxford University logo and crest is copyright of Oxford University and may only be used by Oxford University members in accordance with the University’s branding guidelines.

Web Publishing: Essentials TWPA


Contents 1 Introduction ............................................................................... 1

1.1. What You Should Already Know ......................................................... 1 1.2. What Will You Learn? ......................................................................... 1 1.3. What is BlueFish? ............................................................................... 2 1.4. Where Can I Get A Copy? ................................................................... 2 1.5. Other Tools .......................................................................................... 2

2 The Internet and World Wide Web – the big picture .............. 3 2.1. The Internet ........................................................................................ 3 2.2. The World Wide Web (aka the Web) ................................................. 3

3 HTML – what it is ..................................................................... 4 3.1. Basic Tags ............................................................................................ 4

3.1.1. Text Tags ................................................................................................ 4 3.1.2. Links ...................................................................................................... 4 3.1.3. Formatting ............................................................................................. 5 3.1.4. Tables ..................................................................................................... 5 3.1.5. Table Attributes ..................................................................................... 5

3.2. HTML5 ............................................................................................... 6 3.2.1. Semantic meaning ................................................................................. 6

3.3. Sound and video ................................................................................. 7 3.3.1. Video Formats and Codecs .................................................................... 8 3.3.2. HTML 5 audio ....................................................................................... 9

4 BlueFish ................................................................................... 11 5 What is a website – a folder .................................................... 12 6 Looking at the document ........................................................ 13

6.1. Root element ..................................................................................... 13 6.2. Head .................................................................................................. 13

6.2.1. Charset ................................................................................................. 13 6.2.2. Title ..................................................................................................... 13 6.2.3. Link rel ................................................................................................ 13 6.2.4. Meta .................................................................................................... 13 6.2.5. Script ................................................................................................... 14

6.3. Body .................................................................................................. 14

7 Creating the index.html ........................................................... 15 8 View the document in a web browser ..................................... 16

TWPA Web Publishing: Essentials


9 Text: headers and paragraphs ................................................. 17 9.1. Line breaks and lines ........................................................................ 17

10 Lists ....................................................................................... 18 10.1. Ordered Lists ................................................................................... 18 10.2. Unordered Lists .............................................................................. 18

11 Hyperlinks .............................................................................. 19 11.1. Creating new pages .......................................................................... 19

12 Tables ..................................................................................... 20

13 CSS ......................................................................................... 21 13.1. What is CSS ..................................................................................... 21 13.2. Where to put CSS ............................................................................ 21 13.3. Syntax .............................................................................................. 21 13.4. Styling text ...................................................................................... 21 13.5. Colours ............................................................................................ 21 13.6. Body width and alignment ............................................................. 22

14 Publishing .............................................................................. 23 14.1. Setting up your web space & addresses .......................................... 23 14.2. Activating your web space account ................................................ 23 14.3. Activating your Linux account ........................................................ 24 14.4. More about your web space ............................................................ 25 14.5. Transferring Files to Your Web Space. ........................................... 25

15 Exercises ................................................................................ 28 16 What Next? ............................................................................ 42

16.1.1. CSS Course ......................................................................................... 42 16.1.2. Dreamweaver courses ........................................................................ 42 16.1.3. Online Presence courses .................................................................... 42

16.2. Computer8 ...................................................................................... 42 16.3. IT Services Help Centre .................................................................. 42 16.4. Downloadable Course Materials and More – the ITLP Portfolio . 42 16.5. Useful Websites .............................................................................. 43

Web Publishing: Essentials


1 Introduction Welcome to the Web Publishing Essentials session! This booklet accompanies the course delivered by Oxford University’s IT Learning Programme. Although the exercises are clearly explained so that you can work through them independently, you will find that it will help if you also attend the taught session where you can get advice from the teacher, demonstrator(s) and even each other! If at any time you are not clear about any aspect of the course, please make sure you ask your teacher or demonstrator for some help. If you are away from the class, you can get help by email from your teacher or from [email protected].

1.1. What You Should Already Know No previous knowledge of web design is expected. We will assume that you have some knowledge of the Windows or Mac interface and also assume that you are familiar with opening files from particular folders and saving them, perhaps with a different name, back to the same or a different folder. The computer network in our teaching rooms may differ slightly from that which you are used to in your College or Department; if you are confused by the differences please ask for help from the teacher or demonstrator(s).

1.2. What Will You Learn? This course will help you learn to use BlueFish to create simple websites. In this session we will cover the following topics:

• Writing HTML to code your own website

• Writing CSS to style your own website

• Using images and links

• Creating lists and tables

• Setting up links to social media sites

• Using special characters

These notes deal with BlueFish using Windows XP. Having worked through these notes, you should also be able to adapt to older and newer versions on different operating systems versions since most of the principles hold true regardless of the version of the software. Getting to grips with coding websites can be time-consuming, so allow yourself plenty of time for practice. To increase your understanding of HTML and CSS, make use of the Help facilities in BlueFish and the many resources freely available on the web.



1.3. What is BlueFish? BlueFish is an open source web code editor. It enables you to create anything from simple webpages to database driven scripted sites that rely on several technologies. We will use it to create a simple website that show how easy using code can be.

1.4. Where Can I Get A Copy? You can download the latest version of BlueFish from: http://bluefish.openoffice.nl/index.html

1.5. Other Tools There are many web editors you can use – Adobe DreamWeaver is still popular, NVu is an open source version. BlueFish is chosen because it is accessible, free and easy to use but does not hide the code from you. I also feel it has the potential to grow with your skills and thus be part of your ongoing workflow.



2 The Internet and World Wide Web – the big picture

The course we are working with today, the creation of websites using the core technologies of HTML and CSS doesn't happen in a vacuum. Web pages are written in software and displayed by other software and are stored somewhere else entirely (often we don’t know where our files are ultimately stored). This chapter will give a brief overview of the world we inhabit when we embark on website creation and other related tasks that support online resources.

2.1. The Internet The internet and World Wide Web (WWW) are often used interchangeably to mean the same thing – broadly where we go to access web sites and pages we are interested in. They are however different aspects of this service. The internet is the network of machines and servers, and the optical fibre that connects them, that provides the infrastructure and hosting of these sites we view. This is how the internet is described in the main Wikipedia article:

The Internet is a global system of interconnected computer networks that use the standard Internet protocol suite (TCP/IP) to serve several billion users worldwide. It is a network of networks that consists of millions of private, public, academic, business, and government networks, of local to global scope, that are linked by a broad array of electronic, wireless and optical networking technologies. The Internet carries an extensive range of information resources and services, such as the inter-linked hypertext documents of the World Wide Web (WWW), the infrastructure to support email, and peer-to-peer networks.

2.2. The World Wide Web (aka the Web) The World Wide Web is the vast amount of documents that make up interconnected web pages that allow us to view and navigate websites.



3 HTML – what it is

Figure 1: Html 5 is the current version and supports audio and video natively

HTML is a tag language that tells web browsers such as Firefox, Chrome, or Internet Explorer to render – or show- web pages. It is very easy to use and you only have to know a few tags to code a simple web page:

3.1. Basic Tags <html></html> Creates an HTML document

<head></head> Sets off the title and other information that isn’t displayed on the web page itself <body></body> Sets off the visible portion of the document

3.1.1. Text Tags <pre></pre> Creates preformatted text <hl></hl> Creates the largest headline <h6></h6> Creates the smallest headline <b></b> Creates bold text <i></i> Creates italic text

<tt></tt> Creates teletype, or typewriter-style text <cite></cite> Creates a citation, usually italic <em></em> Emphasizes a word (with italic or bold) <strong></strong> Emphasizes a word (with italic or bold) <font size="3"></font> Sets size of font, from 1 to 7 <font color="green"></font> Sets font color, using name or hex value

3.1.2. Links <a href="URL"></a> Creates a hyperlink <a href="mailto:EMAIL"></a> Creates a mailto link



<a href="URL"><img src="URL"> </a> Creates an image/link <a name="NAME"></a> Creates a target location within a document

<a href="#NAME"></a> Links to that target location from elsewhere in the document

3.1.3. Formatting <p></p> Creates a new paragraph <p align="left"> Aligns a paragraph to the left (default), right, or center. <br> Inserts a line break <blockquote></blockquote> Indents text from both sides <dl></dl> Creates a definition list <dt> Precedes each definition term

<dd> Precedes each definition <ol></ol> Creates a numbered list <ul></ul> Creates a bulleted list <li></li> Precedes each list item, and adds a number or symbol depending upon the type of list selected <div align="left"> A generic tag used to format large blocks of HTML, also used for stylesheets <img src="name"> Adds an image <img src="name" align="left"> Aligns an image: left, right, center; bottom, top, middle <img src="name" border="1"> Sets size of border around an image <hr /> Inserts a horizontal rule <hr size="3" /> Sets size (height) of rule

<hr width="80%" /> Sets width of rule, in percentage or absolute value <hr noshade /> Creates a rule without a shadow

3.1.4. Tables <table></table> Creates a table <tr></tr> Sets off each row in a table <td></td> Sets off each cell in a row <th></th> Sets off the table header (a normal cell with bold, centered text)

3.1.5. Table Attributes <table border="1"> Sets width of border around table cells <table cellspacing="1"> Sets amount of space between table cells <table cellpadding="1"> Sets amount of space between a cell’s border and its contents <table width="500" or "80%"> Sets width of table, in pixels or as a percentage of document width



<tr align="left"> or <td align="left"> Sets alignment for cell(s) (left, center, or right)

<tr valign="top"> or <td valign="top"> Sets vertical alignment for cell(s) (top, middle, or bottom) <td colspan="2"> Sets number of columns a cell should span (default=1) <td rowspan="4"> Sets number of rows a cell should span (default=1) <td nowrap> Prevents the lines within a cell from being broken to fit

3.2. HTML5

3.2.1. Semantic meaning HTML5 is not just about making existing markup shorter (although it does a fair amount of that). It also defines new semantic elements. <section>

The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading. Examples of sections would be chapters, the tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, contact information. <nav> The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a short list of links to common pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element. <article> The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content. <aside> The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page. <hgroup> The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines. <header>



The header element represents a group of introductory or navigational aids. A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos. <footer> The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. Footers don’t necessarily have to appear at the end of a section, though they usually do. When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content. <time> The time element represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset. <mark> The mark element represents a run of text in one document marked or highlighted for reference purposes.

3.3. Sound and video All current browsers except Opera Mini support native video and audio playback using HTML 5.

HTML5 introduced a new tag for videos. To insert a video into your web page you can now do this: <VIDEO SRC="your_video.mp4"></VIDEO> This simplifies things greatly, as previously you had to use the OBJECT and PARAM tags. Even with a YouTube video that code would look messy: <object width="" height=""> <param name="movie" value="http://www.youtube.com/v/your_ref"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/your_ref_here" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="" height=""></embed> </object> However, Google does produce the code for you, and all you need to do is copy and paste it. Another alternative for video is Flash. Unfortunately, not all browsers support Flash (Apple's Safari in particular.) Even for those that do, you need a plugin to watch the video. So the VIDEO tag in HTML5 was meant to allow all browsers to display your videos. At the time of writing, though, different browsers support different video formats. Older browsers won't recognize the VIDEO tag at all. With those caveats in place, let's take a further look at the video tag.



3.3.1. Video Formats and Codecs The most popular video formats are MP4 (MPEG4), FLV (Flash), OGG and AVI. A newer format is WebM. But these file endings, .mp4, .flv, .ogv, .avi, and WebM, are not actually a single file. They are known as container files. That's because a video is a combination of separate files, such as the video itself and sound tracks. There will also be files for synchronising the video with the sound, the aspect ratio, the language, video title, and a whole lot more. The moving images part of the video will be encoded using programming code known as an algorithm. This algorithm is called the video codec. A video player decodes this algorithm (codec) and displays the moving images on your screen. There are quite a lot of video codecs out there, but the most popular are H.264, Theora, and Google's VP8. As well as video codecs there are also separate audio codecs. The audio codec that just about everybody has heard of is MP3 (short for MPEG 1, Audio Layer 3). Others are Apple's AAC, and Vorbis. (It must be pointed out that MP4 and MP3 are patent protected. You are usually allowed to produce video and audio files in these formats because a vendor (Microsoft, Apple, etc) has already paid for the right to use the encoder and decoder software.) With all these different video and audio combinations, you won't be surprised to learn that browser support is patchy. For example, if you wanted to show a Flash video then people who have Macs, iPhones, and iPads won't be able to see it. Browser patchiness is the reason why the new VIDEO tag takes a sub-tag called SOURCE. The SOURCE sub-tag lets you specify more than one container format. Take a look at this example: <VIDEO> <SOURCE SRC="my_video.mp4" TYPE='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <SOURCE SRC="my_video.webm" TYPE='video/webm; codecs="vp8, vorbis"'> <SOURCE SRC="my_video.ogv" TYPE='video/ogg; codecs="theora, vorbis"'> </VIDEO>

The VIDEO tag is now by itself. Between the two VIDEO tags, however, we have three SOURCE tags. After the word SOURCE you need a SRC attribute. This is the name and location of your video. Notice that the MP4 format comes first. This is to cater to your iPad users. If it's not top of the list then iPad just bails out - it only recognises one SOURCE tag. Newer version of the iPad may well correct this bug. Notice the TYPE attribute above, though. It is split in to three parts: TYPE='video/mp4; codecs="avc1.42E01E, mp4a.40.2" ' You need the type of video it is (video/mp4, in this case). After a semi colon you then specify the codecs. The video codec comes first, followed by the audio codec. The two are separated by a comma. The quotation marks are need. The TYPE above is surrounded by single quotes, one at the start and one at the end. The codecs need their own quote marks, which are double quotes above. You can do it the other way round, though: TYPE="video/mp4; codecs='avc1.42E01E, mp4a.40.2' "



In the line above double quotes are on the outside and single quotes on the inside. For more information on the VIDEO tag, see this page:

http://diveintohtml5.info/video.html Video can be a very complicated subject. If you don't want to go to all the trouble, then YouTube can convert your videos and provide the code to copy and paste into your web page.

3.3.2. HTML 5 audio If you only want sound, and no video, then the new AUDIO tag is the one to use. The HTML is similar to the VIDEO tags, in that you specify a list of audio file formats. For example, take a look at the following code: <AUDIO>

<SOURCE SRC="your_audio.mp3"> <SOURCE SRC="your_audio.ogg"> <SOURCE SRC="your_audio.wav"> </AUDIO> Between the two AUDIO tags we have three SOURCE tags like before. This time, however, you don't need any codec information. The browser will try to play the first song on the list above. If the format is not supported, then it will try to play the second song. You can add some attributes to the AUDIO tag: AUTOPLAY LOOP CONTROLS PRELOAD

AUTOPLAY takes the value true or false. Setting AUTOPLAY to true means the song would start playing by itself in the browser, which can be annoying. LOOP means that the song will start all over again after it has finished. Again, the values true and false can be used. Using the CONTROLS attribute with a value of true will get you the browser's in-built audio controls. They look like this in Internet Explorer 9:

Figure 2: Audio controls in IE9 The PRELOAD attribute takes three values: none, auto, and metadata. PRELOAD refers to the audio file itself. When you set it to none the browser won't preload the file at all. Set it to auto and the browser will decide for you, whereas a setting of metadata will load things like song title, album, artist, etc. Here's an example of the AUDIO attributes: <AUDIO AUTOPLAY ="false" LOOP="false" CONTROLS="true" PRELOAD="auto"> <SOURCE SRC="your_audio.mp3"> <SOURCE SRC="your_audio.ogg"> <SOURCE SRC="your_audio.wav">

</AUDIO>



If you tried the above code in Firefox then the Ogg file format would play, because Firefox doesn't support the MP3 format, due to licensing issues.

For browsers that don't support the AUDIO tag at all, then you can add some text to the above code: <AUDIO AUTOPLAY ="false" LOOP="false" CONTROLS="true" PRELOAD="auto"> <SOURCE SRC="your_audio.mp3"> <SOURCE SRC="your_audio.ogg"> <SOURCE SRC="your_audio.wav"> YOUR BROWSER DOESN'T SUPPORT THE AUDIO TAG. </AUDIO> The point about the AUDIO and VIDEO tags, however, is that they work in the browser and don't need the end-user to download any third-party plugins.



4 BlueFish

BlueFish is a free and open source text editor suitable for designing web sites and using programming languages. You can write a simple web page (or the html behind it) in pretty much anything you choose – note pad or any other simple text editor – so why use a toll like BlueFish? For one thing it gives some very helpful visual aides to let you navigate and check you code. Each line is given a number so you find errors with line number pointers very easily. BlueFish also colour codes sections of your writing making it very obvious when it believes you have made a typo or invented a tag! Simple visual helps such as these and many more make writing code for a website easier and more efficient.



5 What is a website – a folder One principal way to understand a website is to see it as a folder. This is important for two reasons. Firstly it underlines that a website is made up of documents that are collectively stored just like any other project – so a site is built up within a folder like many other pieces of computer based work. Secondly, where we put files in a folder is important; if we forget locations, information cannot be easily accessed and this is especially true in websites. We quite often point from file to another in a website; for instance, images are no embedded in webpages – they are linked to – or pointed at. So where images are kept in the website folder is quite important because we point to them in our webpages. If they are not there, then the image will not show. The simplest folder structure for a basic site is the containing folder with a html file in it to display as the webpage and some images that provide visual material for the site. In practice it is far more likely that you will end up with more than this; CSS pages, images and different versions of the same images, and more than one HTML page. Once you start having these elements in a single folder it makes sense to create subfolders. The first subfolder usually created is a folder called images, where all of your images files are kept. Other folders for subpages (the html pages in your website that are not the home page), scripts and assets may be present if they keep the folder structure clear.



6 Looking at the document When you write a webpage there are some simple levels of declaration that you must include so that your page will display as a webpage. At the top most level we must tell the web browser that we are writing a html document and what language this document is in. The html tag and its language setting are root elements and are the first things to write in your document after you have declared the document to be html. The !DOCTYPE tag allows us to enter the type of document we are writing; html. This used to be a far more involved affair but HTML5 has simplified it to the first line below.

6.1. Root element The root element is the core level of your document and includes everything within the <html> tags. Within the opening tag, the language is set; “en” stands for English.

Figure 1 : The two root elements of a simple web page

6.2. Head The head element of the web page is a collection of information about the webpage but doesn't actually include any content that will be displayed in the page. The title you enter in the <title> tags will appear – but in the title bar of the browser so not strictly in the actual page itself. The rest of the contents of the head section is metadata about the page

6.2.1. Charset Charset is short for character set and this needs to be entered to tell the browser what character sets to use for the site. There are literally thousands that could be used but in practice you will very likely only ever use one – utf-8

6.2.2. Title The title is the name of the your web page and has some significant influence in how discoverable your page is. You should make sure this is filled in and makes sense in terms of what your site is going to be about

6.2.3. Link rel The rel attribute defines the relationship that the linked resource has to the document from which it’s referenced. In most cases, this resource will simply be "stylesheet", which means, not surprisingly, “the referenced document is a style sheet.”

6.2.4. Meta HTML meta tags are officially page data tags that lie between the open and closing head tags in the HTML code of a document. The text in these tags is not displayed, but parsable and tells the browsers (or other web services) specific information about the page. Simply, it “explains” the page so a browser can understand it.



6.2.5. Script A place to map to any external script libraries (such as JQuery) or to enter code

6.3. Body The <body> element appears after the <head> element and contains the part of the Web page that you actually see in the main browser window, which is sometimes referred to as body content.

A <body> element may contain anything from a couple of paragraphs under a heading to more complicated layouts containing forms and tables. Most of what you will be working with will be written between the opening <body> tag and closing </body> tag.



7 Creating the index.html The first page usually created in a website is called index.html by common practice and fulfils the role being the homepage (typically). Remember that a website at file level is simply a folder – or a directory. The browser will by default display index.html when you enter a website’s URL – if it doesn't find an index.html, it will either display an error message or list the contents of the directory – normally behaviour that you definitely do not want! As index.html is what the browser looks for by default many people make the decision to use it as their homepage so the default action of the browser is to show the homepage.



8 View the document in a web browser One of the key things in web design is to view your document regularly in browsers to see how the pages display. Use the preview button in BlueFish Try more than one browser (pref FF, Safari, Chrome, IE, Opera) IE is the odd one out as you produce more complex work



9 Text: headers and paragraphs Text is relatively simple in HTML. Since we are only concerned about the function of the text we can write a lot of text in HTML just using the six heading tags, the paragraph tag, and emphasis and alternate tags within a paragraph (appearing as bold and italicised respectively) The heading tags allows to give our page up to six levels of heirachy:

6 heading levels. standard paragraph bold and italics – not formatting but semantic!

9.1. Line breaks and lines <p> gives new line <br> new line <hr> draw line



10 Lists Creating lists in HML is very easy. There are two types of lists available – ordered and unordered. An ordered list will give you numbering and an unordered list will have bullet points by default. Lists are obviously very useful for displaying data on new lines; books and journal articles that you might have published for example, but they have another role too. Most navigation systems have a list at their heart. A navigation system is the series of links that you use to jump around a website – from the home page to a list of works for example. This chapter will cove the creation of lists in a page – we’ll leave navigation systems to another chapter.

10.1. Ordered Lists

10.2. Unordered Lists



11 Hyperlinks The world wide web is what it is because of links from one place to another – without the ability to link to and from pages and sites from practically anywhere you choose to, our experience of the internet would be vastly different. At a basic level there are two types of hyperlinks you will want to use in your website; a link to another page or place in your own site, and a link to an external resource – another website. The basic HTML for creating a link looks like this: A link to another page in your site: <a href="info.html">info</a>

or for an external link: <a href="http://www.bbc.co.uk”>BBC</a>

11.1. Creating new pages Once you have created an index page, it is a good idea to save this page as a new page so the contents of the head section does not have to be retyped. In BlueFish it is easy to use the Save As dialogue to achieve this and get a head start on the new page.



12 Tables Making a table using the hTML tags is almost as simple as creating lists and there is far more discussion and drama as to the use and misuses of the table elements in pages than in their creation.



13 CSS If HTML is about describing the elements of a webpage – what things are and their semantic function, What function does CSS fulfill? At an introductory level, CSS preforms the role of making elements in your page look the way they do and also to give layout to your page. CSS stands for Cascading Style Sheets and can be seen in three different places.

13.1. What is CSS CSS deals with the look of elements on a web page and the layout of the webpage. In this course we will mainly be dealing with styling individual elements of the page – the look if you like. Using CSS to layout a web page is dealt with in depth in a later course. CSS came as a result of the corruption of HTML as a semantic tagging language in the early 2000’s. Bloated, inaccessible webpages that would not work on all browsers because of the misuse of HTML was the main driver for change that resulted in the creation of CSS. Once you get the hang of writing a few specifications in CSS, it becomes an easy code to write and its relationship with the HTML is equally easy to understand. The ‘style sheet’ bit of the name is easy to comprehend as the code literally styles each element you apply it to. You decide you want your Header 1 level to be a deep blue in Arial with a right justification – you simply enter these specifications nto the CSS and all header 1’s will have those attributes. But what about the ‘cascading’ bit of the name – what does that mean? The cascading nature of CSS means that you can have multiple style sheets and

13.2. Where to put CSS Separate style sheet In the Head section In line

13.3. Syntax

13.4. Styling text As we’ve noticed with HTML, dealing with text is relatively straight forward. CSS can make powerful changes to the way elements look but the process is straight forward – identify the characteristics of an element and then specify their appearance one by one. Or in CSS speak:

13.5. Colours http://html-color-codes.info/



13.6. Body width and alignment The body is the root element for the content of your webpage and defining the width and centre aligning it are commonly chosen options. Defining the width is useful to give everyone (or nearly everyone!) the same experience of the page. Before the widespread use of smart phones and tablets, this was a far more powerful tool to give every user a similar experience but it is still important for viewers using a desktop or laptop to access your pages. Currently (Sep 2013) the width of 1140 will statistically give most viewers the same view of your page whilst giving you as a designer, the maximum room to use for your content.



14 Publishing So far you have created web pages and stored them locally on the computer you have been working on (hopefully the H:\ drive). It is important to know where these files are as you will be moving them in the next exercises. Having your web pages on the local drive has worked well so far and you have been able to open the files in a browser and view the pages. The drawback with holding files on a local computer is that only you (or anyone looking at your. To let the rest of the world see your web pages you need to publish them. This means moving the files (html files and images) to a web server (just another computer that can be accessed via the Internet). Once your files are on this server, they are ‘on the net ‘ and can be seen by anyone with Internet access including friends and family wherever they are. To publish files you need to use some special software. There are many kinds of free software available to do this. If you use a commercial company to host your web pages they may provide free software and instructions on how to move the files to your site. In the following exercises you will copy your files to your personal web space on an Oxford University web server. Anyone who has a Oxford email account has personal space on the university web server. The program we will use to transfer files is called FileZilla and is freely available from http://filezilla-project.org/. Before you can copy files to your personal web space you will first have to activate your web space account. This is a quick and easy process. You will hopefully already have done this, but if you haven’t don’t worry this will explained in the exercise.

In the following exercise you will upload an html file and image to your personal web space. The files you will use have been created for you. If you want to upload files you have created just substitute your files for those used in the exercise. You will need your Oxford user name and password when working through the next exercise. Your Oxford user name is also known as your Single Sign-On or Webauth.

14.1. Setting up your web space & addresses OUCS provides registered Nexus users with an allocation of additional web space with their email accounts. This free space can be used to house your web site. Each space has an address or 'URL' (Universal Resource Locator) associated with it so that the pages stored on the server can be accessed over the Internet. Users wishing to publish personal web pages must first activate their Linux and Web Space Accounts. This is an easy and quick process! Both accounts are part of your Oxford Account used to access Nexus and WebLearn.

14.2. Activating your web space account To activate your web space go to https://register.it.ox.ac.uk/accman/web/ where you will see the following web page:



Figure 1. Activating your web space Just click on the Activate button to set up your web space. Once done you will then see details of your web space account:

Figure 2. Users web space information screen Your filestore on the web server has a set quota of 15 megabytes. The web space account page also lets you add your name to an index of personal web sites. You can also set up site statistics through this page which will show you how many visitors have viewed your site on a weekly basis.

14.3. Activating your Linux account In order to use your activated web space you also need to quickly activate your Linux account via the registration page at: https://register.it.ox.ac.uk/accman/shell

Figure 3. Linux Account Activation Screen



Click on the Activate Shell Account button. The account will now be active and you will see the following screen:

Figure 4. Linux Account Activated Screen You can change the type of login shell you use from the dropdown box, but for most users the default option is fine. Please note: If you are working on linux.ox.ac.uk, you will be able to see your web space within 15 minutes of its activation. After this time it can be reached via Secure FTP.

14.4. More about your web space All personal web pages at Oxford University have URLs of the form: http://users.ox.ac.uk/~username where username is replaced by your own Oxford Single Sign-On (SSO) username. N.B. the `~' is critical in the URL. So if your SSO username is merlin, the URL to your personal Web directory is http://users.ox.ac.uk/~merlin/ The directory in your filestore which corresponds to the URL is called public_html; this where the files which you want to publish should go. This is where your URL points to. You should make a HTML file called index.html which people will see as your Welcome (or home page) document when accessing your site. This file should be put in the public_html directory. If index.html does not exist, the server will return a document listing all the files in the directory. Since this is not desirable, you should always make sure there is an index.html file in your public_html directory, even if it just contains a link to somewhere else. Web pages can be prepared in a text editor, word processing package or html editor. OUCS runs a variety of web publishing courses that will help you make the best of your site. N.B. There is another directory called cgi/bin. This folder should be used if you want to develop safe perl programs, see User-written CGI programs for more information.

14.5. Transferring Files to Your Web Space. In order for your web site to be visible to the world, you need to publish it on a web server. The default structure of your web space or file store has two directories: public_html cgi



The directory in your file store which corresponds to your URL, is called public_html and this is where the files you want to publish should go. The second directory (cgi) is used for safe perl programs (see safe CGI programs for more information). If you are using the GNU/Linux service and have just activated this for the first time you will already have links to your public_html and cgi folders. However, if your account was activated prior to Autumn 2008, you will need to use the command makeweblinks to set up local links to the standard public_html and cgi folders (the Secure File Transfer Client Guides section contains information about how to use the makeweblinks command in different programs). The public_html folder is where your web site files should be stored. The home page of your web site should be called index.html and this should be placed in the public_html directory. If you do not have this file in your folder, the server will return a list of all the files in that directory. This is not desirable. Further directories can be made under the public_html folder to reflect your site structure. The preferred method to transfer your HTML documents to the web server using Secure File Transfer Protocol (SFTP/SCP). The older File Transfer Protocol (FTP) is currently allowed, but we encourage users to switch to using Secure File Transfer Protocol Clients instead. Please see the Secure File Transfer Guide for full details and client guides on how to use SFTP to transfer your files to your web space. In brief: The first time that you want to access your web space you need to:

• Activate your Linux Account (part of your SSO Oxford Account) by visiting https://register.it.ox.ac.uk/accman/shell and choose Activate Shell Account

• Activate your Web Space by visiting https://register.it.ox.ac.uk/accman/web/ and choose Activate Web Space. You should be able to see your web space within 15 minutes of its activation.

• You then need to follow the connection instructions below to access your linux account. Then:

• If you are activating a brand new account links to your web folders will be created automatically.

• If you are activating an older account, then you must use the makeweblinks command before you can see the folders (the Secure File Transfer Client Guides section contains information about how to use the makeweblinks command in different programs).

• After links have been created navigate to your web space folder (public_html) by clicking on the folder name..

N.B. Only when you have activated both accounts is your web space fully accessible to you. Each time you want to access your web space you will need to:

1. Open your preferred SFTP program 2. Fill in your connection details as follows: 3. Host Name: linux.ox.ac.uk



4. Port: 22 5. Username: Your Oxford Account Username e.g.oucs1234

6. Password: Your Oxford Account password 7. You will now see your linux.ox.ac.uk account space. Inside this are your

cgi and public_html folders. Click public_html to view your web site 8. You can now transfer files to and from your web site using your SFTP

client.



15 Exercises Exercise 1: Create the website folder and index page

• Create a folder for the local copy of the website • Use BlueFish to create the first webpage • Use a browser (Firefox) to view your page

Task 1

Use My Computer to create a folder for the website

Step 1 Double click on the My Computer icon on the desktop and navigate to the drive ending in H://

In the H drive right click and choose new folder option

Create and name a folder with your choice that will become the holder for your website (locally)

Task 2 Open Bluefish And enter the root and head sections of your first html document

Step 1 Click on the start button and find he Bluefish entry in All Programs. Double click to start the program

Step 2 In BlueFish, click on the new document icon in the top left of the program window

Step 3 Enter the following:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8"/>

<title>My Bespoke Website</title>

<link rel="stylesheet" href="styles.css" />

</head>

Task 3 Enter the body section of your first webpage

Step 1 Enter the following underneath the head section:

<body>

<h1>Hello</h1>

</body>

</html>



Task 4 Save the web page in your folder

Step 1 Click on the save icon towards the top left of the program window

Name your file index.html

This follows web protocol of naming the home page index.

In the Save in Folder path, navigate to your website folder. Click save. You should immediately see that your file has taken on the correct colour coding for a html file.

Task 5 View your webpage!

In the program interface, click on the browser view to open up Firefox and view your webpage. Enjoy!



Exercise 2: Adding Content to the webpage

• Create some text • Create a link • Add a rule

All the files for these exercises have been provided for you on a network drive. Look for the drive with the letter H: in My Computer

Task 1 Continue to work with the document i n d e x . d o c x

Create a sub header, a line rule, and an image link

Step 1 The file you have been working on should be open and available for you to carry on working on.

Add 2nd header:

Underneath the <h1> entry on a new line type

<h2>Supporting my teaching and research</h2>

or content of your own choice

Add hr tag:

On the next line type

<hr>

Task 2 Create <p> tags to add prose

Step 1 Add prose in 2 P tags:

On the next line type

<p></p> and insert the para 1 text from the Text.docx file in the H drive

Create another set of p tages on the next line and then another after that on a new line and copy the para 2 text from Text.docx

Task 3 Use preview to view the site

Step 1 View site:

Save the document and view the changes by clicking on the preview button

Task 4 Create an external link to www.ox.ac.uk

Step 1 Add an external link

In the empty p tags enter:

<a href="http://www.ox.ac.uk" target="new">University of Oxford</a>

Look carefully at this link to an external website and see if you can identify the elements. Try swapping in another website of your choosing. Don’t forget to change the description.



Task 5 Step 1 Add an <hr> tag:

On a new line under the <p> tags add another <hr> tag.



Exercise 3: Add Navigation and links to social media

• Create a navigation link • Add an image • Create new pages • Add links to social media


Task 1 Continue to work with the document i n d e x . d o c x

You will create your navigation system for the website!

Step 1 Add another hr tag under the first one on the page

Create a space between them in BlueFish by clicking return after the first tag. In the line in-between enter:

<p class="nav">

<a class="nav" href="index.html" target="new">Home</a> | <a class="nav" href="biography.html" target="new">Biography</a> | <a class="nav" href="publications.html" target="new">Publications</a>

</p>

Add the image:

<img src="images/StevePicforITLP.jpg" alt="pic of me">

Task 2 Step 1 Save as twice to create the linked pages:

Use the File, Save As command to save the file twice – as biography.html and publications.html - all in the same folder as the index.html

Change page title and header one on the new pages:

Edit the new pages so the Title ends in ‘/biography’ or ‘/publications’.

Change the <h1> tag so it says ‘biography’ or ‘publications’.

Remove the <h2> tags in the new biography.html and publications.html

Save all files and pre view the site to make sure the links are all working.



Task 3 Step 1 Add social media icons:

Under the last <hr> tag insert this Para 3 text from Text. docx:

<a href="http://uk.linkedin.com/company/university-of-oxford" target="new"><img src="images/LinkedIn.jpg"></a>

<a href="https://twitter.com/UniofOxford" target="new"><img src="images/Twitter.jpg"></a>

<a href="http://blogs.it.ox.ac.uk/engage/" target="new"><img src="images/WordPress.jpg"></a>

Task 4 Step 1 Link to your own or university sites:

If you have your own social media presence on these sites, see if you can swap out the links to insert your own.

Task 5 Step 1 Add copyright sign:

Underneath the last link, on a new line type

<p class="copyright">©Your Name 2014</p>



Exercise 4: Use CSS to style a page

• Create a style page • Style a heading • Style text


Task 1 Create s t y l e s . c s s

Save it in the same folder as your html files

Step 1 Create ctyles.css:

Choose File, New, to open a new blank document in BlueFish. Choose File, Save and save to the same folder as the html files you have created as styles.css

Task 2 We will give the body a percentage of the page and centre it

Step 1 Make rule for body:

body {width: 60%;

margin-left: auto;

margin-right: auto;

}



Task 3 We will style text elements

Step 1 Make rule for h1:

h1 { font-family: Helvetica, Geneva, Arial,

SunSans-Regular, sans-serif; color: #26466d;

text-align: right;

font-weight: 100;

padding: 5px; }

Save and check

Make rule for H2

h2 {

font-family: Helvetica, Geneva, Arial,

SunSans-Regular, sans-serif; color: #26466d;

text-align: center;

font-weight: 100;

padding: 15px; }

Task 4 See how much is similar in each rule – copy and paste rules to save time!

Step 1

Make rule for p:

p {


SunSans-Regular, sans-serif;

padding-left: 50px;

padding-right: 50px;

}



Exercise 5: Lists and tables

• Creating list • Creating a table • Centre the table


Task 1 Open publications.html

Step 1 In publications.html remove prose:

Select the text that came from the index.html page and delete it.

Enter the text in para 4 in Text.docx

Create book, journal headers etc:

After the <hr> tag you just inserted, enter 4 <h3> tag sets with the following titles:

<h3>Books</h3>

<h3>Chapters in books</h3>

<h3>Journal articles</h3>

<h3>Conference papers</h3>

Task 2 Step 1 Create lists under headers:

Put the 4 lists in Para 5 in Text.docx under each heading you have just created. Look at the tags to see how easy it is to create lists and list items

Add to lists with your own publications:

Try and add to these lists with entries of your own. If you have your own publications use these.

Don’t forget <ol></ol> is the tag for an ordered list which will give numbering as a default. Try changing a pair of these tags to <ul></ul> to create a bulleted list.

Note the use of <i> and <b>tags to add emphasis or and alternate emphasis to text. Code some text with these tags to see the effects.

Save publications.html and preview the changes in Firefox.

Task 3 Step 1 Open biography.html:

Select the text in the paragraphs that came from index.html and delete them. Insert the text from Para 6 in Text.docx in its place.



Task 4 Step 1 Create a table:

Underneath the prose enter this table. The table is probably the most ‘fiddly’ simple html element to code but it can give you some nice visual options as we shall see when we add the CSS for it.

<table class="center">

<tr>

<td><h4>Contact</h4></td>

<td><h4>Details</h4></td>

<td><h4>When</h4></td>

</tr>

<tr>

<td><h4>email</h4></td>

<td><p>[email protected]</p></td>

<td><p>term only</p></td>

</tr>

<tr>

<td><h4>office</h4></td>

<td><p>73010</p></td>

<td><p>term: 9am-5pm</p></td>

</tr>

<tr>

<td><h4>mobile</h4></td>

<td><p>12345-1234566</p></td>

<td><p>evenings</p></td>

</tr>

</table>



Exercise 6: Finish the CSS

• Style the navigation links • Style the table and borders • Style the copyright notice


Task 1 Open the document st y l e s . c s s

Step 1 Style more headings: Don’t forget that once you have created one heading rule you can copy it and make the minor changes necessary.

h3 {



color: #26466d;

text-align: center;

font-weight: 100;

padding: 10px }

h4 {



color: #26466d;

text-align: right;

font-weight: 100;

padding: 2px }



Task 2 Step 1 Style the p classes:

To get paragraphs to behave in slightly different ways we have used classes as discussed in the lesson. We now have to give these classes their own css rules.

p.nav {



color: #26466d;

text-align: center;

padding: 10px;

}

p.copyright {



font-size: small;

text-align: left;

padding: 0px;

}

Task 3 Step 1 Style the navigation link:

a.nav {font-family: Helvetica, Geneva, Arial,


color: #26466d;

font-size: 1em;

text-align: center;

text-decoration: none;

font-weight: 100;

}

We can change the behaviour of the links when we hover the mouse over them with this css:

a:hover {color: orange;}



Task 4 Step 1 Style the contact table – first we centre the table:

table.center {

margin-left:auto;

margin-right:auto;

}

Then we give the table its distinctive border design:

td {padding: 5px;

border-right: 1px dotted black;

border-bottom: 1px dotted black;

}

Task 5 Step 1 Finally, lets just style those lists to give them space and the same font as the paragraph text. Firsts the <ol>:

ol {

padding: 50px;

}

And the <ul>:

ol {

padding: 50px;

}

And then the text for the list items - <li>:

Li {



}



Exercise 7: Publish your site on Oxford hosting

• Open FileZilla and connect to your web hosting • Upload your files • View your site

Task 1

Open the FileZilla program and fill in your webspace connection details

Step 1 This exercise assumes you have your university webhosting already setup. To do this quickly please refer to the online help at:

http://www.oucs.ox.ac.uk/web/personalwebpages/personalguide.xml?ID=webspace.

Open FileZilla program

Task 2 Step 1 Fill in your connection details as follows:

Host Name: linux.ox.ac.uk

Port: 22

Username: Your Oxford Account Username e.g.oucs1234

Password: Your Oxford Account password

You will now see your linux.ox.ac.uk account space. Inside this are your cgi and public_html folders. Click public_html to view your web site

You can now transfer files to and from your web site using your SFTP client (FileZilla is used widely).

Task 3 Step 1 Drag your three html files, the css file and the image folder across to your public folder

Task 4 Step 1 Goto:

Users.ox.ac.uk/~ABCD0909 to see your website!



16 What Next? 16.1.1. CSS Course

Web publishing: An introduction to CSS http://courses.it.ox.ac.uk/detail/TWPM

16.1.2. Dreamweaver courses Dreamweaver: An introduction http://courses.it.ox.ac.uk/detail/TWAB Dreamweaver: Styling and layout using CSS (PC/Mac) http://courses.it.ox.ac.uk/detail/TWAG Dreamweaver: Including interactivity and multimedia on your web pages (PC/Mac) http://courses.it.ox.ac.uk/detail/TWAH

16.1.3. Online Presence courses Online Presence: Introductory workshop http://courses.it.ox.ac.uk/detail/TWOC Online Presence: Developing your presence http://courses.it.ox.ac.uk/detail/TWOD

16.2. Computer8 We encourage everyone to work at their own pace. This may mean that you don’t manage to finish all of the exercises for this session. If this is the case, and you would like to complete the exercises while someone is on hand to help you, come along to one of the Computer8 sessions that run during term time. More details are available from www.it.ox.ac.uk/courses/

16.3. IT Services Help Centre The IT Services Help Centre is open from 8:30 am to 8:30 pm, Monday to Friday. You can use the facilities to work through the exercises in this booklet, or use any of the applications that are available. The Help Centre is also a good place to get advice about any aspect of using computer software or hardware. You can contact the Help Centre on (2)73200 or by email using [email protected]

16.4. Downloadable Course Materials and More – the ITLP Portfolio

These course materials are available through the ITLP Portfolio, at http://portfolio.it.ox.ac.uk . Each course pack includes the course handbook in pdf form and a zip folder of the exercise files that you need to complete the exercises. Archive versions of the course book may also be useful if you use an earlier version of the software.



The ITLP Portfolio helps you find articles, videos, resources and weblinks for further IT study. For some resources, you will be asked for your Oxford (SSO) username and password.

16.5. Useful Websites The main site for all html and css at an introductory level is www.w3schools.com

03/02/2014

1

IT Learning Programme

Your teacher is: Stephen Eyre

Your demonstrators are:

We finish at: 12.15

You should have: Course Book

Where is the fire exit?

Beware of hazards

Tripping over bags and coats

Please tell us if anything does not work

Let us know if you have any other concerns

03/02/2014

2

The toilets are along the corridor just outside the teaching rooms

The rest area is where you registered; it has vending machines and a water cooler

The seats at the computers are adjustable

You can adjust the monitors for height, tilt and brightness

♫♪

Getting with the code

Writing the first webspage

Adding some text and an image

Links and navigation

The power of css

Lists and tables

Borders

Lets go live

What next?

Lets get started with BlueFish

03/02/2014

3

What next?

Dreamweaver: 3 courses ranging from intro to interactive

Social Media: A growing area with courses on Twitter, LinkedIn, and Facebook

Web: Introduction to CSS

Online Presence: 2 courses

Computer8 every Friday during term

Web Publishing Essentials - WebLearn · Web Publishing: Essentials TWPA ... click when the mouse...

Documents

Transcript of Web Publishing Essentials - WebLearn · Web Publishing: Essentials TWPA ... click when the mouse...