primera clase de html
Post on 18-Nov-2014
2.781 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
Recomendaciones antes de empezar
jueves, 12 de septiembre de 13
Recomendaciones antes de empezar
!".#%$%%.#% "#.&%
jueves, 12 de septiembre de 13
Recomendaciones antes de empezar
Todos los problemas de un desarrollador web empiezan con I y terminan con E
(%".#%)
!".#%$%%.#% "#.&%
jueves, 12 de septiembre de 13
Edición de código en Dreamweaver, Edge Code, Brackets, Coda, etc.
jueves, 12 de septiembre de 13
Edición de código en Dreamweaver, Edge Code, Brackets, Coda, etc.
jueves, 12 de septiembre de 13
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
Que es HTML?
jueves, 12 de septiembre de 13
Que es HTML?HyperText Markup Language
jueves, 12 de septiembre de 13
Observa este documento HTMLAmbos corresponden al mismo “index.html”
Editor HTML Navegador
http://www.csszengarden.com
jueves, 12 de septiembre de 13
Estructura típica HTML
<p class=”normal”>Esto es un párrafo</p>
jueves, 12 de septiembre de 13
Estructura típica HTML
<p class=”normal”>Esto es un párrafo</p>
Etiqueta de apertura
jueves, 12 de septiembre de 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
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
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
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
Estructura básica de un HTML
jueves, 12 de septiembre de 13
Estructura básica de un HTML
<!DOCTYPE html>
jueves, 12 de septiembre de 13
Estructura básica de un HTML
Especificación del lenguaje y la versión del documento
<!DOCTYPE html>
jueves, 12 de septiembre de 13
<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
<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
<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
<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
<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
<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
<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
Estructura básica de un HTML
<!DOCTYPE html>
<head></head>
<body></body>
<html lang=”es”></html>
jueves, 12 de septiembre de 13
Estructura básica de un HTML
<!DOCTYPE html>
<head></head>
<body></body>
<html lang=”es”></html>
jueves, 12 de septiembre de 13
Estructura básica de un HTML
<!DOCTYPE html>
<head></head>
<body></body>
<html lang=”es”>
</html>jueves, 12 de septiembre de 13
Nuestras primeras etiquetas HTML
jueves, 12 de septiembre de 13
Nuestras primeras etiquetas HTML
<p> Párrafo
jueves, 12 de septiembre de 13
Nuestras primeras etiquetas HTML
<p> Párrafo
<h!> ...hasta...<h"> Encabezados o títulos con " grados de importancia
jueves, 12 de septiembre de 13
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
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
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
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
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
Etiquetas HTML: Enlaces
URL absoluta
URL relativa
jueves, 12 de septiembre de 13
Etiquetas HTML: Enlaces
URL absoluta
URL relativa
Incluyen todas las partes de la URL (protocolo, servidor, ruta)
jueves, 12 de septiembre de 13
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
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
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
Etiquetas HTML: Enlaces
jueves, 12 de septiembre de 13
Etiquetas HTML: Enlaces
<a> : Crear enlaces internos o externos
jueves, 12 de septiembre de 13
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
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
Etiquetas HTML: Enlaces
<a href=”http://www.j!.cl”>Ir a J!</a>
jueves, 12 de septiembre de 13
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
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
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
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
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
Etiquetas HTML: Enlaces
<a href=”http://www.j!.cl”>Ir a J!</a>
jueves, 12 de septiembre de 13
Etiquetas HTML: Enlaces
<a href=”http://www.j!.cl”>Ir a J!</a>
<a href=”#arriba”>Subir</a>
jueves, 12 de septiembre de 13
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
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
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
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
top related