ETIQUETAS BÁSICAS Y FUNDAMENTALES DE HTML
¿Cuáles son las primeras etiquetas HTML qué debes saber para
escribir una página Web?
Lección 5 del Módulo 2 Sobre Como Escribir una Página Web
Estoy siguiendo y estudiando el curso de Desarrollo Web, su primera parte, de Google Actívate (o Activate en inglés) sobre HTML y CSS. Sobre el tema de hacer prototipos y wireframes de las páginas web investigaré más adelante. Si quereis os dejo aquí un enlace sobre el tema:
En la lección te dicen como ver en cada navegador el código fuente o código HTML de la página web que estás viendo ya sea através de Firefox, Google Chrome, Internet Explorer. De la lección 5 tenemos:
Ahora bien. Lo que querría hacer en esta entrada es RESPONDER a que significa cada una de las etiquetas a las que nos han introducido, sin aún habernos explicado el significado de cada una de ellas:
Ver código fuente de la página en Google Chrome y Mozilla Firefox.
Ver código fuente en Internet Explorer y Opera.
- HTML: define el inicio del documento HTML, le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML. Esto es así de facto, ya que en teoría lo que define el tipo de documento es el DOCTYPE, que significa la palabra justo tras DOCTYPE el tag de raíz.
- HEAD: define la cabecera del documento HTML; esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario como, por ejemplo, el título de la ventana del navegador. Dentro de la cabecera
<head>
es posible encontrar: - META: para metadatos como la autoría o la licencia, incluso para indicar parámetros http (mediante
http-equiv=""
) cuando no se pueden modificar por no estar disponible la configuración o por dificultades con server-side scripting. - TITLE: define el título de la página. Por lo general, el título aparece en la barra de título encima de la ventana.
- LINK: el nombre del personaje de la serie de videojuegos Zelda. Jeje. Aquí se refiere a esto: para vincular el sitio a hojas de estilo o iconos. Por ejemplo:
<link rel="stylesheet" href="/style.css" type="text/css">
. - STYLE: para colocar el estilo interno de la página; ya sea usando CSS u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo externo usando la etiqueta
<link>
. - SCRIPT: incrusta un script en una web, o llama a uno mediante
src="url del script"
. Se recomienda incluir el tipo MIME en el atributotype
, en el caso de JavaScripttext/javascript
. - BODY: define el contenido principal o cuerpo del documento. Esta es la parte
del documento html que se muestra en el navegador; dentro de esta
etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes. Dentro del cuerpo
<body>
es posible encontrar numerosas etiquetas. A continuación se indican algunas a modo de ejemplo: - P: La etiqueta p <p></p> se utiliza para crear párrafos.
- A: <a></a> hipervínculo o enlace, dentro o fuera del sitio web. Debe definirse el parámetro de pasada por medio del atributo href. Por ejemplo:
<a href="http://www.example.com" title="Ejemplo" target="_blank" tabindex="1">Ejemplo</a>
se representa como ejemplo. - STRONG y EM: Se han desaprobado últimamente los usos de <b></b> e <i></i> y en su lugar tenemos: strong y em, respectivamente negrita y cursiva.
- IMG: La etiqueta de las imágenes. imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la imagen. Por ejemplo:
<img src="./imágenes/mifoto.jpg" />
. Es conveniente, por accesibilidad, poner un atributoalt="texto alternativo"
. - TABLE: y sus TR y TD: define una tabla, tr fila y td columna.TH, una celda de encabezado en una tabla.
SPAN: Sirve para diferenciar un texto de otro.
- DIV: división de la página. Se recomienda, junto con css, en vez de
<table>
cuando se desea alinear contenido. Al estudiarlo hace 9 años, lo estudié como el "creador de capas". - UL, OL, LI: Para crear listas numeradas y no numeradas.
- INPUT: El elemento HTML input se usa para crear controles interactivos para formularios basados en la web, que reciban datos del usuario.
- SELECT: representa un control que muestra un menú de opciones. Las opciones contenidas en el menú son representadas por elementos <option> , los cuales pueden ser agrupados por elementos <optgroup> . La opcion puede estar preseleccionada por el usuario.
- TEXTAREA: sirve para la introducción de texto con un número de filas y columnas determinado. <textarea name="nombre" rows="filas" cols="columnas">texto por defecto</textarea>
BLOCKQUOTE: Crea citas en bloque, marca las citas a otros autores o documentos.
Y hasta aquí las etiquetas que aparecen en la Lección 5 de Desarrollo Web parte 01 de Google Activate. ¡Muchas gracias a todos!
Comentarios
Publicar un comentario