first commit

2024-01-15 20:14:10 +00:00
commit 8c81ee28b7
3106 changed files with 474415 additions and 0 deletions
--- a/Development.md
+++ b/Development.md
@@ -0,0 +1,143 @@
+## 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