User:Chela5808/HTML and CSS Lab

= HTML tags =

I HTML   tag, it's so powerfull.  tag  defines a division or a section. It's often used to group block-elements to format them with styles. Browsers usually place a line break before and after the div element.

Example 1
Code:  Any text comes here Output:  Any text comes here

Example 2
Code:  Any text comes here Output:  Any text comes here

My second favorite is  tag.

= HTML Core Attributes =


 * style
 * class
 * id
 * title

= CSS2 Properties = Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.

CSS can be used to define colors, fonts, layout, and other aspects of document presentation. The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css

See W3C definition for Cascading Style Sheets (CSS) here

Font Properties
See W3C font properties here.

font-family
See W3C font-family specification here.

Text in Courier Text in San-serif Text in Cursive Text in Fantasy Text in Monospace

Text in Courier Text in San-serif Text in Cursive Text in Fantasy Text in Monospace

text-align
Open Education Resources (OER) is becoming much more pervasive in tertiary education. Developing content which can be shared within one institution, or across continents represents a powerful paradigm shift in the distribution methods of learning content and courseware from traditional publishing models to those which are open and collaborative in nature. Major initiatives from leading institutions to provide open courseware further support the growth of this segment of online learning. WE extend an open invitation to all educators around the world to join us on WikiEducator to receive a free basic Wiki editing skills online training in exchange for one Open Education Resource (free lesson plan, student guide, teacher handout or other lesson) developed on the Wiki.

Open Education Resources (OER) is becoming much more pervasive in tertiary education. Developing content which can be shared within one institution, or across continents represents a powerful paradigm shift in the distribution methods of learning content and courseware from traditional publishing models to those which are open and collaborative in nature. Major initiatives from leading institutions to provide open courseware further support the growth of this segment of online learning. WE extend an open invitation to all educators around the world to join us on WikiEducator to receive a free basic Wiki editing skills online training in exchange for one Open Education Resource (free lesson plan, student guide, teacher handout or other lesson) developed on the Wiki.

font-style
See W3C font-style specification here.

This is a normal text This is an italic text This is an oblique text This is a normal text This is an italic text This is an oblique text

font-variant
See W3C font-variant specification here.

font-weight
See W3C font-weight specification here.

font-stretch
See W3C font-stretch specification here.

font-size
See W3C font-size specification here.

Using
This is a 20pt text This is a 20pt text

Using
<font style="font-size: 20pt;">This is a 20pt text <font style="font-size: 20pt;">This is a 20pt text

Using
This is a 20pt text This is a 20pt text

Using
This is a 20pt text This is a 20pt text

border-style

 * none
 * hidden
 * dotted
 * dashed
 * solid
 * double
 * groove
 * ridge
 * inset
 * outset
 * inherit

= Playing around with my monobook.css = Any user can create a huge number of additional & useful CSS classes in WikiEducator (actually in any mediawiki platform), it depends on personal requirements. Code is stored in each User's CSS page. Mine is User:Chela5808/monobook.css. Once a class is published, it can be shared with everyone. This feature saves time and resources because the "style" is defined once and is used n number of times.

Jim Tittsler: You can get them from the source of any page. and for printing: and if you are using IE: BTW, I use   on box above (two classes applied to one HTML object). Click on User:Chela5808/monobook.css if you want to know what I mean.
 * http://WikiEducator.org/skins/common/shared.css
 * http://WikiEducator.org/skins/monobook/main.css
 * http://WikiEducator.org/index.php?title=MediaWiki:Common.css
 * http://WikiEducator.org/index.php?title=MediaWiki:Monobook.css
 * http://WikiEducator.org/index.php?title=-
 * http://WikiEducator.org/index.php?title=User:JimTittsler/monobook.css
 * http://WikiEducator.org/index.php?title=User:Kruhly/monobook.css
 * http://WikiEducator.org/skins/common/commonPrint.css
 * http://WikiEducator.org/index.php?title=MediaWiki:Print.css
 * http://WikiEducator.org/skins/monobook/IE50Fixes.css
 * http://WikiEducator.org/skins/monobook/IE55Fixes.css
 * http://WikiEducator.org/skins/monobook/IE60Fixes.css
 * http://WikiEducator.org/skins/monobook/IE70Fixes.css

=Testing class=TOCright= Code is stored in User:Chela5808/monobook.css.

Applying to the Table of Contents
   makes TOC float to the right side, creates a 4-sides margin of 15px and a fixed width = 200px. Scroll up to the top of this page, then see how the TOC is displayed. Switch to edit for taking a look at the code.

Using
<p class="TOCright"> <p class="TOCright"> You can also use this class on a pharagraph. I makes text float to the right, have a 15px margin and a 200px width

<br style="clear:both"> Use code  <br style="clear:both">  to place this text one row after previous floating box.

Using
<font class="TOCright"> <font class="TOCright"> You can also use this class on a pharagraph. I makes text float to the right, have a 15px margin and a 200px width

<br style="clear:both"> Use code  <br style="clear:both">  to place this text one row after previous floating box.

Using
You can also use this class on a pharagraph. I makes text float to the right, have a 15px margin and a 200px width

<br style="clear:both"> Use code  <br style="clear:both">  to place this text one row after previous floating box.

Using
You can also use this class on a pharagraph. I makes text float to the right, have a 15px margin and a 200px width

<br style="clear:both"> Use code  <br style="clear:both">  to place this text one row after previous floating box.

=Testing class=L4Cbox1= Code is stored in User:Chela5808/monobook.css.

Using
<p class=L4Cbox1> <p class=L4Cbox1> This is a test for the new class L4Cbox1.

Using
<font class=L4Cbox1> <font class=L4Cbox1> This is a test for the new class L4Cbox1.

Using
This is a test for the new class L4Cbox1.

Using
This is a test for the new class L4Cbox1.

In a table {| class="L4Cbox1"
=Background image=

http://www.wikieducator.org/images/f/f3/Bg_col2.gif

=Web references=
 * The World Wide Web Consortium (W3C)