Here's the info I've picked up from the "Advanced" section so far...
* HTML pages should be validated
* To validate, you have to add a docotype declaration (which is not an HTML tag)
* The docotype declaration refers to a DTD (Document Type Definition) - it should be the first thing in the HTML document...even before the *HTML* tag
* How to use styles, and the ways in which to insert a style sheet, are done via the CSS
...the CSS is a whole new kettle of fish!
* The advanced section then touches upon the HTML heads, meta information, scripts, entities, URLs, URL encoding, and finally, the webserver.
I feel like I have Lessons 1-12 in the bag...no problem. It was once we started working on Tables that I started feeling a bit frazzled.
So I'm going to continue working on HTML - I've got a few books...here are the ones I picked up and have been referencing throughout my w3schools.com study:
1. HTML, XHTML, and CSS: Your visual blueprint for designing effective Web pages by Rob Huddleston (there is a companion website for the book as well - www.html2008vb)
2. Introducing HTML5 by Bruce Lawson and Remy Sharp
I'm going to stick with it. I know it's all about XML these days, but before I climb that mountain, I think I need to tackle the HTML hill first.
I'll keep you posted...
Friday, November 19, 2010
Thursday, November 18, 2010
HTML Lessons (Basics): 16-20
The LAST five sections!
(16) Frames...
* Frames are interesting...it's all about displaying more than one HTML document in the same browser window
* The frameset element holds two or more frame elements ... and each one holds a separate document ... the frameset element states only how many columns or rows in the frameset
* The *frame* tag defines the particular window in the frameset
* Here's how a frameset with two columns would look like (remember we have to replace the bracket with *)
*frameset cols="25%,75%"*
*frame src="frame_a.htm" /*
*frame src="frame_b.htm" /*
*/frameset*
The frameset can also be set in pixels, and if you set the percentage for the first column, you can just put an * for the second
* Frames with visible borders...if you don't want the user to be able to resize or drag it, add noresize="noresize" to the *frame* tag
* IMPORTANT! You can't use the *body**/body* tags with the *frameset**/frameset* tags
* *iframe* defines an inline sub window (frame)
(17) Colors...
* Colors are all a combo of RED, GREEN and BLUE values (RGB)
* The lowers light source is 0 (HEX: 00)...the highest is 255 (HEX: FF)
* HEX values are specified as 3 pairs of 2-digit numbers - oh, and they start with a # sign
* These combos create more than 16 million different colors (256 x 256 x 256)
* Gray colors are made when you write the same power for all three light sources (i.e. 13 13 13)
(18) Colornames...
* There are 147 color names (17 standard and 130 extra)
* The 17 standard colors, according to www.w3schools.com, are: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow.
I sure hope I don't need to know these by heart to execute HTML.
(19) Colorvalues...
* This chapter lists the 147 colors by name...again, hoping I don't need to memorize this list!
(20) THE Quick List...
This is a great "cheat sheet" that covers the main points of the 19 previous chapters!
(16) Frames...
* Frames are interesting...it's all about displaying more than one HTML document in the same browser window
* The frameset element holds two or more frame elements ... and each one holds a separate document ... the frameset element states only how many columns or rows in the frameset
* The *frame* tag defines the particular window in the frameset
* Here's how a frameset with two columns would look like (remember we have to replace the bracket with *)
*frameset cols="25%,75%"*
*frame src="frame_a.htm" /*
*frame src="frame_b.htm" /*
*/frameset*
The frameset can also be set in pixels, and if you set the percentage for the first column, you can just put an * for the second
* Frames with visible borders...if you don't want the user to be able to resize or drag it, add noresize="noresize" to the *frame* tag
* IMPORTANT! You can't use the *body**/body* tags with the *frameset**/frameset* tags
* *iframe* defines an inline sub window (frame)
(17) Colors...
* Colors are all a combo of RED, GREEN and BLUE values (RGB)
* The lowers light source is 0 (HEX: 00)...the highest is 255 (HEX: FF)
* HEX values are specified as 3 pairs of 2-digit numbers - oh, and they start with a # sign
* These combos create more than 16 million different colors (256 x 256 x 256)
* Gray colors are made when you write the same power for all three light sources (i.e. 13 13 13)
(18) Colornames...
* There are 147 color names (17 standard and 130 extra)
* The 17 standard colors, according to www.w3schools.com, are: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow.
I sure hope I don't need to know these by heart to execute HTML.
(19) Colorvalues...
* This chapter lists the 147 colors by name...again, hoping I don't need to memorize this list!
(20) THE Quick List...
This is a great "cheat sheet" that covers the main points of the 19 previous chapters!
Tuesday, November 16, 2010
I passed the HTML Quiz!
I decided to take a break from studying to test myself so far on HTML. I took the W3Schools.com Quiz - and got a 95%! Just one wrong!
This blog is not letting me upload an image...so I'm going to try to add the screen capture of the results page...wait for it...drum roll...using HTML! Woohoo!
My Quiz Results
This blog is not letting me upload an image...so I'm going to try to add the screen capture of the results page...wait for it...drum roll...using HTML! Woohoo!
My Quiz Results
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!!!!!
(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!!!!!
Wednesday, November 3, 2010
HTML Lessons (Basic) 6-10
(6) Next on the agenda are HTML ATTRIBUTES.
- These guys provide additional info about ELEMENTS.
- They are always specified in the START TAG - and they should always be enclosed in quotes (" ") ... when attribute value itself contains quotes, the attribute should be single quotes.
- They come in name/value pairs: name="value"
* HTML links are defined with the "a" tag, and the address is specified in the "href" attribute.
- They should be written in lowercase.
* They offer a complete list of legal attributes - which is not short! - and the top four standard attributes:
class (classname): specifies classname
id (id): specifies unique id
style (style_definition): specifies inline style
title (tooltip_text): specifies extra info about an element
(7) Then we have HEADINGS...
* headings are delineated from 'h1' (largest heading) to 'h6' (smallest leading) tags
* Interesting Fact! Browsers automatically add an extra line before and after a heading
* Browsers use headings to index the structure and content of a page
* The "hr /" element creates a horizontal line - it can be used to separate content
* An HTML comment can be inserted in your HTML to make it more readable...it doesn't show up in the browser. It looks like this: "!-- This is a comment --"
(8) And PARAGRAPHS...
* These guys are denoted as the "p" and "/p" tag
* The "br /" tag denotes a line break within a paragraph
* Interesting Fact! Putting spaces and lines in yourself will not stick in HTML...just by using the space bar or return key won't cut it when it loads in a browser
(9) Then there is FORMATTING...
* This chapter outlines the basic formatting tags
* Interesting Fact! "em" and "strong" means you want that section to be IMPORTANT, but it often comes up as italic and bold respectively...important to know that they may sometimes show up as even different, like cursive (in other words, they aren't synonymous with italic and bold
* "pre" means preformated text - it preserves line breaks and spaces...
* Computer output tags include: (1) "code" = Computer Code (2) "kbd" = Keyboard Input (3) "tt" = Teletype Text (4) "samp" = Sample Text (5) "var" = Computer Variable
* "address" notes the contact information of the owner of the HTML document
* "abbr= "..."" (abbreviation) and "acronym= "..."" (acronym) symbols are used to show the spelled-out version when the mouse is held over the abbreviation or acronym
* "bdo dir="rtl"" shows the direction of the text to be "right to left"
* Quotations... (1) "blockquote" - these are used for long quotations and add margins and spaces (2) "q" - these are used for short quotations and automatically add quote marks
* Deleted text - "del" (which puts a strikethrough the text) / inserted text - "ins" (which underlines the inserted text)
*** The chapter then runs through the basic formatting tags
(10) Finally STYLES...
* Here are some style examples...within the tag, you add style="STYLE TAG" ...
(1) background-colour: (2) font-family: (3) font-size: (4) color: (5) text-align:
- These guys provide additional info about ELEMENTS.
- They are always specified in the START TAG - and they should always be enclosed in quotes (" ") ... when attribute value itself contains quotes, the attribute should be single quotes.
- They come in name/value pairs: name="value"
* HTML links are defined with the "a" tag, and the address is specified in the "href" attribute.
- They should be written in lowercase.
* They offer a complete list of legal attributes - which is not short! - and the top four standard attributes:
class (classname): specifies classname
id (id): specifies unique id
style (style_definition): specifies inline style
title (tooltip_text): specifies extra info about an element
(7) Then we have HEADINGS...
* headings are delineated from 'h1' (largest heading) to 'h6' (smallest leading) tags
* Interesting Fact! Browsers automatically add an extra line before and after a heading
* Browsers use headings to index the structure and content of a page
* The "hr /" element creates a horizontal line - it can be used to separate content
* An HTML comment can be inserted in your HTML to make it more readable...it doesn't show up in the browser. It looks like this: "!-- This is a comment --"
(8) And PARAGRAPHS...
* These guys are denoted as the "p" and "/p" tag
* The "br /" tag denotes a line break within a paragraph
* Interesting Fact! Putting spaces and lines in yourself will not stick in HTML...just by using the space bar or return key won't cut it when it loads in a browser
(9) Then there is FORMATTING...
* This chapter outlines the basic formatting tags
* Interesting Fact! "em" and "strong" means you want that section to be IMPORTANT, but it often comes up as italic and bold respectively...important to know that they may sometimes show up as even different, like cursive (in other words, they aren't synonymous with italic and bold
* "pre" means preformated text - it preserves line breaks and spaces...
* Computer output tags include: (1) "code" = Computer Code (2) "kbd" = Keyboard Input (3) "tt" = Teletype Text (4) "samp" = Sample Text (5) "var" = Computer Variable
* "address" notes the contact information of the owner of the HTML document
* "abbr= "..."" (abbreviation) and "acronym= "..."" (acronym) symbols are used to show the spelled-out version when the mouse is held over the abbreviation or acronym
* "bdo dir="rtl"" shows the direction of the text to be "right to left"
* Quotations... (1) "blockquote" - these are used for long quotations and add margins and spaces (2) "q" - these are used for short quotations and automatically add quote marks
* Deleted text - "del" (which puts a strikethrough the text) / inserted text - "ins" (which underlines the inserted text)
*** The chapter then runs through the basic formatting tags
(10) Finally STYLES...
* Here are some style examples...within the tag, you add style="STYLE TAG" ...
(1) background-colour: (2) font-family: (3) font-size: (4) color: (5) text-align:
Subscribe to:
Posts (Atom)
