Embedded Files
Introduction to HTML & CSS
Introduction to HTML & CSS
Repl.it is a free web service that allows you to write and run HTML & CSS code without having to install anything. All of your work will save in the cloud and so you can use it from any device, anywhere in the world, as long as you have an internet connection.
If this is your first time using Repl.it, please sign up using an existing Google account, so that you can save your work and log back in next time to continue with what you were doing.
Once signed up, click on the link on the left, then click the "Fork" button at the top middle. This will take a copy of my folders and files and save it to your profile, so that you can edit and do what you like with it.
Oh, and make sure you actually read the instructions properly. There's a lot of writing in each file, but it's important and I've tried to make it as least boring as possible.
Basic HTML tags
Basic HTML tags
Below is a list of common HTML tags. Some are never used because it can be done much better in CSS, but it's fine while you're learning.
I will use the word attribute a lot in the tags descriptions. An attribute can be used to modify a tag, such as its color (spelt intentionally like an American!), size, background, and so much more.
Attributes are used like this:
<tag attribute="value">Content Here</tag>
Your attribute's value should normally be in speech marks. If your attribute is not working, try either adding speech marks if you have not used them, or removing them if you have.
Tag
Tag
Description
Description
html
Tells the browser what language the page is written in.
head
Information about the page is put in here.
body
This is where all of your content goes. Protip: Use the attribute bgcolor="COLOUR" to change the colour of the page's background.
e.g. <body bgcolour="orange">
title
This changes the text on the tab of your page.
br
Adds a line break.
p
Creates a paragraph of text, this means it will be on a different line to the text above and below it.
h1
Use for headings. <h1> is the biggest, <h6> is the smallest.
center
Moves everything inside it to the center of the page.
b
Turns the text inside it bold. You could also use <strong>
i
Turns the text inside it italic. You could also use <em>
li
Short for list, creates a list item, should be used with <ul> or <ol> - see below
ul
Creates an Unordered List, any <li> tags inside it will turn into bullet points.
e.g. Shopping List
<ul>
<li>Cabbage</li>
<li>Broccoli</li>
<li>Carrots</li>
</ul>
ol
Creates an Ordered List, any <li> tags inside it will turn into numbers instead of bullet points.
e.g. Recipe steps
<ol>
<li>Chop the cabbage and fry it until golden</li>
<li>Season the broccoli and add it to the pan with the cabbage, fry for 5 minutes</li>
<li>Grate your carrot into the pan, turn down the heat, and cook for 10 minutes</li>
</ol>
font
Control the colour, style and size with the three attributes : color, face & size
e.g. <font color="blue" face="Georgia" size=100px>CONTENT HERE</font>
img
When you add the src attribute and specify a file path or web link, an image will display on your page. No closing tag needed.
e.g. <img src="https://hips.hearstapps.com/countryliving.cdnds.net/17/47/1511194376-cavachon-puppy-christmas.jpg ">
a
<a> stands for Anchor, which is another word for a hyperlink. You can use the href (hyperlink reference) attribute to specify what page or file you want to link to.
e.g. <a href="www.mrjohnsoncomputing.co.uk">Click me!</a>
marquee
Adds scrolling text to your page. Gimmicky, you won't see it used on many professional web pages.
CSS - Simple Styling Properties
CSS - Simple Styling Properties
Basic CSS Properties and Values.pdfPage updated
Google Sites
Report abuse