Gestores de Contenido
(CMS)

Fases de creación de un sitio web

Crearlo

Subirlo

Verlo

Lenguaje HTML

Estructura de un documento en HTML

Al inicio y al final del documento respectivamente debemos añadir: <html> </html>

A continuación se añade la sección <head></head>, en la que se añade información que no se visualiza pero que define el documento

Entre las etiquetas <html></html> y despues de <head></head>, siguen las siguientes <body></body>, entre estas dos etiquetas se escribe el texto que equivale a aquello que veremos en la página web

Etiquetas HTML

Formato de documento

<br>Salto de línea </br>

<p>Salto de párrafo </p>

<hr>Línea horizontal </hr>

<hn>Indica el encabezado, n es un número</hn>

Formato de texto

<strong>Letra negrita</strong>

<em>Letra cursiva</em>

<font>Permite personalizar el texto, el color, el formato, el tamaño</font>

Inclusión

Imágenes

<img src="imagen.jpg">

<img src="File:/C:/carpeta/imagen.jpg">

<img src="imagenes/imagen.jpg" alt="Foto" title="Foto">

Video y Sonido

<iframe>

Enlace

<a href="destin.htm">Enlace en un mismo directorio</a>

<a href="../carpeta2/destin.htm">Enlace a archivo en una carpeta al mismo nivel</a>

<a href="/carpeta1-1/destin.htm">Enlace a archivo que está en una carpeta, dentro de la carpeta dónde está el archivo html</a>

<a href="http://www.destin.com">Enlace a otro sitio web</a>

<a href="destin.htm#anchor1">Enlace a un punto concreto de una página</a>

<a href="http://www.destin.com#anchor1">Enlace a un punto concreto de una página web</a>

Metaelementos
(se incluyen en la sección <head></head>)

<meta name=“title” content=“Título de la página”>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-5">

<title>Título de la página</title>

<meta name=“robots" content="noindex">

Listas

Numeradas

<ol>
<li>Primero</li>
<li>Segundo</li>
</ol>

No numeradas

<ul>
<li>Uno</li>
<li>Dos</li>
</ul>

Tablas

<tr>Fila</tr>

<th>Columna tipo encabezado</th>

<td>Columna normal
</td>

Formularios

Prototipo de Formulario (del Power Point de clase):

<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>

Estructura de las eiquetas

<etiqueta atributo=“valor”>Texto visible </etiqueta>

Lenguaje CSS (Hoja de estilo en cascada)

Style
<style>
</style>

Body

body {font-family:Letra; font-size: Tamaño margin-right: Espacio; margin-left: Espacio}

Permite personalizar el texto que queramos mostrar: el tipo de letra, su tamaño, los márgenes

h1
h2
h3

h1, h2, h3 {color: color}

Personaliza TODOS los encabezados SELECCIONADOS separados por comas; en este caso el 1, 2 y el 3, según el color que se quiera

hn

hn { font-weight: Tipo; font-size: Tamaño}

Personaliza un encabezado concreto, siendo "n" el número de este

a

a:hover {color: color; font-weight: Tipo; text-decoration: elección}

Personaliza el estilo del enlace creado

hr

hr {border-color: color}

Personaliza la línea horizontal

Selectores de clase

Los creamos nosotros para dar un nombre concreto a una acción que queremos realizar; cojemos como ejemplo el centrar un texto

.centrado { text-align: center; }

Creadno esto, indicamos que cada vez que escribamos ".centrado" lo que queremos es que el texto se alinee al centro

Modo de creación

Offline

Puede crearse desde un bloc de notas

Puede crearse desde programas como Dreamweaver

Online

Se puede crear desde páginas como Webnode, Weebly, etc.