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.

Learning and Engagement Librarian secondment: My year of learning

By Christina Salopek, University of Wollongong (UOW) Library. csalopek@uow.edu.au 


Collaboration. Problem solving. Digital creation. Information literacy. User experience. These words, and more, are topics that inspired and motivated me to apply for a 12-month secondment position in 2021 within the UOW Library’s Learning and Engagement team (L&E) – and, what a team! Never one to shy away from embracing opportunities of new ways of thinking and new ways of learning, I was curious to learn: 

 
(a) How does the Library L&E team iterate, develop and deliver digital learning resources?  
(b) What skills, attributes and priorities are required to be successful in the position?   

 
I was inspired by UOW Library’s Thriving Library Capabilities Framework, which guided me on the capabilities that I would need to apply effectively on a daily basis during my secondment. The capabilities of particular relevance to me were collaboration and communication. 

Collaboration, Communication and Information Literacy

Early in my secondment, it became apparent that Tuesday would be my favourite day of the working week. Why? Tuesday was the day the entire team were in the office to discuss and work collaboratively on, for example, identifying gaps in relation to student information and digital literacy; and work on, or plan, any ongoing and/or future projects to support teaching and learning. 

Screenshot of a teaching and learning support guide highlighting the services provided by the team
Image: How we can help your teaching & learning page from the Library Support for Teaching & Learning library guide.

Ongoing collaboration and communication, integral to the L&E role, were essential capabilities that provided me with a deeper insight and the practical hands-on experience I needed, to understand the tools and techniques the team applied in creating inclusive, pedagogical, online library tutorials for diverse cohorts. Brainstorming, analysing Chat transcripts and LibGuide analytics, liaising with other library team members and connecting and fostering partnerships with library stakeholders, including teaching staff and members from the Faculty of Education Committees; were just some of the capabilities I acquired (and applied) in collaboratively developing creative, online library tutorials.  

Screenshot of the library tutorials section of the teaching and learning support guide
Image: Library Tutorials page from the Library Support for Learning & Teaching library guide. 

For example, an outcome from one of my earliest Tuesday brainstorming sessions was the iteration of an infographic targeting students new to academic research, outlining the benefits and limitations of library databases and non-library databases. For me, Tuesday brainstorming sessions not only highlighted the collaborative aspect of the role and the contribution the team has made towards UOW’s blended learning enhancement initiative. It also provided me with the opportunity to share my insights and experiences from working in various capacities within an academic library, towards actively contributing to and designing an accessible online learning resource. 

Digital creation, problem solving and user experience

I love user experience (UX). I have been a long-time member of the Library UX Community of Practice. As such, user experience and my interest in designing with the user in mind is just one of the (many) reasons I applied for the L&E secondment. The team’s commitment in designing and delivering user-focused, accessible and equitable online learning resources was an opportunity for me to apply the knowledge I acquired as a result of my UX interest.  

For example, I collaborated with my L&E colleague Cate Slater in the re-design of the Library Systematic Literature Review Workbook (H5P). It was my first foray into using the H5P format in which I contributed by creating online content and interactive activities, with the purpose of delivering a sustainable and pedagogical solution based on the user needs and interactions from students and teaching staff. 

Front page of the UOW Library systematic review workbook
Image: Front cover of UOW Library’s Systematic Review Workbook 

Key takeaways

There are so many key takeaways to draw from my secondment in the Learning and Engagement team. However, in a nutshell, I have learnt from my team (Nick Zografos, Susan Jones and Cate Slater) that: 

  • Communication, collaboration and partnerships with academic teaching staff are integral to the role and to understanding the user needs of the wider UOW Learning and Teaching community 
  • Creativity, applying best practice for pedagogical solutions and keeping up to date with learning technologies are important to ensure students develop the digital and information literacy skills required for success in their studies and careers 
  • Tuesday is still my favourite day of the working week! 

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.