Using HTML to create an online presence

Prerequisites Time in the classroom is precious – it is an opportunity for you to interact with the workshop leader and other participants through questions and discussions and to share your experiences and concerns. To make the most of this time we sometimes ask you to carry out learning activities ahead of the workshop so that everyone comes into the class with the same basic knowledge. We keep this prior learning to a minimum and often make use of Lynda.com videos. Lynda.com videos can be accessed by University members anytime, anywhere, through a browser or app. The workshop description will tell you if any prior learning is required. If you don’t have an environment where you can do this learning, you can come along to one of our ‘Lynda Labs’. These are scheduled every week, and are a quiet space where you can work through Lynda.com videos or other workshop resources. If you turn up to a workshop without having done the prior learning, the workshop leader may suggest that you come back on another session.

Copyright Traci Huggins makes this booklet and the accompanying slides available under a Creative Commons licence (BY-NC-SA: Attribution-NonCommercial-ShareAlike). The Oxford University crest and logo and IT Services logo are copyright of the University of Oxford and may only be used by members of the University in accordance with the University’s branding guidelines.

About the workshop designer Traci Huggins has over a decade’s experience in teaching, she has worked as a Computing Lecturer, Course Leader and Tutor in Further Education writing and delivering courses for Levels 1 to Level 5, she has also co-wrote a new Foundation Degree in Computing Science course in conjunction with Oxford Brookes University.

Traci’s teaching knowledge covers Excel, Business Computing, Information Systems, Web Design (HTML/CSS/WordPress) and SharePoint. She is a highly committed teacher who likes to ensure that everybody has the opportunity to learn to use technology in their study or workplace both effective and efficiently.

Revision history Version Date Author Comments 1.0 September 2016 Traci Huggins

About this workshop This workshop will give you an insight into how to create and work with a WordPress site. You will not be a fully pledged web designer by the end of the session however it will put you in a good position with the right tools and knowledge to enable you to be creative and create a fully working and adaptable Academic Profile. Bluefish is a free software advanced text editor with a variety of tools for programming in general and the development of dynamic websites. Bluefish supports development in (among others) HTML, XHTML, CSS, SML, PHP, C, C++, JavaScript, java, google Go, Vala, Ada, D, SQL, Perl, ColdFusion, JSP, Python, Ruby and shell.

What you will learn This course will help you learn to use BlueFish to create simple websites. These notes deal with BlueFish using Windows XP. Having worked through these notes, you should 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.

What you need to 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 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).

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. You can download a copy of the latest version of BlueFish from: http://bluefish.openoffice.nl/index.html There are many other 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.

The resources you need Sample Images and text that you can use to experiment with will be available, but you might like to bring along your own. Unless you have been told otherwise, there will be a computer available for you to use with the following tools installed: Internet Explorer

Firefox

BlueFish

You can bring along your own laptop with your preferred tool installed if you want to – just bear in mind that I am not an expert in every tool (although I am sure that between us we will be able to solve most issues!).

Learning objectives This workshop covers the following learning objectives;

Learning objective one – Create a folder structure Learning objective two – What is Bluefish Learning objective three – Write HTML to code your own website Learning objective four – Use images and links in your web page Learning objective five – Create lists and tables Learning objective six – Set up links to social media sites

I will point you at a variety of resources that will help you in achieving these objectives. They can all be downloaded from the ITLC Portfolio at;

http://portfolio.it.ox.ac.uk/resource/course-pack/web-design-creating-academic-profile-using-html/2013

Basic HTML Structure Below shows the basic HTML structure needed to create a web page;

<html>

<head>

<title>HTML Basics for Fun and Profit</title>

</head> Root

<body>

<H1>Welcome to my first web page.</H1>

<hr/>

</body>

</html>

Tags must always have an opening and closing wickets < > and end tags must always have the following to show the HTML editor that this is the end of a section </ >

HTML needs to be inserted at the beginning of your web page and the end of your web code.

<hr/> inserts a horizontal rule into your page ______________________________

The <head> tags ensure that whatever is typed in between these will only appear at the head of the document.

The <body> tag – everything between these tags will appear in the body of the web page.

Closing tag

Horizontal rule (empty tag)

Learning objective One – Create a folder structure

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.

CSS images PDFs JS Index.html

To Do: ….

Use the space below to help you decide on how best to create your folder structure, as this will be the first important part of planning your website.

Learning objective Two – What is Bluefish

How can you find Bluefish - http://bluefish.openoffice.nl/index.html

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

Learning objective Three – Write HTML to code your own website

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.

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

The two root elements of a simple web page

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

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

Title

The title is the name of 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

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

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.

Script

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

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.

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.

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

Learning objective Four – Use images and links in your web page

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>

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.

To Do: …

Use Exercise 2 and 3 to help guide you.

Create pages called the following; Index, Biography and Publications, please feel free to change the name of these to suit your requirements as well as add more pages if you feel that you need them.

Add content to the pages you have created

Add navigation to the pages you have created

Learning objective Five – Create lists and tables

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 cover the creation of lists in a page – we’ll leave navigation systems to another chapter.

Ordered Lists

Result

Unordered Lists

Result

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.

To Do: ….

Tables and lists are very useful when adding content to a page, use the notes and create tables to hold information and lists to display information – play around with both numbered and bullet point lists.

Learning objective Six – Set up links to social media sites – 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.

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 into 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

Where to put CSS

Separate style sheet

In the Head section

In line

Syntax / 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:

Colours

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

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.

To Do: ….

Colours can enhance your website – but they can also hinder too!

Play around with the background colour and change the font colour and see the difference it makes to your webpage

Use Exercise 4 – Use CSS to style a page, and type in the CSS code to your webpage and see the difference CSS can make to your website

Further information - Getting extra help

Clinics

The IT Learning Centre offers bookable clinics where you can get pre- or post-course advice.

About Lynda.com

Lynda.com is free to all members of the University. Visit courses.it.ox.ac.uk/lynda and sign in with your Single Sign-On (SSO) credentials. Some courses recommend pre- and/or post-course playlists of Lynda.com videos to support your learning. You can watch these anywhere, anytime, and even download them on to a tablet or smartphone for off-line viewing. If you need a quiet place to work through playlists away from distractions, the IT Learning Centre offers frequent Lynda Labs that you can book on to.

About the ITLC Portfolio

Many of the resources used on the IT Learning Centre courses and workshops are made available as Open Educational Resources (OER) via our Portfolio website at portfolio.it.ox.ac.uk.

About the IT Learning Centre The IT Learning Centre delivers over 100 It-related classroom-based courses, and gives you access to thousands of on-line course through Lynda.com.

Our team of teachers have backgrounds in academia, research, business and education and are supported by other experts from around the University and beyond.

Our courses are open to all members of the University at a small charge. Where resources allow, we can deliver closed courses to departments and colleges, which can be more cost effective than signing up individually. We can also customize courses to suit your needs.

Our fully equipped suite of seven teaching and training rooms are available for hire for your own events and courses. For more information contact us at courses@it.ox.ac.uk

About Academic IT Services The IT Learning Centre is part of Academic IT Services (AcIT). AcIT engages with the University in all aspects of the use of IT for teaching, learning and outreach, including the development of the University’s Virtual Learning Environment (WebLearn), research data management advice, technology enhanced learning, and digital media services including the Replay lecture capture service. If you think AcIT can help you, contact us at academicit@it.ox.ac.uk

1

Traci Huggins

Traci.Huggins@it.ox.ac.uk

Web Design: Using HTML to createan online presence

Your comfort is important..

• The toilets are along the corridoroutside the lecture rooms

• The rest area is where you registered

• The swivel seats are adjustable

• You can adjust the monitors forheight, tilt and brightness

The Course Handbook ..

Contains notes on each topic + slides

Tasks for you to practice during today’s course

Work at your own pace

Follow up work

Continue with exercises after the session

Course Clinics and Lynda Labs

Course Outline …..

Getting to grips withthe code

Writing the firstwebpage

Adding some textand images

Lists and Tables

Borders

Lets go live

What Next

Creating Folders ……. BlueFish Editor…

BlueFish is a free open source texteditor suitable for designed websites and using programminglanguages

http://bluefish.openoffice.nl/index.html

2

HTML what is it …

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

HTML Code ……

Basic Tags …..

<html></html>

Creates an HTML document

<head></head>Sets off the title and other information that isn’t displayedon the web page itself

<body></body>Sets off the visible portion of the document

Some Text Tags …..

<hl></hl>

Creates the largest headline

<h6></h6>

Creates the smallest headline

<b></b>

Creates bold text

<i></i>

Creates italic text

<em></em>

Defines emphasized text

<strong></strong>

Defines important text

Adding 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 inthe document

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

Images ……

You may have heard the saying that a picture is worth athousands words.

Most web pages incorporate graphical images in their designs.

Images add interest to a page but they provide more thanaesthetics, images are memorable and can be used to create amood, emphasise a point or sell a product.

<img src=”image.gif” alt=”this text should describe theimage.”/>

Ordered Lists ……

What is CSS ….

CSS deals with the look of elements on a web page and thelayout of the web page.

CSS can be used in three different ways in web design;

Separate Style Sheet In the Head section In Line

Other Web Design Courses ….

Enhancing an Academic Presence Using CSS

Creating an Academic Presence using WordPress

This presentation is made available by Traci Huggins under aCreative Commons licence:

Attribution-NonCommercial-ShareAlikeCC BY-NC-SA

Individual images may be subject to their own copyright conditions andwhere possible this is acknowledged in the presentation

traci.huggins@it.ox.ac.uk