curso de-diseño-web-lección-1-html
DESCRIPTION
Tutorial - Curso de diseño web. Lección 1 - Introducción al HTMLTRANSCRIPT
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 [email protected]
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 [email protected]
El HTML 5 es la última evolución del lenguaje HTML
HTML (1991)
HTML4 (1997)
XHTML (2000)
HTML5 (2009)
www.vanadis.es [email protected]
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.
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 [email protected]
elementos básicos de una web
<head> la cabeza
Información no visible sobre la página (idioma, codificación, archivos enlazados, etc.)OperacionesTí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...)
<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
www.vanadis.es [email protected]
atributos
Sirven para personalizar e identificar a las etiquetas
Dan sentido y contexto a los elementos
HTML 5 utiliza más de 100 etiquetas, pero con eso no basta para crear páginas complejas
Esquema habitual
<etiqueta atributo=”nombre_atributo”> contenido </etiqueta>
www.vanadis.es [email protected]
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
<h2 class=”titulo_seccion”>Artículo destacado</h2>
<img id=”logo”... />
<h2 class=”titulo_seccion”>Artículos buenos</h2>
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
www.vanadis.es [email protected]
*atributos generales nuevos en HTML 5
contenteditableEspecifica si el contenido de un elemento es editable o no.
contextmenuEspecifica un menú contextual para un elemento. El menú contextual aparece cuando un usuario hace clic en el elemento.
draggableEspecifica si un elemento es arrastrable o no.
dropzoneEspecifica si los datos arrastrados son copiados, movidos o vinculados, cuando se dejan caer sobre un elemento.
hiddenEspecifica que un elemento no es visible aún, o no es, relevante.
spellcheckEspecifica si el elemento debe tener su ortografía y gramática comprobada o no.
www.vanadis.es [email protected]
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=”nombre_atributo” id=”nombre atributo”
id=”ñombreatributó”
www.vanadis.es [email protected]
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
tipos de elementos en HTML
www.vanadis.es [email protected]
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 [email protected]
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 [email protected]
Ejemplo 1Elementos de bloque y de línea
ejemplo1_elementos_bloque_linea.html
www.vanadis.es [email protected]
Ejemplo 2Elementos de bloque y de línea
ejemplo2_elementos_bloque_linea.html
www.vanadis.es [email protected]
Un plugin de firefox muy para desarrolladores:
firebug
www.vanadis.es [email protected]
Os permitirá explorar el código de las páginas web que visitéis desde vuestro navegador
Recomendación
si quieres ampliar esta formación puedes hacerlo en
devblog.vanadis.es
www.vanadis.es [email protected]
también puedes informarte sobre nuestros cursos en
vanadis.es