- Using a text editor
- How websites work
- What HTML is
- An example HTML page
- Structure of an HTML document
- HTML Elements
- Text
- Lists
- Links
- Images
- Tables
- Forms
- Applying CSS
- Additional functionality
- Youtube videos
- Google maps
- Javascript
- Simple exercises to take home
The text editor we will be using is named atom. atom is an open-source program developed by GitHub that is used to edit text documents and source code. This document was written in atom.
You can download atom for your operating system by following the instructions at atom.io.
http://flight-manual.atom.io/ is atom's reference.
If you have questions, check flight manual for instructions on manipulating files, editing text, and features of the atom program.
Make sure that you are familiar with the following:
- Opening and saving files
- Selecting text
- Making new lines
- Indenting text
- Copying and pasting text
- Enabling code highlighting
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.
HTMLtells your browser how the website is structuredCSStells your browser what the website will look likeJavasScripttells your browser what the website will do
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
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 and copy this code into atom.
Try editing the text and opening the file in your web browser.
When you make changes to your webpage, ensure that you save the file (Ctrl+S) in atom and refresh the page (F5 or Ctrl+R) in your web browser.
<!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>Copy the code into Atom, save it as a new file named mypage.html and try customising it.
Now that you've seen some of the things that HTML can do, lets learn about how they work.
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>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>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><b>This text is bold</b>This text is bold
<i>This text is italicised</i>This text is italicised
4<sup>2</sup> = 1642 = 16
Our planet is 71% H<sub>2</sub>OOur planet is 71% H2O
<p>
You can have line breaks in the middle of a <br /> paragraph, using the 'br' tag
</p>This text
<hr />
is seperated
<hr />
by horizontal linesImages 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 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 |
<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">$5</td>
</tr>
</tfoot>
</table>| Vanilla Ice cream | Chocolate Ice cream | |
|---|---|---|
| Sugar | 10g | 13g |
| Fat | 2g | 6g |
| Price | $5 | |
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>- First
- Second
- 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>-
First
- a
- b
- c
- Second
- Third
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:
<input type="text" name="username" value="qwertyuiop"/><input type="password" name="username" value="password1"/><textarea name="details"> Bla bla bla </textarea><textarea name="details"> Bla bla bla </textarea>
<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"> ExtraVanilla Strawberry Chocolate Extra
When you give radio buttons the same name, you can only choose one at a time.
<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 steeringAir Conditioning Radio Rear-view camera Cruise control Power steering
<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+<input type="file" /><input type="date"><button onclick="alert('You clicked me!')">Click me!</button>Click me!
<form action="submit.php">
<input type="submit" />
</form>Submit buttons will send the entered data to the location described in the action attribute.
Using your newly acquired knowledge, construct an HTML page that's all about you.
Start with this structure:
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 availability
- A map that shows where you work