Curso de-diseño-web-lección-1-html
•
1 recomendación•373 vistas
El documento proporciona una introducción al lenguaje HTML, explicando que es el lenguaje fundamental de las páginas web y que se trata de un lenguaje de etiquetas donde cada contenido está marcado con una etiqueta. También describe elementos básicos como las etiquetas <html>, <head> y <body> y diferentes tipos de elementos como bloque y línea.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Curso de-diseño-web-lección-1-html
Similar a Curso de-diseño-web-lección-1-html (20)
Curso de-diseño-web-lección-1-html
- 1. 1 lección 1 curso de diseño web introducción al HTML www.vanadis.es formacion@vanadis.es
- 2. El HTML es el lenguaje fundamental de las páginas web www.vanadis.es formacion@vanadis.es
- 3. El HTML es un lenguaje sencillo e intuitivo, la mayor parte de una web es texto normal y corriente Las páginas web, en su origen, eran prácticamente iguales que las páginas de un libro, por eso muchos de sus elementos son similares La diferencia entre ambas es que las webs están escritas con hipertexto ¿Y qué es el hipertexto? Pues es un texto normal y corriente que nos permite navegar hacia otros textos en red O sea, que contiene enlaces o links a otros contenidos www.vanadis.es formacion@vanadis.es
- 4. Se trata de un lenguaje de etiquetas. Cada contenido de una web está marcado con una etiqueta para identificarlo, organizarlo y estructurarlo Las etiquetas tienen este aspecto: <etiqueta> En función del tipo de contenido que insertemos utilizaremos una etiqueta u otra. Hay muchos tipos de etiquetas. p.ej Un párrafo se etiquetará con la etiqueta <p> <p> Este es mi primer párrafo en HTML, ¡que ilusión! </p> www.vanadis.es formacion@vanadis.es
- 5. El HTML 5 es la última evolución del lenguaje HTML Se crea para aumentar la significación de los contenidos de la web (web semántica) y para añadir nuevos recursos de contenido. Mejora la experiencia de los usuarios y facilita la tarea a los buscadores para que reconozcan los contenidos de nuestra web. HTML (1991) HTML4 (1997) XHTML (2000) HTML5 (2009) www.vanadis.es formacion@vanadis.es
- 6. el lenguaje de etiquetas Elementos de las etiquetas Apertura <etiqueta> Cierre </etiqueta> Esquema habitual <etiqueta> contenido </etiqueta> Etiquetas vacías <etiqueta/> se abre y se cierra sin contenido en medio www.vanadis.es formacion@vanadis.es
- 7. elementos básicos de una web <html> documento html Indica el comienzo y el final de un documento HTML Todo lo que quede fuera se ignorará Se divide en head y body <head> la cabeza Información no visible sobre la página (idioma, codificación, archivos enlazados, etc.) Operaciones Título de la página (visible en el navegador) <body> el cuerpo Contiene todos los contenidos visibles para el usuario (párrafos de texto, imágenes, tablas, enlaces...) www.vanadis.es formacion@vanadis.es
- 8. atributos HTML 5 utiliza más de 100 etiquetas, pero con eso no basta para crear páginas complejas Sirven para personalizar e identificar a las etiquetas Dan sentido y contexto a los elementos Esquema habitual <etiqueta atributo=”nombre_atributo”> contenido </etiqueta> www.vanadis.es formacion@vanadis.es
- 9. atributos generales de HTML 4 Los atributos generales pueden ser usados sobre cualquier elemento HTML5 id Asigna una identificación única a un elemento. class Especifica una o más clases asignadas a un elemento. *La ID es única en toda la página para un elemento, la clase (class) puede ser común a varios elementos de una misma página. style Especifica una línea de estilo CSS para un elemento. title Especifica información adicional acerca de un elemento. Además de los 4 principales también están: dir, lang, tabindex, accesskey
- 10. El logo es un eleménto único en la web, por eso el atributo es id Los títulos de cada sección tienen propiedades comunes, por eso llevan un atributo class <img id=”logo”... /> <h2 class=”titulo_seccion”> Artículo destacado </h2> <h2 class=”titulo_seccion”> Artículos buenos </h2> www.vanadis.es formacion@vanadis.es
- 11. *atributos generales nuevos en HTML 5 contenteditable Especifica si el contenido de un elemento es editable o no. contextmenu Especifica un menú contextual para un elemento. El menú contextual aparece cuando un usuario hace clic en el elemento. draggable Especifica si un elemento es arrastrable o no. dropzone Especifica si los datos arrastrados son copiados, movidos o vinculados, cuando se dejan caer sobre un elemento. hidden Especifica que un elemento no es visible aún, o no es, relevante. spellcheck Especifica si el elemento debe tener su ortografía y gramática comprobada o no. www.vanadis.es formacion@vanadis.es
- 12. atributos habituales: id y class El valor de los atributos id y class, sólo pueden contener guiones medios (-), guiones bajos (_), letras y/o números, pero no pueden empezar por números. Los navegadores distinguen entre mayúsculas y minúsculas. Es recomendable utilizar minúsculas siempre. Se recomienda no utilizar letras como ñ, ç y acentos. Usos Correctos: Usos Incorrectos: id=”nombreatributo” id=”ñombreatributó” id=”nombre_atributo” id=”nombre atributo” www.vanadis.es formacion@vanadis.es
- 13. tipos de elementos en HTML Los elementos de HTML pueden ser de dos tipos en función del espacio que ocupan en la página: elementos de línea elementos de bloque www.vanadis.es formacion@vanadis.es
- 14. elementos de bloque (block) Empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea La mayoría de elementos de bloque pueden contener en su interior elementos en línea y otros elementos de bloque Ejemplos de elementos de bloque: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> (títulos) <p> (párrafo) Elemento de bloque Elemento de bloque www.vanadis.es formacion@vanadis.es
- 15. elementos de línea (inline) Sólo ocupan el espacio necesario para mostrar sus contenidos Los elementos en línea sólo pueden contener texto u otros elementos en línea Ejemplos de elementos de línea: <a> (enlaces y anclas) <img> (imágenes) Elemento de línea Elemento de línea Elemento de bloque www.vanadis.es formacion@vanadis.es
- 16. ejemplo1_elementos_bloque_linea.html Ejemplo 1 Elementos de bloque y de línea www.vanadis.es formacion@vanadis.es
- 17. ejemplo2_elementos_bloque_linea.html Ejemplo 2 Elementos de bloque y de línea www.vanadis.es formacion@vanadis.es
- 18. Recomendación Un plugin de firefox muy para desarrolladores: firebug Os permitirá explorar el código de las páginas web que visitéis desde vuestro navegador www.vanadis.es formacion@vanadis.es
- 19. si quieres ampliar esta formación puedes hacerlo en devblog.vanadis.es también puedes informarte sobre nuestros cursos en vanadis.es www.vanadis.es formacion@vanadis.es