Download - Curso de HTML y CSS
HTML
El presente
es la Red
en evolución
cont inua
Barcelona, marzo 2013
@borjamulleras| www.md360.es | [email protected]
Creado en 1989-‐1991 por Tim Berners-‐Lee en el CERN con fines de compar:r información cien=fica.
En 1993 Marc Andreessen crea Mosaic antecesor de Netscape.
1994 primeros servidores en España: FIB-‐UPC y aparece Yahoo
1995-‐6 pasó a ser un negocio y MicrosoR entró.
Un poquito de historia
@borjamulleras| www.md360.es | [email protected]
Un poquito de historia
http://www.zakon.org/robert/internet/timeline/
@borjamulleras| www.md360.es | [email protected]
¿Qué significa HTML?
HTML es la abreviatura de "HyperText Mark-up Language“:
Hiper <> lineal: se puede ir donde uno quiera cuando uno quiera. Por ejemplo, no es necesario visitar MSN.com antes de visitar HTML.net. Texto se explica por sí solo. Marcado es lo que haces con el texto. Se marca el texto del mismo modo que en un programa de edición de textos con encabezados, viñetas, negrita, etc. Lenguaje es lo que es HTML. Este lenguaje hace uso de muchos términos en inglés.
¿Y la X de XHTML?
@borjamulleras| www.md360.es | [email protected]
Un ejemplo de HTML
@borjamulleras| www.md360.es | [email protected]
Crear pequeños códigos de HTML para formatar mis entradas en la web o en el blog.
Entender como colocar los códigos de Google Analy:cs y otros servicios de la nube.
Entender como mejorar el SEO On-‐Page.
Poder personalizar algunos CMS con es:los propios.
Crear una página web.
¿Para que os sirve saber HTML y CSS?
@borjamulleras| www.md360.es | [email protected]
¿Para que os sirve saber HTML y CSS?
@borjamulleras| www.md360.es | [email protected]
¿Para que os sirve saber HTML y CSS?
@borjamulleras| www.md360.es | [email protected]
¿Qué versión?
HTML 4.01 es del año 1999
HTML 5.0 es del año 2012.
Diferencias entre HTML 5 y 4: la esencial elimina FLASH http://www.ismarigrafica.com/web-y-otros-asuntos/10-diferencias-esenciales-entre-html4-y-html5/
¿Lo soportan los navegadores? http://www.findmebyip.com/litmus/
@borjamulleras| www.md360.es | [email protected]
¿Qué versión?
Navegador usado para visitar una página web entre 1/1/2013 y 26/2/2013
@borjamulleras| www.md360.es | [email protected]
¿Qué versión?
Versiones de IE usado para visitar una página web entre 1/1/2013 y 26/2/2013
@borjamulleras| www.md360.es | [email protected]
¿Qué versión?
@borjamulleras| www.md360.es | [email protected]
Etiquetas y atributos
Llamamos tags a las palabras reservadas que indicarán el formato del texto. Para distinguirlas de éste, serán enmarcadas entre los símbolos ‘<‘ y ‘>‘
Etiquetas llenas: ...texto normal <marca>texto afectado por la marca</marca>resto del texto...
...texto normal <B>Texto en negrita</B>resto del texto…
Etiquetas vacías: Estos elementos no requieren de la marca final, ya que
normalmente no producen un efecto sobre el texto en sí. La marca <HR> muestra una línea horizontal en la pantalla.
Etiquetas con atributos: <marca atributo1 atributo2=numerico atributo3=“alfanumerico”>texto afectado</marca>
<A HREF=“curso.htm”>Pica aquí para ir al curso</A>
@borjamulleras| www.md360.es | [email protected]
No dis:nción mayúsculas y minúsculas.
No detecta espacios en blanco e ignora los saltos de línea.
Los navegadores ignoran toda e:queta que no reconozcan sin dar ningún error.
Comentarios: <!–
Todo texto y <TAGS> incluidos aquí son ignorados y no se muestran en su visualización.
-‐-‐>
Consideraciones generales HTML
@borjamulleras| www.md360.es | [email protected]
<HTML> <HEAD>
<TITLE>Este es mi primer documento en HTML</TITLE> </HEAD> <BODY>
Hola <B>Mundo!</B> <HR> Este es mi primer documento en html. <!-‐-‐ si esto aparece es que me he equivocado -‐-‐>
</BODY> </HTML>
Tu primer documento HTML
@borjamulleras| www.md360.es | [email protected]
Body - Atributos de BODY
La marca BODY soporta algunos atributos - OBSOLETO: TEXT: color del texto. BGCOLOR: color de fondo de la pagina.
<BODY TEXT="#0000FF" BGCOLOR="#FF00FF”>
Notación RGB http://www.javascripter.net/faq/rgbtohex.htm
http://www.josesupo.com/paleta-de-color-y-conversor-rgb-hexadecimal/comment-page-1
@borjamulleras| www.md360.es | [email protected]
Body - Tipos de letra
Cabecera: <Hn>texto de cabecera</Hn> n=1,2,3,4,5,6
@borjamulleras| www.md360.es | [email protected]
Body - Tipos de letra
@borjamulleras| www.md360.es | [email protected]
Body - Tipos de letra
<FONT color=“color” SIZE=“tamaño” FACE=“tipo_de_letra”>texto afectado</FONT>
@borjamulleras| www.md360.es | [email protected]
Body - Separadores bloques de texto
<P></P> <HR> <BR>
@borjamulleras| www.md360.es | [email protected]
Body - Centrar texto
<CENTER></CENTER>
http://www.w3schools.com/tags/
@borjamulleras| www.md360.es | [email protected]
Body - Imagenes
<IMG SRC=“” ALT=“” width=“” height=“”>
http://www.w3schools.com/tags/
@borjamulleras| www.md360.es | [email protected]
Body - enlaces
<A HREF=“”>Bloque afectado por el enlace</A>
http://www.w3schools.com/tags/
@borjamulleras| www.md360.es | [email protected]
Body - Caracteres especiales
http://ascii.cl/es/codigos-html.htm
Espacio en blanco
Acento ACUTE á,é,í,ó,ú &xacute; x=a,e,i,o,u,A,E,I,O,U
Acento GRAVE à,è,ì,ò,ù &xgrave; x=a,e,i,o,u,A,E,I,O,U
ñ &n:lde; / &N:lde;
Ç,ç Ç
€ €
<,> <, >
@borjamulleras| www.md360.es | [email protected]
<HTML> <HEAD>
<TITLE>Este es mi primer documento en HTML</TITLE> </HEAD> <BODY>
Hola <B>Mundo!</B> <HR> Este es mi primer documento en html. <!-‐-‐ si esto aparece es que me he equivocado -‐-‐>
</BODY> </HTML>
Tu primer documento HTML
@borjamulleras| www.md360.es | [email protected]
<HTML> <HEAD>
<TITLE>Este es mi primer documento en HTML</TITLE> <meta name="descrip:on" content=“Curso HTML y CSS"> <meta name="keywords" content="HTML,CSS, "> <meta name="author" content=“Borja Mulleras"></HEAD>
<BODY> ….
</BODY> </HTML>
HEAD - Elementos
@borjamulleras| www.md360.es | [email protected]
Ejercicio
Título de la página tanto en el navegador como en la página en si.
Texto cualquiera: http://es.lipsum.com/
Texto en negrita.
Texto resaltado.
Texto en color rojo.
Con saltos de párrafo.
Una línea horizontal de separación.
Colocar una imagen centrada con un link a http://nhbarcelona.com/
@borjamulleras| www.md360.es | [email protected]
Listas sin Orden
@borjamulleras| www.md360.es | [email protected]
Listas con Orden
@borjamulleras| www.md360.es | [email protected]
Tablas
Una tabla es una forma flexible de formatear el contenido de una página web.
Estructura de datos: formato tabla de datos.
Dar forma (estructurar) a una página web.
@borjamulleras| www.md360.es | [email protected]
Tablas
@borjamulleras| www.md360.es | [email protected]
Tablas
@borjamulleras| www.md360.es | [email protected]
Tablas
@borjamulleras| www.md360.es | [email protected]
Tablas
@borjamulleras| www.md360.es | [email protected]
Tablas - Etiquetas
Funcionamiento básico de las tablas: http://www.htmlpoint.com/guida/html_11.htm
Ejemplos de tablas: http://www.turinconenlaweb.com/blog/ejemplo-con-tablas-en-html
@borjamulleras| www.md360.es | [email protected]
Tablas – atributo colspan
@borjamulleras| www.md360.es | [email protected]
Tablas – atributo rowspan
@borjamulleras| www.md360.es | [email protected]
Tablas – ejercicio
@borjamulleras| www.md360.es | [email protected]
Formularios
<FORM NAME=“nombre” ACTION=“[URL]” METHOD=“Post | Get”>
Campos de introducción info
</FORM>
@borjamulleras| www.md360.es | [email protected]
Formularios – Input Texto
<FORM NAME=“nombre” ACTION=“[URL]” METHOD=“Post | Get”>
First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname">
</FORM>
@borjamulleras| www.md360.es | [email protected]
Formularios – Input Password
<FORM NAME=“nombre” ACTION=“[URL]” METHOD=“Post | Get”>
Password: <input type="password" name="pwd">
</FORM>
@borjamulleras| www.md360.es | [email protected]
Formularios – Radio Buttons
<FORM NAME=“nombre” ACTION=“[URL]” METHOD=“Post | Get”>
<input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female
</FORM>
@borjamulleras| www.md360.es | [email protected]
Formularios – Checkbox
<FORM NAME=“nombre” ACTION=“[URL]” METHOD=“Post | Get”>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car
</FORM>
@borjamulleras| www.md360.es | [email protected]
Formularios – Lista desplegable
<FORM NAME=“nombre” ACTION=“[URL]” METHOD=“Post | Get”>
<select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>
</FORM>
@borjamulleras| www.md360.es | [email protected]
Formularios – Texto libre
<FORM NAME=“nombre” ACTION=“[URL]” METHOD=“Post | Get”>
<textarea rows="10" cols="30"> The cat was playing in the garden. </textarea>
</FORM>
@borjamulleras| www.md360.es | [email protected]
Formularios – Submit
<FORM NAME=“nombre” ACTION=“[URL]” METHOD=“Post | Get”>
<input type="submit" value=“Enviar">
</FORM>
@borjamulleras| www.md360.es | [email protected]
Formularios – Ejemplo <form action="MAILTO:[email protected]" method="post" enctype="text/plain"> Name:<br> <input type="text" name="name" value="your name"><br> E-mail:<br> <input type="text" name="mail" value="your email"><br> Comment:<br> <input type="text" name="comment" value="your comment" size="50"><br><br> <input type="submit" value="Send"> <input type="reset" value="Reset"> </form>
@borjamulleras| www.md360.es | [email protected]
Formularios – Ejercicio