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

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 documentoundefined

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 webundefined

Etiquetas HTML

Formato de documento

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

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

<hr>Línea horizontal </hr>undefined

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

Formato de texto

<strong>Letra negrita</strong>undefined

<em>Letra cursiva</em>undefined

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

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

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

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

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

<a href="Enlace" target="_blank">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>)undefined

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

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

Listas

Numeradas

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

No numeradas

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

Tablas

<tr>Fila</tr>undefined

<th>Columna tipo encabezado</th>undefined

<td>Columna normal
</td>undefined

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

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

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

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.