CSS LAYOUT TECNIQUES

http://web.simmons.edu/~grabiner/comm244/weeknine/css-layouts.html#two_column_layouts

2-column-stretch.css

/*

    This is basic CSS code for a website with a header, footer, and 2 columns

    The sidebar is on the left.

    The site is centered and the content is 960px wide, but the backgrounds stretch to fit the page

*/

/* Basic Reset */

* {margin:0; padding: 0;}

/* Basic Structure */

body {

    text-align: center;                /* This is a hack for older browsers to center the page */

}

.centerLayout {

                                    /* We use a class for this since we’re using it in several places */

    margin: 0 auto;                 /* This centers the page in modern browsers */

    text-align: left;                 /* This is a hack for older browsers to center the page */

    width: 960px;                     /* This sets our total page width */

}

#navigation li {

    float: left;                     /* Floating also makes our navigation display in a line */

}

#content {

    float: left;                    /* This causes the content to move to the left */

    width: 700px;                    /* We need to set the width whenever we float an element */

}

#sidebar {

    float: left;                     /* This causes the sidebar to move to the left */

    width: 260px;                     /* We need to set the width whenever we float an element */

}

#footer {

    clear: both;                     /* This makes sure that the footer clears both the sidebar and content floats */

}

/*

* For Demonstration Only

* This code is just for the purpose of the demonstration to hightlight things so that you can see them

*/

body {

    background-color: #666;

    color: white;

}

#header {

    background-color: aqua;

    height: 100px;

}

#navigation {

    background-color: red;

    line-height: 2;

    overflow: auto;                    /* Elements that only contain “floated” content have no height.

                                         In order to give then height and force them to wrap around their content,

                                        we use overflow: auto

                                    */

}

#navigation li {

    list-style: none;

    width: 150px;                    /* This sets the width of our links to 150px wide */

}

#content {

    background-color: #666;

}

#sidebar {

    background-color: #999;

    clear: left;                    /* We have to make sure that the sidebar clears the navigation, since we’ve floated it */

}

#footer {

    background-color: black;

}

2_Column_Layout.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
    <title>Basic 2 Column Layout that stretchs</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    
    <link rel="stylesheet" href="2-column-stretch.css" type="text/css" media="screen" charset="utf-8" />
    
</head>
<body>
    
            
<div id="header">
    <div class="centerLayout">
    
        <p>logo</p>
    </div>        
</div>
<div id="navigation">
    <div class="centerLayout">
        <ul>
            <li>link 1</li>
            <li>link 2</li>
            <li>link 3</li>
        </ul>
    </div>    
</div>
<div class="centerLayout">
    <div id="sidebar">
        <h2>Sidebar</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div id="content">
        <h1>Content</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    </div>    
    
</div>
<div id="footer">
    <div class="centerLayout">
        <h3>Footer</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>
    
        
    </div>
    
</body>
</html>


Using CSS

What is CSS

CSS can be added to HTML documents in 3 ways:

  • Inline – by using the style attribute inside HTML elements
  • Internal – by using a <style> element in the <head> section
  • External – by using a <link> element to link to an external CSS file

The most common way to add CSS, is to keep the styles in external CSS files. However, in this tutorial we will use inline and internal styles, because this is easier to demonstrate, and easier for you to try it yourself.

CSS extern

S’utilitza un full d’estil extern per definir l’estil de moltes pàgines HTML. Per utilitzar un full d’estil extern, afegiu-hi un enllaç a la secció <head> de cada pàgina HTML:


I styles.css


Carregant aquests examples a Sublime Text 3


Que vist al navegador Firefox (alt F6) queda:



 

ISO 639-1 Codis de llengües HTML

<!doctype html>
<html lang=”ca”>

ordenat per idioma
abjaso (o abjasiano) ab
afar aa
afrikaans af
aimara ay
akano ak
albanés sq
alemán de
amárico am
árabe ar
aragonés an
armenio hy
asamés as
avar av
avéstico ae
azerí az
bambara bm
baskir ba
bengalí bn
bhojpurí bh
bielorruso be
birmano my
bislama bi
bosnio bs
bretón br
búlgaro bg
cachemiro ks
camboyano (o jemer) km
canarés kn
catalán ca
chamorro ch
checheno ce
checo cs
chichewa ny
chino zh
chuan (o zhuang) za
chuvasio cv
cingalés si
coreano ko
córnico kw
corso co
cree cr
croata hr
danés da
dzongkha dz
eslavo eclesiástico antiguo cu
eslovaco sk
esloveno sl
español (o castellano) es
esperanto eo
estonio et
ewe ee
feroés fo
fijiano (o fidji) fj
finés (o finlandés) fi
francés fr
frisón (o frisio) fy
fula ff
gaélico escocés gd
galés cy
gallego gl
georgiano ka
griego (moderno) el
groenlandés (o kalaallisut) kl
guaraní gn
guyaratí (o guyaratí) gu
haitiano ht
hausa ha
hebreo he
herero hz
hindi (o hindú) hi
hiri motu ho
húngaro hu
ido io
igbo ig
indonesio id
inglés en
interlingua ia
inuktitut iu
inupiaq ik
irlandés (o gaélico) ga
islandés is
italiano it
japonés ja
javanés jv
kanuri kr
kazajo (o kazajio) kk
kikuyu ki
kirguís ky
kirundi rn
komi kv
kongo kg
kuanyama kj
kurdo ku
lao lo
latín la
letón lv
limburgués li
lingala ln
lituano lt
luba-katanga lu
luganda lg
luxemburgués lb
macedonio mk
malayalam ml
malayo ms
maldivo dv
malgache (o malagasy) mg
maltés mt
manés (gaélico manés o de Isla de Man) gv
maorí mi
maratí mr
marshalés mh
moldavo mo
mongol mn
nauruano na
navajo nv
ndebele del norte nd
ndebele del sur nr
ndonga ng
neerlandés (u holandés) nl
nepalí ne
noruego no
noruego bokmål nb
nynorsk nn
occidental ie
occitano oc
ojibwa oj
oriya or
oromo om
osético os
pali pi
panyabí (o penyabi) pa
pastú (o pashto) ps
persa fa
polaco pl
portugués pt
quechua qu
retorrománico rm
ruandés rw
rumano ro
ruso ru
sami septentrional se
samoano sm
sango sg
sánscrito sa
sardo sc
serbio sr
sesotho st
setsuana tn
shona sn
sindhi sd
somalí so
suajili sw
suazi (swati o siSwati) ss
sueco sv
sundanés su
tagalo tl
tahitiano ty
tailandés th
tamil ta
tártaro tt
tayiko tg
telugú te
tibetano bo
tigriña ti
tongano to
tsonga ts
turco tr
turcomano tk
twi tw
ucraniano uk
uigur ug
urdu ur
uzbeko uz
valón wa
vascuence (o euskera) eu
venda ve
vietnamita vi
volapük vo
wolof wo
xhosa xh
yi de Sichuán ii
yídish (o yiddish) yi
yoruba yo
zulú zu
acrònims, codis d’idioma, codi d’idioma, codis d’idioma, codis de país, codi de país, codi de moneda ISO, codi ISO, codis de moneda

Crear un bloc en html i php

Consta de tres fitxers ubicats a la mateixa carpeta (bloc_html_php):

  • bloc.htm
  • nova_entrada.htm
  • escriu_entrada.php

bloc.htm
[sourcecode]

Bloc de notes en htm/title

Bloc de notes en html
Entrar
anotació

13-02-2013 03:46:33 Hola he reinstal·lat aquest bloc de notes ja que després de temps sense mirar-lo estava ple de spams com el que veieu mes avall. Tot i la pregunta anti-spasm 4+2 entraven constantment al bloc de entrades.htm. Constantment vol dir constantment mes d’un espam per minut TOT LO DIA. Os podeu imaginar com estava aquesta pàgina. Els spams consistien en enllaços a pagines publicitaries de tot tipus. Cialis, Viagra, i tot lo que os pugeu imaginar. el que he fet es impossibilitar entrar enllaços a aquesta àrea. Vorem si done resultat.

13-02-2013 03:16:47 Si el numero de caracteres no es cero es fa l\’anotació

13-02-2013 09:52:34 bona tarda

12-02-2013 11:35:24 evjwacftfju,

10-03-2010 03:16:37 entrada de proves 1

[/sourcecode]

Nova entrada.htm
[sourcecode]

 

nova_lectura

 

 

Nova entrada:

Pregunta anti-spasm: 4+2 =


[/sourcecode]

escriu_entrada.php:
[sourcecode]

 

 

/* se recoge el comentario del formulario “aadir comentario,htm”
que se debe insertar en la linea 41 (86) de los comentarios.htm
justo despues de <–!BEGIN–>
*/
$begin= ““;

$begin .=chr (13).chr(10); //añade a la linea CR, LF

$data= gmdate(“d-m-Y h:i:s”);
$entrada=$_POST[“entrada”];
//$a=bin2hex($entrada);

$findme = ‘0) )
{
$anotacio =”
“. $data. ” ” . $entrada. ”
” ;

//exit( “ANOTACIO: ($anotacio)”);
$lineas = file(“bloc_entrades.htm”);

//$lineas[42]= $comentari . $lineas[42]; ahora se encuentra automaticamente
$fp = fopen(“bloc_entrades.htm”, “w”);

foreach ($lineas as $linea_num => $linea) {
if ($linea == $begin) {

$lineas[$linea_num+1]= $anotacio . $lineas[$linea_num+1]; // SE INSERTA EL COMENTARIO EN EL FICHERO
}
}

/* Se habilita el uso de bferes de salida. Mientras los bferes
de salida estn activos no se enva salida desde el script (ms que las
cabeceras), en su lugar la salida es almacenada en un bfer interno
*/
ob_start();

/* Se recorre la matriz otra vez linea a linea para que se recoja en el buffer
de salida. Si ponemos htmlspecialchar, se mostraria el cdigo HTML como cdigo fuente
HTML, y los nmeros de lnea tambin.
*/
foreach ($lineas as $linea_num => $linea) {
//echo htmlspecialchars($linea);

echo ($linea); // no se ve en pantalla queda en buffer interno.
}
//Obtiene los contenidos del bfer de salida, sin borrarlo.
$html = ob_get_contents();

//Esta funcin descarta los contenidos del bfer de salida en cola y lo deshabilita.
ob_end_clean();

fwrite($fp, $html);
fclose($fp);

echo “Has afegit la següent entrada: ” . ”
“;

ECHO $anotacio . ”
“;
}

?>

 

 
[/sourcecode]