Overview:
A brief history
Framework and how it fits together
HTML - Basics
CSS - Gerben
HTML5 - Fotis
Examples / Tutorial
HTML – HyperText Markup Language
CSS – Cascading Style Sheets
Javascript
Static
Dynamic
Lets start with a sample/template
<!DOCTYPE html> <html> <header> </header> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
HTML 5.0<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd ">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<!DOCTYPE blah > - Tells the browser how to interpret the code
General remarks
Tags and elements.
Element = <tags> content </tags>
Tags and elements can be and are frequently nested inside each other.
Head
The <head></head> element contains info for the browser.
<title> - document title
<style> - styling instructions (e.g. - internal css)
<meta> - for search engines; description, author, keywords
<link> - defines the relation to external resources (e.g. - css)
<script> - calls a client side script (e.g. Javascript)
<noscript> - Alternate for browsers with scripts disables.
<base> - A base URL for relative URL references
Body
The main content of the page.
This can include a great number of things......
Elements can be given additional attributes such as colors and spacing instructions.
<a href="#about" class="darktab">content</a>
Structure - Plain text
<h1></h1> - Headings 1-6*Basic text commands
<b>bold</b> | <i>italic</i> | <small>small</small>
bold | italic | small
sub | mark | sup
ins | del
Basic text continued ...... empty elements
There is a <br> break in the line. Then a <hr> horizontal rule.
There is a
break in the line. Then a
horizontal rule.
There is a in this line.
Special outputs
<a href="http://www.iluvcats.com">I love cats</a>
Same page or section on another page
<a href="#catz">Go to catz</a>
<a id="catz">catz</a>
<img src="url" style="style_features" alt="some_text">
<img src="http://www.tom-mccavana.com/pictures/background.png" style ="width:80%; height:auto;" alt="Strands of light">
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<form></form>
<input> is the tag for all form inputs and we vary the type attribute.
Using form output.
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
<iframe src="URL"></iframe>
Handy attribute - width, height, frameborder
Name can be used to make it a target for a reference, i.e.
<iframe src="blank/default" name="iframe_a"> </iframe>
<a href="URL" target="iframe_a">Link to catz</a>
Example...
Ordered <ol></ol>
Unordered <ul></ul>
<li>beer</li>
<li>steak</li>
<li>dinosaur</li>
Other things in lists
<table >
<tr>
<th>Dinosaur</th>
<th>Diet</th>
<th>Roar</th>
</tr>
<tr>
<td>Triceratops</td>
<td>Herbivore</td>
<td>Mild</td>
</tr>
</table>
Dinosaur | Diet | Roar |
---|---|---|
Triceratops | Herbivore | Mild |
<table >
<tr>
<td>T-Rex</td>
<td>Carnivore</td>
<td>Loud</td>
</tr>
<tr>
<td>Triceratops</td>
<td>Herbivore</td>
<td>Mild</td>
</tr>
</table>
T-Rex | Carnivore | Loud |
Triceratops | Herbivore | Mild |
<table >
<tr>
<th>Dinosaur</th>
<th>Diet</th>
<th>Roar</th>
</tr>
<tr>
<td>T-Rex</td>
<td>Carnivore</td>
<td>Loud</td>
</tr> <tr>
<td>Triceratops</td>
<td>Herbivore</td>
<td>Mild</td>
</tr>
</table>
Dinosaur | Diet | Roar |
---|---|---|
T-Rex | Carnivore | Loud |
Triceratops | Herbivore | Mild |