primera clase de html
DESCRIPTION
presentación de la primera clase de html para mis alumnos el Instituto Profesional Los Leones de Santiago - ChileTRANSCRIPT
![Page 1: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/1.jpg)
Clase ! de Web
Profesor Jorge Llantén B.Diseñador Gráfico Publicitario
www.j!.cl /wwwj!cl @jorgellanten jorgellantenb /jorgellanten /jorgellanten
jueves, 12 de septiembre de 13
![Page 2: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/2.jpg)
Recomendaciones antes de empezar
jueves, 12 de septiembre de 13
![Page 3: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/3.jpg)
Recomendaciones antes de empezar
!".#%$%%.#% "#.&%
jueves, 12 de septiembre de 13
![Page 4: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/4.jpg)
Recomendaciones antes de empezar
Todos los problemas de un desarrollador web empiezan con I y terminan con E
(%".#%)
!".#%$%%.#% "#.&%
jueves, 12 de septiembre de 13
![Page 5: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/5.jpg)
Edición de código en Dreamweaver, Edge Code, Brackets, Coda, etc.
jueves, 12 de septiembre de 13
![Page 6: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/6.jpg)
Edición de código en Dreamweaver, Edge Code, Brackets, Coda, etc.
jueves, 12 de septiembre de 13
![Page 7: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/7.jpg)
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
![Page 8: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/8.jpg)
Que es HTML?
jueves, 12 de septiembre de 13
![Page 9: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/9.jpg)
Que es HTML?HyperText Markup Language
jueves, 12 de septiembre de 13
![Page 10: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/10.jpg)
Observa este documento HTMLAmbos corresponden al mismo “index.html”
Editor HTML Navegador
http://www.csszengarden.com
jueves, 12 de septiembre de 13
![Page 11: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/11.jpg)
Estructura típica HTML
<p class=”normal”>Esto es un párrafo</p>
jueves, 12 de septiembre de 13
![Page 12: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/12.jpg)
Estructura típica HTML
<p class=”normal”>Esto es un párrafo</p>
Etiqueta de apertura
jueves, 12 de septiembre de 13
![Page 13: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/13.jpg)
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
![Page 14: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/14.jpg)
Estructura típica HTML
<p class=”normal”>Esto es un párrafo</p>
Etiqueta de apertura Etiqueta de cierre
Nombreatributo
jueves, 12 de septiembre de 13
![Page 15: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/15.jpg)
Estructura típica HTML
<p class=”normal”>Esto es un párrafo</p>
Etiqueta de apertura Etiqueta de cierre
Nombreatributo
Valoratributo
jueves, 12 de septiembre de 13
![Page 16: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/16.jpg)
Estructura típica HTML
<p class=”normal”>Esto es un párrafo</p>
Etiqueta de apertura Etiqueta de cierre
Nombreatributo
Valoratributo
Contenido
jueves, 12 de septiembre de 13
![Page 17: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/17.jpg)
Estructura básica de un HTML
jueves, 12 de septiembre de 13
![Page 18: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/18.jpg)
Estructura básica de un HTML
<!DOCTYPE html>
jueves, 12 de septiembre de 13
![Page 19: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/19.jpg)
Estructura básica de un HTML
Especificación del lenguaje y la versión del documento
<!DOCTYPE html>
jueves, 12 de septiembre de 13
![Page 20: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/20.jpg)
<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
![Page 21: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/21.jpg)
<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
![Page 22: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/22.jpg)
<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
![Page 23: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/23.jpg)
<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
![Page 24: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/24.jpg)
<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
![Page 25: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/25.jpg)
<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
![Page 26: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/26.jpg)
<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
![Page 27: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/27.jpg)
Estructura básica de un HTML
<!DOCTYPE html>
<head></head>
<body></body>
<html lang=”es”></html>
jueves, 12 de septiembre de 13
![Page 28: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/28.jpg)
Estructura básica de un HTML
<!DOCTYPE html>
<head></head>
<body></body>
<html lang=”es”></html>
jueves, 12 de septiembre de 13
![Page 29: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/29.jpg)
Estructura básica de un HTML
<!DOCTYPE html>
<head></head>
<body></body>
<html lang=”es”>
</html>jueves, 12 de septiembre de 13
![Page 30: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/30.jpg)
Nuestras primeras etiquetas HTML
jueves, 12 de septiembre de 13
![Page 31: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/31.jpg)
Nuestras primeras etiquetas HTML
<p> Párrafo
jueves, 12 de septiembre de 13
![Page 32: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/32.jpg)
Nuestras primeras etiquetas HTML
<p> Párrafo
<h!> ...hasta...<h"> Encabezados o títulos con " grados de importancia
jueves, 12 de septiembre de 13
![Page 33: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/33.jpg)
Nuestras primeras etiquetas HTML
<p> Párrafo
<h!> ...hasta...<h"> Encabezados o títulos con " grados de importancia
<a> Enlaces o vínculos
jueves, 12 de septiembre de 13
![Page 34: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/34.jpg)
Nuestras primeras etiquetas HTML
<p> Párrafo
<h!> ...hasta...<h"> Encabezados o títulos con " 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
![Page 35: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/35.jpg)
Nuestras primeras etiquetas HTML
<p> Párrafo
<h!> ...hasta...<h"> Encabezados o títulos con " 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
![Page 36: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/36.jpg)
Nuestras primeras etiquetas HTML
<p> Párrafo
<h!> ...hasta...<h"> Encabezados o títulos con " 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
![Page 37: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/37.jpg)
Nuestras primeras etiquetas HTML
<p> Párrafo
<h!> ...hasta...<h"> Encabezados o títulos con " 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
![Page 38: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/38.jpg)
Etiquetas HTML: Enlaces
URL absoluta
URL relativa
jueves, 12 de septiembre de 13
![Page 39: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/39.jpg)
Etiquetas HTML: Enlaces
URL absoluta
URL relativa
Incluyen todas las partes de la URL (protocolo, servidor, ruta)
jueves, 12 de septiembre de 13
![Page 40: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/40.jpg)
Etiquetas HTML: Enlaces
URL absoluta
URL relativa
Incluyen todas las partes de la URL (protocolo, servidor, ruta)ej:http://www.ejemplo.cl/ruta#/pagina.html
jueves, 12 de septiembre de 13
![Page 41: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/41.jpg)
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/ruta#/pagina.html
jueves, 12 de septiembre de 13
![Page 42: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/42.jpg)
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/ruta#/pagina.html
ej:/ruta#/pagina.html
jueves, 12 de septiembre de 13
![Page 43: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/43.jpg)
Etiquetas HTML: Enlaces
jueves, 12 de septiembre de 13
![Page 44: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/44.jpg)
Etiquetas HTML: Enlaces
<a> : Crear enlaces internos o externos
jueves, 12 de septiembre de 13
![Page 45: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/45.jpg)
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
![Page 46: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/46.jpg)
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
![Page 47: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/47.jpg)
Etiquetas HTML: Enlaces
<a href=”http://www.j!.cl”>Ir a J!</a>
jueves, 12 de septiembre de 13
![Page 48: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/48.jpg)
Etiquetas HTML: Enlaces
<a href=”http://www.j!.cl”>Ir a J!</a>
<a href="http://www.j#.cl" title="Ir a j#" target="new">Ir a J#</a>
jueves, 12 de septiembre de 13
![Page 49: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/49.jpg)
Etiquetas HTML: Enlaces
<a href=”http://www.j!.cl”>Ir a J!</a>
<a href="http://www.j#.cl" title="Ir a j#" target="new">Ir a J#</a>
lugar a donde nos llevará el vínculo
jueves, 12 de septiembre de 13
![Page 50: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/50.jpg)
Etiquetas HTML: Enlaces
<a href=”http://www.j!.cl”>Ir a J!</a>
<a href="http://www.j#.cl" title="Ir a j#" target="new">Ir a J#</a>
lugar a donde nos llevará el vínculo
título del vínculo
jueves, 12 de septiembre de 13
![Page 51: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/51.jpg)
Etiquetas HTML: Enlaces
<a href=”http://www.j!.cl”>Ir a J!</a>
<a href="http://www.j#.cl" title="Ir a j#" target="new">Ir a J#</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
![Page 52: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/52.jpg)
Etiquetas HTML: Enlaces
<a href=”http://www.j!.cl”>Ir a J!</a>
<a href="http://www.j#.cl" title="Ir a j#" target="new">Ir a J#</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 nuevanew: abre cada vínculo en solo # ventana nueva
jueves, 12 de septiembre de 13
![Page 53: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/53.jpg)
Etiquetas HTML: Enlaces
<a href=”http://www.j!.cl”>Ir a J!</a>
jueves, 12 de septiembre de 13
![Page 54: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/54.jpg)
Etiquetas HTML: Enlaces
<a href=”http://www.j!.cl”>Ir a J!</a>
<a href=”#arriba”>Subir</a>
jueves, 12 de septiembre de 13
![Page 55: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/55.jpg)
Etiquetas HTML: Enlaces
<a href=”http://www.j!.cl”>Ir a J!</a>
<a href=”#arriba”>Subir</a>
<a href=”mailto:jorge@j!.cl”>Escríbame</a>
jueves, 12 de septiembre de 13
![Page 56: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/56.jpg)
Etiquetas HTML: Enlaces
<a href=”http://www.j!.cl”>Ir a J!</a>
<a href=”#arriba”>Subir</a>
<a href=”mailto:jorge@j!.cl”>Escríbame</a>
<a href=”doc/#.pdf”>bajar documento</a>
jueves, 12 de septiembre de 13
![Page 57: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/57.jpg)
Etiquetas HTML: Enlaces
<a href=”http://www.j!.cl”>Ir a J!</a>
<a href=”#arriba”>Subir</a>
<a href=”mailto:jorge@j!.cl”>Escríbame</a>
<a href=”doc/#.pdf”>bajar documento</a>
<a href=”tel:+$"%%$$$$$$$”>Llámame</a>
jueves, 12 de septiembre de 13
![Page 58: Primera clase de HTML](https://reader038.vdocuments.pub/reader038/viewer/2022102804/546d930baf795967298b53f1/html5/thumbnails/58.jpg)
Etiquetas HTML: Enlaces
<a href=”http://www.j!.cl”>Ir a J!</a>
<a href=”#arriba”>Subir</a>
<a href=”mailto:jorge@j!.cl”>Escríbame</a>
<a href=”doc/#.pdf”>bajar documento</a>
<a href=”tel:+$"%%$$$$$$$”>Llámame</a>
<a href=”sms:+$"%%$$$$$$$”>Mensaje de texto</a>
jueves, 12 de septiembre de 13