Curso de HTML y CSS

HTML
El presente
es la Red
en evolución
continua
Barcelona, marzo 2013

@borjamulleras| www.md360.es | borja@md360.es
 Creado
en
1989-‐1991
por
Tim
Berners-‐Lee
en
el
CERN
con
ﬁnes

de
compar:r
información
cien=ﬁca.

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

<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
<FORM NAME=“nombre” ACTION=“[URL]” METHOD=“Post | Get”>
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
<FORM NAME=“nombre”
ACTION=“[URL]”
METHOD=“Post | Get”>
<input type="submit" value=“Enviar">
</FORM>

Formularios – Ejemplo
<form action="MAILTO:someone@example.com" 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

Recomendados

Recomendados

Más contenido relacionado

Similar a Curso de HTML y CSS

Similar a Curso de HTML y CSS (20)

Último

Último (13)

Curso de HTML y CSS