## Lecture 1 (13:00) - Links

### HTML Links

- Link from:
	- Another website
	- Another page on the same website
	- Another part of the same page
	- A new window
	- Email Client
	- Etc.
- href links to other web pages must contain the full URI. ex.

```html
<a href="https://tgj.services">Balls</a>
```

- href links to different pages on the same website can be relative. ex.

```html
<a href="../index.html">Home</a>
```

- href links to mail must be a mailto link. ex.

```html
<a href="mailto:noreply@tgj.services">Email for a Reply</a>
```

- href links to open in a new window must contain a blank target. ex.

```html
<a href="htps://tgj.services" target="_blank">Nuts</a>
```

- href links to a part of the same page must contain the ID of the element. ex.

```html
<h1 id="top">Test Webpage</h1>
<a href="#top">Jump to Top</a>
```

- href links can link to IDs of elements in other pages of the same websites by combining the above methods. ex.

```html
<a href="../index.html#contact">Contact Information</a>
```

## Lecture 2 (15:00) - Images & Tables

### Images

- Uses the `<img>` tag to embed an image

```html
<img src="path/to/image.jpg" alt="Test Image" title="Hover title" width="600" height="450" />
```

- `src` is the path to the image file
- `alt` is the alternative text that shows when the image cannot load
- `title` is the text that will appear on image hover
- `width` is the width of the image in pixels
- `height` is the height of the image in pixels
- The `<img>` tag does not have a closing tag, since it has no content inside, but it is closed with a `/>

#### Image Rules

##### Formats

- **jpeg**
- **gif**
- **png**
- JPEG allows for good compression of images, making it an effective format for non-transparent images.

##### Correct Size

- Images may be stretched or too small to see
- Using relative view sizes preferable

##### Use Correct Resolution

- Images generally use 72 pixels per inch
- If resolution is too large, they will have to be downloaded by the end user, causing slow load times.
	- ex. `JPEG@300ppi` = **1526kb** -> `JPEG@72ppi` = **368kb** | 4.1x Size Decrease

#### Vector Images

- Composed of coordinate points ( instructions on how to draw ) rather than pixel values.
- They can be resized to any resolution without being blurry or pixelated.
- Can be very small images.
- Formats include SVG, EPS, WMF.

#### Transparency

- GIF and PNG allow for transparency values between 0 and 255, allowing for fully opaque or fully transparent, and 254 values in-between.

#### Figure and Figure Caption

```html
<figure>
	<img src="images/oters.jpg" alt="Picture of otters sleeping">
	<br />
	<figcaption> Sea otters hold hands when they sleep </figcaption>
</figure>
```

### Tables

- Tables are useful for grid information. Ex.
	- Sports Results
	- Stock Reports
	- Train Timetables
- Tables are not designed for site layout.

#### Tags

```html
<table>
	<tr>
		<th></th>
		<th>Today</th> //Table Heading (Vertical )
	</tr>
	<tr>
		<th>Numbers: </th> //Table Heading for Row ( Horizontal )
		<td>1</td> //Table Data
		<td>2</td> 
		<td>3</td> 
	</tr> //Table Row
</table>
```

- `<table>` creates a new table
- `<tr>` defines a new table row
- `<td>` contains table cell data
- `<th>` contains table cell data in bold, a semantic element used for screen readers and styling

```html
<td colspan="2"></td>
<td rowspan="2"></td>
```

 - The first cell element will span over 2 separate columns.
 - Similarly, the second element will span vertically across 2 rows