HTML Lessons (Basics): 11-15

These took quite awhile to sink in...they still haven't completely, but they are a bit more complicated (at least for me - not so quick on the coding!)

(11) We start with LINKS...
* They are specified using the "a" tag - either (1) to link to another website (href attribute) or (2) to create a bookmark inside a document (name attribute)
* Let's say * means < or > ...
The code for a link would be: *a href="url"*Link text*/a*
* Interesting Fact! The "Link text" doesn't have to be text...it could be an image or other HTML element
* Always add a trailing slash to the end of a URL in a link attribute
* the target attribute signals where the link will open up - target="_blank" will open it in a new browser
* The name attribute is an anchor (name attributes often used for tables of content to link to different sections)

(12) IMAGES...
* They are displayed using the *img* tag - it is empty, only contains attributes and has no closing tag
* need to use the src attribute, which means source - the value is the URL of the location for the image (*img src="url" alt="some_text"/*)
* The alt attribute specifies an alternate text for an image if it can't be displayed - the value is an author-defined text: *img src="photo.gif" alt="photo name" /*
* The chapter walks you through (1) aligning text (i.e. *p*An image
*img src="smiley.gif" alt="Smiley face" align="bottom" width="32" height="32" /*
with align="bottom".*/p*) (2) making an image float (like the previous but the align direction is "left" or "right") (3) making an image the hyperlink (*p*Create a link of an image: *a href="default.asp"* *img src="smiley.gif" alt="HTML tutorial" width="32" height="32" /* */a**/p*) and (4) how to create an image-map (SUPER COMPLICATED!)
HTML Image Tags are: *img/*, *map* (image-map) and *area /* (clickable area inside image-map)

(13) Then TABLES...
* They are defined by the *table* tag (shocking...I know)
* Rows are delineated with the *tr* tag
* Each row is divided into cells via the *td* tag (they can contain texts, links, images, lists, forms, other tables etc)
* When it comes to the border attribute, you need to specify it - otherwise, it will show up without any borders at all...border is specified like this: *table border="1"* / */table*
* To create a header, you simply add in the *th* tag (the text will then show up bold and centered)
* A caption for the table is specified by *caption* / */caption*
* When the column has two cells, you write it like this: *th colspan="2"*Text*/th*
* When the cell goes over two rows, you write it like this: *th rowspan="2"*Telephone:*/th*
* If you want more space in your cells, you just add "cellpadding=a number" inside the table border element...and for more space in between the cells, you add "cellspacing=a number"
* There are a bunch of different table frames...you note this by *table frame=value* before the first *tr*
- - different table frames are: "border", "box", "void", "above", "below", "hsides", "vsides", "lhs" and "rhs"
* So RECAP: tables contain tr, th and td elements...more complex tables may also include caption, col, colgroup, thead, tfoot and tbdoy elements

(14) LISTS...
* There are (1) ordered lists (that have numbers and (2) unordered lists (that have bullet points)
* An Unordered List: *ul* ... and then for each element in the list *li* */li* (items are marked with a bullet point)
* An Ordered List: *ol* ... and then for each element in the list *li* */li*
* Definition List: *dl* - *dt* (defines the item in the list) and *dd* (describes the item in the list)
* You can put all kinds of stuff inside a list item: images, other lists, links etc.

(15) FORMS...
So...lists weren't too bad. I thought we were on the "up". Then FORMS came into my HTML life. Not so good. These guys are TRICKY and SUPER intricate.
* These guys are used to pass dad to a servers - and contain all sorts of input elements
* *form* tag delineates a form
* The input element is used to select user info...here are the most used input types:
- Text Fields: *input type="text" /* defines a one-line input field that a user can enter text into
- Password Fields: *input type="password" /* defines a password field
- Radio Buttons: *input type="radio" /* defines a radio button - they let the user select ONLY ONE one of a limited number of choices
- Checkboxes: *input type="checkbox" /* defines a checkbox, which let the user select ONE or MORE options of a limited number of choices.
- Submit Button: *input type="submit" /* defines a submit button...data is sent to the page specified in the form's action attribute ... This one has all kinds of elements etc - very tricky.
- Drop-down menu: *select*
- Textarea (where you have a box you can enter unlimited amount of text): *textarea*
...There are a bunch of other examples I'm afraid will be difficult to remember, but we'll give it a shot!
Here are HTML Form Tags
Tag Description
*form* Defines an HTML form for user input
*input /* Defines an input control
*textarea* Defines a multi-line text input control
*label* Defines a label for an input element
*fieldset* Defines a border around elements in a form
*legend* Defines a caption for a fieldset element
*select* Defines a select list (drop-down list)
*optgroup* Defines a group of related options in a select list
*option* Defines an option in a select list
*button* Defines a push button

PHEW!!!!!