G4G0-1/Semester 1/Web Development and HCI/Week 3/Week 3 Web Development.md

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.

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

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

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

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

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

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

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

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

Lecture 2 (15:00) - Images & Tables

Images

• Uses the <img> tag to embed an image

<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

<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

<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

<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