1. Clase 1 de Web
Profesor Jorge Llantén B.
Diseñador Gráfico Publicitario
www.j2.cl /wwwj2cl @jorgellanten jorgellantenb /jorgellanten /jorgellanten
jueves, 12 de septiembre de 13
4. Recomendaciones antes de empezar
Todos los problemas de un desarrollador web
empiezan con I y terminan con E
(12.7%)
52.7%4%1.7% 27.9%
jueves, 12 de septiembre de 13
5. Edición de código en Dreamweaver, Edge
Code, Brackets, Coda, etc.
jueves, 12 de septiembre de 13
6. Edición de código en Dreamweaver, Edge
Code, Brackets, Coda, etc.
jueves, 12 de septiembre de 13
7. Edición de código en Dreamweaver, Edge
Code, Brackets, Coda, etc.
Los guerreros usan “Block de Notas”
o “Textedit”
jueves, 12 de septiembre de 13
10. Observa este documento HTML
Ambos corresponden al mismo “index.html”
Editor HTML Navegador
http://www.csszengarden.com
jueves, 12 de septiembre de 13
12. Estructura típica HTML
<p class=”normal”>Esto es un párrafo</p>
Etiqueta de apertura
jueves, 12 de septiembre de 13
13. Estructura típica HTML
<p class=”normal”>Esto es un párrafo</p>
Etiqueta de apertura Etiqueta de cierre
jueves, 12 de septiembre de 13
14. Estructura típica HTML
<p class=”normal”>Esto es un párrafo</p>
Etiqueta de apertura Etiqueta de cierre
Nombre
atributo
jueves, 12 de septiembre de 13
15. Estructura típica HTML
<p class=”normal”>Esto es un párrafo</p>
Etiqueta de apertura Etiqueta de cierre
Nombre
atributo
Valor
atributo
jueves, 12 de septiembre de 13
16. Estructura típica HTML
<p class=”normal”>Esto es un párrafo</p>
Etiqueta de apertura Etiqueta de cierre
Nombre
atributo
Valor
atributo
Contenido
jueves, 12 de septiembre de 13
19. Estructura básica de un HTML
Especificación del lenguaje y la versión
del documento
<!DOCTYPE html>
jueves, 12 de septiembre de 13
20. <html>
</html>
Estructura básica de un HTML
Especificación del lenguaje y la versión
del documento
<!DOCTYPE html>
jueves, 12 de septiembre de 13
21. <html>
</html>
Estructura básica de un HTML
Especificación del lenguaje y la versión
del documento
<!DOCTYPE html>
<html lang=”es”>
</html>
jueves, 12 de septiembre de 13
22. <html>
</html>
Estructura básica de un HTML
Especificación del lenguaje y la versión
del documento
<!DOCTYPE html>
Indica el comienzo y el final de un
documento HTML.
Ninguna etiqueta o documento puede
colocarse antes o después de esta
etiqueta.
<html lang=”es”>
</html>
jueves, 12 de septiembre de 13
23. <html>
</html>
Estructura básica de un HTML
Especificación del lenguaje y la versión
del documento
<!DOCTYPE html>
Indica el comienzo y el final de un
documento HTML.
Ninguna etiqueta o documento puede
colocarse antes o después de esta
etiqueta.
<html lang=”es”>
</html>
<head>
</head>
jueves, 12 de septiembre de 13
24. <html>
</html>
Estructura básica de un HTML
Especificación del lenguaje y la versión
del documento
<!DOCTYPE html>
Indica el comienzo y el final de un
documento HTML.
Ninguna etiqueta o documento puede
colocarse antes o después de esta
etiqueta.
<html lang=”es”>
</html>
<head>
</head>
Contiene información relativa al
documento, como el título, hoja de estilo
a utilizar y meta información para
buscadores.
jueves, 12 de septiembre de 13
25. <html>
</html>
Estructura básica de un HTML
Especificación del lenguaje y la versión
del documento
<!DOCTYPE html>
Indica el comienzo y el final de un
documento HTML.
Ninguna etiqueta o documento puede
colocarse antes o después de esta
etiqueta.
<html lang=”es”>
</html>
<head>
</head>
Contiene información relativa al
documento, como el título, hoja de estilo
a utilizar y meta información para
buscadores.
<body>
</body>
jueves, 12 de septiembre de 13
26. <html>
</html>
Estructura básica de un HTML
Especificación del lenguaje y la versión
del documento
<!DOCTYPE html>
Indica el comienzo y el final de un
documento HTML.
Ninguna etiqueta o documento puede
colocarse antes o después de esta
etiqueta.
<html lang=”es”>
</html>
<head>
</head>
Contiene información relativa al
documento, como el título, hoja de estilo
a utilizar y meta información para
buscadores.
Corresponde al contenido de nuestro
sitio y será visible para los visitantes.
<body>
</body>
jueves, 12 de septiembre de 13
27. Estructura básica de un HTML
<!DOCTYPE html>
<head>
</head>
<body>
</body>
<html lang=”es”>
</html>
jueves, 12 de septiembre de 13
28. Estructura básica de un HTML
<!DOCTYPE html>
<head>
</head>
<body>
</body>
<html lang=”es”>
</html>
jueves, 12 de septiembre de 13
29. Estructura básica de un HTML
<!DOCTYPE html>
<head>
</head>
<body>
</body>
<html lang=”es”>
</html>
jueves, 12 de septiembre de 13
32. Nuestras primeras etiquetas HTML
<p> Párrafo
<h1> ...hasta...<h6> Encabezados o títulos con 6 grados
de importancia
jueves, 12 de septiembre de 13
33. Nuestras primeras etiquetas HTML
<p> Párrafo
<h1> ...hasta...<h6> Encabezados o títulos con 6 grados
de importancia
<a> Enlaces o vínculos
jueves, 12 de septiembre de 13
34. Nuestras primeras etiquetas HTML
<p> Párrafo
<h1> ...hasta...<h6> Encabezados o títulos con 6 grados
de importancia
<a> Enlaces o vínculos
<strong> Énfasis fuerte o marcado para su
contenido, se ve en negritas.
jueves, 12 de septiembre de 13
35. Nuestras primeras etiquetas HTML
<p> Párrafo
<h1> ...hasta...<h6> Encabezados o títulos con 6 grados
de importancia
<a> Enlaces o vínculos
<strong> Énfasis fuerte o marcado para su
contenido, se ve en negritas.
<em> Énfasis menos fuerte que strong, se
ve en cursiva.
jueves, 12 de septiembre de 13
36. Nuestras primeras etiquetas HTML
<p> Párrafo
<h1> ...hasta...<h6> Encabezados o títulos con 6 grados
de importancia
<a> Enlaces o vínculos
<strong> Énfasis fuerte o marcado para su
contenido, se ve en negritas.
<em> Énfasis menos fuerte que strong, se
ve en cursiva.
<ul>, <ol>, <li> Listas ordenadas y desordenadas
jueves, 12 de septiembre de 13
37. Nuestras primeras etiquetas HTML
<p> Párrafo
<h1> ...hasta...<h6> Encabezados o títulos con 6 grados
de importancia
<a> Enlaces o vínculos
<strong> Énfasis fuerte o marcado para su
contenido, se ve en negritas.
<em> Énfasis menos fuerte que strong, se
ve en cursiva.
<ul>, <ol>, <li> Listas ordenadas y desordenadas
<img> Imagen
jueves, 12 de septiembre de 13
39. Etiquetas HTML: Enlaces
URL absoluta
URL relativa
Incluyen todas las partes de la URL (protocolo,
servidor, ruta)
jueves, 12 de septiembre de 13
40. Etiquetas HTML: Enlaces
URL absoluta
URL relativa
Incluyen todas las partes de la URL (protocolo,
servidor, ruta)
ej:
http://www.ejemplo.cl/ruta1/pagina.html
jueves, 12 de septiembre de 13
41. Etiquetas HTML: Enlaces
URL absoluta
URL relativa
Incluyen todas las partes de la URL (protocolo,
servidor, ruta)
Prescinden de algunas partes de las URL para
hacerlas más breves
ej:
http://www.ejemplo.cl/ruta1/pagina.html
jueves, 12 de septiembre de 13
42. Etiquetas HTML: Enlaces
URL absoluta
URL relativa
Incluyen todas las partes de la URL (protocolo,
servidor, ruta)
Prescinden de algunas partes de las URL para
hacerlas más breves
ej:
http://www.ejemplo.cl/ruta1/pagina.html
ej:
/ruta1/pagina.html
jueves, 12 de septiembre de 13
45. Etiquetas HTML: Enlaces
<a> : Crear enlaces internos o externos
<a href=”http://www.google.com”>Ir a Google</a>
jueves, 12 de septiembre de 13
46. Etiquetas HTML: Enlaces
<a> : Crear enlaces internos o externos
<a href=”http://www.google.com”>Ir a Google</a>
Ir a Google
jueves, 12 de septiembre de 13
48. Etiquetas HTML: Enlaces
<a href=”http://www.j2.cl”>Ir a J2</a>
<a href="http://www.j2.cl" title="Ir a j2" target="new">Ir a J2</a>
jueves, 12 de septiembre de 13
49. Etiquetas HTML: Enlaces
<a href=”http://www.j2.cl”>Ir a J2</a>
<a href="http://www.j2.cl" title="Ir a j2" target="new">Ir a J2</a>
lugar a donde nos
llevará el vínculo
jueves, 12 de septiembre de 13
50. Etiquetas HTML: Enlaces
<a href=”http://www.j2.cl”>Ir a J2</a>
<a href="http://www.j2.cl" title="Ir a j2" target="new">Ir a J2</a>
lugar a donde nos
llevará el vínculo
título del
vínculo
jueves, 12 de septiembre de 13
51. Etiquetas HTML: Enlaces
<a href=”http://www.j2.cl”>Ir a J2</a>
<a href="http://www.j2.cl" title="Ir a j2" target="new">Ir a J2</a>
lugar a donde nos
llevará el vínculo
título del
vínculo
en que
ventana se
abrirá
jueves, 12 de septiembre de 13
52. Etiquetas HTML: Enlaces
<a href=”http://www.j2.cl”>Ir a J2</a>
<a href="http://www.j2.cl" title="Ir a j2" target="new">Ir a J2</a>
lugar a donde nos
llevará el vínculo
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
jueves, 12 de septiembre de 13
54. Etiquetas HTML: Enlaces
<a href=”http://www.j2.cl”>Ir a J2</a>
<a href=”#arriba”>Subir</a>
jueves, 12 de septiembre de 13
55. Etiquetas HTML: Enlaces
<a href=”http://www.j2.cl”>Ir a J2</a>
<a href=”#arriba”>Subir</a>
<a href=”mailto:jorge@j2.cl”>Escríbame</a>
jueves, 12 de septiembre de 13
56. Etiquetas HTML: Enlaces
<a href=”http://www.j2.cl”>Ir a J2</a>
<a href=”#arriba”>Subir</a>
<a href=”mailto:jorge@j2.cl”>Escríbame</a>
<a href=”doc/1.pdf”>bajar documento</a>
jueves, 12 de septiembre de 13
57. Etiquetas HTML: Enlaces
<a href=”http://www.j2.cl”>Ir a J2</a>
<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>
jueves, 12 de septiembre de 13
58. Etiquetas HTML: Enlaces
<a href=”http://www.j2.cl”>Ir a J2</a>
<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=”sms:+56995555555”>Mensaje de texto</a>
jueves, 12 de septiembre de 13