Curso de-diseño-web-lección-1-html

Post on 13-Jun-2015

282 views 0 download

description

Tutorial - Curso de diseño web. Lección 1 - Introducción al HTML

Transcript of Curso de-diseño-web-lección-1-html

curso de diseño webintroducción al HTML

www.vanadis.es formacion@vanadis.es

1lección 1

El HTML es el lenguaje fundamental de las páginas web

www.vanadis.es formacion@vanadis.es

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

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

El HTML 5 es la última evolución del lenguaje HTML

HTML (1991)

HTML4 (1997)

XHTML (2000)

HTML5 (2009)

www.vanadis.es formacion@vanadis.es

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 formacion@vanadis.es

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 formacion@vanadis.es

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 formacion@vanadis.es

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 formacion@vanadis.es

*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 formacion@vanadis.es

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 formacion@vanadis.es

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 formacion@vanadis.es

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

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

Ejemplo 1Elementos de bloque y de línea

ejemplo1_elementos_bloque_linea.html

www.vanadis.es formacion@vanadis.es

Ejemplo 2Elementos de bloque y de línea

ejemplo2_elementos_bloque_linea.html

www.vanadis.es formacion@vanadis.es

Un plugin de firefox muy para desarrolladores:

firebug

www.vanadis.es formacion@vanadis.es

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 formacion@vanadis.es

también puedes informarte sobre nuestros cursos en

vanadis.es