Primera clase de HTML

Clase 1 de Web
Profesor Jorge Llantén B.
Diseñador Gráﬁco Publicitario
www.j2.cl /wwwj2cl @jorgellanten jorgellantenb /jorgellanten /jorgellanten
jueves, 12 de septiembre de 13

Recomendaciones antes de empezar

52.7%4%1.7% 27.9%

Todos los problemas de un desarrollador web
empiezan con I y terminan con E
(12.7%)
52.7%4%1.7% 27.9%

Edición de código en Dreamweaver, Edge
Code, Brackets, Coda, etc.

Edición de código en Dreamweaver, Edge
Code, Brackets, Coda, etc.
Los guerreros usan “Block de Notas”
o “Textedit”

Que es HTML?

Que es HTML?
HyperText Markup Language

Observa este documento HTML
Ambos corresponden al mismo “index.html”
Editor HTML Navegador
http://www.csszengarden.com

Estructura típica HTML
Esto es un párrafo

Etiqueta de apertura

Etiqueta de apertura Etiqueta de cierre

Nombre
atributo

Nombre
atributo
Valor
atributo

Nombre
atributo
Valor
atributo
Contenido

Estructura básica de un HTML

<!DOCTYPE html>

Especiﬁcación del lenguaje y la versión
del documento
<!DOCTYPE html>

<html>
</html>
del documento
<!DOCTYPE html>

<html>
</html>
del documento
<!DOCTYPE html>
<html lang=”es”>
</html>

<html>
</html>
del documento
<!DOCTYPE html>
Indica el comienzo y el ﬁnal de un
documento HTML.
Ninguna etiqueta o documento puede
colocarse antes o después de esta
etiqueta.
</html>

<html>
</html>
del documento
<!DOCTYPE html>
documento HTML.
etiqueta.
</html>
<head>
</head>

<html>
</html>
del documento
<!DOCTYPE html>
documento HTML.
etiqueta.
</html>
<head>
</head>
Contiene información relativa al
documento, como el título, hoja de estilo
a utilizar y meta información para
buscadores.

<html>
</html>
del documento
<!DOCTYPE html>
documento HTML.
etiqueta.
</html>
<head>
</head>
buscadores.
<body>
</body>

<html>
</html>
del documento
<!DOCTYPE html>
documento HTML.
etiqueta.
</html>
<head>
</head>
buscadores.
Corresponde al contenido de nuestro
sitio y será visible para los visitantes.
<body>
</body>

<!DOCTYPE html>
<head>
</head>
<body>
</body>
</html>

Nuestras primeras etiquetas HTML

Párrafo

Párrafo
<h1> ...hasta...<h6> Encabezados o títulos con 6 grados
de importancia

Párrafo
de importancia
<a> Enlaces o vínculos

Párrafo
de importancia
 Énfasis fuerte o marcado para su
contenido, se ve en negritas.

Párrafo
de importancia
 Énfasis menos fuerte que strong, se
ve en cursiva.

Párrafo
de importancia
ve en cursiva.
<ul>, <ol>, <li> Listas ordenadas y desordenadas

Párrafo
de importancia
ve en cursiva.
<ul>, <ol>, <li> Listas ordenadas y desordenadas
<img> Imagen

Etiquetas HTML: Enlaces
URL absoluta
URL relativa

URL absoluta
URL relativa
Incluyen todas las partes de la URL (protocolo,
servidor, ruta)

URL absoluta
URL relativa
servidor, ruta)
ej:
http://www.ejemplo.cl/ruta1/pagina.html

URL absoluta
URL relativa
servidor, ruta)
Prescinden de algunas partes de las URL para
hacerlas más breves
ej:

URL absoluta
URL relativa
servidor, ruta)
Prescinden de algunas partes de las URL para
hacerlas más breves
ej:
ej:
/ruta1/pagina.html

<a> : Crear enlaces internos o externos

<a href=”http://www.google.com”>Ir a Google</a>

<a href=”http://www.google.com”>Ir a Google</a>
Ir a Google

lugar a donde nos
llevará el vínculo

lugar a donde nos
título del
vínculo

lugar a donde nos
título del
vínculo
en que
ventana se
abrirá

lugar a donde nos
título del
vínculo
en que
ventana se
abrirá
_self: abre el vínculo en la misma ventana
_blank: abre cada vínculo en una ventana nueva
new: abre cada vínculo en solo 1 ventana nueva

<a href=”#arriba”>Subir</a>

<a href=”mailto:jorge@j2.cl”>Escríbame</a>

<a href=”doc/1.pdf”>bajar documento</a>

<a href=”tel:+56995555555”>Llámame</a>

<a href=”tel:+56995555555”>Llámame</a>
<a href=”sms:+56995555555”>Mensaje de texto</a>

Primera clase de HTML

Más contenido relacionado

La actualidad más candente (20)

Similar a Primera clase de HTML (20)

Más de Jorge Llanten (20)

Último (20)

Primera clase de HTML