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;
Closing tag
Root
Welcome to my first web page.
Horizontal rule (empty tag)
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.
inserts a horizontal rule into your page ______
The
tags ensure that whatever is typed in between these will only appear at the head of the document. The
tag – everything between these tags will appear in the body of the web page.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 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
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
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: info or for an external link: - Creates a hyperlink
- Creates a target location within a document
- Links to that target location from elsewhere in
2 Images …… Ordered Lists ……
You may have heard the saying that a picture is worth a thousands words. Most web pages incorporate graphical images in their designs. Images add interest to a page but they provide more than aesthetics, images are memorable and can be used to create a mood, emphasise a point or sell a product.
What is CSS …. Other Web Design Courses ….
CSS deals with the lookof elements on a web page andthe layoutof the web page. Enhancing an Academic Presence Using CSS CSS can be used in three different ways in web design; Creating an Academic Presence using WordPress Separate Style Sheet In the Head section In Line
This presentation is made available by Traci Huggins under a Creative Commons licence:
Attribution-NonCommercial-ShareAlike CC BY-NC-SA
Individual images may be subject to their own copyright conditions and where possible this is acknowledged in the presentation
traci.huggins@it.ox.ac.uk
3