RESUM
TEMA 3: CODI HTML + CSS
"HyperText Markup Language" Llenguatge per escriure pàgines web.
ESTRUCTURA D'UN DOCUMENT HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="ca" lang="ca">
1) <html>
OBERTURA DE DOCUMENT EN CODI HTML
2) <head>
OBERTURA DE L'ENCAPÇALAT
(TEXT)
<title> (text) </title>
<meta name=“author” content=“(TEXT)"></meta>
<meta name=“DC.Title” content=“(TEXT)”>
<meta name="generator" content="(TEXT)"</meta>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"</meta>
<meta name="copyright" content="(TEXT)"</meta>
<meta name="robots" content="index, follow (etc...)"</meta>
<meta name="keywords" content="(TEXT)"
<meta name="description" content="(TEXT)"
[EXEMPLE] <style>
<style type="text/css">
body {
font-family: Calibri;
font-size: 11pt;
margin-right: 12px;
margin-left: 12px;
font-style: normal;
line-height: normal;
font-weight: normal;
color: #000000;
}
h1 {color: purple; font-weight: normal;}
h1 {font-size: 35pt}
h2 {font-size: 25pt}
h3 {font-size: 14pt}
p {font-size: 11pt}
a:hover {color: yellow; font-weight: normal; text-decoration: none}
hr {border-color: black}
</style>
ETIQUETES CSS
3) </head>
CLOENDA DE L'ENCAPÇALAT
4) <body>
OBERTURA DEL COS DEL DOCUMENT
(TEXT)
<p> (TEXT) </p>
5) </body>
CLOENDA DEL COS DEL DOCUMENT
6) </html>
CLOENDA DEL DOCUMENT EN CODI HTML
ETIQUETES HTML + CSS
<etiqueta atribut="valor"> (text visible) </etiqueta> [EXEMPLE] <p align="center"> (Paràgraf alineat al centre) </p>
<br>Salto de línea</br> <p>Salto de párrafo</p> <hr>Línea horizontal</hr> [EXEMPLE] <p align=“right”>Párrafo alineado a la derecha</p> <hr size=“2”>Línea horizontal de grosor 2</hr>
<H1>Encabezado H1</H1> <H2>Encabezado H2</H2> <H3>Encabezado H3</H3> <H4>Encabezado H4</H4> <H5>Encabezado H5</H5> <H6>Encabezado H6</H6>
TEXT EN DIFERENTS MIDES
<strong>Letra negrita</strong>
<em>Letra cursiva</em>
<font size=“3”>Texto tamaño 3</font>
<font color=“red”>Texto rojo</font>
<font face=“Comic Sans MS”>Texto Comic Sans</font>
<img src="imagen.jpg">
<img src="File:/C:/carpeta/imagen.jpg">
<img src="http://www.imagenes.com/imagen.jpg">;
<img src="imagenes/imagen.jpg" alt="Foto" title="Foto">
ADJUNTAR IMATGES
<iframe></iframe>
ADJUNTAR SO I VÍDEO
<a href="destin.htm">Enlace</a>
<a href="../carpeta2/destin.htm">Enlace</a>
<a href="/carpeta1-1/destin.htm">Enlace</a>
<a href="http://www.destin.com">Enlace</a>;
<a name="introduccion">1. Introducción</a><br>
Asdf asdf asdf asdf asdf asdf asdf asdf asdf <p>
<a name="metodologia">2. Metodología</a><br>
Asdf asdf asdf asdf asdf asdf asdf asdf asdf </p>
<a name="resultados">3. Resultados</a><br>
Asdf asdf asdf asdf asdf asdf asdf asdf asdf
<a href="destin.htm#anchor1">Enlace</a>
<a href="http://www.destin.com#anchor1">Enlace</a>;
Sumari<p>
<li><a href="#introduccion">1. Introducción</a></li>
<li><a href="#metodologia">2. Metodología</a></li>
<li><a href="#resultados">3. Resultados</a></li>
< a href="(text)" TARGET="_blank">(text)</a>
< a href="(text)" TARGET="_self"> (text)</a>
NUMERADES <ol>
<ol>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ol>
NO NUMERADES <ul>
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
LLISTES
Border
<tr> Fila
<th>Columna tipo encabezado
<td>Columna normal
[EXEMPLE]
<table border=“1”>
<tr>
<th>Nombre</th>
<th>Fecha</th>
</tr>
<tr>
<td>Pedro</td>
<td>19-11-1978</td>
</tr>
<tr>
<td>Ignacio</td>
<td>13-08-1973</td>
</tr>
</table>
TAULES
<FORM action=“mailto:nombre@mail.com" ENCTYPE="text/plain" method="post">
<P>
Nombre: <INPUT type="text" name="nombre"><BR>
Apellidos: <INPUT type="text" name="apellido"><BR>
email: <INPUT type="text" name="email"><BR>
<INPUT type="radio" name="sexo" value="Hombre">Hombre<BR>
<INPUT type="radio" name="sexo" value="Mujer">Mujer<BR>
<INPUT type="submit" value="Enviar">
<INPUT type=“reset“ value="Restablecer">
</P>
</FORM>
FORMULARIS
TEMA 2: CMS
FASES DE CREACIÓ D'UN LLOC WEB
CREAR-LO (OFFLINE)
CODI FONT
EDITOR DE CODI WYSIWYG (What You See Is What You Get)
CMS
PENJAR-LO MITJANÇANT UN CLIENT FTP
DOMINI
HOSTING - Allotjament
VISUALITZACIÓ (ONLINE)
UTILITATS- LLOCS WEB
BLOGS
FOROS
WIKIS
COMERÇ ELECTRÒNIC
REVISTES ONLINE
ENSENYAMENT
CMS MÉS UTILITZATS
WORDPRESS
WEEBLY
BLOGGER
WEBNODE