Week 5 — Tables & Forms

Today we practice tables (data, not layout) and forms (collecting user input). We also recap Week 4 essentials: links & images (paths, anchors, alt).

1) Week 4 Quick Bridge — Links & Images

A website is a network of pages and assets connected by correct paths. Links connect documents; images add meaning and visual context.

Tip: For external links that open in a new tab, use target="_blank" together with rel="noopener noreferrer".

Links

External link (new tab): Open SarjPOS website (external)

Email & phone: Email me · Call +90 500 111 2233

Jump link (anchor): Go to Contact Section

Images

Sample placeholder banner image — Example image with meaningful alt text + caption.

Local image tip: create a folder structure like: Project/index.html and Project/img/me.jpg, then use src="img/me.jpg".

2) Tables — Data, Not Layout

Tables are for structured data like schedules and lists. We build tables using <table>, <tr>, <th>, and <td>.

Course Schedule (Sample) — with caption, thead/tbody/tfoot, and scope
Day	Time	Topic	Room
Monday	10:00–11:30	HTML Basics	A-201
Wednesday	10:00–11:30	Links & Images	A-201
Friday	Lab Day: Practice Tables + Forms
Saturday	09:00–10:00	Revision	A-105
Saturday	10:00–11:00	Mini Quiz	A-105
Note: Use tables for data, not for page layout.

Common mistakes to avoid

Using tables for layout instead of data
Missing header cells (<th>) and no meaning
Messy structure (no thead/tbody, hard to read)
Wrong paths when linking table pages/assets

3) Forms — Collecting User Input

Forms collect data and send it to a server. Today we focus on the HTML side (no backend). The form element uses action and method.

GET vs POST (simple):
GET → data is visible in the URL (search-like).
POST → data is sent in the request body (typical form submission).

Contact Section (Anchor Target)

This section is linked by <a href="#contact">.