Skip to Main Content
University of York Library
Subject Guides

Coding: A Practical Guide

HTML and CSS

HTML and CSS

Want to make websites?

HTML and CSS provide the building blocks for making websites with structured content and beautiful styling. Yes, even this one.

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.

Beginning HTML and CSS

When getting started with HTML and CSS, it can be useful to work through some introductory material that introduces you to how they work and gets you writing some code.

There are different options, including using free online courses like the ones on w3schools (which teaches HTML and CSS separately) or working through a book designed to introduce HTML and CSS.

You could also work through our introductory exercise, which gets you building a webpage and has references to relevant support pages on w3schools.

Creating webpages in text files

Unlike some other coding languages, you don't need any specialist software to start having a go writing web pages. All you need is a text editor, like Notepad on Windows or TextEdit on a Mac.

You can write your HTML code in a text file, then save it with the file extension .html and voila, you have a file containing your code!

To view what your webpage would look like, you'll need to open a web browser (e.g. Chrome). Press ctrl-O (cmd-O in a Mac) to open the “Open” dialogue, navigate to your saved .html file, and open it. Alternatively you can just drag the file into your browser, or (in some browsers) use File > Open File (or something similar).

Doing this doesn't mean anyone else could see it on the internet, but it gives you the chance to see the code you're writing.

If you want your webpage(s) to be accessible to others on the internet, you'll need to host them somewhere.

If you're a member of the University of York, you can use your personal web space to host webpages, by putting the .html files on your M: drive.

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>

Accessibility and responsive web design

So you're making a website, but have you thought about different users?

People using your website will have different needs, whether in terms of how the page is laid out, how they access the content, or the content itself. It's important to think about universal design principles and also specific guidance about inclusive web design.

There are guidelines on making web content accessible to all users and these are important to consider when making websites. For a starting point, see the Web Accessibility Initiative's Introduction to Web Accessibility.

To explore web accessibility further, you can try the Web Accessibility Initiative's tutorials on specific areas of web accessibility or their free Introduction to Web Accessibility online course on edX.

Responsive web design

What device are you reading this on right now? How wide is your screen? How wide is the window you're using in your web browser? Can you resize it?

Maybe you've not really stopped and thought about these questions before, but just take for granted whatever size window you see on your device. However, when you're on a website that doesn't work on your screen size, you really notice it, don't you?

We've all been on websites where you can't read the text or see the content because it doesn't work on our screen: maybe it disappears off the side of the page or is too tiny on a mobile device. When we're designing websites, we obviously don't want our users to have these issues.

This is where responsive web design comes in. Responsive design is when your code takes into account the viewing situation of the user, in terms of their device and screen. It ensures your website looks good and, most importantly, is usable on all devices.

w3schools has some guidance on initial HTML responsive design and also a whole section of guidance on CSS responsive web design which goes into more depth and introduces features like media queries that you can use in your code.

Exercises

There are a range of free online courses for learning HTML and CSS. The best thing to do once you've started learning them is to start making a test website you can play around with and try out what you've learnt.

If you want to have a go, try following our HTML and CSS exercises to see a webpage take shape.

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").

Where to go next with creating websites

Once you've started with some introductory HTML and CSS, where to go next?

  • You might want to explore further HTML and CSS, including more advanced features of HTML5 (the most recent version of HTML). Try some of the further sections on w3schools, like HTML forms, working with media in HTML, or doing responsive web design.
  • You might be finding your webpages a bit static and want to add more interactivity and action to them. If so, try out JavaScript (w3schools has a JavaScript tutorial too!).

If you want more structure to your learning, there's lots of free online courses to learn web development. We've not tried all of these so think critically about them.