Skip to main content
Subject Guides

Skills Guides

Web development

Websites without coding

These days it's possible to create really effective websites without needing to know anything about coding. In the slides below we cover how to design and create web pages using tools such as Google Sites, Blogger, and more.

University web space

If you're a member of the University and you want to create a webpage from scratch, your personal web space is yours to create and edit as you choose.

Your personal webspace is part of your personal filestore ("M drive").

Forthcoming training sessions

Forthcoming sessions on :

Show details & booking for these sessions

There's more training events at:

Web code

HTML, or HyperText Markup Language, is the coding language by which the web is structured. These days it is used alongside CSS (Cascading Style Sheets), which controls the appearance of the page content.

You will often find guides and tutorials to HTML and CSS together as they work together to display web pages in your web browser.

There's a third part of a web coding trinity in the form of JavaScript, which is a scripting language that makes the web interactive. JavaScript interacts with the HTML and CSS on the pages to make websites do things. It is best to know some HTML and CSS before starting with JavaScript.

w3schools is a good place for learning HTML, CSS, and JavaScript, along with other tools for further web development.

Learning from others

You can learn a lot about web development just by looking at what other people have done.

For instance, to access the underlying code of a webpage, in most browsers you can just right-click and select "View page source" or similar.

And pressing F11 in most browsers will bring up the DOM (Document Object Model) inspector which will let you explore the page code within a tree structure or even by clicking on bits of the page itself. Why not try it on this page right now?

This page is quite complicated. It has the weight of over 30 years of web design behind it. So you might find it more revealing to look at some earlier pages. Here's the University of York homepage as it appeared in the 1990s:

Some bits of the University website are still knocking around from the 1990s and provide an interesting history lesson:


As well as learning from history, and from other people's design efforts, there's a whole online community of help. The following sites might be particularly useful:

HTML

Some useful HTML tags

General structure

<html>Everything goes in here</html>

<head>Stuff that’s not on your page but is relevant to it (e.g. the title; styles etc.)</head>

<body>The main content of your page</body>

<title>Document title (lives in the <head> section)</title>

<h1>Heading at level 1 (there’s also h2, h3, etc.)</h1>

<p> …marks the boundaries of a paragraph…</p>

<br> – (on its own, with no closing tag) inserts a single line break

<!-- insert a comment that you don’t want to appear on the page -->

Links and images

<a href="example.html">This is a link!</a>

<img src="example_image.jpg" alt="description of the image for people who can’t see the image"> – (on its own, with no closing tag) inserts an image at full size with alt text.

Basic formatting

<em>”Emphasis” – renders as italic by default</em>

<strong>”Important text” – renders as bold by default</strong>

Lists

<ul>

      <li>Bullet point one in an list of bullet points</li>

      <li>Bullet point two (if you want a numbered list, use <ol> rather than <ul>)</li>

</ul>

Style elements

<style>Defines style information (often in the <head> section, but not always)</style>

<div>A section of your document (used a lot with styles and scripts)</div>

<span>Basically an inline version of a div (e.g. part of a paragraph)</span>

CSS

CSS styles (and how to define them)

Defining styles at the outset

<style>

.example {Styles for a class called “example”; more than one item can have that class}

#example2 {Styles for an ID called “example2”; only one item should have that ID}

</style>

<div class="example">A div in the “example” class</div>

<p id="example2">The paragraph called “example2”</p>

<div class="example">Another div in the “example” class</div>

Defining styles in a tag

<p style="Styles for this paragraph">…</p>

Some useful style examples

height: 200px; – sets the height of an object (e.g. an image)

width: 100%– sets the width (in this case as a percentage rather than an absolute)

color: #000000; – sets the text colour (in this case to black using hex code)

font-family: "Times New Roman", Times, serif; – sets the font (with fallback options)

font-size: 15px; – sets the font size

font-weight: bold; – another way of making text bold

margin: 10px 20px 10px 20px; – sets the margin around an item (clockwise from the top)

padding: 10px 20px 10px 20px; – sets the margin within an item (clockwise from the top)

float: right; – makes an object (e.g. an image) float at the right of the page

clear: right; – stops the floating happen

text-align: right; – makes text align to the right

background-color: red; – sets the background colour of an item

border: 5px solid red; – gives an item a solid red border of 5px

margin: 0 auto; text-align: center – a way to centrally align without using <center>