CSS3, INTRODUCCIÓN Y PROGRAMACIÓN BÁSICA.

Con esta hoja de estilos, podemos crear bordes, cuadros de texto fondos, color, etc.

Está compuesto de varios módulos.

HTML5, INTRODUCCIÓN Y PROGRAMACIÓN BÁSICA.

INTRODUCCIÓN.

HTML5, es la última versión de HTML, desarrollada de manera equivalente con xhtml.

HTML5 es muy similar al resto de versiones anteriores, aunque incorpora algunas diferencias y elementos nuevos:

Tenemos el atributo <amedia> o medio para el que está diseñado.

<article> o articulo.

<aside> o aparte.

<audio> para archivos de audio.

<canvas> con la cual crear imágenes dinámicas.

<datalist> o lista de valores.

<details> con la cual enseñar o no el código.

<dialog> con la cual crear conversaciones.

<embed> con la cual publicar contenido apto para flash.

<figure> con la cual establecer contenido gráfico.

<footer> o pie.

<header> o cabecera.

<mark> o texto resaltado.

<meter> con la cual establecer valores con barras gráficas.

<nav> navegación o enlaces a la web.

<output> o representación de cálculos en formularios.

<progress> con la cual mostrar el curso de una tarea.

<ruby> <rp> <rt> para enmarcar en formato del mismo nombre.

<section> o agrupación de contenidos. 

<source> o especificación de recursos de medios múltiples.

<time> o personalización de la fecha y la hora. 

<video> o añadir control de video

REALIZACIÓN DE CAJAS DE TEXTO, HTML.

Para realizar una caja de texto debemos darle en el campo input type el atributo text.

Después pondríamos el atributo name, que indica el nombre asociado a la caja de texto.

maxlength: Permite indicar el número máximo de caracteres de la caja de texto.

value: Permite indicar el valor inicial que queremos que aparezca en la caja de texto.

REALIZACIÓN DE FORMULARIOS EN HTML.

Para realizar un formulario en HTML, necesitamos conocer las partes que lo componen:

action : Dentro de el introducimos la ruta de la web con la que está relacionado el formulario.

method : Con dos opciones posibles:

• post : Al producirse cambios en el formulario, y que van a ser mandados a una base de datos.
• get : Al no producirse cambios de ningún tipo.

Para enviar los datos a una cuenta de correo electrónico, podríamos lo siguiente:
<input type="hidden" name="formulario" value="formulario@ejemplo.com">

Ejemplo:
<form action="http://computersandprogrammers.blogspot.com.es/documentos/form.html" method="post">
   

COLUMNAS, CELDAS, FILAS Y ENCABEZADOS.

Columnas y filas: Determinadas con la etiqueta <tr>.

Celdas: Determinadas con la etiqueta <td>. Se encuentran dentro de una columna, por lo que se especificaría dentro de un <tr>.

Encabezados: Determinados con la etiqueta <th>, pero eso sí, dentro de una columna (<th>).

IMAGENES.

png: Transparencias.

gif: Imágenes pequeñas.

jpg: Imagenes de alta calidad.

alt: Alternativa.

align: Alineación de la imagen con el texto.

border: Ancho del borde.

width: Ancho de la imagen.

height: Alto de la imagen.

<img src=""> : Dentro de las comillas dobles, pondríamos la url de nuestra imagen a visualizar.

TABLAS.

Determinada con la etiqueta <table>, que indica el inicio o apertura de una tabla.

Opciones:

width : Esta opción especifica el ancho de la tabla.

th y td : Con estas opciones determinamos el ancho de columna.

height : Con esta opción determinamos la altura de la tabla.

border : Esta opción la usamos para asignar un borde a la tabla. Si fuera =0, no habría borde.

cellpadding : Determinamos el espacio entre el borde de la celda y su contenido.

cellspacing : Con ella determinamos el espacio que hay entre una celda y otra.

TIPOS DE LISTAS EN HTML.

Ordenadas:

Se declaran con la etiqueta <ol>. Ejemplo:

<ol>
      <li> ejemplo </li>
</ol>

Desordenadas:

Se declaran con la etiqueta <ul>. Ejemplo:

<ul>
     <li> ejemplo </li>
</ul>

MÁS TIPOS DE ENLACES.

Enlaces de descarga, usados mediante la etiqueta <a href=""> texto </a>

Enlaces de correo electrónico: ejemplo:

<a href="mailto:listadecontactos@computersandprogrammers.es">email computersandprogrammers" </a>

TARGET (DESTINOS).

Introducido por Ntescape y acoplada después a explorer y opera.

Viene acompañada de la etiqueta <a>, la cual indica el objetivo en el que se va a cargar la pagina, o  lo que visualizamos al pasar el ratón sobre el enlace.

ANCLAS.

Para nombrarla necesitamos la ruta del documento. Ejemplo:

ejemplo1.html#ancla1

CLASES DE REFERENCIAS.

Relativa: Todos los archivos y documentos están en la misma carpeta.

Absoluta: La veremos a través del siguiente ejemplo:

http://www.ejemplo.es/documentos/ejemplo1.html

• http: Es el protocolo.
• www.ejemplo.es: Sería el dominio.
• documentos: Sería la ruta del archivo.
• ejemplo1.html: Sería el nombre del archivo.

Nivel inferior: Sería documentos/ejemplo1.html

Nivel superior: Lo definimos con dos puntos. 

HIPERENLACES.

<a> : Crea un ancla.

<a href="http://computersandprogrammers.blogspot.com.es/"> : Crea un enlace a nuestro blog.

TEXTOS EN HTML.

&nbsp; : Deja un espacio en blanco.

&oacute; : Acentúa en este caso la o.

&ordf; : Pone la o como superindice.

&¡excl; :  Crea una apertura de admiración.

<strong> o <b> : Pone el texto en negrita.

<em> o <i> : Pone el texto en cursiva.

<u> : Subraya el texto.

CAPAS EN HTML.

<div>, en lenguaje HTML, determina la sección de un documento HTML e inserta un salto de linea.

Con ella aplicamos estilos a nuestra página.

ETIQUETAS HTML.

Se suelen escribir en minúscula. Se abrirán y cerrarán en el mismo orden en que se crearon.

<html>: Se escribe para indicar el inicio de un documento HTML.

<head>: Indica la cabecera del documento HTML. Dentro de está, se encuentra la etiqueta <title>, que indica el título del documento, el cual se verá cuando la página se encuentra en favoritos o marcadores.

VERSIONES DE HTML.

HTML 1.

En 1991 comenzó el desarrollo de este lenguaje.

HTML2 (PLUS).

Empezó en 1993, y no llegó a ser un estándar.

HTML 3.0.

HTML 3.1.

HTML 3.2.

Desarrollado por Netscape y Mosaic.

HTML 4.0.

Creado en 1997.

HTML 4.0.1.

Creado en 1999.

HTML 5.0.

Creado en 2008.

¿QUE ES HTML?

Hipertext Mark-Up Languaje, lenguaje de marcado hipertextual. El navegador interpreta el código html y lo muestra.