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.

Monday, May 21, 2012

Allow your users to upload files.

With this element your user can upload different files like pictures, documents...It's tag is "file".It is very used in webpages using PHP or ASP.

<input type="file" name="files" />

How to create reset and submit buttons

These 2 buttons allow our user to reset a form or to submit it.

Submit


The tag is "submit" and it will send the form to the specificied order "action".
<input type="submit" name="button" value="submit" action=""/>


Reset





This button will empty all the selected options and entered text in a form.We will use the tag "reset".
<input type="reset" name="button" value="reset"/>


Try it on your own, create a form, add these 2 buttons and see what happens in any internet explorer.

How to create dropdown menus

It allows us to create a list of different options, that will not take as much space as creating a normal list.Dorpdown menus are usually used for large lists, as for example, to select a country.In order to create it we will use the <select name="selection"><select> and in between them we will type
<option value="">value</option> for each option that we want to introduce to our dropdown list.This element also has the "name" and "id" tags.
We can also add other attributes as:

Size:Defines the number of options that will appear on screen.

Multiple:When a dropdown menu is multiple, the user can select more than one option at the time by pressing the "control" button.

Selected:This is an attribute for the <option> tag.It indicates if an option is selected as default.

Let's take a look at this:



Favourite color:
<select name="selection">
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
</select>

And this will be our result:

Favourite color:

Wednesday, May 16, 2012

Radiobuttons

This element allows our user to select from a series of options,with a selection-circle in front of it.By selecting an option, one that already was chosen get's deselected.The tag for radio buttons is:
<input type="radio" name="option" value="" />
In order to create a selection list, all the elements in it must have the same name and different values.
Radio buttons also have the attributes name, id, value and checked, which I explained in previous posts.
Example of a simple selection list:

 Favorite color: <br/>


Red<input type="radio" name="option" value="red" /><br/>
Blue<input type="radio" name="option" value="blue" /><br/>
Green<input type="radio" name="option" value="Green" /><br/>

Favorite color:
Red
Blue
Green