| Tag | Explanation | Attribute | Options |
| <H1>, <H2>, <H3> ... <H6> | Heading Tags |
|
|
| <P> | Start a new paragraph | | |
| <BR> | Single line break | | |
| <B> | Bold text | | |
| <I> | Italics | | |
| <OL> | Ordered List | TYPE | A (Capitals)
a (Lowercase)
I (Capital Roman Numerals)
i (Lowercase Roman Numerals)
1 (Numbers) |
| <UL> | Unordered List | TYPE | Circle, Disc, Square |
| <LI> | An item for your list | | |
CSS Font and Text Properties
| CSS Property | Example Value | Other Values |
| text-align: | center | Left, Right |
| font-family: | Verdana, Arial, Helvetica, Sans-Serif | |
| font-size: | 16px | |percent |em |xx-large, x-small, small, medium, large, x-large, smaller, larger |
| font-style: | italic | normal (the default), oblique |
| font-variant: | small-caps | |
| font-weight: | Bold | Bolder | Lighter | Any number from 100 to 900 |
| Color: | Red | A colour name, Hexadecimal value, RGB Value |
CSS borders, backgrounds, margins, padding
| CSS Property | CSS Value |
| border-style | dotted, dashed, solid, double, groove, ridge, inset |
| border-width | A pixel value like 2px |
| border-color | A colour value |
| background-color | A colour value |
| background-image | url('my_image_name.gif'); |
| background-repeat | repeat, repeat-x, repeat-y, no-repeat |
| background-position | top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right |
| clear | left, right , both , none |
| float | right, left , none |
| margin | A pixel value like 5px |
| margin-left | A pixel value like 5px |
| margin-right | A pixel value like 5px |
| margin-top | A pixel value like 5px |
| margin-bottom | A pixel value like 5px |
| padding | A pixel value like 5px |
CSS used in the Positioning section
| CSS Property | CSS Value | Explanation |
| /* */ | A colour | CSS comment - more than one line |
| // | A colour | CSS comment - one line |
| position: | relative, absolute, fixed | Types of positioning |
| top | A pixel value | Position an element on the page |
| bottom | A pixel value | Position an element on the page |
| left | A pixel value | Position an element on the page |
| right | A pixel value | Position an element on the page |
| z-index | A numerical value | Used to stack elements one behind the other |
| float | left, right | Float an element left or right |
| clear | left, right, both | Clear a floated element |
Images and DIVs
| HTML Tag | Attributes |
| IMG | SRC, ALT, HEIGHT, WIDTH, USEMAP |
| DIV | |
| FIGURE | |
| FIGCAPTION | |
Hyperlinks
| HTML | Explanation | Attributes | Options |
| A HREF | The HTML for a hyperlink | TARGET | _blank _parent _self _top |
| | | Mailto: | An email address |
| A ID | Jump to a section of your page, a bookmark | | |
HTML5 Layout Tags
| HTML5 Tag | Comments |
| HEADER | Used for the heading of any section |
| NAV | Used for a navigation area |
| SECTION | Used for a section of your web page |
| ARTICLE | Used for an article in a section of your web page |
| FOOTER | Used for the footer area |
| HTML and HTML5 Table tags | Explanation |
| TABLE | Create a table |
| TR | Create a row in a table |
| TD | Create a cell in a table |
| THEAD | HTML5 Table header |
| TFOOT | HTML5 Table footer |
| TBODY | HTML5 Table body |
| TABLE Attributes | Options |
| Align | Left, Right, Center |
| Valign | Top, Middle, Bottom |
| Background | The location of an image |
| Border | A number for the border width |
| Bgcolor | A background colour for the table |
| Cellpadding | A number that sets the space inside a table cell |
| Cellspacing | A number that sets the space between table cells |
| Height | The height of a table or cell |
| Colspan | The number of columns you want to span |
| Rowspan | The number of rows you want to span |
| Width | The width of a table or cell |
| Main Form Tags | Comments |
| Form | Create a HTML form |
| Name | Add a name for your form |
| Method | Select a method, GET or POST |
| Action | Say where the form should be sent |
| Input | Create a HTML form element |
| Type | Select a type of form element |
| Label | Add a label for a form element |
| Value | A value for your form elements |
| Input Types | Comments |
| Button | Create a clickable button |
| Checkbox | Create a checkbox |
| Hidden | Create a hidden form element |
| Image | Specify an image to be used as a button |
| Password | Set up a password box |
| Radio | Create a radio/option button |
| Reset | Create a reset button |
| Submit | Create a submit button for your forms |
| Text | Create a text box |
HTML5 Form Elements and Attributes
| HTML5 Form Elements | Comments and Options |
| Placeholder | Placeholder text |
| Required | Require an element to be filled in |
| Email | Email text box |
| URL | URL text box |
| Number | Number spinners |
| Range | Sliders with a range of numbers |
| Date/Time | Date and time textbox or calendar |
| Search | A search box |
| Color | Colour picker |
| Datalist | Used with datalists are LIST, OPTION, VALUE, LABEL |
| HTML5 Video Tags | Comments |
| VIDEO | The main tag to add a video |
| SOURCE | Add a source attribute |
| SRC | Specify where the video is |
| TYPE | Add codex values |
| HTML 5 Audio Tags | Comments |
| AUDIO | The main tag to add audio |
| SOURCE | Add a source attribute |
| SRC | Specify where the video is |
| TYPE | The main tag to add audio |
HTML5 Options for the Audio Tag
| Audio Attributes | Values |
| AUTOPLAY | true or false |
| LOOP | true or false |
| CONTROLS | true or false |
| PRELOAD | none, auto, metadata |
| Character | HTML Entity | ISO Latin-1 | Comments |
| " | " | " | Double quotation mark |
| ' | | ' | Single quote or apostrophe |
| & | & | & | Ampersand |
| ÷ | ÷ | ÷ | Divide symbol |
| > | > | > | greater than |
| < | < | < | less than |
| Space | |   | Create a non-breaking space. Equates to a single tap on the keyboard spacebar |
| £ | £ | £ | British Pound Sterling |
| € | € | € | Euro |
0 comments:
Post a Comment