Understanding how websites work: a brief introduction

by Nicholas Rowsell, Digital Library Programs and UX Officer, University of Newcastle Library (nicholas.brett@newcastle.edu.au)

Knowing how to code in web mark-up languages allows you to create and edit websites and understand how websites work.

Much like learning an instrument, this can be very intimidating at first but with practice you may find yourself intuitively recognising patterns and predicting what logical step to expect next.

The Foundation

HTML (Hypertext Mark-up Language) is the foundation of every website you visit on the internet. HTML documents are made up of elements, which are the building blocks of each page.

The following examples of code can be pasted into W3Schools.com allowing you adjust the code safely in a sandpit environment.

The Building Blocks

The basic structure of an HTML document includes the following elements (note that you will need to use single spacing between lines of code):

<html>

<body>

<h1>

Content Heading

</h1>

<p>

Content goes here…

</p>

</body>

</html>

The Working Example

<html>

<body>

<h1>

Digital Dexterity

</h1>

<p>

Digital dexterity is a critical component in the success of digital societies.

</p>

</body>

</html>

Note: As each element is opened with a tag <p> it is also closed with an accompanying tag </p> which has a backslash added.

Customising your Building Blocks

Elements consist of tags, attributes, and content.

A tag determines the element type. Examples include:
 

<html>Represents the root of an HTML document, differentiating from other types
<body>Defines the document’s body and may contain the below tags
<h1>Creates a header, can use the numbers from 1-6
<p>Defines a paragraph element
<img>Defines an image element
<a>Defines a hyperlink

An extensive list of tags can be found on W3Schools.com.

An attribute provides additional information or characteristics about an element. Examples include:

IDSpecifies a unique id for an element
altSpecifies an alternate text when the original element fails to display

Attributes are placed within the opening tag:

<h1 id=”myHeader”>Digital Dexterity</h1>

Content is the easiest part, this is the text or other elements within the tags that is your awesome subject matter knowledge you wish to share with the world!

Time to add some Style…

CSS (Cascading Style Sheets) is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. Extending our metaphor from earlier, if HTML is the foundation of a website, then CSS is the architecture that makes it beautiful and functional.

CSS allows you to control the layout, font, colour, and other visual aspects of a website, just as an architect controls the layout, colour, and design of a building.

The code which determines this control over the style is known as a CSS rule.

A CSS rule consists of a selector and declaration blocks.

<style>

h1 {

  color: blue;

  font-size: 12;

}

</style>

In this instance <h1> is the selector as it designates the style to the 1st header.

Between the curly brackets { } are two examples of a declaration, the first being color:blue; followed by font-size:12px;. These declarations can be further broken down into their property and value. In the first instance is the property (color) which is separated by a colon : followed by the value (blue).

Bringing it all together

<style>

h1 {

  color: blue;

  font-size: 12;

}

</style>

<html>

<body>

<h1>

Digital Dexterity

</h1>

<p>

Digital dexterity is a critical component in the success of digital societies.

</p>

</body>

</html>

An ever-growing knowledge base

As the librarians at the University of Newcastle have developed our skills with web coding we have developed a knowledge base on LibGuides, where staff can see templates for components we have collected over time. The advantage of this knowledge base means having a library of consistent web elements which can be deployed as needed, saving time and creating ease of access.

To learn coding in a supported environment, W3Schools.com is a great and free web resource.

Creating video templates for shorter lead times and greater consistency in library tutorials

by Nicholas Rowsell, Digital Library Programs Officer, University of Newcastle Library

A challenge in creating anything across a team, or to a greater extent an institution, is ensuring that when content is created there is a consistent design language, and when adhering to this requirement, efficiencies are not lost.

To communicate your ideas with this purpose in mind, content should be:

  • aligned to brand positioning,
  • consistent between digital objects,
  • as equitable and accessible as possible
  • solutions should match your team’s abilities
  • lean into established processes when adding something new.


In wanting to establish new processes for the creation of a video tutorial series for the University of Newcastle Library, these were the considerations we had to address.   

Our solution was to create a series of templates for video creation programs such as Powtoon and Microsoft PowerPoint. By providing content creators with a series of template slides they are quickly and easily able to copy a slide and insert the content they need to present, with all the animations, transitions, and formatting completed for them ahead of time. All that is then required is for the team member to render the slides to create a video. The positive implications of this are that videos are highly sustainable and scalable, as content can be edited or updated on the slides and re-rendered as needed to reflect an updated syllabus, changes in technology or services, and so on.

So how did this solution come about?

Alignment with brand positioning

Our priority in creating a new video series was to align the look and feel of content to the University’s Brand Guidelines. This meant ensuring that our team members used the correct typography, colours, shapes, and images.

We quickly identified this as a pain point as the time taken to set up a file, create a design, then undertake a quality assurance check distracted from the goal of the content being created and released.

This is where our solution to create video templates first came about.

Leaning into existing practices

One of the first lessons learnt in our solution was to lean into what the team was already doing and what they were familiar with. This was done by learning from our mistakes and pivoting where needed. Our first approach was to implement the template solution in Microsoft PowerPoint; we did this as we knew the team had great digital capabilities with this program so that asking them to perform a new process in the application was straightforward.

What we overlooked was that the team was already very invested in using PowToon for video creation.  This did not create a major roadblock, however, as we were able simply to import the templates from PowerPoint into PowToon.  But time could have been saved had we been more perceptive to our team’s existing preferences from the get-go.

One solution leading to opportunities for continuous improvement

With greater efficiencies created, the team become time richer. This, in turn, presented an opportunity to introduce consistent practices. This opportunity was to make our videos more equitable and accessible, by adding in Closed Captions embedded within the videos, to aid students who don’t have English as a first language, or have a hearing impairment.  We can also introduce the use of Alternative Text sheets for download in the notes field below the videos, which can be used by screen readers.

A scalable, sustainable solution for higher quality resources

As our development of videos as digital learning objects continues, the team can rely on the sustainability and scalability of the slides to easily update content which is engaging and relevant, ensuring we can continue in our endeavour to provide high quality online information literacy resources.