HTML learning

Here is what you need to know about HTML.


Here is a link to a helpful website for coding.

Tags


Tags are the fundamentals of HTML.

Even though all tags will do different things they all have one thing in common, <,> and /, all tags have the < > signs around them and all tags to end something you put /, so if you were to make a heading you'd type as your code.


h1 This is my website /h1

The most common tags in no particular order are as follows...

1. !DOCTYPE html


2. html


3. body


4. p


5. h1*


*The ,1,in h1 depends on how big you want the text to be, if you want it to be big you'd put h1, if you wanted it to be smaller you'd put a higher number such as h2 or h3.

The most important tags are the first three on the list above as they have to be at the start of every piece of html code or it won't work.

The most useful tags are p and h1 as they are used to create writing, p used for paragraphs and h1 used for a heading of a certain size, without them a website would be at most a very poor one.


CSS


CSS is about the layout of your piece of code and is usually between the head or style tags. For example if you wanted to make the colours of links blue you would go to the top of your piece of code and type in.


head
style
a:link {color:blue;}
/style
/head


In this scenario the tags are head and style, the CSS is the a:link{color:blue} as that is the layout of the website not the body.

This change is a better example of CSS, it is also between the head and body tags and is made using a tag called div and /div. To write this code it would look something like this.

body
style
div
#division name
{
width:95%;
max-width:900px;
margin:auto;
padding: 5px;
background-color: indigo;
text-align: center;
font-family: Arial, Verdana, sans-serif;
font-size: 12pt
}
/div
/style
/body

the division of the parts between the : and ; can be changed to your liking. The ones that are there at the moment are the ones used for this website.

What the div tag actually does is creates a section of your website that is customisation able to your liking.


Script tags.


The script tag can be very important, it is used when you want to add JavaScript to your website. The JavaScript should be put in between the two script tags if done correctly, if not your code will not work in that area.

An example of this is...


p id="Your id"
script
document.getElementById("sentence").innerhtml = "Your sentence"
/script




The button tag is quite simply a button, you click it and it does the task you code it to. The way you create one is...

button your text /button

You can put it in between link tags to make it actually do something or you can add JavaScript, but apart from that it's useless.


Images and links


To make images and links you need to be familiar with these two tags, a and img. The a and img tags are what start making the image, you will need to put more information in to make it put out an image, for example.

img src="image adress of your choice" width="your width" height="your height" /img

The way to make links is very similar, you just swap src with href and img with a. Here is an example anyway.

a href="your link" your text. /a


You can also customise your link using some of the information on the CSS page.