## Lecture 1 (13:00) - Introduction

### Learning Outcomes

- HTML CSS
- Markup Validation
- Accessibility (Cross Platform & Device)
- Debugging
- HCI

### Assessments

- Design, develop and test website, HTML5 & CSS, desktop and mobile, documenting design and testing ^401105
	- **8/12/2023** Deadline
	- **50%** of overall module mark ( 10 Credits )
		- Content 10%
		- Design 10%
		- HTML Structure 10%
		- Advanced use of HTML 20%
		- CSS 30%
		- Validation and Accessibility 20%

### Other Module Content

- Server Side Programming
	- **PHP**, **ASP.NET**, **Perl**
- Client Side Programming
	- **JavaScript**
- Databases
- Frameworks
- Web Services

### Reading List

#### Useful Websites

- <https://w3.org>
- <https://w3schools.com>
- <https://developer.mozilla.org>
- <https://diveintohtml5.info>

#### Books

- HTML & CSS (Duckett, J)
- HTML Pocket Primer
- HTML Mobile Pocket Primer

### Weekly Class Test

- Complete by following Wednesday
- Covers content learned through the week

### Scope

- World Wide Web
	- Information Space based on Hypertext / Hypermedia
	- Internet (an intranet) as a comms channel
- Web Developments
	- Content
	- Design and Artwork
	- Technical Implementation / Software Development

## Lecture 2 (15:00) - Structure

#### HTML

- Hypertext Markup Language
- Standardised system for tagging text files, achieving font, colour, graphic and hyperlink effects on webpages.
- Describes the structure of a webpage
- Made up of **elements** and **tags**
	- Tags come in pairs
- Each element contains content between two tags
- Text documents
- Scripting language

#### Attributes

- Provides additional information about the contents of an element
- Defined on opening tag
- Contains a name and a value

## Workshop 1 (13:00)

#### Find Example of a Bad and Good Website

- Bad Website
	- <https://www.art.yale.edu/>
		- This website has clashing colours, inconsistent fonts, a confusing layout, and no form that it sticks to.
	- <https://manchester.craigslist.org/>
		- Not necessarily bad structure, but the lack of proper design practices makes it a less than good looking website to the end user.
- Good Website
	- <https://github.com/explore>
		- Colours and font is consistent, website is clean and easy to navigate. No pop-ups or distracting content
	- <https://hub.docker.com/search?q=&type=image>
		- Layout is extremely intuitive and familiar to most users, colours do not clash, and fonts are consistent.

### Good Web Design Principles:

- Cohesion & Simplicity - is not confusing, has no clashing elements. Pop-ups are kept to an absolute minimum as to not distract the user to the content of the website.
- Consistency - font and colour does not vary when not needed.
- Emphasis - elements that are important to convey to the user are marked as such, allowing the user to be directed intuitively.

### Technical Challenges

#### Major Technical Challenges

- Accessibility - Creating the website to work on all devices and display content reliably.
- Security - Having the bare website exposed to the internet with no proxy leaves it vulnerable. Using HTTP with TLS on the world web is essential. Isolation of services.

#### Shallowest Learning Curve in WebDev

- CSS, the main thing to learn is how it interacts with the page.