boris/G4G0-1
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Boris
2024-01-15 20:14:10 +00:00
commit 8c81ee28b7
3106 changed files with 474415 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
Semester 1/Web Development and HCI/Week 3/Week 3 Web Development.md Normal file
View File

@@ -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

66
Semester 1/Web Development and HCI/Week 3/Workshop/index.html Normal file
View File

@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html>
<head>
<title>Week 3 Practice Page</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link href="styles/style.css" rel="stylesheet">
</head>
<body>
<div>
<header class="Title" >
<h1>Week 3 Practice Page</h1>
</header>
<section>
<!-- Content Start -->
<header>
<h1>Welcome to My Site</h1>
<p>These pages are the work of George Wilkinson</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 &amp 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</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 CPU</dd>
<dt>Study Skills</dt>
<dd>This module covers Personal Development Planing</dd>
<dt>Web Page Design</dt>
<dd>This is all about HTML5 and CSS</dd>
</dl>
<!-- Content End -->
</section>
<footer>
<address>
<a href="mailto:G.Wilkinson2@edu.salford.ac.uk">George Wilkinson</a>
</address>
<p class="modifydate" >Last Modified: Friday 6th October 2023</p>
</footer>
</div>
</body>
</html>

23
Semester 1/Web Development and HCI/Week 3/Workshop/styles/style.css Normal file
View File

@@ -0,0 +1,23 @@
footer {
position: fixed;
bottom: 1px
}
footer {
display: flexbox;
}
address {
display: absolute;
align-items: flex-start;
}
.modifydate {
display: absolute;
align-items: flex-end;
}
section {
position: absolute;
}