Library Subject Guides
Want to make websites?
HTML and CSS provide the building blocks for making websites with structured content and beautiful styling. Yes, even this website.
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.
The world wide web (what you're viewing now) has gone through a lot of changes since it was invented by Tim Berners-Lee at CERN in 1989.
When you're learning web coding, you might find that there's many ways to do things, like style up some content or create menus. Some things work only in newer browsers and others are more universal.
Newer versions of HTML and CSS have changed standard ways of creating websites, and JavaScript libraries have opened up different ways of making stylised and interactive websites. New conventions and old mix together on the web: just like how this page has some modern boxes, and then this one...
Note: this box is using a CSS stylesheet designed to make it look like Windows 98, for some retro 90s vibes.
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.
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>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 -->
<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.
<em>”Emphasis” – renders as italic by default</em>
<strong>”Important text” – renders as bold by default</strong>
<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>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>
<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>
<p style="Styles for this paragraph">…</p>
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>
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.
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.
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.
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").
Once you've started with some introductory HTML and CSS, where to go next?
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.