Scribd
Cargar
29 vistas

HTML

Este documento explica lo que son las páginas web y el lenguaje HTML. Las páginas web son documentos de texto con marcas llamadas etiquetas que permiten modificar la presentación y añadir elementos como imágenes e hiperenlaces. Estas páginas se ven en navegadores web que interpretan las etiquetas. El HTML usa etiquetas de apertura y cierre que pueden contener atributos para especificar características.

Cargado por

Avril Martínez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
29 vistas

HTML

Este documento explica lo que son las páginas web y el lenguaje HTML. Las páginas web son documentos de texto con marcas llamadas etiquetas que permiten modificar la presentación y añadir elementos como imágenes e hiperenlaces. Estas páginas se ven en navegadores web que interpretan las etiquetas. El HTML usa etiquetas de apertura y cierre que pueden contener atributos para especificar características.

Cargado por

Avril Martínez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 11

HTML

¿Qué es una página web?


Una página web es un documento de texto con marcas. Las marcas permiten modificar la
presentación del documento, incluir elementos no contenidos en el texto (por ejemplo,
imágenes), crear hiperenlaces, añadir significado al texto (todavía de forma limitada), etc. A las
marcas se les llaman también etiquetas.
Las páginas web están pensadas para ser vistas mediante los programas llamados navegadores
web.
Los navegadores son capaces de interpretar las marcas y presentar el documento tal y como lo
diseñó el autor.
La marcas se escriben entre <p>, <h1>, <div> , luego de esto va el texto y después se cierra
con lo mismo pero con una / antes (</p>, </h1>, </div>)
Algunas marcas (imágenes, saltos de líneas, separadores, etc.) no necesitan marca de cierre y
sólo es necesario escribir la marca de apertura. A estas marcas se las llama marcas
vacías (void). 
Las marcas vacías de HTML son: <area>, <base>, <br>, <col>, <embed>, <hr>, <img>,
<input>, <link>, <meta>, <param>, <source>, <track> y <wbr>. 
Los navegadores pueden modificar el aspecto visual del texto en función de las marcas
existentes, aunque hay marcas que no tienen ningún estilo predeterminado asociado. 

A menos que lo aclaremos el navegador no respeta los espacios en blanco que ponemos en el
código
Nota: la etiqueta <pre> es la única etiqueta que de forma predeterminada respeta los saltos de
línea, espacios en blanco y tabuladores. Este comportamiento se puede modificar para
cualquier etiqueta con la propiedad white-space. Las marcas pueden anidarse, aunque no de
cualquier manera. Algunas marcas pueden estar contenidas por otras, pero no se puede
insertar cualquier marca dentro de otra. 

Si bien los navegadores modifican visualmente el contenido según las


etiquetas que lo enmarcan, el objetivo de marcar el texto con ellas no
es dar estilo, sino brindar al navegador un significado semántico para
ese contenido. Es decir, explicar qué papel cumple en nuestra página
web.

Atributos
Las marcas de apertura pueden contener uno o varios atributos. Los atributos especifican alguna
característica de la marca. Algunos atributos pueden incluirse en casi todas las marcas, pero
otros son específicos de cada marca. Los atributos pueden a su vez tener valores (uno o varios
valores, separados por espacios). <etiqueta
atributo="valor_de_atributo" atributo2="valor_de_atributo">

Se puede modificar el aspecto visual de cualquier marca utilizando propiedades de estilo.

NO SE RECOMIENDA PONER ESTILO EN LINEA

Comentarios
Una página web puede contener comentarios, que el navegador no
muestra (salvo cuando muestra el código fuente de la página). La etiqueta de
comentario es <!-- .... -->.
Los comentarios pueden estar insertados en cualquier lugar de la página web. En
el ejemplo pueden verse dos comentarios, uno incluido en una etiqueta (párrafo
<p>) y otro no incluido en ninguna etiqueta.

Pagina básica
El ejemplo siguiente muestra una página web básica HTML 5 escrita con sintaxis
HTML.

 La primera etiqueta <!DOCTYPE ... > es obligatoria e indica el tipo de documento


(DOCTYPE) de la página. Existen varios tipos de documentos que corresponden a las
diferentes versiones de HTML y XHTML. El tipo "html" es el que corresponde al
HTML 5. 

 La etiqueta <html> ...</html> engloba todo el documento html. 


 Un documento html se divide en dos partes, la cabecera <head> ...</head> y el cuerpo
<body> ...</body>. 
 La cabecera <head> ...</head> contiene información de identificación y control que en
general no se muestra en la ventana del navegador, aunque puede afectar a la
presentación (por ejemplo, los enlaces a hojas de estilo).
 La etiqueta de título <title> ...</title> es obligatoria y debe incluirse en todas las
páginas web. Contiene el texto que se muestra en la pestaña del navegador. Si el texto
es largo, la pestaña sólo mostrará el principio, pero situando el ratón sobre la pestaña, el
texto completo se mostrará en una pequeña ventana flotante.
 La etiqueta <link> permite hacer referencia a otro documento. El atributo rel indica en
general la relación entre los dos documentos. En este caso, el valor del atributo
rel="stylesheet" indica que se está haciendo referencia a una hoja de estilo CSS.
 La cabecera <head> ...</head> podría contener también una etiqueta <script>
...</script>, que permite incluir directamente código JavaScript en el documento o hacer
referencia al documento en el que se encuentra ese código.
 El cuerpo <body> ....</body> contiene lo que se verá en la ventana del navegador. En el
ejemplo sólo contiene un párrafo.

Sintaxis de HTML
La sintaxis de un lenguaje es el "conjunto de reglas que definen las secuencias
correctas de los elementos de un lenguaje de programación"
Aunque el HTML no es un lenguaje de programación, sino un lenguaje de
marcas, en el HTML también existen una serie de reglas para que los
documentos sean correctos.
Si un documento contiene errores de sintaxis se dice que es un documento
inválido. Aunque un documento HTML no sea sintácticamente correcto, los
navegadores intentan mostrar el documento de la mejor manera posible. Los
navegadores a menudo consiguen mostrar correctamente documentos
inválidos, pero se aconseja validar y corregir los documentos para asegurar
que los navegadores puedan mostrarlos correctamente.

Nota: en HTML 5 se define también una sintaxis llamada


XHTML que está basada en el XML (aunque tampoco la
cumple estrictamente). En general, la sintaxis XHTML es más
"estricta", en el sentido de imponer restricciones en la forma de
escribir etiquetas, atributos o valores, mientras que la sintaxis
HTML es más "flexible".

Generalidades
El carácter < (menor que) sólo
puede utilizarse para indicar el
comienzo de una etiqueta. Si se
quiere mostrar el carácter <, se
debe escribir la entidad de carácter
&lt;
Los nombres de los elementos, los
nombres de los atributos y los
valores de los atributos se suelen
escribir en minúsculas, aunque se
pueden escribir en mayúsculas.
Elementos (etiquetas)
El nombre del elemento debe ir a
continuación del carácter < (sin
espacios). 

El nombre del elemento en la


etiqueta de cierre tiene que
coincidir con el nombre en la
etiqueta de apertura.

Los documentos HTML


suelen tener un único
elemento raíz de todo el
documento, el elemento
<html>...</html>, aunque
puede omitirse

Todos los elementos tienen que


estar completamente contenidos en
otros elementos (no se pueden
cruzar las etiquetas).

Los elementos no vacíos


(los que pueden contener
texto) suelen tener etiquetas
de cierre, aunque la norma define algunas circunstancias en las se pueden
omitir las etiquetas de cierre.
Los elementos vacíos (los que no
pueden contener texto) no tienen
etiqueta de cierre. La etiqueta de
apertura puede acabar en "/>".
Las etiquetas vacías (void) de
HTML son <area>, <base>, <br>,
<col>, <embed>, <hr>, <img>,
<input>, <link>, <meta>,
<param>, <source>, <track> y <wbr>.

Atributos
Los atributos sólo pueden
aparecer en la etiqueta de
apertura:

Los valores de los


atributos se suelen
escribir entre comillas
(dobles o simples), pero
no es necesario si el
valor no contiene
espacios en blanco

El valor de un atributo id
no se puede repetir en un
documento (es decir, en un
documento no puede haber
dos elementos cualesquiera
con el mismo valor en el
atributo id).

Atributos
¿Qué es un atributo?
Cualquier etiqueta HTML puede contener uno o más atributos, separados por
espacios, que permiten especificar la etiqueta. El código fuente tiene el
siguiente aspecto:
El valor de cada atributo es asignado mediante el signo igual "=" (salvo en el
caso de los atributos booleanos, que no requieren asignación). Cada atributo
puede contener más de un valor, separados por un espacio, por lo que los
valores no pueden contener espacios internos. Además, el valor de un atributo
debe estar entre comillas (atributo="valor1 valor2") aunque esto puede omitirse
en el caso de que el atributo contenga solo un valor (atributo=valor1).
Existen una serie de atributos comunes a todas las etiquetas y algunas
etiquetas tienen unos atributos específicos.
En esta lección comentamos algunos de los atributos principales:
 Atributo class
El atributo class permite definir clases de elementos. Dada su importancia, se
explica en la lección sobre Clases.
Las hojas de estilo pueden hacer referencia a los elementos con atributo class,
como se comentará en la lección sobre Selectores.
 Atributo id
El atributo id permite identificar de forma unívoca un elemento en un
documento. Por ello, en una página web no puede haber dos elementos con el
mismo valor en el atributo id. Además, un elemento sólo puede tener un
atributo id, es decir, el atributo id no puede contener espacios en blanco.
En HTML 5 el atributo id puede empezar y contener cualquier carácter (salvo
espacios en blanco). Además, todos los elementos pueden tener el atributo id.
 Atributo style
El atributo style permite definir propiedades de estilo a un elemento
determinado.

Se desaconseja el uso de este atributo, puesto que uno de los


principios del diseño de páginas web mediante hojas de estilo
es precisamente concentrar todo lo relacionado con el formato
en las hojas de estilo.

Clases
Asignar clases a elementos: el atributo class
Dado que el número de etiquetas del HTML es reducido, es probable que en
una página web se quiera dar un formato distinto a elementos con la misma
etiqueta. Se puede sortear esta limitación utilizando clases, que se pueden
asignar a cualquier elemento de una página web.
Las clases se asignan con el atributo class. El valor del atributo class (el
nombre de la clase) sólo pueden contener caracteres ingleses, números,
guiones y subrayados, aunque el primer carácter no puede ser ni un número ni
un guión.

Cuando se define una clase de elemento, la regla se aplica únicamente a los


elementos de ese tipo que tienen esa clase. En el ejemplo siguiente, en la hoja
de estilo está definida la clase aviso para la etiqueta <span> (trabajaremos
sobre reglas de estilo en las lecciones de la semana siguiente). Esa regla no se
aplica a ningún elemento, puesto que en la página web la etiqueta <span> no
tiene atributo class y la clase aviso está asignada a una etiqueta diferente
(<p>).
Los navegadores distinguen los nombres de clases escritos en mayúsculas o
minúsculas. En estos apuntes se recomienda utilizar únicamente minúsculas.

A un elemento con clase se le aplica tanto la regla de la clase como la regla de


la etiqueta general (esta es una característica del mecanismo de cascada de
las hojas de estilo).
En el ejemplo siguiente, en la hoja de estilo se ha escrito una regla para
párrafos en general y otra regla para los párrafos de clase aviso. El elemento
con clase hereda las propiedades de los elementos sin clase.

Combinar varias clases simultáneamente


Un elemento puede tener asignado varias clases. Para asignar varias clases a
un elemento, hay que escribir en el atributo class los nombres de todas las
clases que se quieren aplicar, separados por espacios.

El orden en que se escriban los nombres de las clases en el atributo class no


es importante, aunque sí que es importante el orden de las reglas en la hoja de
estilo.

Como muestran los dos ejemplos siguientes, si la misma propiedad está


definida en varias clases y un elemento tiene asignadas varias clases, se aplica
la definición de la clase que aparece después en la hoja de estilo (esta es una
característica del mecanismo de cascada de las hojas de estilo).

Se puede escribir un selector que se aplique únicamente a los elementos que


tienen definidas varias clases.
Asignar la misma clase a distintos elementos

Se pueden asignar la misma clase a elementos distintos. Definiendo la clase


para cada elemento, en cuyo caso cada elemento puede tener propiedades
distintas aunque el nombre de la clase sea el mismo:

Definiendo una clase universal, en cuyo caso todos los elementos tienen las
mismas propiedades:

También podría gustarte