HTML for Beginners

HTML is a basic language that will allow you to create basic web pages and will need CSS and JavaScript. HTML is also known as HyperText Markup Language: this can create different types of headings such as h1, h2 etc, you can make links and much more. So in this section of Kids Coding Class, you will learn a very basic coding language that will help you to learn other languages which will help you to make a website that looks great.

HTML for Beginners

HTML is a basic language that will allow you to create basic web pages and will need CSS and JavaScript. HTML is also known as HyperText Markup Language: this can create different types of headings such as h1, h2 etc, you can make links and much more. So in this section of Kids Coding Class, you will learn a very basic coding language that will help you to learn other languages which will help you to make a website that looks great.

Structure

If you look at HTML code, you will find that all elements have opening and closing tags. An opening tag contains a less than sign followed with a character and then a more than sign. A closing tag contains the same as an opening tag but instead, after the less than sign there is a forward slash. For example, <h1> </h1>.

In every HTML document it must follow a basic structure of:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

What are HTML tags?

HTML tags are hidden keywords in the back end of a website that will determine the structure and layout of a website. Tags have two sections an opening and an ending, this would look like <tag name></tag name>. An example of a tag is which would make any text inside of this tag bold.

What are Attributes?

Attributes provide additional information about HTML tags; these must be placed inside of the opening tag. To make an attribute in HTML it must follow by the attribute name then = “” and inside of the double quotes it will have the attribute value. For example, <a href=”http://www.kidscodingclass.co.uk/learn-html-tutorial/”>example</a>.

HTML Elements

Body
The body element is everything you see in the browser.

Head
In the head it contains content about the page and you usually will find the title element inside the head.

Title
The title element contains the SEO title of the page; this is usually found at the top of the window.

Style
In the style element is where you can add your own custom CSS to make your web pages look good.

Link
Link is used to link to external documents, usually used to link to CSS documents.

Meta
Meta tells us about the document and other meta elements are used to show descriptions, keywords and other metadata about the the page.

Script
The script element is used to add JavaScript to your page.

Noscript
Noscript is the to disable any script if a browser doesn’t support certain script.

Headings

HTML has six different headings, h1 is the largest while h6 is the smallest. H1 is used to for the main headings for your webpage, h2 is used for subheadings and if further heading the other heading will be used. In each browser heading display differently, you may see a different text size. 

Paragraphs

The paragraph tag is used the most throughout a website and is used for your paragraphs in your website, as the name implies. The paragraph tag will look like <p></p>.

Typographical Emphasis

Bold
By impeding text in the <strong> tag, also known as bold, will make text appear as bold; you can also use the <b> tag but it is better to use the <strong> tag as it tells google or any other browser that text has strong importance.

Italics
Italics is used to make text appear in an italics form; to use this it is best to use the <em> tag instead of the <I> tag as it gives the text importance.

Underline
This displays a line beneath text and is used to draw attention to text; you can use this by using the <u> tag.

Superscript
The <sup> tag is used to make certain characters superscript which makes it half the height and above, for example, in Maths you could use this to say ‘to the power of’.

Subscript
The <sub> tag is the opposite of superscript but is below, such as for chemical formulas like CO2.

Line Breaks
Line breaks are used to make text move onto a new line so you can make the last word on the following line. To do this you need to use the <br /> tag.

Horizontal Rule
To create a horizontal rule you will need to use the <hr /> tag, you can use this to separate different sections.

These tags are known as empty spaces as they are the only tags that don’t have any text in the middle of them.

Block Quote
This tag is used for longer quotes and make sure they are still inside of the <p> tag; they usually take up a paragraph. This tag looks like <blockquote>

Quote
The <q> is used to symbolise any quotations in text; browsers usually put quotations around text but internet explorer does not support this.

Abbreviations
Abbreviations, also known as acronyms, are usually used to give the full value of certain words; to do this you will use the <abbr> tag and to add the full value you need to add the title attribute to express certain words full meaning.

Citations
To use citations you will need to use the <cite> tag. Citations are used to reference from books; citations look like italics.

Definitions
The <dfn> tag is used to indicate a new term; some browsers put the <dfn> tag in italics.

Details
Author details are shown by the <address> tag and indicates contact details for the author; they are often shown as italics.

Inserted
The <ins> tag is shown as underlined in a browser and is used to indicate that content has been inserted into a document.

Deleted
This tag is the opposite of inserted and is used to tell the browser that text has been deleted from a document; these are shown as a line through it. To show this you will need to use the <del> tag.

Strikethrough
The <s> tag is used to show something is not accurate; it is shown as a line through it.

How to Create a Link?
In order to create a link, you will need to use the tag and you will need to use the attribute called href and this is where you will link to an external website or linking to your own. For example, Kids Coding Class Home. To write a good link you will need to look at what people are searching for, you will learn more about this on our dedicated SEO page.

Linking to External Websites
When linking to different websites you will use an absolute URL, which means the full website address that starts with the domain name followed with the specific page, and this is created with the tag; users can click on anything between the tag.

Linking to other Pages on your Website
If you are making a website from scratch the URL is just the name of the file that you want to link to. When linking to the same site you do not need to use an absolute URL, you just need to use something called a relative URL which means you do not have to specify the domain name.

Linking to Emails
Creating a link is like linking to websites but in the href attribute you add mailto: followed with your email. This will work like a normal link but when a user clicks the link their email program will open with a new message addressed to the email you have chosen.

Opening Links in New Tab
In order to make a link to open in a new tab you will need to use the target attribute with _blanc in the double quotation. This is commonly used to link to other websites or with PDF’s.

Anchors
Anchors are commonly used to go back to the top of a page or link to important parts of text. To create anchors you need to use the id attribute, this identifies the parts of the page you want to link to. To link to the id you need to use the <a> tag and in the href attribute followed by a #name of id.

Anchors on Another Page
To anchor to another page it is like an anchor but when linking to an id on another page link to the page first then follow it by #name of id.

Lists

Ordered and Unordered Lists
Ordered lists are shown with numbers and used by using the <ol> tag, whereas Unordered lists are shown with bullet points and are used by the <ul> tag.

The <li> tag is used to indicate where a new list item is.

Definition Lists
Definition lists are created by using the <dl> tag and are used to group <dt> and <dl> elements.

<dt> is used to show a term is defined, whereas <dd> is used to show the definition.

Nested Lists
You can create a nested list by putting a second list inside of a list; this is called a sub list or nested list.

Tables

<table> Element
To create a table, use the table element; this imbeds the <th>, <tr>, <td>, <thread>, <tbody> and <tfoot> elements.

<th> Element
The <th> tag stands for table head and is used for a heading for a column or row; this helps people to understand what each row or column is about.

<tr> Element
In order to add a row you will need to use the <tr> tag and this stands for table row; it is followed by the <td> element.

<td> Element
This stands for table data and this is where all the data is as it states.

<thead>, <tbody> and <tfoot> Elements
The <thead> and <tfoot> show the first rows and the last rows; whereas the <tbody> element is used to show where the main data is shown.

Spanning Rows and Columns
To span rows, use the colspan attribute and select the numbers of rows you would like it to take up. It is the same for columns but instead, you need to use the colspan attribute and decide how many columns you would like it to take up.

Images

How to Create Images?
To create an image you need to use the <img> tag and you have to have an attribute called src which will carry the image address so the borrower can find the image. You can also use the alt attribute which tells the browser about the image; this is used for SEO. As well as the alt attribute you can use the title attribute which provides additional information about the image; this shows as a tooltip in browsers.

You can add images anywhere in your code, for example, inside the text.

Changing the Height and Width of Images
You can change the height and width of an image by using the height and width attribute which uses pixels to measure the size of the image.

Figure
Figure is often used to to add captions to images; to add this you will need to use the <figure> tag. To add captions to images, use the <figcaption> tag which allows you to add a caption to an image.

Forms

<form> Element
The <form> element doesn’t create any fields, but it is a container around the fields, so it is used to help create a form. This always should have the action attribute and will usually have the method and id attribute.

Action Attribute
The action attribute is required in every form; it is the URL of the server when the form is used.

Method Attribute
The method attribute only has two values, get and post. With the get method the values from the form submitted are added to end of the URL stated in the action attribute; this is commonly used for short forms. Whereas, the post method is used to send files to the server; these are commonly used for long forms.

<input> Element
This element is used to create many different form fields; the type attribute controls what type of field will be created.

Name Attribute
The name attribute needs to be in every form and is used to identify the name of the field which is sent along with the information the entered into the form.

Maxlength Attribute
This is used so you can choose the amount of characters a user can enter into the field.

Structure

If you look at HTML code, you will find that all elements have opening and closing tags. An opening tag contains a less than sign followed with a character and then a more than sign. A closing tag contains the same as an opening tag but instead, after the less than sign there is a forward slash. For example, <h1> </h1>.

In every HTML document it must follow a basic structure of:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

What are HTML tags?

HTML tags are hidden keywords in the back end of a website that will determine the structure and layout of a website. Tags have two sections an opening and an ending, this would look like <tag name></tag name>. An example of a tag is which would make any text inside of this tag bold.

What are Attributes?

Attributes provide additional information about HTML tags; these must be placed inside of the opening tag. To make an attribute in HTML it must follow by the attribute name then = “” and inside of the double quotes it will have the attribute value. For example, <a href=”http://www.kidscodingclass.co.uk/learn-html-tutorial/”>example</a>.

HTML Elements

Body
The body element is everything you see in the browser.

Head
In the head it contains content about the page and you usually will find the title element inside the head.

Title
The title element contains the SEO title of the page; this is usually found at the top of the window.

Style
In the style element is where you can add your own custom CSS to make your web pages look good.

Link
Link is used to link to external documents, usually used to link to CSS documents.

Meta
Meta tells us about the document and other meta elements are used to show descriptions, keywords and other metadata about the the page.

Script
The script element is used to add JavaScript to your page.

Noscript
Noscript is the to disable any script if a browser doesn’t support certain script.

Headings

HTML has six different headings, h1 is the largest while h6 is the smallest. H1 is used to for the main headings for your webpage, h2 is used for subheadings and if further heading the other heading will be used. In each browser heading display differently, you may see a different text size. 

Paragraphs

The paragraph tag is used the most throughout a website and is used for your paragraphs in your website, as the name implies. The paragraph tag will look like <p></p>.

Typographical Emphasis

Bold
By impeding text in the <strong> tag, also known as bold, will make text appear as bold; you can also use the <b> tag but it is better to use the <strong> tag as it tells google or any other browser that text has strong importance.

Italics
Italics is used to make text appear in an italics form; to use this it is best to use the <em> tag instead of the <I> tag as it gives the text importance.

Underline
This displays a line beneath text and is used to draw attention to text; you can use this by using the <u> tag.

Superscript
The <sup> tag is used to make certain characters superscript which makes it half the height and above, for example, in Maths you could use this to say ‘to the power of’.

Subscript
The <sub> tag is the opposite of superscript but is below, such as for chemical formulas like CO2.

Line Breaks
Line breaks are used to make text move onto a new line so you can make the last word on the following line. To do this you need to use the <br /> tag.

Horizontal Rule
To create a horizontal rule you will need to use the <hr /> tag, you can use this to separate different sections.

These tags are known as empty spaces as they are the only tags that don’t have any text in the middle of them.

Block Quote
This tag is used for longer quotes and make sure they are still inside of the <p> tag; they usually take up a paragraph. This tag looks like <blockquote>

Quote
The <q> is used to symbolise any quotations in text; browsers usually put quotations around text but internet explorer does not support this.

Abbreviations
Abbreviations, also known as acronyms, are usually used to give the full value of certain words; to do this you will use the <abbr> tag and to add the full value you need to add the title attribute to express certain words full meaning.

Citations
To use citations you will need to use the <cite> tag. Citations are used to reference from books; citations look like italics.

Definitions
The <dfn> tag is used to indicate a new term; some browsers put the <dfn> tag in italics.

Details
Author details are shown by the <address> tag and indicates contact details for the author; they are often shown as italics.

Inserted
The <ins> tag is shown as underlined in a browser and is used to indicate that content has been inserted into a document.

Deleted
This tag is the opposite of inserted and is used to tell the browser that text has been deleted from a document; these are shown as a line through it. To show this you will need to use the <del> tag.

Strikethrough
The <s> tag is used to show something is not accurate; it is shown as a line through it.

Links

How to Create a Link?
In order to create a link, you will need to use the tag and you will need to use the attribute called href and this is where you will link to an external website or linking to your own. For example, Kids Coding Class Home. To write a good link you will need to look at what people are searching for, you will learn more about this on our dedicated SEO page.

Linking to External Websites
When linking to different websites you will use an absolute URL, which means the full website address that starts with the domain name followed with the specific page, and this is created with the tag; users can click on anything between the tag.

Linking to other Pages on your Website
If you are making a website from scratch the URL is just the name of the file that you want to link to. When linking to the same site you do not need to use an absolute URL, you just need to use something called a relative URL which means you do not have to specify the domain name.

Linking to Emails
Creating a link is like linking to websites but in the href attribute you add mailto: followed with your email. This will work like a normal link but when a user clicks the link their email program will open with a new message addressed to the email you have chosen.

Opening Links in New Tab
In order to make a link to open in a new tab you will need to use the target attribute with _blanc in the double quotation. This is commonly used to link to other websites or with PDF’s.

Anchors
Anchors are commonly used to go back to the top of a page or link to important parts of text. To create anchors you need to use the id attribute, this identifies the parts of the page you want to link to. To link to the id you need to use the <a> tag and in the href attribute followed by a #name of id.

Anchors on Another Page
To anchor to another page it is like an anchor but when linking to an id on another page link to the page first then follow it by #name of id.

Lists

Ordered and Unordered Lists
Ordered lists are shown with numbers and used by using the <ol> tag, whereas Unordered lists are shown with bullet points and are used by the <ul> tag.

The <li> tag is used to indicate where a new list item is.

Definition Lists
Definition lists are created by using the <dl> tag and are used to group <dt> and <dl> elements.

<dt> is used to show a term is defined, whereas <dd> is used to show the definition.

Nested Lists
You can create a nested list by putting a second list inside of a list; this is called a sub list or nested list.

Tables

<table> Element
To create a table, use the table element; this imbeds the <th>, <tr>, <td>, <thread>, <tbody> and <tfoot> elements.

<th> Element
The <th> tag stands for table head and is used for a heading for a column or row; this helps people to understand what each row or column is about.

<tr> Element
In order to add a row you will need to use the <tr> tag and this stands for table row; it is followed by the <td> element.

<td> Element
This stands for table data and this is where all the data is as it states.

<thead>, <tbody> and <tfoot> Elements
The <thead> and <tfoot> show the first rows and the last rows; whereas the <tbody> element is used to show where the main data is shown.

Spanning Rows and Columns
To span rows, use the colspan attribute and select the numbers of rows you would like it to take up. It is the same for columns but instead, you need to use the colspan attribute and decide how many columns you would like it to take up.

Images

How to Create Images?
To create an image you need to use the <img> tag and you have to have an attribute called src which will carry the image address so the borrower can find the image. You can also use the alt attribute which tells the browser about the image; this is used for SEO. As well as the alt attribute you can use the title attribute which provides additional information about the image; this shows as a tooltip in browsers.

You can add images anywhere in your code, for example, inside the text.

Changing the Height and Width of Images
You can change the height and width of an image by using the height and width attribute which uses pixels to measure the size of the image.

Figure
Figure is often used to to add captions to images; to add this you will need to use the <figure> tag. To add captions to images, use the <figcaption> tag which allows you to add a caption to an image.

Forms

<form> Element
The <form> element doesn’t create any fields, but it is a container around the fields, so it is used to help create a form. This always should have the action attribute and will usually have the method and id attribute.

Action Attribute
The action attribute is required in every form; it is the URL of the server when the form is used.

Method Attribute
The method attribute only has two values, get and post. With the get method the values from the form submitted are added to end of the URL stated in the action attribute; this is commonly used for short forms. Whereas, the post method is used to send files to the server; these are commonly used for long forms.

<input> Element
This element is used to create many different form fields; the type attribute controls what type of field will be created.

Name Attribute
The name attribute needs to be in every form and is used to identify the name of the field which is sent along with the information the entered into the form.

Maxlength Attribute
This is used so you can choose the amount of characters a user can enter into the field.

Web Developer

Web Developer

Web Developer