miércoles, 12 de julio de 2017

html

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

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.

1 comentario:

  1. buenas tardes empieso a tomar muy en serio las etiquetas de htlm puesto que me corresponde implementar una pagina web con htlm y php y esta esplicasion esta apropiadisima

    ResponderEliminar