ClubEnsayos.com - Ensayos de Calidad, Tareas y Monografias
Buscar

Lenguaje HTML, CODIGOS Y ETIQUETAS


Enviado por   •  19 de Mayo de 2021  •  Trabajo  •  1.486 Palabras (6 Páginas)  •  66 Visitas

Página 1 de 6

[pic 1][pic 2]

Resumen HTML[pic 3][pic 4][pic 5][pic 6][pic 7][pic 8][pic 9][pic 10][pic 11][pic 12][pic 13][pic 14][pic 15][pic 16][pic 17][pic 18][pic 19]

Este es un resumen de lo visto en el manual de HTML de Aprende-Web.

http://aprende-web.net/html

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

Etiquetas de texto

Insertar texto

  • <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

Estilo de texto

  • <b> ... </b> : Texto en negrita
  • <i> ... </i> : Texto en cursiva
  • <u> ... </u> : Texto subrayado
  • <s> ... </s> : Texto tachado
  • <sub> ... </sub> : Texto en subíndice
  • <sup> ... </sup> : Texto en superíndice
  • <abbr> ... </abbr> : Marcar abreviaturas
  • <tt> ... </tt> : Letra en monospace
  • <blink> ... </blink> : texto parpadeante
  • <pre> ... </pre> : Texto preformateado conservando espacios.
  • <code> ... </code> : Texto preformateado sin conservar espacios.

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.

Tablas

  • <table> ... </table> : Principio y fin de una tabla
  • <tr> ... </tr> : fila de una tabla
  • <td> ... </td> : celda normal de una tabla
  • <th> ... </th> : celda de cabecera de una tabla
  • <caption> ... </caption> : título de una tabla
  • <thead> ... </thead> : Sección cabecera de tabla
  • <tfoot> ... </tfoot> : Sección pie de tabla
  • <tbody> ... </tbody> : Sección del cuerpo de la tabla
  • <col> ... </col> : Referencia a la columna de la tabla.
  • <colgroup> ... </colgroup> : Referencia a un grupo de columnas. el atributo span="num" indica el número de columnas.

Formularios

<form ... ></form>: Atributos de esta etiqueta:

  • action="ruta" : página, correo, etc, dónde es enviado el formulario.
  • method="get/post" : método de envío "get" o "post".
  • enctype="tipo_MIME" : Modo en que se envía: correo="text/plain"; archivos="multipart/form-data"

Campos del formulario

  • Texto : <input type="text" name="nombre" size="ancho_caja" maxlength="max_caracteres" value="valor_defecto" />
  • Contraseña : <input type="password" name="nombre" size="ancho_caja" maxlength="max_caracteres" />
  • Texto largo : <textarea name="nombre"> Valor_defecto </textarea>
  • Botón radio : <input type="radio" name="nombre" value="valor" />. name

debe ser igual en todos los botones relacionados.

  • Botón checkbox : <input type="checkbox" name="nombre" value="si" />
  • Lista desplegable : <select name="nombre" size="num" multiple="multiple">... (etiquetas option) ...</select> size: Num opciones que vemos a la vez. multiple: poder elegir más de una opción.
  • Etiquetas option: <option value="valor">texto</option>
  • Botón de envio : <input type="submit" value="Texto_del_botón" />
  • Botón de borrado : <input type="reset" value="Texto_del_botón" />
  • Enviar archivos : <input type="file" name="nombre" />
  • Campo oculto: <input type="hidden" name="nombre" />
  • Botón normal : <input type="button" name="nombre" />
  • Botón de imagen : <input type="image" name="nombre" src="ruta_imagen"

/>

Otras etiquetas de formularios

  • <fieldset> ... </fieldset> : agrupar varios campos.
  • <legend> Texto </legend> : Texto para etiqueta fieldset.
  • <label for="ref"> Texto_referencia_al_campo </label> : referencia del texto con un campo. En la etiqueta del campo incluiremos el atributo id="ref"

Etiquetas para diseño

  • <div> ... </div> : Selección de un bloque grande. Atributos:
  • id="nombre" : Referencia única para usar estilos CSS.
  • class="nombre" : Referencia no única para usar estilos CSS.
  • <span> ... </span> : Selección de un trozo pequeño (etiqueta en línea).

Etiquetas Doctype

Por ser las más usadas veremos sólo las de modo transicional:

...

Descargar como (para miembros actualizados) txt (12 Kb) pdf (245 Kb) docx (73 Kb)
Leer 5 páginas más »
Leer documento completo Guardar
Disponible sólo en Clubensayos.com