Web/HTML programming
In this course, you will learn how to program using Html. You will also learn how to make custom icons, add CSS and JavaScript to pages and others. Asides from these, you will also learn about HTML Character Entities, escaping, Unicode and others. This course is suitable for beginners as well as people who want to expand their knowledge in html and web programming.
Getting Started with HTML.
Elements, Nesting Elements, Block versus inline elements, empty elements;
Attributes, boolean attributes, single or double quotes;
Anatomy of an HTML document; Whitespace in HTML; Entity references/special characters; HTML Comments;
What’s in the head? Metadata in HTM. Topics covered
Title, Medtadata, character encoding, description and SEO
Custom icons, adding CSS and JavaScript to the page, document language
HTML text fundamentals. Topics covered:
Structure in web pages. Headings and Paragraphs
Lists: Unordered, Ordered, (they don’t cover description lists), nested lists.
Emphasis and Importance, but not style…
Creating hyperlinks. Topics covered:
Anatomy of a link,the title attribute, block level links.
URLs and paths, block fragments and ids, absolute and relative URLs.
Link best practices, download attribute, email links.
Advanced Text Formating. Read this, will only skim in class. Topics covered
Description lists, Blockquotes, Inline quotations
Citations, Abbreviations, Address, Super/sub-script
Computer code markup, times and dates.
HTML Character Entities, escaping, Unicode and such
HTML Entities
Official Reference
Wikipedia on Unicode
Guide to using special characters in HTML
Fun! Try some unicode emoji
Foolproof HTML escaping in Javascript
Document and website structure. Topics include:
Basic sections of a web page. Structuring a page.
<main>, <article>, <section>, <aside>, <header>, <nav>, <footer>.
Non-semantic wrappers: <span>, <div>.
HTML Forms
Your first form. Basics of the <form> element, action, and submit button.
How to structure a form. How to use fieldsets, legends, labels, and such.
The native form widgets. Includes: all sorts of text input fields, select boxes, checkable items, buttons, and more.
Sending form data
Multimedia and Embedding
Images in HTML
Video and audio content.
Other embedding techniques. We’ll probably just mention this…
Adding vector graphics.
Responsive images
Custom data attributes. Defines the format of data-* attributes and how to use them from JavaScript and CSS.