dissabte, 1 de gener del 2000

Apuntes: Conceptos Básicos sobre HTML

Teniendo unas nociones básicas del lenguaje HTML, deberiamos saber que las páginas HTML se dividen en dos partes: la cabecera y el cuerpo. La cabecera incluye información sobre la propia página, como por ejemplo su título y su idioma. El cuerpo de la página incluye todos sus contenidos, como párrafos de texto e imágenes.
El cuerpo (llamado body en inglés) contiene todo lo que el usuario ve en su pantalla y la cabecera (llamada head en inglés) contiene todo lo que no se ve (con la única excepción del título de la página, que los navegadores muestran como título de sus ventanas).

Normas:
  1. Las etiquetas se tienen que cerrar de acuerdo a como se abren.
  2. Los nombres de las etiquetas y atributos siempre se escriben en minúsculas.
  3. El valor de los atributos siempre se encierra con comillas.
  4. Los atributos no se pueden comprimir.
  5. Todas las etiquetas deben cerrarse siempre
 
La etiqueta <br> por ejemplo, se utiliza para indicar el comienzo de una nueva línea, tal y como se verá más adelante. Por sus características, la etiqueta <br> nunca encierra ningún contenido de texto.

En lugar de abrir y cerrar de forma consecutiva la etiqueta (<br></br>) se puede utilizar la sintaxis <br/> para indicar que es una etiqueta vacía que se abre y se cierra en ese mismo punto.

Además, en xhtml...
  1. Antes de acceder al valor de un atributo, se eliminan todos los espacios en blanco que se encuentran antes y después del valor. Además, se eliminan todos los espacios en blanco sobrantes dentro del valor de un atributo. En otras palabras, si en el interior de un atributo se incluyen varios espacios en blanco seguidos, se eliminan todos salvo un único espacio en blanco utilizado para separar las diferentes palabras.
  2. Al hablar de la etiqueta <script> , el código JavaScript debe encerrarse entre unas etiquetas especiales ( <![CDATA[ y ]]> ) para evitar que el navegador interprete de forma errónea caracteres como & y < .
  3. Las páginas XHTML deben prescindir del atributo name para identificar de forma única a los elementos. En su lugar, siempre debe utilizarse el atributo id. De hecho, en la versión 1.0 del estándar XHTML, el atributo name se ha declarado obsoleto para las etiquetas a , applet , form , frame , iframe , img y map.
Conceptos
<html> : indica el comienzo y el final de un documento HTML
<head> : delimita la parte de la cabecera del documento.
<body> : delimita el cuerpo del documento HTML.

Los elementos en línea definidos por HTML son: a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var.
Los elementos de bloque definidos por HTML son: address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, nos-cript, ol, p, pre, table, ul.
Los siguientes elementos también se considera que son de bloque: dd, dt, frame-set, li, tbody, td, tfoot, th, thead, tr.
Los siguientes elementos pueden ser en línea y de bloque según las circunstancias: button, del, iframe, ins, map, object, script.


Atributos básicos
  • id=”texto” : Establece un identificador único a cada elemento dentro de una página HTML
  • class="texto" : Establece la clase CSS que se aplica a los estilos del elemento.
  • style=”texto” : Establece de forma directa los estilos CSS de un elemento.
  • title="texto" : Establece el título a un elemento (mejora la accesibilidad y los navegadores lo muestran cuando el usuario pasa el ratón por encima del elemento)
Atributos para la internacionalización
  • lang = "codigo de idioma" : Indica el idioma del elemento mediante un código predefinido.
  • xml:lang = "codigo de idioma" : Indica el idioma del elemento mediante un código predefinido
  • dir : Indica la dirección del texto (útil para los idiomas que escriben de derecha a izquierda)
Atributos de eventos 
  • Onblur: Deseleccionar el texto.
  • Onchange: Deseleccionar un elemento que se ha modificado.
  • Onclick: Pinchar y soltar el ratón
  • Ondblclick: Pinchar dos veces seguidas con el ratón.
  • Onfocus: Seleccionar un elemento.
  • Onkeydown: Pulsar una tecla (sin soltar).
  • Onkeypress: Pulsar una tecla.
  • Onkeyup: Soltar una tecla pulsada
  • Onload: La página se ha cargado completamente.
  • Onmousedown: Pulsar (sin soltar) un botón del ratón.
  • Onmouseout: El ratón "sale" del elemento (pasa por encima de otro elemento)
  • Onmouseover: El ratón "entra" en el elemento (pasa por encima del elemento)
  • Onmouseup: Soltar el botón que estaba pulsado en el ratón.
  • Onreset: Inicializar el formulario (borrar todos sus datos).
  • Onresize: Se ha modificado el tamaño de la ventana del navegador.
  • Onselect: Seleccionar un texto.
  • Onsubmit: Enviar el formulario.
  • Onunload: Se abandona la página (por ejemplo al cerrar el navegador).

Atributos de foco:

  • accesskey = "letra" : Establece una tecla de acceso rápido a un elemento HTML
  • tabindex = "numero" : Establece la posición del elemento en el orden de tabulación de la página. Su valor debe estar comprendido entre 0 y 32.767
  • onfocus, onblur : Controlan los eventos JavaScript que se ejecutan cuando el elemento obtiene o pierde el foco
Elementos:
 
Elemento
Definición
Atributos comunes
Tipos de elemento
Atributos propios
<p>
Delimita el contenido de un párrafo de texto
Básicos, internacionalización y eventos
Bloque
-
<h1>
...
<h6>
Define los títulos de las secciones de mayor importancia de la página.
Define los títulos de las secciones de mayor importancia de la página
Bloque
-
<em>
Realza la importancia del texto que encierra (cursiva)
Básicos, internacionalización y eventos
En línea
-
<strong>
Realza con la máxima importancia el texto que encierra (negrita)
Básicos, internacionalización y eventos
En línea
-
<ins>
Se emplea para marcar una modificación en los contenidos originales consistente en la inserción de un nuevo contenido
básicos, internacionalización y eventos
Bloque y en línea
cite = "url" → Indica la URL de la página en la que se puede obtener más información.
datetime = "fecha" → Especifica la fecha y hora en la que se realizó el cambio
<del>
Se emplea para marcar una modificación en los contenidos originales consistente en el borrado de cierto contenido
Básicos, internacionalización y eventos
Bloque y en línea
  • cite = "url"
  • datetime = "fecha"
<blockquote>
Se emplea para indicar que el texto que encierra es una cita textual de otro texto externo
Básicos, internacionalización y eventos
Bloque
  • cite = "url"
<abbr>
Se emplea para marcar las abreviaturas del texto y proporcionar el significado de esas abreviaturas
Básicos, internacionalización y eventos
En línea
  • title = "texto"
Indica el significado completo de la abreviatura
<acronym>
Se emplea para marcar las siglas o acrónimos del texto y proporcionar el significado de esas siglas
Básicos, internacionalización y eventos
En línea
  • title = "texto"
<dfn>
Se emplea para marcar las definiciones de ciertos términos y proporcionar el significado de esos términos
Básicos, internacionalización y eventos
En línea
  • Title = "texto"
<cite>
Se emplea para marcar una cita o una referencia a otras fuentes
Básicos, internacionalización y eventos
En línia
-
<br>
o
(<br />)
Fuerza al navegador a insertar una nueva línea
Básicos
En línea y etiqueta vacía
-
<pre>
Muestra el texto que encierra tal y como está escrito (respetando los espacios en blanco)
Básicos, internacionalización y eventos
Bloque
-
<code>
Delimita el texto considerado un fragmento de código fuente
Básicos, internacionalización y eventos
En línea
-
<a>
Se emplea para enlazar todo tipo de recursos
básicos, internacionalización, eventos y foco
En línea
  • name = "texto"
  • href = "url"
  • hreflang = "codigo_idioma"
  • type = "tipo_de_contenido"
  • rel = "tipo_de_relacion"
  • rev = "tipo_de_relacion"
  • charset = "tipo_de_charset"
<script>
Se emplea para enlazar o definir un bloque de código (normalmente JavaScript)
-
Bloque y en línea (también puede ser una etiqueta
vacía)
  • src = "url"
  • type = "tipo_de_contenido"
  • defer = "defer"
  • charset = "tipo_de_charset"
<link>
Se emplea para enlazar y establecer relaciones entre el documento y otros recursos
Básicos, internacionalización y eventos
Etiqueta vacía
  • charset, href, hreflang, type, rel y rev
  • media = "tipo_de_medio"
<ul>
Se emplea para definir listas no ordenadas
Básicos, internacionalización y eventos
Bloque
-
<li>
Se emplea para definir los elementos de las listas (ordenadas y no ordenadas)
Básicos, internacionalización y eventos
Bloque
-
<ol>
Se emplea para definir listas ordenadas
Básicos, internacionalización y eventos
Bloque
-
<dl>
Se emplea para definir listas de definición
Básicos, internacionalización y eventos
Bloque
-
<dt>
Se emplea para definir los términos de los elementos de una lista de definición
Básicos, internacionalización y eventos
Bloque
-
<dd>
Para indicar las definiciones de los elementos de una lista de definición
Básicos, internacionalización y eventos
Bloque
-
<img>
Se emplea para incluir imágenes en los documentos
básicos, internacionalización y eventos
En línea y etiqueta vacía
  • src = "url"
  • alt = "texto"
  • longdesc = "url"
  • name = "texto"
  • height = "unidad_de_medida"
  • width = "unidad_de_medida"
<map>
Se emplea para definir mapas de imagen
Básicos, internacionalización y eventos
Bloque y en línea
  • name = "texto"
<area>
Se emplea para definir las distintas áreas que forman un mapa de imagen
Básicos, internacionalización, eventos y foco
Etiqueta vacía
  • href = "url"
  • nohref = "nohref"
  • shape = "default | rect | circle | poly"
  • coords = "lista de números"
<object>
Se emplea para embeber objetos en los documentos
Básicos, internacionalización y eventos
Bloque y en línea
  • data = "url"
  • classid, codebase, codetype
  • type
  • height = "unidad_de_medida"
  • width = "unidad_de_medida"
<param>
Se emplea para indicar el valor de los parámetros del objeto
id
Etiqueta vacía
  • name = "texto"
  • value = "texto"
<embed>
Se emplea para embeber objetos en los documentos
Básicos, internacionalización y eventos
Bloque
  • src = "url"
  • type = "tipo_de_contenido"
  • height = "unidad_de_medida"
  • width = "unidad_de_medida"
<table>
Se emplea para definir tablas de datos
Básicos, internacionalización y eventos
Bloque
  • summary = "texto"
<tr>
Se emplea para definir cada fila de las tablas de datos
Básicos, internacionalización y eventos
Bloque
-
<td>
Se emplea para definir cada una de las celdas que forman las filas de una tabla, es decir, las columnas de la tabla
Básicos, internacionalización y eventos
Bloque
  • abbr = "texto"
  • headers = "lista_de_id"
  • scope = "col, row, colgroup, rowgroup"
  • colspan = "numero"
  • rowspan = "numero"
<th>
Se emplea para definir las celdas que son cabecera de una fila o de una columna de la tabla
Básicos, internacionalización y eventos
Bloque
  • abbr = "texto"
  • headers = "lista_de_id"
  • scope = "col, row, colgroup, rowgroup"
  • colspan = "numero"
  • rowspan = "numero"
<caption>
Se emplea para definir la leyenda o título de una tabla
Básicos, internacionalización y eventos
En línea
-
<thead> <tbody> <tfoot>
Se emplean para agrupar varias filas en una cabecera (thead) un pie (tfoot) o una sección
(tbody) de una tabla
Básicos, internacionalización y eventos
Bloque
-
<form>
Se emplea para insertar un formulario en la página
Básicos, internacionalización y eventos
Bloque
  • action = "url"
  • method = "POST o GET"
  • enctype = "application/x-www-form-urlencoded o multipart/form-data"
  • accept = "tipo_de_contenido"
  • Otros: accept-charset, onsubmit, onreset
<input>
Se emplean para insertar un control en un formulario
Básicos, internacionalización, eventos y foco
En línea y etiqueta vacía
  • type = "tipo"
  • name = "texto"
  • value = "texto" - Valor inicial del control
  • size = "unidad_de_medida"
  • maxlength = "numero"
  • checked = "checked"
  • disabled = "disabled"
  • readonly = "readonly"
  • src = "url"
  • alt = "texto"
<fieldset>
Se emplea para agrupar de forma lógica varios campos de un formulario
Básicos, internacionalización y eventos
Bloque
-
<legend>
Se emplea para definir el título o leyenda de un conjunto de campos de formulario agrupados con la etiqueta fieldset
Básicos, internacionalización y eventos
En línea
-
<label>
Se emplea para definir el título o leyenda de los campos definidos en un formulario
Básicos, internacionalización y eventos
En línea
  • for = "id_de_elemento" - Indica el ID del campo del formulario para el que este elemento es su título
  • Otros: accesskey, onfocus y onblur
<textarea>
Se emplea para incluir un área de texto en un formulario
Básicos, internacionalización, eventos y foco
En línea
  • rows = "numero"
  • cols = "numero"
  • Otros: name, disabled, readonly, onselect, onchange, onfocus, onblur
<select>
Se emplea para incluir una lista desplegable en un formulario
Básicos, internacionalización y eventos
En línea
  • size = "numero"
  • multiple = "multiple"
  • Otros: name, disabled, onchange, onfocus, onblur
<option>
Se emplea para definir cada elemento de una lista desplegable
Básicos, internacionalización y eventos
-
  • selected = "selected"
  • value = "texto"
  • Otros: label, disabled
<optgroup>
Se emplea para definir una agrupación lógica de opciones de una lista desplegable
Básicos, internacionalización y eventos
-
  • label = "texto"
  • Otros: disabled, selected
<div>
Agrupa elementos de bloque
Básicos, internacionalización y eventos
Bloque
-
<head>
Define la cabecera del documento HTML
Internacionalización

  • profile = "url"
  • lang = "codigo_de_idioma"
<title>
Define el título del documento HTML
Internacionalización

  • lang = "codigo_de_idioma"
<meta>
Permite definir el valor de los metadatos que forman la metainformación del documento
Internacionalización

  • name = "texto"
  • content = "texto"
  • http-equiv = "texto"
  • scheme = "texto"
<noscript>
Define un mensaje alternativo que se muestra al usuario cuando su navegador no soporta la ejecución de scripts
Básicos, internacionalización y eventos
Bloque

<iframe>
Se emplea para incluir en la página un marco que muestra otro documento
HTML
Básicos
Bloque y en línea
src = "url"
height = "longitud"
width = "longitud"
name = "texto"
longdesc = "url"
scrolling = "yes | no | auto"
<address>
Define la información de contacto de un documento
Básicos, internacionalización y eventos
Bloque
-
<hr>
Permite incluir una línea horizontal de separación
Básicos, internacionalización y eventos
Bloque
-

 Caracteres especiales: 
 
Entidad Carácter Descripción
&lt;
<
signo de menor que
&gt;
>
signo de mayor que
&amp;
&
ampersand
&quot;
"
comillas
&nbsp;
(espacio en blanco)
espacio en blanco
&apos;
'
apóstrofo
 
Se puede encontrar toda la lista aquí.

ETIQUETAS:

a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frame,frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, menu, meta, noframes, noscript, object, ol, optgroup, option, p, param, pre, q, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var.
 
ETIQUETAS OBSOLETAS



De todas las etiquetas disponibles, las siguientes se consideran obsoletas y no se pueden utilizar:
applet, basefont, center, dir, font, isindex, menu, s, strike, u.




Si detectas algún error no dudes en comentarlo.

Publicat per a
Etiquetes de comentaris: , ,

Cap comentari :

Publica un comentari a l'entrada

Subscriure's a: Comentaris del missatge ( Atom )