Note #2

 How does a structure of HTML document look like?  How do you align … A paragraph? A heading?  What is the main difference between one-sided and two-sided tags?

 List is setting up items one after another  Two types: Ordered – appear in sequential order Unordered – appear in no particular order

item1 item2  - opening tag for Ordered List  … - tag for listing of each item  - closing tag for Ordered List

item1 item2  - opening tag for Unordered List  - closing tag for Unordered List

 Lists that can be contained within another list  Can be a combination of several types of lists  Example: 1. Conceptual Chemistry  Introductory course  No algebra required 2. Chemistry 1  Introductory course  Algebra required 3. Advanced Chemistry  Advanced course  Requires A or B in Chemistry 1

Conceptual Chemistry Introductory course No algebra required Chemistry 1 Introductory course Algebra required Advanced Chemistry Advanced course Requires A or B in Chemistry 1  BE EXTRA CAREFUL OF OPENING AND CLOSING OF THE tag when doing Nested List

 Just like any other elements, a list element can be modified using style  Syntax: list-style-type:type  Types of list style type disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha none

Conceptual Chemistry Chemistry 1 Advanced Chemistry

 You can use images in place of the numbers and buttons  Considered as unordered list  Replace list-style-type with list-style-image: url(“filename.xxx”)

 Two-sided tags are usually block-level element  It is ‘on its own’  Examples of block-level elements: … …, … …  Some other block-level elements: …

 Elements within a block-level element  Used to do some changes within the block, e.g. formatting of text  Some inline elements mostly being used: …, … - to bold …, … - to italicise … (deprecated), … - underline … - “quoted text” … - subscripted text (e.g. n 2 ) … - superscripted text (e.g. n 2 )

 You can put in several inline elements but FILO (first-in last-out)  E.g. My name

 Other inline elements include … …, … …

 Logical elements are elements that do not necessarily appear on the display as some formatted text acts as descriptor to the nature of the element like, and  Physical elements are elements that force format change,,,, etc.

 Usually one-sided tag  Examples: image horizontal line

 Has one-sided tag  Syntax:  xxx could be bmp, jpg, gif, png  alt is an alternative text that appears if the graphic somehow cannot be downloaded  title will show the text you typed as a tooltip whenever the cursor is placed on the image  May also control the size of the image where yyy and zzz are in pixel

 To create a horizontal line across the page  Syntax:  Can set the line’s color using: color:color; or background-color:color;  color can either be the name of a color or an RGB color value  May change the size of the line width:value; height:value;  Value can be in percentage or in pixel

 Most keys on the keyboard can be typed directly to a HTML document  There are some characters which are not on the keyboard but need to be displayed ©,, & …  Syntax to create special character: &code; &name;

 ©  © or ©  ®  ® or ®  ‘space’    or  <  < or <  >  > or >  &  & or &  All special characters have a code to it, but not names. Only some special characters have names.