HTML and CSS Basic Tags Examples

This site doesn't have a lot of content, files or materials. We just point to other websites where these examples available.


HTML Basic Tags Examples
A very simple HTML document
How text inside paragraphs is displayed
More paragraphs
The use of line breaks
Poem problems (some problems with HTML formatting)
Heading tags
Center aligned heading
Insert a horizontal rule
Comments in the HTML source
Add a background color


HTML Formatting Text Examples
Text formattingPreformatted text (how to control line breaks and spaces)
Different computer-output tags
Insert an address
Abbreviations and acronyms
Text direction
Long and short quotations
How to mark deleted and inserted text


HTML Link Examples
How to create hyperlinks
Set an image as a link
Open a link in a new browser window
Jump to another part of a document (on the same page)
Break out of a frame
How to link to a mail message (will only work if you have mail installed)
A more complicated mail to link



HTML Frame Examples
How to create a vertical frameset with 3 different documents
How to create a horizontal frameset with 3 different documents
How to use the noframes tag
How to mix a frameset in rows and columns
Frameset with noresize="noresize"
How to create a navigation frame
Inline frame (a frame inside an HTML page)
Jump to a specified section within a frame
Jump to a specified section with frame navigation



HTML Table Examples
Simple tables
Different table borders
Table with no borders
Headings in a table
Empty cells
Table with a caption
Table cells that span more than one row/column
Tags inside a table
Cell padding (control the white space between cell content and the borders
Cell spacing (control the distance between cells)
Add a background color or a background image to a table
Add a background color or a background image to a table cell
Align the content in a table cell
The frame attribute
The frame and border attributes



HTML List Examples
An unordered list
An ordered list
Different types of ordered lists
Different types of unordered lists
Nested list
Nested list 2
Definition list



HTML Form and Input Examples
How to create input fields
Password fields
Checkboxes
Radiobuttons
Simple drop-down box (a selectable list)
Another drop-down box with a pre-selected value
Textarea (a multi-line text input field)
Create a button
Draw a border with a caption around data
Form with an input field and a submit button
Form with check boxes and a submit button
Form with radiobuttons and a submit button
Send e-mail from a form


HTML Image Examples
Insert images
Insert images from another folder or another server
Background image
Align an image within a text
Let the image float to the left/right of a paragraph
Adjust images to different sizes
Display an alternate text for an image (if the browser can't load images)
Make a hyperlink of an image
Create an image-map, with clickable regions
Turn an image into an image map



HTML Background Examples
Good background and text color
Bad background and text color
Good background image
Good background image 2
Bad background image



HTML Style Examples
Styles in the head section of an HTML document
Link that is not underlined
Link to an external style sheet



HTML Examples
Set a title of a document
One target for all links on a page

HTML meta Examples
Document description
Document keywords
Redirect a user to another URL


HTML Script Examples
Insert a script
Handle browsers that do not support scripts


CSS Background Examples
Set the background color
Set an image as the background
How to repeat a background image
How to repeat a background image only vertically
How to repeat a background image only horizontally
How to display a background image only one time
How to place the background image
How to position a background image using %
How to position a background image using pixels
A fixed background image (this image will not scroll with the rest of the page)
All the background properties in one declaration



Text
Set the color of the text
Set the background-color of the text
Specify the space between characters
Specify the space between lines
Align the text
Decorate the text
Indent text
Control the letters in a text
Set the text direction of an element
Increase the white space between words
Disable text wrapping inside an element


Font
Set the font of a text
Set a paragrap font using the "caption" value
Set the size of the font
Set the style of the font
Set the size of the font using font-size-adjust
Set the variant of the font
Set the boldness of the font
All the font properties in one declaration


Border
All the border properties in one declaration
Set different borders on each side
All the top border properties in one declaration
All the bottom border properties in one declaration
All the left border properties in one declaration
All the right border properties in one declaration
Set the style of the four borders
Set the style of the top border
Set the style of the bottom border
Set the style of the left border
Set the style of the right border
All the width border properties in one declaration
Set the width of the top border
Set the width of the bottom border
Set the width of the left border
Set the width of the right border
Set the color of the four borders
Set the color of the top border
Set the color of the bottom border
Set the color of the left border
Set the color of the right border



Outline
Draw a line around an element, outside the border edge (outline) (Does not work in IE)
Set the style of an outline (Does not work in IE)
Set the color of an outline (Does not work in IE)
Set the width of an outline (Does not work in IE)

Outline properties explained


Margin
All the margin properties in one declaration
Set the top margin of a text using a cm value
Set the top margin of a text using a percent value
Set the bottom margin of a text using a cm value
Set the bottom margin of a text using a percent value
Set the left margin of a text using a cm value
Set the left margin of a text using a percent value
Set the right margin of a text using a cm value
Set the right margin of a text using a percent value



Padding
Set the left padding of a tablecell
Set the right padding of a tablecell
Set the top padding of a tablecell
Set the bottom padding of a tablecell
All the padding properties in one declaration


List
The different list-item markers in unordered lists
The different list-item markers in ordered lists
All the list style typesSet an image as the list-item marker
Place the list-item marker
All list properties in one declaration



Table
Set the layout of a table
Show empty cells in a table
Collapse a table border
Set the space between table borders
Set the position of the table caption



Dimension
Set the height of an image using a pixel value
Set the height of an image using percent
Set the width of an element using a pixel value
Set the width of an element using percent
Set the maximum height of an element
Set the maximum width of an element using a pixel value
Set the maximum width of an element using percent
Set the minimum height of an element
Set the minimum width of an element using a pixel value
Set the minimum width of an element using percent
Specify the space between lines using a percent value
Specify the space between lines using a pixel value
Specify the space between lines using a number value


Classification
How to display an element as an inline element
How to display an element as a block element
A simple use of the float property
An image with border and margins that floats to the right in a paragraph
An image with a caption that floats to the right
Let the first letter of a paragraph float to the left
Creating a horizontal menu
Creating a homepage without tables
Position an element relative to its normal position
Position an element with an absolute value
Position an element relative to the browser window
How to make an element invisible
How to make a table element collapse
Change the cursor
Clear the sides of an element



Positioning
Position an element relative to its normal position
Position an element with an absolute value
Set the shape of an element
How to show overflow in an element using scroll
How to hide overflow in an element
How to show set the browser to automatically handle overflow
Vertical alignment of an image
Place an element "behind" another element
Place an element "behind" another element 2
Set the top edge of an image using a pixel value
Set the top edge of an image using a percent value
Set the bottom edge of an image using a pixel value
Set the bottom edge of an image using a percent value
Set the left edge of an image using a pixel value
Set the left edge of an image using a percent value
Set the right edge of an image using a pixel value
Set the right edge of an image using a percent value


Generated Content
Changes the quotation marks on a page


Pseudo-classes
Add different colors to a hyperlink
Add other styles to hyperlinksHyperlink: use of :focus (does not work in IE)
:first-child (does not work in IE)
:lang (does not work in IE)



Pseudo-elements
Make the first letter special in a text
Make the first line special in a text
Make the first letter and first line special
Use :before to insert some content before an element (Does not work in IE)
Use :after to insert some content after an element (Does not work in IE)

Read more...

Here is an update on distributions to Members

Source : AGLOCO Official Blog

Since AGLOCO started its Viewbar in June, we have been working to deliver an early money distribution plan that will be work for both Members and AGLOCO at this time. It was decided to start with the AGLOCO Monthly Residual Payments. These are small monthly payments which will be made for hours earned each month and paid monthly for 10 years. The following rates have been set (amounts are expressed in US currency):

• June $0.48 per hour - ($0.0040 per month for 120 months)
• July $0.42 per hour - ($0.0035 per month for 120 months)
• August $0.54 per hour - ($0.0045 per month for 120 months)

AGLOCO Monthly Residual Payments become payable when declared such by AGLOCO. We are working to add the accounting feature to the account page to show this to each Member, but that will not be available until after all the Ask.com features have been integrated.

In addition to the AGLOCO Monthly Residual Payments hours may become eligible for Bonus Payments. If AGLOCO exceeds expectations and builds funds in excess of reserves needed it may be possible to make AGLOCO Bonus Payments. We do not expect this to happen anytime in the near future. The details on the Bonus Payments and the Monthly Residual payments will be placed on the account page along with the accounting display.

1. How is AGLOCO doing financially?

As you know AGLOCO launched stating it would make Member distributions when it was profitable. On this blog we said we would update you on the company results at the end of the summer. During the last three months, June, July and August, AGLOCO lost slightly more than $100,000. (As you are aware the Development team is still working for free. And also, the Development team and some of their friends are the source of the $100,000 so that AGLOCO can pay its bills.) The AGLOCO losses are getting smaller each month and at this point, we anticipate the September loss will be $10,000 to $15,000.

2. Will checks for the AGLOCO Monthly Residual Payments go out in October?

We would love to say definitely yes, but we can’t. So we will say Yes IF. The IF for the most part is how successful our Ask.com partnership is in generating revenue. As with most things in AGLOCO, it will really depend on the Members. It is Member use of the Ask.com search function that will answer the question of distributions in October.

While Ask.com will also become the dominant supplier of our US and Canada ads, we believe that as a global company AGLOCO currently will get the most revenue from the Ask.com search ads.

3. How will I get my money?

First AGLOCO puts money into your account at AGLOCO which you will be able to see on your account page. At present, Members may ask that a check be sent to them. AGLOCO will set up a couple of online payment systems like PayPal and will also set up an ACH system. If there is a cost to make the transfer, the Member will pay it – so that other Members do not have to bear that expense. A minimum for transferring money out will be set.

Since the account pages will not have the financial data available on them for several weeks, we will contact any Member who has earned over $100 to ask if they want a check now. (There are a number of you who get in this group very quickly).

4. Will I be able to sell my hours to other Members?

A number of requests have come from Members wanting to buy or sell hours. Currently AGLOCO does not allow the transfer of hours. AGLOCO is planning to change this and allow for Members to transfer hours. To do so it will be necessary for AGLOCO to suspend any consideration of exchanging hours for AGLOCO shares, otherwise trading hours would not be possible in some countries and would be too difficult (and expensive) for AGLOCO to regulate. We would like Member feedback on this issue prior to implementing it, so please make comments on this post.

AGLOCO will have to add the technical ability to transfer hours to each Member’s account database before the ability to sell will be possible. AGLOCO will probably limit transfers to at least 100 or more hours per transfer so that tracking this does not become a burden. If there is any cost to this, it will be borne by the Member doing the transfer so that all Members do not bear this cost.

5. How much will I be able to sell my hours for?

We anticipate that some Members will set up private exchanges or Members may use existing auction sites like eBay (assuming rules and escrows are met.) Therefore the price of hours will depend on the open market. And thus, the price is liable to fluctuate.

We know this is a lot of information in a small space, please ask any questions you have on this post and we will try to answer them

Thanks for all of your efforts for AGLOCO.

The AGLOCO Development Team

AGLOCO Official said,
September 28, 2007 @ 11:17 pm · Edit

Quick note on questions – The Monthly Residual Payment plan is our current plan - Depending how it works out we might shorten the time period. Also, we might add a current month bonus payment to increase the cash for the current hours. We feel that AGLOCO should continue to be flexible so that it can respond to changes that will happen over time.

We looked at many other alternatives (including several that Members have suggested in their comments). AGLOCO’s goal is to be a sustainable business. We felt this plan would reward the early users and yet still be sustainable. Suggestions like ‘borrow now’ were not pursued as we did not think them sustainable nor feasible.

While the Development team has continued to work for free, the Tech Team in Shanghai and Member Services Team in the Philippines are paid as well as the cost for servers, bandwidth maintenance etc. These are our main expenses at this point.

In order to be successful we will need for our Ask.com partnership to be successful as well. You are right to point out that at this time 100% of AGLOCO’s revenue is through advertising. And the most profitable advertising is search advertising. So using the Viewbar Ask search is the best thing Members can do for AGLOCO. Like all search advertising whether it is Google, Yahoo, MSN or Ask, search advertising is performance based. (Either on clicks or on sales.) And most advertisers measure real results (meaning sales). That is why it is against AGLOCO rules to do excessive clicking. It would eventually make AGLOCO a poor advertising location and AGLOCO would loose all its advertisers.

Read more...

Update for Agloco Distibution Post

Member distributions – We will be doing a Member distribution post within the next two weeks with an update of this crucial issue. It will also include an update of the AGLOCO financial position. AGLOCO crossed over the 1,000,000 Member mark a couple of months ago. And while not the 10,000,000 surge we had set as our summer goal, it is still a fine achievement that you all have made happen. If you missed the previous post on distributions, you can read it at Member distributions

Thanks for all of your efforts for AGLOCO.

The AGLOCO Development Team

The above was posted last September 11, 2007 at the Agloco Official Blog just while ago the AGLOCO DEVELOPMENT TEAM posted an update announcing that they will be going to make distribution post very soon.

Update - September 24, 7:55 pm

Quick note – we will be doing the distribution post very soon. I had hoped to have it done by the 25th, but in order to give exact distribution amounts for June, July and August hours we needed a couple more days to analyze the hourly data. Hopefully, exact distribution amounts will be worth waiting a couple of extra days for.

This means that the exact amount of our Agloco hours will be analyze and computed to come out
with an exact cash amount. For us to know how much we really gonna earn from using the agloco viewbar since June.

So, guys have a little patients as what we always done before because I believe it worth waiting for. Good Luck to us all! May the Agloco Cash will be upon us SOON!

Read more...