HTML | Kai Ze

Toggle to see Summary of all Main Points.

Main Topics and Points of HTML5
	Topic	Main Points
00	Getting Started	VS Code with Live Server Extension.
		Boilerplate with <head> and <body>.
		w3c tool for HTML validation.
01	Head Element	Use <meta> tags for metadata.
01	Head Element	Link to favicon and stylesheet through <link> tags.
02	Text Basics	Tags for semantic meanings or visual functions.
		Block-level vs Inline-level Elements.
		Entities to show symbols.
03	List Types	Ordered/Unordered/Descriptive List with List Items.
04	Add Links	Anchor Tags for Absolute/Relative/Internal References.
04	Add Links	Links Conventions (Best Practices).
05	Add Images	Essential Parameters.
06	Semantic Tags	Provide meanings to chunk of codes.
07	Create Tables	Give semantic sections with <caption>, <thead>, <tbody> and <tfoot>.
07	Create Tables	Data within table are defined under <tr> (rows), <th> (heading data), <td> (data).
09	Forms and Inputs	Get vs Post to endpoint.
09	Forms and Inputs	Different Types of Input then submit.

Resources

Tutorial by Dave Gray

Free YouTube Tutorial.

"Keep striving for progress, not perfection. And a little progress every day goes a very long way." - Dave Gray

MDN

MDN provides detailed explaination on each classes and attributes.

Getting Started

Example of HTML5 Code.


                    <a href="https://leekaize.com"> leekaize.com </a>
                    

                    <h1> Homepage | Lee Kai Ze </h1>
                    

                    <p> Paragraph of words. </p>

Environment Setup

VS Code has became the go-to choice for most programming languages in 2023.

The Live Server Extension allows quick preview of development website without manually setting up local server.

Boilerplate

Head with Metadata
Body with Semantic and Visuals Contents

HTML Validation

Use w3c tool for HTML validation by uploading the HTML files.

01 - Head Element

Metadata through <meta> tags.
Link to favicon and stylesheet through <link> tags.

02 - Text Basics

HTML Entities

Here are some HTML Entities: < © >
Typed as: < © >

03 - List Types

Ordered List: Numbered Points with <li> as list items.
Unordered List: Bullet Points with <li> as list items.
Descriptive List: <dt> as item topic and <dd> as item description.

04 - Add Links

Anchor Tags

<a href="..."></a> - Anchor Tag for hyperlinks.

Absolute reference to websites e.g., https://google.com
Relative reference to something within the server e.g., about.html
Internal reference to a specific portion of the page through <section id="sectionName"></section> then <a href="#sectionName"></a>.

Link Conventions (Best Practices)

Don't print the full web link in text.
Use visual to show it is a link, don't use text "This links to …".
Make it short descriptive, not whole sentence.
Don't use non-descriptive, e.g., "Click here".

05 - Add Images


                <figure>
                

                <img src="/img/kuching.jpg" alt="A photo taken at Kuching Riverside." title="Kuching Riverside" width="500" loading="lazy">
                

                <figcaption>Kuching Riverside.</figcaption>
                

                </figure>

The `width` and `height` are recommended in `img` tag to give the browser an idea of the image size although it will be done on CSS too.
The `loading="lazy"` make the page only load that image until scrolled to there.

06 - Semantic Tags

Semantic - Provides Meaning rather than just visual. These are important for assistive technologies, try not to make everything just a generic <div> or <span> as they don't have any meanings by themselves, they are more useful in CSS.

<header>, <main> and <footer> to separate page into three major sections.
Hierarchy of Headings with only one <h1>, multiple <h2> …
Navigation <nav> for grouping of links.
Topic Changes can be done with <hr> with pure HTML.
Instead of generic <section>, they can be replaced with more specific ones, e.g., <article>.

07 - Create Tables

<caption>, <thead>, <tbody> and <tfoot> gives semantic section to the table.
Data within table are defined under <tr> (rows), <th> (heading data), <td> (data).

08 - Forms and Inputs

Get vs Post

get - will show all the parameters within URLs.
post -directly pass in the value to the endpoint.

Types of Inputs

text
password
email
Custom optgroup with select
radio
textarea
button
etc... Full list can be found on MDN.