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:
| ID | Specifies a unique id for an element |
| alt | Specifies 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.
