Skip to content

Latest commit

 

History

History
630 lines (539 loc) · 15.2 KB

html.md

File metadata and controls

630 lines (539 loc) · 15.2 KB
Raw

HTML Introductory Course

DOWNLOAD

Topics

  1. Using a text editor
  2. How websites work
  3. What HTML is
  4. An example HTML page
  5. Structure of an HTML document
  6. HTML Elements
    • Text
    • Lists
    • Links
    • Images
    • Tables
    • Forms
  7. Project 1

Using a Text Editor

The text editor we will be using is named Thimble. Thimlbe is an open-source online website developed by Mozilla that is used to edit the source code for websites.

You can use Thimble in most browsers by following the instructions at thimble.mozilla.org.

How websites work

When you go to google.com. Your browser sends a request to another computer which sends files back to you. These files are usually HTML, CSS and JavaScript.

  • HTML tells your browser how the website is structured
  • CSS tells your browser what the website will look like
  • JavasScript tells your browser what the website will do

What is HTML

W3Schools:

HTML is a markup language for describing web documents (web pages).

  • HTML stands for Hyper Text Markup Language
  • A markup language is a set of markup tags
  • HTML documents are described by HTML tags
  • Each HTML tag describes different document content

Example HTML page

HTML pages look something like this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>This is a webpage</title>
    </head>
    <body>
        <p>
        	Hello
        </p>
    </body>
</html>

DEMO <-- Click here to see what the above code does

Try editing the text and seeing the result.

Your changes will be automatically reflected in the preview on the right

Structure of an HTML document

<!DOCTYPE html> tells your browser that the file it is about to read is an HTML file. This line is not required for a webpage to be viewed in a browser. However, it is good practice because it can be used to convey more complex information. In this case, <!DOCTYPE html> tells your browser that this file is written according to the most recent HTML 5 specification.

<p> is an example of a tag.

Tags are keywords that are used to define sections of an HTML document. Most tags have an opening tag <p> and a closing tag </p>.

Tags have attributes like width or src that describe some property of the tag.

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png">

Inside the <html> tag is the <head> tag.

<html>
	<head>
    	<title>My Webpage</title>
    </head>
</html>

The head tag contains information about the webpage that doesn't appear within the webpage like the title, meta-information and links to code that will run inside the page.

The title tag contains the text that will appear in the title of the window of the browser.

The <body> tag contains all the things that will appear on the webpage.

<html>
	<body>
    	<p>This is a paragraph of text</p>
    </body>
</html>

Here is an example of a very simple webpage:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My Webpage</title>
        <style>
            img {
                width: 200px;
            }
        </style>
    </head>
    <body>
        <h1>My Name</h1>
        <div id="about">
            <h2>About me</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
        <div id="photos">
            <h2>Photos</h2>
            <table>
                <tr>
                    <td>
                        <img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Bucephala-albeola-010.jpg">
                    </td>
                    <td>
                        <img src="https://upload.wikimedia.org/wikipedia/commons/f/f2/Mallard_drake_and_blue_mood.jpg">
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="https://upload.wikimedia.org/wikipedia/commons/5/51/Mandarin.duck.arp.jpg">
                    </td>
                    <td>
                        <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/Parrulo_-Muscovy_duckling.jpg">
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

DEMO

Try remixing the page.

HTML Elements

Now that you've seen some of the things that HTML can do, lets learn about how they work.

Text

Headings

HTML has 6 heading levels in descending size.

<h1>Heading Size 1</h1>
<h2>Heading Size 2</h2>
<h3>Heading Size 3</h3>
<h4>Heading Size 4</h4>
<h5>Heading Size 5</h5>
<h6>Heading Size 6</h6>

DEMO

Paragraphs

Paragraphs are sections of text that exist on new lines.

<p>This is a paragraph of information</p>
<p>This is another, it exists on its own line</p>

DEMO

Links

The web is navigated using links, which 'link' different pages to eachother. You can link to pages inside the current website.

<a href="contact.html">Contact Us</a>

Or to external websites.

<a href="http://www.google.com">Google</a>

Links wrap around sections of html that we can click to go to new pages.

<a href="https://en.wikipedia.org/wiki/Crocodile">
	<h1>Crocodile</h1>
    <img src="https://upload.wikimedia.org/wikipedia/commons/b/bd/Nile_crocodile_head.jpg" width="200px">
</a>

DEMO

Bold

<b>This text is bold</b>

This text is bold

Italic

<i>This text is italicised</i>

This text is italicised

Superscript

4<sup>2</sup> = 16

42 = 16

Subscript

Our planet is 71% H<sub>2</sub>O

Our planet is 71% H2O

Line break

<p>
	You can have line breaks in the middle of a <br /> paragraph, using the 'br' tag
</p>

DEMO

Horizontal Rule

This text
<hr />
is seperated
<hr />
by horizontal lines

DEMO

Images

Images are the most used HTML tags that don't have a closing tag.

<img src="https://i.imgur.com/tpXqSrj.jpg">

You can specify an image's dimensions using the width and height attributes.

<img src="https://i.imgur.com/tpXqSrj.jpg" width="100px">

The px denotes the number of pixels.

You can also specify the width as a percentage of the size of the containing tag.

<img src="https://i.imgur.com/tpXqSrj.jpg" width="50%">

Tables

Tables allow you to represent things in a grid format

<table>
	<tr>
    	<th>Heading 1</th>
    	<th>Heading 2</th>
    </tr>
	<tr>
    	<td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
    </tr>
    <tr>
    	<td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
    </tr>
</table>

Produces:

Heading 1 Heading 2
Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

DEMO

<tr> represents a row

<td> represents a cell -- it stands for 'table data'

<th> represents a heading

Here is an example of a more complicated table:

<table>
    <thead>
        <tr>
            <th></th>
            <th scope="col">Vanilla Ice cream</th>
            <th scope="col">Chocolate Ice cream</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Sugar</th>
            <td>10g</td>
            <td>13g</td>
        </tr>
        <tr>
            <th scope="row">Fat</th>
            <td>2g</td>
            <td>6g</td>
        </tr>
    </tbody>
        <tfoot>
            <tr>
            <td>Price</td>
            <td colspan="2">&#36;5</td>
        </tr>
    </tfoot>
</table>
Vanilla Ice cream Chocolate Ice cream
Sugar 10g 13g
Fat 2g 6g
Price $5
[DEMO](https://thimbleprojects.org/scriptsmith/132404)

Lists

HTML lists come in three styles; ordered, unordered, and definitions.

Ordered lists look like

<ol>
	<li>First</li>
	<li>Second</li>
	<li>Third</li>
</ol>
  1. First
  2. Second
  3. Third

Unordered lists look like

<ul>
	<li>Eggs</li>
	<li>Bacon</li>
	<li>Sausages</li>
</ul>
  • Eggs
  • Bacon
  • Sausages

Definition lists look like

<dl>
	<dt>HTML</dt>
    <dd>Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.</dd>
	<dt>CSS</dt>
    <dd>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.</dd>
    <dt>Javascript</dt>
    <dd>an object-oriented computer programming language commonly used to create interactive effects within web browsers.</dt>
</dl>
HTML
Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.
CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.
Javascript
an object-oriented computer programming language commonly used to create interactive effects within web browsers.

You can nest lists by placing another list inside a <li> element

<ol>
	<li>
    	First
    	<ol>
        	<li>a</li>
        	<li>b</li>
        	<li>c</li>
        </ol>
    </li>
	<li>Second</li>
	<li>Third</li>
</ol>
  1. First
    1. a
    2. b
    3. c
  2. Second
  3. Third

Forms

Forms allow you to obtain information from people that visit your website.

Name: Submit
When submitting a form, data is sent back to a server that is able to deal with this information. This is not something that is handled by HTML.

Here is an example of a form:

<form action="http://www.example.com/submit">
	 <p>
     	Username:
		 <input type="text" name="username" />
	 </p>
</form>

Username:

The action attribute is the url that the form data will be given to.

Inside the form, the input is a textbox which has the name username. When the data is handed back to the server, the server will look for the value associated with the name username.

Here are all the HTML form elements:

Textbox

<input type="text" name="username" value="qwertyuiop"/>

Password

<input type="password" name="username" value="password1"/>

Textarea

<textarea name="details"> Bla bla bla </textarea>
<textarea name="details"> Bla bla bla </textarea>

Radio button

<input type="radio" name="flavour"> Vanilla
<input type="radio" name="flavour"> Strawberry
<input type="radio" name="flavour" checked="checked"> Chocolate
<input type="radio" name="other"> Extra
Vanilla Strawberry Chocolate Extra

When you give radio buttons the same name, you can only choose one at a time.

Checkbox

<input type="checkbox" name="features"> Air Conditioning
<input type="checkbox" name="features"> Radio
<input type="checkbox" name="features"> Rear-view camera
<input type="checkbox" name="features"> Cruise control
<input type="checkbox" name="features"> Power steering
Air Conditioning Radio Rear-view camera Cruise control Power steering

Dropdown

<p>How old are you?</p>
<select name="ages">
	<option value="0-18">0-18</option>
    <option value="19-35">19-35</option>
    <option value="36-55" selected="selected">36-55</option>
    <option value="56-70">56-70</option>
    <option value="70+">70+</option>
</select>

How old are you?

0-18 19-35 36-55 56-70 70+

File upload

<input type="file" />

Date

<input type="date">

Button

<button onclick="alert('You clicked me!')">Click me!</button>
Click me!

Submit button

<form action="submit.php">
<input type="submit" />
</form>

Submit buttons will send the entered data to the location described in the action attribute.

Projects

Project 1 - A page about me

Using your newly acquired knowledge, construct an HTML page that's all about you.

Start with this structure:

LINK

Using the code that you've learned during this session (and contained within this document), assemble a page that represents you.

Consider including:

  • Your name
  • Your contact information
  • Links to your social media
  • Pictures of yourself
  • A table describing your talents
  • A map that shows where you work