HTML Advanced

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...

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!

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

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!!!!!

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:

Kicking Off HTML

So, I've started my HTML journey.
Mission: Achieve the HTML certification from W3Schools...Outlook: Eek!
Here are some catch phrases and vocabulary words I'm taking away from the first FIVE LESSONS of HTML Basics - www.w3schools.com:
* Hyper Text Markup Language: made up of markup tags and describes web pages (interprets the content of the page)
* HTML tags: keywords surrounded by angle brackets that come in pairs (start/opening tag, end/closing tag)
EXAMPLE (had to leave out the brackets because this blog's entry page is interpreting them...literally!):
html
body
h1 My First Heading /h1
p My first paragraph. /p
/body
/html

Text between html and /html describes the web page
Text between body and /body is the visible page content
Text between h1 and /h1 is the displayed heading
Text between p and /p is displayed as a paragraph

HEADINGS: represented by "h1" to "h6"
PARAGRAPHS: represented by "p"
LINKS: represented by "a"
IMAGES: represented by "img"

* You can save HTML files with either .htm or .html file extensions
* The content between the start and end tags is the HTML ELEMENT
- Some elements have empty content (empty elements are closed in the start tag)
- Most elements have ATTRIBUTES
- Most HTML elements can be nested (contain other HTML elements)
* Don't forget the end tag! Although most browsers will recognize it anyway...
* Lowercase isn't required for tags, but it is recommended, as future versions of HTML require it

Assignment 1 - Books in the Digital Age (PSPB 251)

In the reading from Week 1, Chapter 1 from Books in the Digital Age by John B. Thompson, the author describes these value-add activities of traditional (print-based) publishers:
1. Content acquisition and list building
2. Financial investment and risk-taking
3. Content development
4. Quality control
5. Management and coordination
6. Sales and marketing

QUESTION 1: Consider this list with respect to digital publishing.

a. What, if anything, is missing from this list?

My first instinct is to say one area that is missing from this list or that requires more attention when it comes to digital publishing would be Ethics.
There are a number of ethical questions that are raised with the availability and dissemination of information on the Internet, of which making books available online is one area that stirs this pot.

When it comes to Ethics and Quality control, it is key that copyright clearance and the protection of content is given even greater attention to protect the text against piracy. With the availability of so much on the Internet, it is important that steps are made to ensure the integrity of the book is maintained and digitally distributed correctly.

I’m not sure whether there is anything else missing, per se; I do however think that some of these value-add activities have a greater scope when it comes to digital publishing. Take Sales and marketing as an example. Traditional marketing, like newspaper and television advertising, is both extremely costly and difficult to measure.

With digital marketing, the opportunities to promote a book online are exponentially greater. They include strategies like:
* Email marketing
* Google Adwords campaigns and sponsored links (mirrored in other search engines, like Yahoo etc)
* Blogging
* Social networking (Facebook, Twitter, LinkedIn)
* Newsletter programs
* Search engine optimisation

Online promotion of digitally produced books gives the publisher the advantage of cost effective marketing that can be tracked, easily adjusted and both quantitatively and qualitatively measured. While these channels are being used at present to promote the traditional, printed book, a move to the digital environment for the product itself will mean that the balance of online and traditional marketing for the digital book will be significantly skewed towards the former.

b. Are there any activities that no longer apply?

Content acquisition and list building will always be a key component of book publishing/production, whether digitally produced or otherwise. So too is Quality control, although this function will comprise different or altered efforts (i.e. less focus on some links and the addition of new ones to the chain).

Conversely, I think Financial investment and risk-taking seems to be shaken by the onset of digital publishing.

There are two stages in the traditional publishing cycle that seem to require key financial decisions, which may fade away with the advent of the digital book. (1) According to Jim Thompson, setting initial prices and print-runs for a book is a definite financial risk. As there is no print run for digital books, this eliminates much of this concern. Dealing with back orders or feeling that the price is not quite right is no longer an issue – back orders don’t exist and prices can always be changed. (2) In addition, the decision to reprint has financial implications for the traditional publisher – but alas, digital publishing requires no printing and therefore eliminates this financial hazard.

Other financial risks that no longer concern the digital publisher: the length of the publishing cycle and the reliance on booksellers and wholesalers to bridge the gap between the publisher and the consumer.

When it comes to Management and coordination, roles and links in the traditional publishing chain are certainly limited as things move more digital. Tasks like typesetting, printing and binding, warehousing and distribution, wholesaling etc seem to no longer have a place in the age of digital books – as Jim Thompson puts it, the publisher may have to ‘disintermediate’ these functions as it becomes more and more clear that they are obsolete. Yet as it is still a business with quite a few steps and players involved in the production of the final product (whether that is pages on paper or pages on screen), management and coordination will always be required.

As mentioned with Sales and marketing, this function will also change as the industry moves more digital. When it comes to sales, the structure will no doubt change – selling via wholesalers and bookstores may be replaced with direct sales to the consumer online – whether via subscriptions, one-off online payments etc.

Content development doesn’t have a start and an end like it does in the traditional environment. The digital publishing world will (or I suppose does!) allow for the update of text, imagery, supporting elements etc with the click of a mouse. It makes it much more interactive – i.e. you could hover over a word you were not familiar with to find out the definition or click on a simple link to find out more about a particular subject.

The physical production and printing of a book in the traditional sense is a laborious, timely and costly process. By removing the need to print such books, these activities will all no doubt be affected.

QUESTION 2: With respect to the list of value-add activities for traditional print publishing, what areas are most affected by a transition to digital publishing? Can you rank or score the value-add areas by degree of impact from the transition to digital publishing?

As I alluded to previously, my gut feelings on these areas in relation to a transition to digital publishing are:

* Content acquisition and list building – fairly unaffected…although the literary agent’s rise in power may give him/her more control and cut out the need to depend on the publisher to help with this function.
* Financial investment and risk-taking – very affected.
* Content development – affected.
* Quality control – slightly affected.
* Management and coordination – fairly unaffected…when it comes to the idea of having every step of the way managed. The jobs itself, however, are certainly different (i.e. an IT manager to control distribution versus a warehouse manager tracking printing, binding etc.)
* Sales and marketing – affected…particularly when it comes to sales strategy and the makeup of the marketing mix.

Let’s say there is a ranking system based 0-5 with 0 being UNAFFECTED and 5 being EXTREMELY AFFECTED. My ratings would be:

* Content acquisition and list building: 1
* Financial investment and risk-taking: 5
* Content development: 3
* Quality control: 2
* Management and coordination: 2
* Sales and marketing: 3

QUESTION 3: Consider your responses above in light of different market segments. How would your ratings above change if you were focusing on each of the market segments below, in turn:
a. Trade publishing: This industry will probably have the hardest time adjusting…my inclination is that the rankings listed above would be the same for this sect.
b. Scholarly publishing: These publications have made the move to digital at a greater speed and ease…I therefore think the effects from here on out are less aggressive as with trade publishing.
* Content acquisition and list building: 1
* Financial investment and risk-taking: 3
* Content development: 2
* Quality control: 2
* Management and coordination: 1
* Sales and marketing: 1
c. Reference publishing: Encyclopedias, dictionaries, directories and the like are certainly facing a tough time when it comes to holding on to the age of tradition. I myself can’t remember the last time I used a physical phone book. Like scholarly publishing, they have already made strides in moving into the digital age.
* Content acquisition and list building: 1
* Financial investment and risk-taking: 2
* Content development: 2
* Quality control: 2
* Management and coordination: 1
* Sales and marketing: 1
d. Professional publishing AND e. Educational publishing: I’m inclined to say that these areas mirror each other...they both are still largely print-based, so it may be more like Trade than Reference or Scholarly publishing.
* Content acquisition and list building: 1
* Financial investment and risk-taking: 4
* Content development: 3
* Quality control: 2
* Management and coordination: 2
* Sales and marketing: 3