Home-theater-designers
Aunque los sitios web modernos generalmente se construyen con interfaces fáciles de usar, es útil conocer algo de HTML básico. Si conoce las siguientes 17 etiquetas de ejemplo HTML (y algunos extras), podrá crear una página web básica desde cero o modificar el código creado por una aplicación como WordPress.
Proporcionamos ejemplos de código HTML con salida para la mayoría de las etiquetas. Si desea verlos en acción, descargue el archivo HTML de muestra al final del artículo. Puede jugar con él en un editor de texto y cargarlo en un navegador para ver qué hacen sus cambios.
1.
Necesitará esta etiqueta al principio de cada documento HTML que cree. Garantiza que un navegador sepa que está leyendo HTML y que espera HTML5, la última versión.
Aunque en realidad no es una etiqueta HTML, es bueno saberlo.
2.
Esta es otra etiqueta que le dice al navegador que está leyendo HTML. La etiqueta va directamente después de la etiqueta DOCTYPE y la cierra con una etiqueta justo al final de su archivo. Todo lo demás en su documento va entre estas etiquetas.
3.
La etiqueta inicia la sección de encabezado de su archivo. Las cosas que entran aquí no aparecen en su página web. En cambio, contiene metadatos para motores de búsqueda e información para su navegador.
Para las páginas básicas, la etiqueta contendrá su título, y eso es todo. Pero hay algunas otras cosas que puede incluir, que repasaremos en un momento.
4.
Esta etiqueta establece el título de su página. Todo lo que necesita hacer es poner su título en la etiqueta y cerrarlo, así (también he incluido las etiquetas de encabezado para mostrar el contexto):
|_+_|Ese es el nombre que se mostrará como título de la pestaña cuando se abra en un navegador.
5.
Al igual que la etiqueta del título, los metadatos se colocan en el área del encabezado de su página. Los metadatos son utilizados principalmente por los motores de búsqueda y son información sobre lo que hay en su página. Hay varios metacampos diferentes, pero estos son algunos de los más utilizados:
- descripción : Una descripción básica de tu página.
- palabras clave : Una selección de palabras clave aplicables a su página.
- autor : El autor de su página.
- ventana gráfica : Una etiqueta para garantizar que su página se vea bien en todos los dispositivos.
A continuación, se muestra un ejemplo que podría aplicarse a esta página:
|_+_|La etiqueta 'viewport' siempre debe tener 'width = device-width, initial-scale = 1.0' como contenido para asegurarse de que su página se muestre bien en dispositivos móviles y de escritorio.
6.
Después de cerrar la sección de encabezado, llega al cuerpo. Abre esto con la etiqueta y lo cierra con la etiqueta. Eso va justo al final de su archivo, justo antes de la etiqueta.
quien me ha bloqueado en facebook
Todo el contenido de su página web se encuentra entre estas etiquetas. Es tan simple como parece:
|_+_|7.
Encabezado ligeramente menos grande
Subencabezado
Resultado:
Como puede ver, se hacen más pequeños en cada nivel.
8.
La etiqueta de párrafo comienza un nuevo párrafo. Esto generalmente inserta dos saltos de línea.
Mire, por ejemplo, la ruptura entre la línea anterior y esta. Eso es lo que un
la etiqueta servirá.
|_+_|Resultado:
Tu primer párrafo.
Tu segundo párrafo.
Tú también puedes usar estilos CSS en sus etiquetas de párrafo, como esta que cambia el tamaño del texto:
|_+_|Resultado:
9.
La etiqueta de salto de línea inserta un solo salto de línea:
|_+_|Resultado:
Trabajar de manera similar es el
etiqueta. Esto dibuja una línea horizontal en su página y es bueno para separar secciones de texto.
10.
Esta etiqueta define texto importante. En general, eso significa que será en negrita. Sin embargo, es posible usar CSS para hacer el texto se muestra de forma diferente.
Sin embargo, puede utilizar de forma segura al texto en negrita.
|_+_|Resultado:
Cosas muy importantes que quieres decir.
Si está familiarizado con el etiqueta para texto en negrita, aún puede usarla. No hay garantía de que continúe funcionando en futuras versiones de HTML, pero por ahora funciona.
11.
Igual que y , y están relacionados. los La etiqueta identifica el texto enfatizado, lo que generalmente significa que se pondrá en cursiva. Nuevamente, existe la posibilidad de que CSS haga que el texto enfatizado se muestre de manera diferente.
|_+_|Resultado:
Una línea enfatizada.
los La etiqueta aún funciona, pero nuevamente, es posible que quede obsoleta en futuras versiones de HTML.
12.
los , o ancla, la etiqueta le permite crear enlaces. Un enlace simple se ve así:
|_+_|Resultado:
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 PDF.
Otros atributos útiles incluyen 'objetivo' y 'título'. El atributo de destino se usa casi exclusivamente para abrir un enlace en una nueva pestaña o ventana, como esta:
|_+_|Resultado:
El atributo 'título' crea una información sobre herramientas. Coloca el cursor sobre el enlace de abajo para ver cómo funciona:
|_+_|Resultado:
Coloca el cursor sobre esto para ver la información sobre herramientas
13. ![]()
Si desea incrustar una imagen en su página, deberá usar la etiqueta de imagen. Normalmente lo usará junto con el atributo 'src'. Esto especifica la fuente de la imagen, así:
|_+_|Resultado:
Hay otros atributos disponibles, como 'alto', 'ancho' y 'alt'. Así es como podría verse eso:
|_+_|Como era de esperar, los atributos 'alto' y 'ancho' establecen el alto y el ancho de la imagen. En general, es una buena idea configurar solo uno de ellos para que la imagen se escale correctamente. Si usa ambos, podría terminar con una imagen estirada o aplastada.
La etiqueta 'alt' le dice al navegador qué texto mostrar si la imagen no se puede mostrar y es una buena idea incluirla con cualquier imagen. Si alguien tiene una conexión especialmente lenta o un navegador antiguo, aún puede hacerse una idea de lo que debería haber en su página.
14.
La etiqueta de 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 elemento de lista (
Resultado:
- Lo primero
- Segunda cosa
- Tercera cosa
En HTML5, puede utilizar
- para invertir el orden de los números. Y puede establecer el valor inicial con el atributo de inicio.
- Primer elemento
- Segundo artículo
- Tercer artículo
- Programación
- Wordpress
- HTML
- Desarrollo web
- Tutoriales de codificación
El atributo 'tipo' le permite decirle al navegador qué tipo de símbolo usar para los elementos de la lista. Se puede configurar en '1', 'A', 'a', 'I' o 'i', configurando la lista para que se muestre con el símbolo indicado de esta manera:
|_+_|15.
La lista desordenada es mucho más simple que su contraparte ordenada. Es simplemente una lista con viñetas.
|_+_|Resultado:
Las listas desordenadas también tienen atributos de 'tipo', y puede configurarlas como 'disco', 'círculo' o 'cuadrado'.
16.
Cada fila de la tabla se encierra en un
La computadora portátil sigue perdiendo la conexión wifi de Windows 10
Resultado:
| 1ra columna | 2da columna |
|---|---|
| Fila 1, columna 1 | Fila 1, columna 2 |
| Fila 2, columna 1 | Fila 2, columna 2 |
17.
Cuando esté citando otro sitio web o persona y desee diferenciar la cita del resto de su documento, use la etiqueta blockquote. Todo lo que necesita hacer es incluir la cita en las etiquetas blockquote de apertura y cierre:
|_+_|Resultado:
La Web como la imaginé, todavía no la hemos visto. El futuro sigue siendo mucho más grande que el pasado.
El formato exacto que se utiliza puede depender del navegador que esté utilizando o del CSS de su sitio. Pero la etiqueta sigue siendo la misma.
Muestras de código HTML
Con estos 17 ejemplos de HTML, debería poder crear un sitio web simple. Puede probarlos todos ahora mismo en un editor de texto en línea para tener una idea de cómo funcionan.
Para obtener más lecciones breves en HTML, pruebe algunas aplicaciones de microaprendizaje para codificación. Te ayudarán a ponerte al día en poco tiempo.
Cuota Cuota Pío Correo electrónico ¿Quiere aprender codificación básica? Pruebe 5 aplicaciones de codificación del tamaño de un bocado en su tiempo libre¿Quiere aprender codificación básica pero tiene poco tiempo? Estas aplicaciones de codificación del tamaño de un bocado le ocuparán solo unos minutos de su ajetreado día.
Leer siguiente Temas relacionadosAndy es un ex periodista impreso y editor de revistas que ha estado escribiendo sobre tecnología durante 15 años. En ese tiempo ha contribuido a innumerables publicaciones y ha realizado trabajos de redacción publicitaria para grandes empresas de tecnología. También ha proporcionado comentarios de expertos para los medios de comunicación y ha organizado paneles en eventos de la industria.
Más de Andy BettsSuscríbete a nuestro boletín
¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Haga clic aquí para suscribirse