Primera clase de HTML

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

http://www.facebook.com/wwwj2cl










http://www.j2.cl

http://www.j2.cl

http://www.j2.cl

http://www.j2.cl

http://www.j2.cl

http://www.j2.cl

http://www.j2.cl

http://www.j2.cl

http://www.j2.cl

http://www.j2.cl

http://www.linkedin.com/jorgellanten










http://www.twitter.com/jorgellanten










http://www.youtube.com/jorgellanten










mailto:[email protected]?subject=Enviado%20desde%20presentaci%C3%B3n%20de%20SlideShare










Recomendaciones antes de empezar



!".#%$%%.#% "#.&%



Todos los problemas de un desarrollador web empiezan con I y terminan con E

(%".#%)

!".#%$%%.#% "#.&%


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





Nombreatributo





Nombreatributo

Valoratributo





Nombreatributo

Valoratributo

Contenido


Estructura básica de un HTML



<!DOCTYPE html>



Especificación del lenguaje y la versión del documento

<!DOCTYPE html>


<html></html>



<!DOCTYPE html>


<html></html>



<!DOCTYPE html>

<html lang=”es”></html>


<html></html>



<!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></html>



<!DOCTYPE html>



<head></head>


<html></html>



<!DOCTYPE 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>



<!DOCTYPE html>



<head></head>


<body></body>


<html></html>



<!DOCTYPE html>



<head></head>


Corresponde al contenido de nuestro sitio y será visible para los visitantes.

<body></body>



<!DOCTYPE html>

<head></head>

<body></body>




<!DOCTYPE html>

<head></head>

<body></body>




<!DOCTYPE html>

<head></head>

<body></body>

<html lang=”es”>

</html>jueves, 12 de septiembre de 13

Nuestras primeras etiquetas HTML



 Párrafo



 Párrafo

<h!> ...hasta...<h"> Encabezados o títulos con " grados de importancia



 Párrafo


<a> Enlaces o vínculos



 Párrafo



 Énfasis fuerte o marcado para su contenido, se ve en negritas.



 Párrafo




 Énfasis menos fuerte que strong, se ve en cursiva.



 Párrafo





<ul>, <ol>, <li> Listas ordenadas y desordenadas



 Párrafo





<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

Incluyen todas las partes de la URL (protocolo, servidor, ruta)ej:http://www.ejemplo.cl/ruta#/pagina.html


http://www.ejemplo.cl/ruta1/pagina.html



URL absoluta

URL relativa


Prescinden de algunas partes de las URL para hacerlas más breves

ej:http://www.ejemplo.cl/ruta#/pagina.html





URL absoluta

URL relativa


Prescinden de algunas partes de las URL para hacerlas más breves

ej:http://www.ejemplo.cl/ruta#/pagina.html

ej:/ruta#/pagina.html









<a> : Crear enlaces internos o externos




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


http://www.google.com




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

Ir a Google





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




http://www.j2.cl

http://www.j2.cl




lugar a donde nos llevará el vínculo




http://www.j2.cl

http://www.j2.cl





título del vínculo




http://www.j2.cl

http://www.j2.cl






en que ventana se

abrirá




http://www.j2.cl

http://www.j2.cl






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




http://www.j2.cl

http://www.j2.cl








<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=”tel:+$"%%$$$$$$$”>Llámame</a>

<a href=”sms:+$"%%$$$$$$$”>Mensaje de texto</a>

Design

Primera clase de HTML