• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Primera clase de HTML
 

Primera clase de HTML

on

  • 2,027 views

presentación de la primera clase de html para mis alumnos el Instituto Profesional Los Leones de Santiago - Chile

presentación de la primera clase de html para mis alumnos el Instituto Profesional Los Leones de Santiago - Chile

Statistics

Views

Total Views
2,027
Views on SlideShare
553
Embed Views
1,474

Actions

Likes
0
Downloads
22
Comments
0

1 Embed 1,474

http://j2designer.wordpress.com 1474

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Primera clase de HTML Primera clase de HTML Presentation Transcript

    • 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
    • Recomendaciones antes de empezar jueves, 12 de septiembre de 13
    • Recomendaciones antes de empezar 52.7%4%1.7% 27.9% jueves, 12 de septiembre de 13
    • 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
    • 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 HTML Ambos 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 Nombre atributo 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 Nombre atributo Valor atributo 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 Nombre atributo Valor atributo 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 <h1> ...hasta...<h6> Encabezados o títulos con 6 grados de importancia jueves, 12 de septiembre de 13
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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/ruta1/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/ruta1/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/ruta1/pagina.html ej: /ruta1/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.j2.cl”>Ir a J2</a> jueves, 12 de septiembre de 13
    • 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
    • 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
    • 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
    • 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
    • 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
    • Etiquetas HTML: Enlaces <a href=”http://www.j2.cl”>Ir a J2</a> jueves, 12 de septiembre de 13
    • Etiquetas HTML: Enlaces <a href=”http://www.j2.cl”>Ir a J2</a> <a href=”#arriba”>Subir</a> jueves, 12 de septiembre de 13
    • 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
    • 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
    • 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
    • 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