-
Generalidades
HTML
- Fundamentos:
-
Caracteres:Dependiendo del editor de textos el documento HTML puede tener distintos juegos de caracteres.
Toda cadena de caracteres se visualizara en el navegador.
Para reducir los documentos a ASCII de 7 bits y representar los caracteres empleados para marcar el texto, se definen dos mecanismos de referencia:
Generalidades
HTML
Caracteres:Dependiendo del editor de textos el documento HTML puede tener distintos juegos de caracteres.
Toda cadena de caracteres se visualizara en el navegador.
Para reducir los documentos a ASCII de 7 bits y representar los caracteres empleados para marcar el texto, se definen dos mecanismos de referencia:
resumen de los comandos básicos htlm
Etiquetas Básicas
- <html> ... </html> : Principio y fin de la página
- <head> ... </head> : Cabecera
- <body> ... </body> : Cuerpo
- <title> ... </title> : Título de la página
Texto: insertar
- <h1> ... </h1> : Título de primer nivel
- <h2> ... </h2> : Título de segundo nivel
- <h3> ... </h3> : Título de tercer nivel
- <h4> ... </h4> : Título de cuarto nivel
- <h5> ... </h5> : Título de quinto nivel
- <h6> ... </h6> : Título de sexto nivel
- <p> ... </p> : Párrafo
Texto: estilo
- <b> ... </b> : Texto en negrita
- <strong> ... </strong> : Texto en negrita
- <i> ... </i> : Texto en cursiva
- <em> ... </em> : Texto en cursiva
- <u> ... </u> : Texto subrayado
- <ins> ... </ins> : Texto subrayado
- <s> ... </s> : Texto tachado
- <strike> ... </strike> : Texto tachado
- <sub> ... </sub> : Texto en subíndice
- <sup> ... </sup> : Texto en superíndice
- <abbr> ... </abbr> : Marcar abreviaturas
- <acronym> ... </acronym> : Marcar acrónimos
- <dfn> ... </dfn> : Marcar estilo
- <cite> ... </cite> : Marcar cita
- <blockquote> ... </blockquote> : insertar cita textual
- <tt> ... </tt> : Letra en monospace
- <blink> ... </blink> : texto parpadeante
- <pre> ... </pre> : Texto preformateado conservando espacios.
- <code> ... </code> : Texto preformateado sin conservar espacios.
- <center> ... </center> : Texto centrado
- <font> ... </font> : Cambia el estilo del texto según sus atriibutos
- <font face="tipo_letra"> : Cambia el tipo de letra
- <font size="tamaño"> : Cambia el tamaño de letra
- <font color="color"> : Cambia el color de la letra
Enlaces
<a href="ruta">Texto del enlace</a>
Tipos de rutas: Absolutas y relativas.
Tipos de enlaces: Externos, locales, internos, a e-mail, a archivos.
target="_blank" : Atributo para abrir el enlace en página o pestaña aparte.
Listas
- <ul> ... </ul> : Principio y fin de lista no numerada
- <ol> ... </ol> : Principio y fin de lista numerada
- <li> ... </li> : Elemento de una lista.
- <dl> ... </dl> : Principio y fin de un lista de definición
- <dt> ... </dt> : Término en una lista de definición
- <dd> ... </dd> : Definición en una lista de definición.
Imágenes
<img src="ruta" alt="descripción"/>
otros atributos
- width="medida" height="medida" : ancho y alto de la imagen
- align="left/right" : alineación izquierda o derecha.
Mapas de imágenes
- usemap="#nombre" Atributo dentro de la etiqueta de imagen que usaremos como mapa.
- <map> ...</map> Principio y fin del mapa de imágenes.
- name="nombre" : Atributo de referencia a la imagen (el mismo que en "usemap").
- <area .../> Enlaces dentro del mapa de imagen, llevan los siguientes atributos:
- href="ruta" : ruta del enlace.
- shape="tipo" : tipo de área.
- coords="lista_de_números" : coordenadas del área, los números van separados por comas.
Tipos de área y coordenadas
Origen de coordenadas en esquina superior izquierda de la imagen (0,0). Medida en píxeles.
Tipo "rect". Coordenadas = x1, y1: Esquina superior izquierda, x2, y2, esquina inferior derecha.
Tipo "circle". Coordenadas = a , b: Centro de la circunferencia, c: Radio de la circunferencia.
Tipo "poly".Coordenadas = x1, y1: primer punto del polígono, x2, y2: segundo punto del polígono ... xn, yn ultimo punto del polígono.
