Wednesday, September 19, 2012

CSS (Cascading Style Sheets)

CSS is a programming language which allows us to decide how a document will be shown on the web.As in HTML, in CSS you can also use any regular text editor, like notepad or others in order to create a stylesheet.Just remember saving the document as a .css file.
How does it work?
Very simple, with the CSS stylesheet you will modify HTML elements.You will do this by opening a new document and typing the following:
#text{color:#FF0000}

 
  1. Element name.

    Here we will introduce the name of the HTML element/s that we want to modify.
  2. Declaration

    The declaration, situated in between {} is the information that will change our HTML element.In case there is more than one delaration you use ; to seperate them.
  3. Atribute and value

    Inside the declaration, the atribute defines how the element will be changed and after that gives it a value.                                                                                                                          

Style in code


The style in code is directly putting the styles on the HTML document we want to modify.This is not the recommended type of style, we will always try to seperate the content from the presentation.


Example:<p style="color:#ff0000">This car is red</p>

 

Intern style


This style is defined in the HTML document , in between .To do so, inside of the head tag we will introduce our styles in between tags. 

Example:<head>
                <style type="text/css">p{color:#ff0000}</style>
               </head> 

External style


This is the most used.To modify any HTML element you will generate a stylesheet with your notepad or any text editor.Once finished save it as a .css file.Now all we have to do is introduce it into our HTML document between . 

Example:

Content of style.css:
p{color:#ff0000 ;}

Content of<head></head> in HTML file:
<link href="style.css" rel="stylesheet" type="text/css" />

You can generate and introduce all the archives you wish.

Thursday, September 13, 2012

Layers

Layers are a very used method by web pages using CSS  to customize them.You must imagine that a  layer is like a simple box we position on our web (we can give this box different color, position, form, dimensions...) and in the inside of it we will introduce the code preferred by us.I will now explain you the two type of layers that exist.They are very similar, but with one little exception.

DIV
This type of layer (box) will generate a line break as a result.


SPAN
This is a neutral element, which means that it won't add anything (unless you indicate so, using styles).


I  will now show you the clear difference between those two.When we introduce a span in any text, it can be read without any problems.But if we use the div layer it will introduce a line break in our text.


Look at this example:

This car is dark<span> red,</span> but the other one is blue.


This car is yellow,<div>while <div>the other one is green.



This car is dark red, but the other one is blue.

This car is yellow,

while
the other one is green.


Wednesday, September 12, 2012

Html lists

The most common list elements in HTML are ordered and unordered lists.The difference between these is that the ordered ones will appear in a numerical list, while the unordered ones will be inserted after a point.I made one example of each so you understand them better.

Ordered list:                    Unordered list:         

 <ol>                            <ul>
<li>German</li>            <li>German</li>
<li>Spanish</li>             <li>Spanish</li>
<li>English</li>              <li>English</li>
</ol>                             </ul>



Let`s look at the result:

Ordered
  1. German
  2. Spanish
  3. English
Unordered
  • German
  • Spanish
  • English  
So remember, to create an ordered/unordered list, the tags to create those are <ol> and <ul>.
For all the items in the list use <li>.


Besides the ordered/unordered lists you can also employ a definition list for your HTML webpage.These are composed of two elements, the term <dt> and the definition <dd>.


Definition list

<dl>
<dt>USA</dt>
<dd>United States of America</dd>
<dt>House</dt>
<dd>A building for human habitation</dd>
<dt>Bottle</dt>
<dd>A container, typically made of glass or plastic and with a narrow neck, used for storing liquids.</dd>
</dl>



And how it looks like in any internet explorer:
USA
United States of America
House
A building for human habitation
Bottle
A container, typically made of glass or plastic and with a narrow neck, used for storing liquids.