User:Chela5808/HTML and CSS Lab

From WikiEducator
Jump to: navigation, search
Edu science.png  Welcome to my Testing Laboratory
My Sandbox Various Templates Pedagogical Templates Flash Simulations Tables
Math Projects Audio and Video Special Characters & LaTeX HTML and CSS Transclusion & Substitution
File extensions Be aware Miscellaneous L4C My Sandbox 2
Images Quizzes


HTML tags

<div>

I Package favorite.png HTML <div> tag, it's so powerfull.
<div> 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.

Most Common Attributes

style, id, class, title

Example 1

Code:

<div style="width:50%; padding:10px; text-align:center; -moz-border-radius:8px; border-width:4px; border-spacing:3px; border-style:double; border-collapse:separate; border-color:gray; font-size:20pt; background:#F0F8FF; color:green"><br/>
Any text comes here<br/>
</div>


Output:

Any text comes here



Example 2

Code:

<div style="width:97%; padding:8px; text-align:left; -moz-border-radius:8px; border-width:5px; border-spacing:3px; border-style:ridge; border-collapse:separate; border-color:gray; vertical-align: middle; font-size:10pt; background:#F6F9ED; color:black"><br/>
Any text comes here<br/>
</div>


Output:

Any text comes here

<span>

My second favorite is <span> tag.

<p>

<h1>, to <h6>

<font>

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.

Generic Font Family Fonts
Serif Palatino Linotype, Sylfaen, Georgia, Times New Roman, Bookman Old Style,Book Antiqua, Garamond, Perpetua, Rockwell, Calisto MT, Goudy Old Style, Rockwell Condensed, etc.
Sans-serif Microsoft Sans Serif, Arial Black, Franklin Gothic Medium, Verdana, Arial, Tahoma, Trebuchet MS, Lucida Sans Unicode, Arial Narrow, Century Gothic, etc.
Cursive Comic Sans MS, Monotype Corsiva, Bradley Hand ITC, French Script MT, Tempus Sans ITC, Mistral, Lucida Calligraphy, Lucida Handwriting, Viner Hand ITC, etc.
Fantasy Impact, Haettenschweiler, Papyrus, Copperplate Gothic Ligh, Felix Titling, Rockwell Extra Bold, Engravers MT, Copperplate Gothic Bold, Castellar, etc.
Monospace Courier New, Lucida Console, OCR A Extended, Consola, Terminal, Bitstream Vera Sans Mono, Lucida Sans Typewriter, etc.


<div style="font-family: Serif, 'Courier New', monospace">Text in Courier</div>
<div style="font-family: San-serif, 'Courier New', monospace">Text in San-serif</div>
<div style="font-family: Cursive, 'Courier New', monospace">Text in Cursive</div>
<div style="font-family: Fantasy, 'Courier New', monospace">Text in Fantasy</div>
<div style="font-family: Monospace, 'Courier New', monospace">Text in Monospace</div>


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.

Values Description
normal Browser displays default font
italic Browser displays italic font
oblique Browser displays oblique font


<div style="font-style:normal">This is a normal text</div>
<div style="font-style:italic">This is an italic text</div>
<div style="font-style:oblique">This is an oblique text</div>


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

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

This is a 20pt text


Using <font>

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



Using <span>

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



Using <div>

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


Border Properties

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 <div class="HELPbox HELPtxt"> on box above (two classes applied to one HTML object). Click on User:Chela5808/monobook.css if you want to know what I mean.

Testing class=TOCright

Code is stored in User:Chela5808/monobook.css.

Applying to the Table of Contents

<div class=TOCright>__TOC__</div> 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>

<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</p>


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

Using <font>

<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</font>


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

Using <span>

<span 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</span>


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


Using <div>

<div 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</div>


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>

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


Using <font>


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


Using <span>


<span class=L4Cbox1>This is a test for the new class L4Cbox1.</span>

Using <div>

<div class=L4Cbox1>This is a test for the new class L4Cbox1.</div>


In a table {| class="L4Cbox1"

This is a test for the new class L4Cbox1. Switch to see code header 2 header 3
row 1, cell 1 row 1, cell 2 row 1, cell 3
row 2, cell 1 row 2, cell 2 row 2, cell 3


Background image

<css>

  1. perso { background:url(http://www.wikieducator.org/images/f/f3/Bg_col2.gif); 
 background-position:top;
 background-repeat: no-repeat;}

</css>


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

Web references

Retrieved from "https://wikieducator.org/index.php?title=User:Chela5808/HTML_and_CSS_Lab&oldid=465299"