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

185
Semester 1/Web Development and HCI/Week 4/Week 4 Web Development.md Normal file
View File

@@ -0,0 +1,185 @@
## Lecture 1 (13:00) - Tables and Forms Cont.
#### Big Tables
`<thead></thead>` - Table Head
`<tbody></tbody` - Table Body
`<tfoot></tfoot>` - Table Footer
### Forms
#### Form Structure
Forms require a:
- Action attribute - a URL for the page on the server that will receive the form data
- Method attribute - usually GET or POST.
```html
<form action='send_email.php' method='GET'>
<p>Form Controls Appear</p>
</form>
```
```html
<form action="htps://example.com/login.php">
<p>Username:
<input type="text" name="username" size="15" maxlength="30" />
</p>
<p>Password
<input type="password" name="password" size="15" maxlength="30" />
</p>
</form>
```
#### Input
- **type** is the control type of the input.
- `type="password"` identifies the input would be protected, and plaintext is hidden.
- **name** identifies the field in the sent data
- **maxlength** limits the character input length
#### Text Area
```html
<form action="https://example.com/comments.php" >
<p>What did you think of this gig?</p>
<textarea name="comments" cols="20" rows="4">
Enter your Comments
</textarea>
</form>
```
#### Radio Buttons
```html
<form action="https://example.com/genre.php" >
<p>Please select your favourite genre: <br />
<input type="radio" name="genre" value="Rock" checked="checked" />Rock
<input type="radio" name="genre" value="Pop" />Rock
<input type="radio" name="genre" value="Jazz" />Rock
</p>
</form>
```
- One radial button **must** be checked
- Each button in a group should have the same name
#### Checkbox
```html
<form action="https://example.com/profile.php" >
<p>Please select your favourite genre: <br />
<input type="checkbox" name="service" value="itunes" checked="checked" />iTunes
<input type="checkbox" name="service" value="lastfm" />Last.fm
<input type="checkbox" name="service" value="spotify" />Spotify
</p>
</form>
```
- No elements *have* to be checked, but it is good practice.
## Lecture 2 (15:00)
#### Drop-Down List
```html
<form action="https://example.com/profile.php">
<p>What device do you listen to music on?</p>
<select name="devices" size="3" multiple="multiple">
<option value="ipod" selected="selected">iPod</option>
<option value="radio">Radio</option>
<option value="computer">Computer</option>
</select>
</form>
```
- `<option>` elements used to define each option.
- `<select>` elements allow users to select an option from a drop down list.
- **size** dictates the font size of the list items.
- **multiple** sets the capability to select multiple items in the list.
- **selected** sets the default selected value(s) in the list
#### File Inputs
```html
<form action="https://example.com/upload.php" method="POST">
<p>Upload your song in MP3 format: </p>
<input type="file" name="user-song" />< br/>
<input type="submit" value="Upload" />
</form>
```
- **value** in `<input type="submit"../>` sets the content of the submit box
#### Submit Button
```html
<form action="https://www.example.com/subscribe.php">
<p>Subscribe to our email list</p>
<input type="text" name="email" />
<input type="submit" name="subscribe" value="Subscribe" />
```
#### Image Button
```html
<form action="https://example.com/subscribe.php">
<p>Subscribe to our email list</p>
<input type="text" name="email" />
<input type="image" src="images/subscribe.png" />
</form
```
#### Labelling Controls
```html
<label>Age: <input type="text" name="age" /></label><br />
Gender:
<input id="female" type="radio" name="gender" value="f" />
<label for="female">Female</label>
<input id="male" type="radio" name="gender" value="m">
<label for="male">Male</label>
```
#### Grouping Elements
```html
<fieldset>
<legend>Contact Details</legend>
<label>Email: <br />
<input type="text" name="email" /></label><br />
<label>Mobile: <br />
<input type="text" name="mobile" /></label><br />
<label>Telephone: <br />
<input type="text" name="telephone" /></label><br />
</fieldset>
```
#### Form Validation
- Used to be handled by JS, but is now implemented in HTML5
- Reduces traffic load by handling checks clientside
```html
<form action="http://example.com/login.php" method="post">
<label for="un">Username: </label>
<input type="text" name="user" required="required" id="un" />
<br />
<label for="pw">Password: </label>
<input type="password" name="pwd" required="required" id="pw" />
<input type="submit" value="submit" />
</form>
```
#### Date Input
```html
<form action="https://example.com/bookings" method="post">
<label for="dep">Departure Date: </label>
<input type="date" name="depart" id="dep" />
<input type="submit" value="Submit" />
</form>
```

15
Semester 1/Web Development and HCI/Week 4/homework.html Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Title</h1>
<section>
<h1>Heading</h1>
<p>This is a paragraph</p>
</section>
<p1>And this is another paragraph.</p1>
</body>
</html>

21
Semester 1/Web Development and HCI/Week 4/homework.svg Normal file
View File

@@ -0,0 +1,21 @@
<svg width="250" height="250">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="4" fill="white" />
<circle cx="100" cy="170" r="3" stroke="black" stroke-width="4" fill="white" />
<circle cx="100" cy="150" r="3" stroke="black" stroke-width="4" fill="white" />
<circle cx="100" cy="130" r="3" stroke="black" stroke-width="4" fill="white" />
<circle cx="100" cy="150" r="60" stroke="black" stroke-width="4" fill="white" />
<circle cx="85" cy="40" r="5" stroke="black" stroke-width="2" fill="white" />
<circle cx="115" cy="40" r="5" stroke="black" stroke-width="2" fill="white" />
<rect width="200" height="230" stroke="black" fill="none"/>
<polygon points="95,50 105,55 90,75" stroke="black" stroke-width="2" fill="orange" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 807 B