Heading 1

HTML - Hyper Text Markup Language¶

Note

Always declare the doctype before writing code: <!DOCTYPE html>

A HTML document uses tags to identify the language. Eg: <p> I'm a paragraph</p>

Elements:¶

Html documents are made up of HTML elements. An element is writen by ising a Start Tagand an End Tag and with the contect in between.

HTML documents consist of nested elements. Some elements (like the <br/> tag) do not have end tags.

HTML Tag:¶

Think of HTML as a code sandwich. All code should be writen within the following tags. <html></html>

Head tag¶

Imediately after the opening HTML tag, you;ll find the head tag. This contains all of the non-visual elements that help make the page work.

<html>
<head>...</head>
</html>

The body tag: This tag follows the head tag. All visual-structural elements are combined within the body tag. Headlines, paragraphs, lists, quotes, images and links are just a few elements that can be contained within the body.

Basic HTML Structure:¶

<html>

    <head>

    </head>

    </body>

    </body>

</html>

The title tag:¶

Add the <title> element to your head section to add a title to the document.

<html>

    <head>
        <title>First page</title>
    </head>

    </body>
        First line of text
    </body>

</html>

The title element is important because it describes the page and is used by search engines.

Paragraphs¶

Type inside the <p></p> element to start a paragraph.

<body>
    <p> This is a paragraph</p>
    <p> This is another paragraph</p>
</body>

Line break:¶

To add a line break, use the <br/> tag. This is an empty HTML tag and does not require an end tag.

Formatting Elements:¶

Below are a list of elements used for formatting text.

<p>This is regular text</p>
<p><b>Bold text</p></b>
<p><big>Big text</big></p>
<p><i>Italic text</i></p>
<p><small>Small text</small></p>
<p><em>Emphasised text</em></p>
<p><strong>Strong text</strong></p>
<p><sub>_{Subscripted text}</sub></p>
<p><sup>^{Superscripted text}</sup></p>
<p><ins>Inserted text</ins></p>
<p><del>~~Deleted text~~</del></p>

The browser shows <strong> as <b> and <em> as <i>. However, the meanings of the tags differ.

<b> and <i> define bold and italic respectively.
<strong> and <em> indicates that the text is important.

HTML Headings:¶

There are 6 levels of headings, which are ranked in importance.
<h1>
Heading 1
</h1>
<h2>
Heading 2
</h2>
<h3>
Heading 3
</h3>
<h4>
Heading 4
</h4>
<h5>
Heading 5
</h5>
<h6>
Heading 6
</h6>

Horizontal Line:¶

To create a horizontal line, use the <hr/> tag.

Comments:¶

Comments do not apear in the browser. They can be used to add desriptions, notes or reminders within the code.

Elements:¶

HTML documents are made up of HTML elements. An element is written using a Start Tag and an End Tag , with the content written inbetween.

HTML documents consist of nested elements. Some elements (like the <br> tag) do not have end tags.

Attributes:¶

Attributes provide additional information for an element ta a tag, while also modifying them. Most attributes have a value; the value modifies the attribute.

Attributes are always specified in the start tag, and they appear in name="value" pairs.

The `<img>` tag:¶

This tag is used to insert an image. It can only contain attributes and does not have a close tag.
An image URL/file path can be defined using the "src" attribute. HTML image syntax looks like the following:

<img src="image.jpg"/>

Image Location:¶

The location for the image needs to be defined inbetween the quotation marks within the "src" attribute.
Example: If you have a photo named "tree.jpg" in the same folder as the HTML file, your code should look like the following.

<html>

    <head>
        <title>First page</title>
    </head>

    </body>
        <img src="tree.jpg" alt="Picture of a tree"/>
    </body>

</html>

In case the image can't be displayed, the "alt" attribute specifies an alternate text that describes the image in words. The alt attribute is required.

Image Resizing:¶

Use the width and height attributes to define the size of the image. The value can be specified in pixels or a percentage.

<img src="tree.jpg" height="150px" width="150px" alt=""/>

Do keep in mind; loading large images can slow your page down.

<img src="tree.jpg" height="150px" width="150px" border="1px" alt=""/>

Links - `<a>` Tag¶

A link is defined using the <a> tag. You can also make use of the href attribute to define the link's destination

<p><a href="http://www.edmondscommerce.co.uk">Edmonds Commerce</a></p>

Link - Target Attribute:¶

The target attribute specifies where to open the linked document/site. Giving a "_blank" value to your attribute will have the link open in a new window or a new tab.

<a href="https://www.edmondscommerce.co.uk" target="_blank"Edmonds Commerce/a>

Lists - Ordered:¶

Ordered lists start with the <ol> tag.Each item is defined with the <li> tag.

<ol>
    <li>Red</li>
    <li>Blue</li>
    <li>Green</li>
</ol>

The items within the list will be automatically marked with numbers.

Lists - Unordered¶

Unordered lists start with the <ul> tag. It does the same as the <ol> tag, but makes use of bullet points instead of numbers.

Tables¶

A table can be defines using the <table> tag.
A table is devided into table rows with the <tr> tag.
Rows are then devided into columns with the <td> tag.
Below is a code example of a table with one row and three columns.

<table>

    <tr>

        <td></td>

        <td></td>

        <td></td>

    </tr>

</table>

Data can be stored within the <td> tag.

Tables - Rowspan:¶

To make a cell span more than one row, use the "rowspan" attribute.

<table>

    <tr>    
        <td rowspan="2">Span 2 rows</td>
        <td>Blue</td>
        <td>Green</td>
    </tr>
    <tr>
        <td></td>
    </tr>

</table>

Table Headers:¶

The <th> tag is used to define table headers. Empty <td> tags define empty cells. These are necessary in order to maintain the table's structure.

Block Level and Inline Elements:¶

In HTML, most elements are defined as "Block Level" or "Inline ELements".

Block level elements start from a new line: eg <h1>, <form>, <li>, <ol>, <ul>, <p>, <pre> etc.

Inline elements are normally displayed without linebreaks: eg <b>, <a>, <strong>, <img>, <input>, <em>, <span>etc

The <div> element is a block-level element that is often used as a container for other HTML elements. When used together with CSS styling, the <div> element can be used to style blocks of text.

<div style ="background-color:green; color:white; padding:20px;">

Span:¶

The span element is an inline element that is often used as a container for some text.

When used together with CSS, the <span> element can be used to style parts of the text.

<html>

    <body>

        <p>Some

            <span style ="color:red">Important</span>

        Message</p>

    </body>

</html>

Some Important Message

Other elements can be used either as block level elements or inline elements. This includes the following elements:

<iframe>: In line frame.

<ins>: Inserted text.

<script>: Script within a HTML document.

You can insert inline elements inside block elements. For example, you can have multiple <span> elements inside a <div> element.

Inline elements cannot contain any block elements.

Forms - `<form>` element:¶

HTML forms are used to collect information fomr the user. Forms are defined using the <form> element, with it's opening and closing tags.

<body>

<form>...</form>

</body>

Use the action attribute to point ot a webpage that will load after the user submits the for

Usually, the form is submitted on a webpage on a server.

Forms - Method Attribute:¶

This attribute specifies the HTTP method (GET or POST) to be used when the forms are submitted.

<form action="URL" method="GET">

<form action ="URL" method="POST">

When you use GET, the form data will be visible in the page address bar.

Use POST if the form is upfating data or incluides sensitive information (passwords). POST offers better security because the submitted data is not visible in the page address.

Forms - Name attribute:¶

The name attribute specifies a name for the form.

To take in user input, you need the corrosponding form elements, such as text fields. The <input> element has many variations, depending on the type attribute. It can be text, passwords, radio, URL, submit etc.

The example below shows a form requesting a username and password.

<form>

<input type="text" name="username"/><br/>

<input type="password" name="password"/>

</form>

Form - Elements:¶

If we change the input type to radio, it allows the user to select only one of a number of choices.

<input type="radio" name="gender" value="male"/>Male<br/>

<input type="radio" name="gender" value="female"/>Female<br/>

Male
Female

Forms - Checkbox:¶

The type "checkbox" allows the user to select more thank one option.

<input type="checkbox" name="gender" value="1"/>Male<br/>

<input type="checkbox" name="gender" value="2"/>Female<br/>

Male
Female

Forms - Submit:¶

The submit button submits a form to its action attribute.

<input type="submit" value="submit"/>

After the form is submitted, the data should be processed on the server using a programming language, such as PHP

Forms - Contact Form¶

The below code is for a contact form. The form willinclude Name, Email and Message fields. It also includes a submit button.

<h1><span>Contact Me</span></h1>

<form>

<input name="name" type="text"/><br/>

<input name ="email" type="text"/><br/>

<text area name="message"></textarea>

<input type="submit" value="SEND" class="submit"/>

</form>

In a HTML document alone, it wont work to actually submit the form. YUou'd need to creat the server-side code in order to submit a real form and process the data. This can be done using PHP.

HTML Colours:¶

HTML colours are representd by hexadecimal values. Eg: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.

There are 16 values in total.

0 through to F.

0 = lowest value.

F = highest value.

Colour Model:¶

Colours are displayed in combination of red, green and blue light (RGB).

Hex values are writen using the hash (#) symbol, followed by either 3 or 6 hex characters.

Colour Values:¶

All of the possible red, green and blue combinations potentially number over 16 million. Below are a few.

#FF0000 = Red

#00FF00 = Green

#0000FF = Blue

#000000 = Black

#777777 = Grey

#FFFFFF = White.

We can mix and match colours to form additional colours. #C1250F = Orange and red mix

Embedding a Video into a Frame:¶

He code below will demonstrate using a frame to embed a YouTube video. It will also create a "Follow Me" section that includes links at the end of the page.

<div class="section">

<h1><span>My Media</span></h1>

<iframe height="150" width="300" src="https://www.youtube.com/watch?v=hrZqiCUx6kg" allowfullscreen frameborder="0">

</iframe>

</div>

HTML - Hyper Text Markup Language¶

Elements:¶

HTML Tag:¶

Head tag¶

Basic HTML Structure:¶

The title tag:¶

Paragraphs¶

Line break:¶

Formatting Elements:¶

HTML Headings:¶

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Horizontal Line:¶

Comments:¶

Elements:¶

Attributes:¶

The <img> tag:¶

Image Location:¶

Image Resizing:¶

Links - <a> Tag¶

Link - Target Attribute:¶

Lists - Ordered:¶

Lists - Unordered¶

Tables¶

Tables - Rowspan:¶

Table Headers:¶

Block Level and Inline Elements:¶

Span:¶

Some Important Message

Forms - <form> element:¶

Forms - Method Attribute:¶

Forms - Name attribute:¶

Form - Elements:¶

Forms - Checkbox:¶

Forms - Submit:¶

Forms - Contact Form¶

HTML Colours:¶

Colour Model:¶

Colour Values:¶

Embedding a Video into a Frame:¶

The `<img>` tag:¶

Links - `<a>` Tag¶

Forms - `<form>` element:¶