HTML i CSS

Treballarem amb editors de text amb IntelliSense (mentres escrius et va completant el codi):

https://www.sublimetext.com/

https://notepad-plus-plus.org/

Editor online si volem treballar directament al navegador:

HTML (HyperText Markup Lenguage)

És un llenguatge de marcació per mostrar continguts del web en els buscadors com el Chrome, Firefox, Internet Explorer etc.

 

L’HTML s’utilitza juntament amb el CSS (Cascading Style Sheets) que s’encarrega de l’aspecte visual (color, mida de la lletra, marges, tipus de lletra, etc….)

S’utilitzen les etiquetes o tags que defineixen cada element, una etqueta per obrir i una altra per tancar:

<head> … </head>

<body> … </body>

<p> … </p>

<div> … </div>

<h1> … </h1>

<blockquote> … </blockquote>

<span> .. </span>

 

Altres etiquetes no cal tancarles:

<img>

<br>

<meta>

<link>

 

Algunes etiquetes poden tenir atributs i l’atribut pot tenir un valor:

<eitqueta atribut1=”valor1″ atribut2=”valor2″ …>

 

<blockquote cite=”url”> … </blockquote>

<meta name=”description” content=”This is the World of Harry Potter”>

<img src=”image.jpg” width=”300″ height=”300″ alt=”Harry Potter image”>

<link rel=”stylesheet” type=”text/css” href=”style.css”>

Comentaris:

S’indiquen entre /* .. */ i el que hi ha dins de no es mostrarà en el navegador

/*
Això és un comentari,

i no es mostrarà en el navegador
*/

Estructura de la pàgina:

<!DOCTYPE html> : Indiquem el llenguatge en que està escrit el codi, en aquest cas és llenguatge html

<html>: indiquem el començament del document

<head>: es defineixen les característiques principals del document html, nom de la pàgina, tipus de caràcters, autor del document, estils, etc.

<body>: el contingut de la pàgina web.

 

<head>

Exemples d’etiquetes utilitzades a <head>:

Per descriure el tipus de caràcters que utilitzarem, nosaltres per poder utilitzar les lletres “ç” o “ñ” utilitzarem utf-8:

<meta charset=”utf-8>

Afegeix una descripció a la pàgina web:
<meta name=”description” content=”This is the World of Harry Potter”>

Afegeix qui ha creat aquesta pàgina web:
<meta name=”author” content=”Joan Sèculi”>

Indiquem les paraules claus utilitzades per alguns buscadors, així ens poden trobar facilment si algú busca per paraules concretes:
<meta name=”keywords” content=”Harry Potter, J.K. Rowling, Hermione Granger”>

El temps de refresc de la pàgina web:
<meta http-equiv=”refresh” content=”30″>

Perquè es vegi bé en tots els dispositius:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

Indiquem el fitxer d’estils, haurem de crear el fitxer style.css i guardar-lo:
<link rel=”stylesheet” type=”text/css” href=”style.css”>

Afegeix un títol a la pàgina web:

<title>La meva pagina web</title>

 

<body>

Contingut de la pàgina web:

Contenidors:

Per definir blocs contenidors:

<div> … </div>

Paràgraf:

Per definir un paràgraf de text

<p> … </p>

Dins del text podem fer servir les següents etiquetes:

 

  • <big> .. </big>: big text
  • <small> .. </small>: small text
  • <b> .. </b>: bold text
  • <i> .. </i>: italic text
  • <s> ..</s>  o <strike>.. </strike>: strikethrough text
  • <u> .. </u>: underlined text
  • <sup> .. </sup>: superscript  text
  • <sub> .. </sub>:  subscript text

Span:

Per resaltar fraccions de texts dins d’un paràgraf

<span>Together with his friends, Hermione Granger and Ronald Weasley </span>

span {
background: #731d4c;
color: #d0d0d0;
font-style: italic;
}

Salts de línia:

<br>

Cites:

Per indicar una referència a una persona o entitat, transforma el text en cursiva

<cite> … </cite>

Quotes (anotació):

Indica el text entre cometes

<q> .. </q>

Blockquotes (anotació en bloc):

Per indicar una anotació i d’on ho hem tret:

<blockquote cite=”url”>
Over the last twenty years, J. K. Rowling …..
</blockquote>

Imatges:

<img src=”url de la imatge” alt=”títol de la imatge” width=”amplada en pixels” height=”alçada en pixels”>

Capçaleres:

<h1> .. </h1>

<h2> .. </h2>

<h3> .. </h3>

<h4> .. </h4>

<h5> .. </h5>

<h6> .. </h6>

Links:

Si volem obrir en una finestra nova:
<a href=”url” target=_blank”>Visita la web</a>
Si volem obrir a la mateixa finestra:
<a href=”url” target=self”>Visita la web</a>

Llistes no ordenades:

Inclou un marcador davant de cada element sense numeració:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Llistes ordenades:

Inclou un número davant de cada element:
<ol>
<li>Harry Potter and the Sorcerer’s Stone (1997)</li>
<li>Harry Potter and the Chamber of Secrets (1998)</li>
<li>Harry Potter and the Prisoner of Azkaban (1999)</li>
<li>Harry Potter and the Goblet of Fire (2000)</li>
<li>Harry Potter and the Order of the Phoenix (2003)</li>
<li>Harry Potter and the Half-Blood Prince (2005)</li>
<li>Harry Potter and the Deathly Hallows (2007)</li>
<li>Harry Potter and the Cursed Child (2016)</li>
</ol>

Llistes de descripcions:

No inclou res davant de cada element:
<dl>
<dt>Core subjects for 1st year:</dt>
<dd>Astronomy</dd>
<dd>Charms</dd>
<dd>Herbology</dd>
<dd>History of Magic</dd>
<dd>Potions</dd>
<dd>Flying</dd>
<dd>Transfiguration</dd>
</dl>

Enllaços:

Per indicar un enllaç utilitzarem l’etqueta <a>..</a>, l’adreça s’especifica a href i la manera com obrim la nova finestra amb target.

Si volem obrir en una finestra nova utilitzarem target=”_blank”:
<a href=”url” target=”_blank”>Visita la web</a>
Si volem obrir a la mateixa finestra utilitzarem target=”self”:
<a href=”url” target=self”>Visita la web</a>

Taules:

<table border=”1″>: per indicar inici de taula i amb un requadre de 1 pixel

<thead><tr>: per indicar una fila amb capçaleres

<th>: per indicar cada capçalera

<tr>: per indicar inici de fila

<td>: per indicar la columna dins de la fila

 

<table border=”1″>
<thead>
<tr>
<th>Student</th>
<th>Animal</th>
<th>Name</th>
</tr>
</thead>

<tr>
<td>Harry Potter</td>
<td>Owl</td>
<td>Hedwig</td>
</tr>
<tr>
<td>Neville</td>
<td>Toad</td>
<td>Trevor</td>
</tr>
<tr>
<td>Ron</td>
<td>Rat</td>
<td>Scabbers</td>
</tr>
<tr>
<td>Dumbledore</td>
<td>Phoenix</td>
<td>Fawkes</td>
</tr>
</table>

 

CSS (Cascading Style Sheets)

S’encarrega de l’aspecte visual (color, mida de la lletra, marges, tipus de lletra, etc….)

Per escollir colors podem consultar els codis a:

https://htmlcolorcodes.com/

 

Definirem l’aspecte de tota la pàgina amb:

 

Body:

body {
background-color: #dddddd;
color: #45421E; /*color del text*/
font-size: 14px; /* 18px o 1.1em o 1.1rem */
font-family: Arial, Helvetica, sans-serif;
}

Podriem posar una imatge al radera de tota la pàgina:

body {
color: #45421E; /*color del text*/
font-size: 14px; /* 18px o 1.1em o 1.1rem */
font-family: ‘Roboto’, sans-serif;
background: url(hp1b.jpg);
background-repeat: no-repeat; /* les opcions són no-repeat, repeat-x o repeat-y*/
background-attachment: fixed; /*les opcions són fixed o scroll per si volem que pugi i baixi al moure scroll*/
background-position: center 30px; /*per si volem que posicioni centre horitzontal i 30px en vertical*/

}

Div:

Podem donar un estil propi a tots els <div>:
Un contorn solid de 2pixels, amb color de fons i un contorn arrodonit en les arestes
div {
border: solid 2px;
border-color: #7497b8;
border-radius: 25px;
margin: 10px;
padding: 10px;
background-color: #f5f5f5;
text-align: justify;
overflow: auto; /*perquè les imatges es vegin dins del contenidor*/
}

P:

També podem donar estil propi a tots els <p>:
p {
border: solid 2px;
border-color: black;
border-radius: 25px;
margin: 10px;
padding: 10px;
width: 80%;
background-color: #eef4ff;
text-align: center;
}

Img:

Les imatges poden estar alineadas amb el text a la dreta o esquerra i tenir un marge a l’esquerra:
img {
float: left; /*right o left*/
display: block;
margin-left: 20px;
margin-right: 20px;
}
img {
float: right; /*right o left*/
display: block;
margin-left: 20px;
margin-right: 20px;
}
Si volem que diferents imatges tingui un posicionament diferent podem crear una classe i assignar-la a a imatge corresponent:
Al fitxer html:
<img class=”esquerra” src=”hp2.jpg” width=”300″ alt=”Harry Potter image”>
<img class=”dreta” src=”hp3.jpg” width=”300″ alt=”Harry Potter image”>
Al fitxer css definim les classes:
.esquerra {
float: left;
display: block;
margin-left: 20px;
height: 100%;
margin-right: 20px;
}
.dreta{
float: right;
display: block;
margin-left: 20px;
height: 100%;
margin-right: 20px;
}

Google Fonts:

Podem definir un tipus de lletra de google font:
La web de google fonts ens mostra com fer-ho:
Afegir la lletra que volem i a “Embed” ens mostra el que s’ha de posar al fitxer html i al fitxer css, per exemple si volem afegir la lletra Roboto 300 :
Al fitxer html:
Al fitxer css:
font-family: ‘Roboto’, sans-serif;

Table:

Podem donar un estil a les taules,:
border-collapse: collapse; /*per eliminar la doble línia que porta per defecte*/
border: 2px solid #3e5180; /*espeifiquem linia doble sòlida i el color*/
height: 50px; /*alçada de la capçalera*/

table {
border-collapse: collapse;
width: 50%;
}

table, th, td {
  border: 2px solid #3e5180;
}
th {
height: 50px;
}

Menu:

Els menús normalment són enllaços:

<div id=”menu”>
<a href=”#” target=”self”>Home</a>
<a href=”harrypotter.html” target=”self”>Harry Potter</a>
<a href=”hermione.html” target=”self”>Hermione</a>
<a href=”ron.html” target=”self”>Ron</a>
</div>

I els links podem configurar-los a style.css, es pot especificar els 4 estats d’un botó:

– link: per defefcte i no visitat

– visited; si s’ha visitat l’enllaç

– hover: si passem el ratolí per sobre

– active: si el botó està actiu

a:link, a:visited {
background-color: #0d3490;
border: none;
color: #FFFFFF;
padding: 15px 42px;
text-align: center;
-webkit-transition-duration: 0.4s; /*perquè funcioni a Mozilla*/
transition-duration: 0.4s;
text-decoration: none;
font-size: 16px;
cursor: pointer;
display: inline-block;
font-weight:bold;

position: relative; /*efecte de 3D*/

}

a:hover, a:active {
background-color: #3e5180;

top: 1px; /*efecte de 3D*/
}

 

Deixa un comentari

Fill in your details below or click an icon to log in:

WordPress.com Logo

Esteu comentant fent servir el compte WordPress.com. Log Out /  Canvia )

Google photo

Esteu comentant fent servir el compte Google. Log Out /  Canvia )

Twitter picture

Esteu comentant fent servir el compte Twitter. Log Out /  Canvia )

Facebook photo

Esteu comentant fent servir el compte Facebook. Log Out /  Canvia )

S'està connectant a %s

Aquest lloc utilitza Akismet per reduir els comentaris brossa. Apreneu com es processen les dades dels comentaris.

Crea un lloc web gratuït o un blog a Wordpress.com.

Up ↑

Create your website at WordPress.com
Per començar
%d bloggers like this: