144 lines
3.4 KiB
Markdown
144 lines
3.4 KiB
Markdown
## 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
|