How to create ordered and unordered lists in HTML?
List-style-type properties:
ol { list-style-type: disc; }
‘disc’ may also be:
- none : No marker
- disc (default), circle, square
- Decimal: 1, 2, 3, etc.
- upper-roman: I, II, III, IV, V, etc.
- lower-alpha: a, b, c, d, e, etc.
How to comment in HTML & CSS
HTML < ! – … – >
CSS /* … */
What do the following HTML tags do
- < pre >
- < blockquote >
- < q >
- < code >
- < del >, < ins >
- < abbr >
- < dl >, < dt >, < dd >
- < pre > a large section of pre-formatted text (block)
- < blockquote > a lengthy quotation (block)
- < q > a short quotation (inline)
- < code > code font
- < del >, < ins > crossing-out, inserting; content that should be considered deleted or added to the document (inline)
- < abbr > an abbreviation, acronym, or slang term (inline)
- < dl >, < dt >, < dd > defintion lists;
how to represent unicode characters
using & followed by other characters
how to add a favicon
< link rel="shortcut icon" type="image/png" href="/favicon.png"/ >
Table Syntax
< table > starts and ends
< th > table header (centred, bold)
< tr > table row
< td > table data
How can the appearance of tables be modified
- gridlines
- borders < table border=“2” >
- background color
- cellspacing, cellpadding
- placement
- size (width, height)
examples of arguments of the < input > tag
- type: specifies type of an element (checkbox, button, …)
- name: the name of the element
- id: a unique identifier for the element
- value: the “value” of the element; used in different ways for different values of type
- readonly: the value cannot be changed
- disabled: the user can’t do anything with this element
What are form arguments + examples?
< form arguments > … < /form >
form arguments tell what to do with the user input
(arguments are attributes because name=”value”)
examples of < input > tag form elements
and what is a type argument in forms
- Most* form elements use the input tag, with a type=”…” argument to specify type of element
- < input type=”text” name=”textfield” value=”with an initial value” />
- buttons
- checkboxes
- radio buttons
- drop-down menus
textarea is an example with no input tag: < textarea name=“”>
What are form parameters?
The form’s parameters tell JavaScript how to send the information to the server (either via POST or GET)
What are the different types of buttons
and how do you code them?
What is the effect of radio buttons and how they work?
If two or more radio buttons have the same name, the user can only select one of them at a time (a radio button “group”).
If you ask for the value of that name, you will get the value specified for the selected radio button
Radio buttons do not contain text, as with checkboxes.
What is the role of labels in forms?
They extend the “control” of interacting with the form element over to the respective text.
What is the code for checkboxes?
What is the code structure of drop-down menus / lists?
What is the code structure of hidden fields + uses?
Benefits of validated and standardised HTML?
- more rigid and structured language
- more interoperable across different web browsers
- more correct display of content
- interchangable with other XML data
What is HTML(5)?
It is the fundamental markup language of the WWW.
Semantic markup: makes implied meaning explicit
- Better for Humans: (human readable; better accessibility support)
- Better for Machines: (better searching; better for accessibility technologies)
Separating form from content: (completely removes styling from tags)
Better support for multimedia (native browser support — no plugins needed)
HTML5 is backwards compatible with XHTML and one will not necessarily replace the other
< img > tag
if the img tag is wrapped around with a link, the the browser will open up that img fully.
What are semantic tags?
A semantic tag clearly describes its meaning to both the browser and developer. They define different parts of a webpage: < article >, < footer >
Examples of non-semantic elements: < div > and < span >. They tell nothing about its content.
< meta > tag code examples
define frameworks / libraries
a cohesive set of library codes that simplifies the computer language (accelerates development via shortcuts and best practices)
- Bootstrap (for HTML)
minimum HTML structure
