Colour Creation Websites - Logo
By in Develop

HTML

HTML or Hyper Text Markup Language is the starting point for all web design and the bare bones of your website. With HTML you describe the basic features you want on your website, some of the more common uses are putting your headings, paragraphs of text, text boxes and inserting images onto your site. This is also where you create the actual structure of your website which is important to keep in mind when using other coding languages and when used effectively can keep a clean and efficient website. To indicate the start of your HTML file you begin it with:

<!DOCTYPE html>
<html>
</html>

Everything in your website will be between the two HTML tags. All elements in your HTML will be indicated with tags starting in “<” adding the name of the tag then ending with “>” the ending tag is indicated by using the same tag but adding a “/” before the name of the tag. Next you will need first a head tag which is where commonly you will link to other files used in the site and second a body tag which is where the main structure will be, for example:

<!DOCTYPE html>
<html>

<head>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>

<body>
<h1>Hello World</h1>
<p> This is my website </P>
</body>

</html>

Here I have linked a CSS file in the head tag and displayed on my website a heading of “Hello World” and a paragraph underneath that saying “This is my website” I have indented the tags inside each other to make it easier to read the structure of the code, for example you can easily see that the <h1> or “child tag” fits inside the <body> or “parent tag”.

You will notice the link tag does not have a closing tag, and simply has a “/” at the end of it with all its content inside the tag itself; this is called a self enclosing tag. Self enclosing tags do not display any content on the website like the <p> tag and is there to perform structural tasks, they will have parameters you need to define, for example the link type parameter defines what kind of file the file you are linking is.

When saving your HTML file you must add a “.htm” on the end of the file name to save it in the correct format, your home page should always be saved as “index.htm” and other pages can be saved under any name for example “aboutus.htm”


CSS

CSS or Cascading Style Sheet, works hand in hand with HTML to create the basic framework of your website, while HTML describes what should be displayed, CSS describes where it should be and what it should look like. Some of the most common uses of CSS are to define things like the colours of your text and background, the font of your text, the size of your pictures and where you want it on website. You don’t need to indicate the beginning of a CSS file like in HTML so the first step is to select the element in your HTML you want to style by typing its name, then open and close braces, within these braces is where you define your styling, ending each attribute with a semicolon, for example:

p {
color: red;
font-family: verdana;
text-align: right;
}

Here I have selected the ‘p’ (paragraph) tag, coloured the text red, given it a verdana font and moved it to the right hand side of the page. This will apply to all the ‘p’ tags in your HTML. However if you have more than one of these elements in your HTML and only want to apply this style to one of them, it is useful to give them a class or id in your HTML then in your CSS put either a ‘.’ Or ‘#’ right before the name of your element respectively.

To keep the code easy to read it is useful to put each element you are styling in the same order as they appear in your HTML, one CSS file is also usually used to style all of the pages on your website so it is also useful to try and keep code for different pages separate.

To save your CSS file you must add a “.css” on the end of the file name to save it in the correct format, usually your CSS file is saved as “style.css”