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


Un poquito de historia

http://www.zakon.org/robert/internet/timeline/


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


Un ejemplo de HTML


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?


¿Para que os sirve saber HTML y CSS?


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


¿Qué versión?

Navegador usado para visitar una página web entre 1/1/2013 y 26/2/2013


¿Qué versión?

Versiones de IE usado para visitar una página web entre 1/1/2013 y 26/2/2013


¿Qué versión?


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>


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


<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


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


Body - Tipos de letra

Cabecera: <Hn>texto de cabecera</Hn> n=1,2,3,4,5,6



<FONT color=“color” SIZE=“tamaño” FACE=“tipo_de_letra”>texto afectado</FONT>


Body - Separadores bloques de texto

<P></P> <HR> <BR>


Body - Centrar texto

<CENTER></CENTER>

http://www.w3schools.com/tags/


Body - Imagenes

<IMG SRC=“” ALT=“” width=“” height=“”>



Body - enlaces

<A HREF=“”>Bloque afectado por el enlace</A>



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;

Ç,ç Ç

€ €

<,> <, >


<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


<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


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/


Listas sin Orden


Listas con Orden


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.


Tablas


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


Tablas – atributo colspan


Tablas – atributo rowspan


Tablas – ejercicio


Formularios

<FORM NAME=“nombre” ACTION=“[URL]” METHOD=“Post | Get”>

Campos de introducción info

</FORM>


Formularios – Input Texto


First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname">

</FORM>


Formularios – Input Password


Password: <input type="password" name="pwd">

</FORM>


Formularios – Radio Buttons


<input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female

</FORM>


Formularios – Checkbox


<input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car

</FORM>


Formularios – Lista desplegable


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


Formularios – Texto libre


<textarea rows="10" cols="30"> The cat was playing in the garden. </textarea>

</FORM>


Formularios – Submit


<input type="submit" value=“Enviar">

</FORM>


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>


Formularios – Ejercicio

Curso de HTML y CSS

Technology

Transcript of Curso de HTML y CSS