A pesar de que los sitios web modernos se construyen generalmente con interfaces fáciles de usar, aún así es bueno saber algo de HTML básico. Si conoces las siguientes etiquetas 17 (y los pocos extra que ir con ellos), usted será capaz de crear una página web básica desde cero o modificar el código creado por una aplicación como WordPress.10 maneras de crear un pequeño y sencillo sitio web sin el Overkill10 maneras de crear un pequeño y sencillo sitio web sin el OverkillWordPress puede ser una exageración. Como estos otros servicios excelentes prueban, WordPress no es el principio y el fin de la creación de sitios web. Si desea que las soluciones más simples, hay una gran variedad para elegir.Lee mas

He proporcionado ejemplos para la mayoría de las etiquetas, pero si quieres verlos en acción, descargue el archivo HTML disponible al final del artículo. Puede jugar con él en un editor de texto y cargarlo en un navegador para ver qué hacen los cambios.

1.

Tendrá que esta etiqueta al principio de cada documento HTML se crea. Se asegura de que un explorador sabe que es HTML lectura, y que espera HTML 5, la última versión.¿Qué es HTML5, y cómo él cambiar la forma hojeo? [Explica MakeUseOf]¿Qué es HTML5, y cómo él cambiar la forma hojeo? [Explica MakeUseOf]En los últimos años, es posible que haya oído el término HTML5 de vez en cuando. Si usted sabe algo sobre el desarrollo web o no, el concepto puede ser algo nebuloso y confuso. Obviamente,...Lee mas

A pesar de que esto no es en realidad una etiqueta HTML, sigue siendo una buena para saber.

2.

Esta es otra etiqueta que indica al navegador que está leyendo HTML. ¿Por qué necesitamos tanto? ¿Quién sabe? Pero es una buena idea poner adentro de todos modos.

Y al final de su documento, añadir una etiqueta.

3.

Para las páginas básicas, la etiqueta contendrá su título, y eso es todo. Pero hay algunas otras cosas que se pueden incluir, lo que vamos a repasar en un momento.

4.

Como era de esperar, esto define el título de la página. Todo lo que necesita hacer es poner su título en la etiqueta y cerrarlo, así (he incluido las etiquetas de cabecera, así):

lt;cabezagt;lt;títulogt;Mi sitio webtítulogt;cabezagt;

Ese es el nombre que se mostrará como el título de la pestaña cuando se abre en un navegador.

5.

Al igual que la etiqueta del título, los metadatos se coloca en el área de encabezado de la página (estos metadatos, a diferencia metadatos de tus dispositivos móviles, no es sensible). Los metadatos se utilizan principalmente por los motores de búsqueda, y es - como era de esperar - información acerca de la información en su página. Hay un número de diferentes campos del meta, pero estos son algunos de los más utilizados:Metadatos - La información acerca de su informaciónMetadatos - La información acerca de su informaciónLee mas

• descripción - Una descripción básica de la página.
• palabras clave - Una selección de palabras clave aplicables a la página.
• autor - El autor de la página.
• ventana - Una etiqueta para asegurarse de que su página se ve bien en todos los dispositivos.

Aquí hay un ejemplo que podría aplicarse a esta página:

lt;meta nombre="descripción" contenido="Un tutorial de HTML básico"gt;lt;meta nombre="palabras clave" contenido="HTML, código, etiquetas"gt;lt;meta nombre="autor" contenido="Dann Albright"gt;lt;meta nombre="ventana" contenido="anchura=dispositivo de ancho, inicial escala=1.0"gt;

La etiqueta “viewport” siempre debe tener “width = dispositivo de ancho, inicial escala = 1,0”, como el contenido para asegurarse de que su página se muestra correctamente en dispositivos móviles y de escritorio.

6.

El cuerpo de su página web - básicamente todo lo que no se ajusta el título en el interior del cuerpo de la etiqueta. Es tan simple como suena:

lt;cuerpogt;Todo lo que desea mostrar en su página.cuerpogt;

7.

los

etiqueta define cabeceras de nivel uno en su página.

define cabeceras de nivel de dos,

nivel tres, y así sucesivamente, hasta llegar

. A modo de ejemplo, los nombres de las etiquetas en este artículo son de nivel dos cabeceras.

lt;h1gt;Cabecera grande e importanteh1gt;lt;h2gt;Ligeramente Cabecera Gran Menosh2gt;lt;h3gt;Sub-cabecerah3gt;

Resultado:

Cabecera grande e importante

Ligeramente Cabecera Gran Menos

Sub-cabecera

Como se puede ver, ellos se hacen más pequeños en cada nivel.

8.

La etiqueta de párrafo comienza un nuevo párrafo. Esto normalmente inserta dos saltos de línea.

Mira, por ejemplo, en la pausa entre la línea anterior y éste. Eso es lo que una

etiqueta va a hacer.

lt;paggt;Su primer párrafo.paggt;lt;paggt;Su segundo párrafo.paggt;

Resultado:

Su primer párrafo.

Su segundo párrafo.

También puede utilizar los estilos CSS en sus etiquetas de párrafo, de esta manera:

lt;pag estilo="tamaño de fuente: 120%-"gt;texto 20% más grandepaggt;

Resultado:

texto 20% más grande

Para aprender a utilizar CSS para el estilo de su texto, prueba estos tutoriales HTML y CSS.Aprender HTML y CSS con estos tutoriales paso a pasoAprender HTML y CSS con estos tutoriales paso a pasoCurioso acerca de HTML, CSS y javascript? Si usted piensa que usted tiene una habilidad especial para aprender a crear sitios web desde cero - aquí están algunas grandes tutoriales paso a paso vale la pena probar.Lee mas

9.

La etiqueta de salto de línea inserta un único salto de línea:

lt;paggt;La primera línea.lt;brgt;La segunda línea (cerca de la primera).paggt;

Resultado:

La primera línea.
La segunda línea (cerca de la primera).

Nota: a veces puede ver esta etiqueta escrita como
o
. Se hace lo mismo (la barra hace que la etiqueta legible XHTML).Aprender a hablar "Internet": Guía para xHTMLAprender a hablar "Internet": Guía para xHTMLBienvenido al mundo de XHTML - Extensible Hypertext Markup Language - un lenguaje de marcado que permite que cualquiera pueda construir páginas web con muchas funciones diferentes. Es el idioma principal de Internet.Lee mas

10.

Esta etiqueta define texto importante. En general, eso significa que va a ser audaz. Sin embargo, es posible usar CSS para hacer Ver el texto de forma diferente.

Sin embargo, se puede utilizar de forma segura al texto en negrita.

lt;fuertegt;cosas muy importantes que usted quiere decir.fuertegt;

Resultado:

cosas muy importantes que usted quiere decir.

Si está familiarizado con el etiqueta para el texto en negrita, todavía puede usarlo. No hay garantía de que seguirá trabajando en las versiones futuras de HTML, pero por ahora, funciona.

11.

Me gusta y , y están relacionados. los identifica la etiqueta hincapié en texto, lo que generalmente significa que obtendrá en cursiva. Una vez más, existe la posibilidad de que el CSS se hacen hincapié en la visualización de texto diferente.

lt;emgt;Una línea de subrayado.emgt;

Resultado:

Una línea de subrayado.

los etiqueta todavía funciona, pero de nuevo, es posible que dejará de estar disponible en versiones futuras de HTML.

Vídeo: Aprenda Braille Fácilmente en 10 Minutos

12.

los , o ancla, la etiqueta le permite crear enlaces. Un simple enlace es el siguiente:

Ir a MakeUseOfun>

Resultado:

Ir a MakeUseOf

El atributo “href” identifica el destino del enlace. En muchos casos, este será otro sitio web. También podría ser un archivo, como una imagen o un archivo PDF.

Otros atributos útiles incluyen “objetivo” y el atributo de destino se utiliza casi exclusivamente para abrir un enlace en una nueva pestaña o ventana, como este “título.”:

<un href="//makeuseof.com/" objetivo="blanco"gt;Ir a MakeUseOf en una nueva pestañaungt;

Resultado:

Ir a MakeUseOf en una nueva pestaña

El atributo “title” crea un texto de ayuda. Pase el ratón sobre el enlace de abajo para ver lo que quiero decir:

lt;un href="//makeuseof.com/" título="Se trata de un COOLtip"gt;Pase el ratón sobre ésteungt;

Resultado:

Pase el ratón sobre éste

13.

Si desea incrustar una imagen en su página, tendrá que utilizar la etiqueta de imagen. La forma más sencilla de usarlo es simplemente agregar la fuente de la imagen en el atributo “src”, como este:

lt;img src="images / HDR-moderation.png"gt;

Resultado:

Eso incluye la imagen. Sin embargo, hay una serie de otros atributos que te gusta desea utilizar, como “altura”, “ancho” y “alt” Así es como debería parecerse.:

lt;img src="images / HDR-moderation.png" anchura="320" alt="el nombre de su imagen"gt;

Resultado:

Como era de esperar, la “altura” y atributos “ancho” establecer la altura y la anchura de la imagen. En general, es una buena idea sólo para establecer una de ellas por lo que la imagen Escalas correctamente. Si utiliza tanto, usted podría terminar con una imagen alargado o deformado.

La etiqueta “alt” le dice al navegador qué texto que se mostrará si la imagen no se puede visualizar, y es una buena idea incluir en cualquier imagen. Si alguien tiene una conexión especialmente lento o un navegador de edad, todavía puede tener una idea de lo que tiene en su página.4 razones por las que su Wi-Fi es tan lenta (y cómo solucionarlos)4 razones por las que su Wi-Fi es tan lenta (y cómo solucionarlos)Cuando usted confía en Wi-Fi, los problemas de velocidad puede hacer daño - y los problemas de velocidad Wi-Fi no siempre son fáciles de diagnosticar. Aquí hay algunas cosas que usted debe comprobar.Lee mas

14.

La etiqueta lista ordenada le permite crear una lista ordenada. En general, eso significa que obtendrá una lista numerada. Cada elemento de la lista necesita una etiqueta de lista de elementos (

lt;olgt;lt;ligt;Lo primeroligt;lt;ligt;Segunda cosaligt;lt;ligt;lo terceroligt;olgt;

Resultado:

1. Lo primero
2. Segunda cosa
3. lo tercero

En HTML5, puede utilizar

para invertir el orden de los números. Y se puede establecer el valor inicial con el atributo de inicio. El atributo “tipo” le permite informar al navegador qué tipo de símbolo que se utilizará para los elementos de la lista. Puede ser ajustado en “1”, “A”, “una”, “I” o “i”, el establecimiento de la lista para mostrar con el símbolo indicado.

15.

La lista no ordenada es mucho más simple que su contraparte ordenada. Se trata simplemente de una lista con viñetas.

lt;ulgt;lt;ligt;En primer elementoligt;lt;ligt;segundo elementoligt;lt;ligt;tercer puntoligt;ulgt;

Resultado:

• En primer elemento
• segundo elemento
• tercer punto

Las listas desordenadas también tienen atributos “tipo”, y usted puede ponerlo en “disco”, “círculo” o “cuadrado”.

dieciséis.

Durante el uso de tablas para el formato está mal visto, hay un montón de ocasiones en las que desea utilizar filas y columnas para la información del segmento en su página. Hay una serie de etiquetas que tendrá que utilizar para conseguir una mesa para trabajar. Echar un vistazo a este ejemplo y verá lo que quiero decir:

lt;mesagt;lt;tbodygt;lt;trgt;lt;ºgt;Primera columnaºgt;lt;ºgt;La segunda columnaºgt;trgt;lt;trgt;lt;tdgt;Fila 1, columna 1tdgt;lt;tdgt;Fila 1, columna 2tdgt;trgt;lt;tdgt;Fila 2, columna 1tdgt;lt;tdgt;Fila 2, columna 2tdgt;tbodygt;mesagt;

Cada etiqueta rodea una cabecera (que a veces puede ver estas encerrado en una etiqueta, también). pone en marcha el cuerpo de la tabla. los etiqueta pone en marcha una nueva fila de la tabla, y cada etiqueta identifica una celda en esa fila.

17.

Cuando se está citando a otro sitio web o de la persona y que desea establecer el presupuesto aparte del resto del documento, la etiqueta blockquote lo hará por ti. Todo lo que necesita hacer es encerrar la cita en las etiquetas de apertura y cierre BlockQuote:

lt;blockquotegt;No debo temer. El miedo es el asesino de la mente. El miedo es la pequeña muerte que conduce a la destrucción total. Me enfrentaré a mi miedo. Voy a permitir que pase sobre mí y por mí. Y cuando haya pasado, voy a girar el ojo interno para ver su paso. Donde el miedo se ha ido no habrá nada. Sólo me quedaré.blockquotegt;

Resultado:

No debo temer. El miedo es el asesino de la mente. El miedo es la pequeña muerte que conduce a la destrucción total. Me enfrentaré a mi miedo. Voy a permitir que pase sobre mí y por mí. Y cuando haya pasado, voy a girar el ojo interno para ver su paso. Donde el miedo se ha ido no habrá nada. Sólo me quedaré.

El formato exacto que se utiliza puede depender del navegador que está utilizando o el CSS de su sitio. Sin embargo, la etiqueta sigue siendo el mismo.

Go Forth y HTML

Con estos 17 etiquetas HTML (y un poco más de los acompañantes) que debe ser capaz de crear una página web sencilla. Para ver cómo poner a todos juntos, se puede descargar la página HTML de ejemplo que he creado. Puede abrirlo en su navegador para ver cómo todo se junta, o en un editor de texto para ver exactamente cómo funciona el código.

¿Utiliza HTML de forma regular? ¿Qué otras etiquetas a encontrar que se utiliza comúnmente? Comparte tus consejos en los comentarios!