Home-theater-designers
HTML es una parte vital de la web tal como la conocemos. Y aunque pocos diseñadores web crean páginas escribiendo HTML manualmente, sigue siendo útil saber un poco al respecto.
cómo eliminar eventos en el calendario de iphone
Veremos algunos conceptos básicos del lenguaje, incluido qué es HTML en realidad, algunos conceptos fundamentales y cómo interactúa con otros lenguajes. Piense en esto como un curso intensivo de 'HTML para principiantes'.
Conceptos básicos de HTML: ¿Qué es HTML?
HTML significa Lenguaje de marcado de hipertexto . Y aunque a veces se agrupa con lenguajes de programación, esto no es exacto.
Como un lenguaje de marcado , HTML solo le permite crear el diseño de visualización de las páginas. Una verdad lenguaje de programación , como Java o C ++, contiene lógica y comandos que se ejecutan.
Si bien es simple, HTML es la columna vertebral de todas las páginas de la web. Es responsable de qué texto aparece en negrita, agregar imágenes y vincular a otras páginas. Tenemos una sección de preguntas frecuentes sobre HTML que explica más.
Puede hacer clic con el botón derecho en la mayoría de las páginas web de su navegador y elegir Ver código fuente o similar para ver el HTML detrás de ellos. Es probable que también contenga una gran cantidad de código que no es HTML, pero puede examinarlo.
Incluso si no tiene experiencia con el marcado o los lenguajes de programación, aprender un poco sobre HTML lo convertirá en un usuario web más informado. Veamos cinco pasos básicos para ayudarlo a comprender cómo funciona HTML. Proporcionaremos ejemplos a lo largo del camino.
Paso 1: comprensión del concepto de etiquetas
HTML utiliza un sistema de etiquetas para categorizar diferentes elementos del documento.
La mayoría de las etiquetas vienen en pares para envolver el texto afectado dentro de ellas. Aquí hay un ejemplo simple (el
|_+_|
etiqueta hace texto negrita ; discutiremos esto más en un momento).
|_+_|
Observe cómo la etiqueta de cierre comienza con una barra inclinada (/). Esto significa una etiqueta de cierre, que es importante. Si no cierra una etiqueta, todo, desde el principio en adelante, tendrá ese atributo.
Sin embargo, no todas las etiquetas tienen un par. Algunos elementos HTML, llamados elementos vacíos , no tienen contenido y existen por sí mismos. Un ejemplo es el
|_+_|etiqueta, que es un salto de línea. Puede 'cerrar' dichas etiquetas agregando una barra (como
|_+_|) pero no es estrictamente necesario.
Paso 2: el diseño HTML esqueleto
Un documento HTML adecuado debe tener determinadas etiquetas definidas para que se distribuya correctamente. Estas son las partes esenciales:
- Cada documento HTML debe comenzar con
This is some bold text ., es el último elemento de un archivo HTML. - A continuación, el
- Finalmente, el
La etiqueta contiene el texto de la página que ve el lector (y mucho más). Aquí encontrará imágenes, enlaces y más.
Desde el
|_+_|constituye la mayor parte de un documento HTML, el resto de nuestro tutorial analiza los elementos que le pertenecen.
Paso 3: Etiquetas HTML básicas para formatear
A continuación, veamos algunas etiquetas comunes que componen los documentos HTML. Por supuesto, no es posible cubrir todos los elementos, por lo que revisaremos algunos de los más importantes. Hemos cubierto muchos más ejemplos de HTML si estos no te satisfacen.
Si estas etiquetas parecen bastante básicas, recuerde que HTML se creó en 1993. La web se basaba mucho en texto en sus primeras etapas.
Formato de texto simple
HTML admite estilos de texto básicos como los que encontrarías en Microsoft Word:
las etiquetas hacen texto negrita .etiquetas (que significa 'énfasis') escribir en cursiva texto.
HTML también es compatible con los antiguos
|_+_|etiqueta para negrita y
|_+_|para cursiva. Sin embargo, es preferible utilizar los anteriores.
En breve,
|_+_|y
|_+_|muestran cómo debe entenderse algo, mientras que las últimas etiquetas solo le dicen cómo debe verse. Estas antiguas etiquetas son más accesibles para los lectores de pantalla utilizados por personas con discapacidad visual.
Párrafo y otras divisiones
HTML
|_+_|etiqueta le permite definir una sección del documento. Por lo general, esto se combina con CSS (ver más abajo) para formatear una sección de cierta manera.
los
|_+_|La etiqueta le permite dividir el texto en párrafos. Los navegadores colocarán automáticamente algo de espacio antes y después de estos, lo que le permitirá dividir el texto de forma natural.
Puede agregar encabezados a su documento y hacer que sea más fácil de seguir usando el
|_+_|mediante
|_+_|etiquetas. H1 es el encabezado más importante, mientras que H6 es el menos importante. Casi todos los artículos de MakeUseOf utilizan encabezados H2 y H3 para organizar la información.
Golpeando Ingresar agregar saltos de línea en su documento HTML en realidad no los mostrará. En su lugar, puede utilizar
cómo agregar una fuente a gimp|_+_|
para agregar un salto de línea.
Aquí hay un ejemplo que usa todos estos:
|_+_|
Paso 4: Insertar imágenes
Las imágenes son una parte vital de la mayoría de las páginas web. Puede agregarlos fácilmente con HTML e incluso establecer diferentes propiedades para ellos.
Inserta una imagen usando el
|_+_|etiqueta. Combinando esto con el
|_+_|El atributo te permite especificar desde dónde quieres que se cargue la imagen.
Otro atributo importante de
|_+_|etiquetas es
|_+_|. El texto alternativo le permite describir la imagen para lectores de pantalla o en caso de que la imagen no se cargue correctamente. Puede pasar el mouse sobre una imagen para ver su texto alternativo.
Utilizar el
|_+_|y
|_+_|elementos para especificar el número de píxeles en los que aparece la imagen.
Ponlo todo junto, y una etiqueta de imagen se verá así:
|_+_|
Paso 5: agregar enlaces
La World Wide Web no sería una gran red sin enlaces a otras páginas. Utilizando el
|_+_|etiqueta, puede vincular a otras páginas en cualquier texto.
Dentro de
|_+_|etiqueta, la
|_+_|El atributo indica dónde está enlazando. Simplemente pegar la URL funcionará bien. Puedes usar el
|_+_|elemento para agregar un poco de texto que aparece cuando alguien pasa el mouse sobre el enlace.
Un enlace básico se ve así:
|_+_|
los
|_+_|La etiqueta tiene muchos otros elementos posibles, pero no los profundizaremos aquí.
Cómo se conecta HTML con CSS y JavaScript
Hemos analizado lo básico de HTML y cómo establece una página web. Pero como puede imaginar, HTML por sí solo no es suficiente para la web moderna. Las páginas web HTML simples eran comunes en los días de la 'Web 1.0', cuando la mayoría de los sitios web no eran más que texto estático.
Pero ahora tenemos mucho más. CSS (Hojas de estilo en cascada) es un lenguaje que se utiliza para describir cómo debe verse el texto que preparó en HTML. Recuerda el
|_+_|etiqueta que discutimos? Dentro de esta (y otras etiquetas), puede definir una
|_+_|atributo. Luego, en el documento CSS que lo acompaña, puede escribir instrucciones sobre cómo
|_+_|Debería mirar.
Puede definir estos elementos de estilo en línea en su código HTML, pero esto se considera una mala práctica ya que es mucho más difícil de mantener. Más información con estos sencillos ejemplos de CSS . También echa un vistazo cómo optimizar sus archivos CSS .
JavaScript
Hemos visto que HTML define el contenido y CSS determina la apariencia. JavaScript, el último miembro del trío vital para la web, permite que las páginas web respondan a las acciones de las personas sin tener que cargar una página nueva cada vez.
Por ejemplo, JavaScript permite que un sitio web le advierta que la contraseña que ingresó no cumple con sus requisitos antes de que intente enviarla. Un diseñador web puede usar JavaScript para recorrer las imágenes en una presentación de diapositivas o pedirle al usuario que ingrese.
cómo salir de un chat grupal iphone
Estos son solo algunos ejemplos elementales. JavaScript es un lenguaje de programación que es capaz de hacer mucho y es comparativamente mucho más complicado que HTML y CSS. Ver nuestra descripción general de JavaScript por mucho más.
Mirar el alcance completo del diseño web está más allá del alcance de este artículo, pero basta con decir que HTML interactúa con otros lenguajes para crear las páginas web que conocemos hoy.
La evolución de HTML
Es importante tener en cuenta que HTML no es estático. HTML ha pasado por varias revisiones, la más reciente es HTML 5. En particular, este estándar admite la incrustación de video nativo en lugar de depender de formatos propietarios como Adobe Flash.
Las nuevas iteraciones de HTML también declaran ciertas etiquetas arcaicas como obsoletas de vez en cuando. Estos incluyen etiquetas horribles como
|_+_|y
|_+_|(ese texto de desplazamiento y flash, respectivamente) que se ve comúnmente en el diseño de sitios web de la década de 1990. Por tanto, tenga en cuenta que los estándares cambian con el tiempo.
Un poco de conocimiento de HTML es muy útil
Hemos realizado un breve recorrido por cómo funciona un documento HTML. Ahora conoce los fundamentos de cómo se estructuran las páginas web. Incluso si no continúa creando páginas web, está un poco más al tanto de la web que usa todos los días.
Para obtener más información, actualice sus habilidades de desarrollo web con herramientas esenciales y luego consulte nuestra guía sobre cómo diseñar su primer sitio web .
Crédito de la imagen: Belyaevskiy / Depositphotos
Cuota Cuota Pío Correo electrónico 5 consejos para potenciar sus máquinas Linux VirtualBox¿Cansado del bajo rendimiento que ofrecen las máquinas virtuales? Esto es lo que debe hacer para mejorar el rendimiento de VirtualBox.
Leer siguiente Temas relacionados- Programación
- HTML
- Desarrollo web
- JavaScript
- Herramientas para webmasters
- Programación
- HTML5
Ben es editor adjunto y director de incorporación de MakeUseOf. Dejó su trabajo de TI para escribir a tiempo completo en 2016 y nunca miró hacia atrás. Ha estado cubriendo tutoriales de tecnología, recomendaciones de videojuegos y más como escritor profesional durante más de siete años.
Más de Ben StegnerSuscrí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