first commit
This commit is contained in:
Boris
@@ -0,0 +1,123 @@
|
||||
## Lecture 1 (13:00) - HTML5 and Layout
|
||||
|
||||
- XHTML (2000) succeeded HTML4, allowing XML integration such as SVG, MathML and CML.
|
||||
|
||||
### HTML5
|
||||
|
||||
- Flexible parsing and compatibility
|
||||
- Moved towards platform combining HTML5, CSS and JS
|
||||
- Improved semantic elements
|
||||
- New input attributes ex. date, time, email, url
|
||||
- Global attributes ex. id, tabindex, style
|
||||
|
||||
### Doctypes
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
```
|
||||
|
||||
```html
|
||||
<?xml version="1.0" ?>
|
||||
```
|
||||
|
||||
### Comments
|
||||
|
||||
```html
|
||||
<!-- This is a comment -->
|
||||
```
|
||||
|
||||
### ID Attribute
|
||||
|
||||
- Global attribute.
|
||||
- Must be unique between elements.
|
||||
- Must start with a letter or underscore.
|
||||
- Can be used by CSS or JS to identify elements.
|
||||
|
||||
### Class Attribute
|
||||
|
||||
- Any HTML element can also carry a class attribute.
|
||||
- Identifies collections of elements to manipulate as a group.
|
||||
- Element can have multiple classes, separated with spaces.
|
||||
- Class name should describe the class it belongs to.
|
||||
|
||||
### Block Elements
|
||||
|
||||
- Some elements will always appear to start in new lines.
|
||||
- Examples include `<h1>`, `<p>`, `<ul>`, `<li>`.
|
||||
|
||||
### Inline Elements
|
||||
|
||||
- Some elements will always appear to continue on the same line.
|
||||
- Examples include `<a>`, `<b>`, `<em>`, `<img>`.
|
||||
|
||||
### Grouping Elements
|
||||
|
||||
#### Block
|
||||
|
||||
- `<div>` Element allows for a group of elements to be grouped together within a single block element.
|
||||
- Without styling each div, they will start on new lines.
|
||||
- HTML5 introduced alternatives for semantic reasons.
|
||||
- `<article>` `<section>` `<header>` `<aside>` `<nav>`
|
||||
- Good practice to break a page into smaller sections.
|
||||
|
||||
#### Span
|
||||
|
||||
- `<span>` element is the inline equivalent of `<div>`
|
||||
- Most commonly used in order to be able to controlthe appearance with CSS.
|
||||
|
||||
## Lecture 2 (15:00)
|
||||
|
||||
### Page Information
|
||||
|
||||
- `<meta>` contained in `<head>`, contains information about the page.
|
||||
- Not visible to user, but used in search engine rankings and info.
|
||||
- Common attributes are defined in pairs.
|
||||
|
||||
#### Name, Value `<meta>`
|
||||
|
||||
##### Description
|
||||
|
||||
- Description of page
|
||||
- Used & Displayed by search engines
|
||||
- max. 155 characters.
|
||||
|
||||
##### Keywords
|
||||
|
||||
- Comma separated list of search terms
|
||||
- Not used by search engines anymore
|
||||
|
||||
##### Robots
|
||||
|
||||
- Indicated whether search engines should include page
|
||||
- `noindex` - Don't include this page.
|
||||
- `nofollow` - Include this page but not linked pages.
|
||||
|
||||
### Special Characters
|
||||
|
||||
- Some characters reserved by HTML
|
||||
- To display them, they must be escaped.
|
||||
- ex. `<`, `>`
|
||||
- Or by using ASCII / Unicode Values
|
||||
- ex. `<`, `>`
|
||||
|
||||
### Traditional HTML Layout vs. HTML5
|
||||
|
||||
|
||||
|
||||
#### HTML5 Elements
|
||||
|
||||
- `<header>`, `<footer>`. Used as either header or footer at the top or bottom of a page, respectively. Can also be used for an individual `<section>` or `<article>` within the page.
|
||||
- `<nav>`. Contains major navigational blocks ex. Primary site navigation.
|
||||
- `<article>`. Container for syndicated or singular sections ex. news or blog article.
|
||||
- `<aside>`. Contained within `<article>` and contains relevant but not necessary information.
|
||||
- `<section>`. Groups related items together ex. Grouping `<article>` elements, or splitting them up.
|
||||
- `<hgroup>`. Groups heading elements ( `h1`, `h2`, etc.. ) into one header.
|
||||
- `<figure>`. Contains information referenced by the main flow of the document. Can be used for Images, Videos,Graphs, Diagrams, Code Samples, Text etc. Can use a `<figcaption>` element to define a caption.
|
||||
|
||||
#### Sectioning Elements
|
||||
|
||||
- HTML5 elements must strictly be used as designed.
|
||||
- Where no element is valid, `<div>` is still used.
|
||||
- Any content outside of `<header>`, `<footer>` and `<aside>` is considered content, hence there is no "`<content>`" tag.
|
||||
- `<main>` element is used to specify content however, but can only be used once and cannot be nested inside `<section>` or any similar element.
|
||||
-
|
||||
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Week 5 Practice Page</title>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
|
||||
<link href="styles/style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<header id="branding" >
|
||||
<h1>Week 5 Practice Page</h1>
|
||||
</header>
|
||||
<section id="content">
|
||||
<!-- Content Start -->
|
||||
<h2>Contact Me</h2>
|
||||
<p>Use the following Form to send me an email:</p>
|
||||
<form action="mailto:admin@example.com" enctype="text/plain" method="POST">
|
||||
<p>Name: <input name="Name" type="text" id="Name"></p>
|
||||
<p>Email Address <input name="Email" type="text" id="Email"></p>
|
||||
<p>Comment:</p>
|
||||
<p><textarea name="Comment" id=""Comment></textarea></p>
|
||||
<p><input type="submit" name="Submit" value="Submit"></p>
|
||||
</form>
|
||||
<!-- Content End -->
|
||||
</section>
|
||||
<nav id="navigation">
|
||||
<h1>Navigation</h1>
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="newton.html">Newton Building</a></li>
|
||||
<li><a href="contact.html">Contact Me</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<footer id="siteinfo">
|
||||
<address>
|
||||
<a href="mailto:G.Wilkinson2@edu.salford.ac.uk">George Wilkinson</a>
|
||||
</address>
|
||||
<p>Last Modified: Friday 20th October 2023</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Week 5 Practice Page</title>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
|
||||
<link href="styles/style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<header id="branding" >
|
||||
<h1>Week 5 Practice Page</h1>
|
||||
</header>
|
||||
<section id="content">
|
||||
<!-- Content Start -->
|
||||
<header>
|
||||
<h1>Welcome to My Site</h1>
|
||||
<p>These pages are the work of George Wilkinson.
|
||||
At the bottom of the page you will find some of my favourite
|
||||
<a href=#quotes>quotes and sayings.</a></p>
|
||||
</header>
|
||||
<p>
|
||||
I am learning Computer Science at the
|
||||
<a href="https://www.salford.ac.uk">University of Salford</a>.
|
||||
I decided to study my course at Salford because:
|
||||
</p>
|
||||
<ol>
|
||||
<li>The staff are so friendly</li>
|
||||
<li>It is easy to get to by train</li>
|
||||
<li>They use GNU/Linux (some of the time)</li>
|
||||
</ol>
|
||||
<p>
|
||||
My course is provided by the <a href="https://www.cse.salford.ac.uk">
|
||||
School of Computing, Science & Engineering</a>, which is
|
||||
based in the Newton Building. The Newton Building was not built
|
||||
recently, and would benefit from some improvements. If it were
|
||||
my decision i would:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Improve the lighting in the second floor computer labs</li>
|
||||
<li>Fix the heating!</li>
|
||||
<li>Decorate the staff offices<ul>
|
||||
<li>paint the walls,</li>
|
||||
<li>replace the carpet,</li>
|
||||
<li>replace the curtains with blinds.</li>
|
||||
</ul></li>
|
||||
<li>Improve the building entrance</li>
|
||||
</ul>
|
||||
<h2>Computer Science</h2>
|
||||
<p>
|
||||
During the first semester of my first year the degree has
|
||||
several modules. Among the modules I am studying are:
|
||||
</p>
|
||||
<dl>
|
||||
<dt>Computer Architecture</dt>
|
||||
<dd>This includes a study of the architecture and operation
|
||||
of a simple <abbr title="Central Processing Unit">CPU</abbr>.</dd>
|
||||
<dt>Study Skills</dt>
|
||||
<dd>This module covers Personal Development Planing</dd>
|
||||
<dt>Web Page Design</dt>
|
||||
<dd>This is all about <abbr title="HyperText Markup Language">HTML</abbr> 5 and <abbr title="Cascading Style Sheets">CSS</abbr>.</dd>
|
||||
</dl>
|
||||
</section>
|
||||
<section id="quotes">
|
||||
<header>
|
||||
<h1>Quotes and Sayings</h1>
|
||||
<p>Here are some of my favourites:</p>
|
||||
<ul class="quotations">
|
||||
<li>
|
||||
<blockquote><p>If you don't write it down, it never happened.</p></blockquote>
|
||||
</li>
|
||||
<li>
|
||||
<blockquote><p>There are only 10 types of people in the world - those who understandbinary, and those who don't.</p></blockquote>
|
||||
</li>
|
||||
<li>
|
||||
<blockquote><p>If you can't find the bug, you are looking in the wrong place.</p></blockquote>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
<!-- Content End -->
|
||||
</section>
|
||||
<nav id="navigation">
|
||||
<h1>Navigation</h1>
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="newton.html">Newton Building</a></li>
|
||||
<li><a href="contact.html">Contact Me</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<footer id="siteinfo">
|
||||
<address>
|
||||
<a href="mailto:G.Wilkinson2@edu.salford.ac.uk">George Wilkinson</a>
|
||||
</address>
|
||||
<p>Last Modified: Friday 20th October 2023</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Newton Building</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<header>
|
||||
<h1>Workshop 5 Practice Site</h1>
|
||||
</header>
|
||||
<section id="content">
|
||||
<!-- Content Start -->
|
||||
<h1>Newton Building</h1>
|
||||
<p>
|
||||
The Newton Building contains a large amount of specialist equipment that is used by students. This includes flight simulators, wind tunnels and music studios.
|
||||
</p>
|
||||
<figure>
|
||||
<img src="src/images/flightsiminside.jpg" height="267" width="400" alt="Inside the flight simulator" />
|
||||
<figcaption>
|
||||
Inside one of the flight simulators.
|
||||
</figcaption>
|
||||
</figure>
|
||||
<!-- Content End -->
|
||||
</section>
|
||||
<nav id="navigation">
|
||||
<h1>Navigation</h1>
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="newton.html">Newton Building</a></li>
|
||||
<li><a href="contact.html">Contact Me</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<footer id="siteinfo">
|
||||
<address>
|
||||
Created by <a href="mailto:g.wilkinson2@edu.salford.ac.uk">George Wilkinson</a>
|
||||
</address>
|
||||
<p>Last Modified 20/10/23</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Reference in New Issue
Block a user