Todos conocemos y usamos el lenguanje HTML y HTML5 todos los días en las paginas web que utilizamos. Muchas veces nos hemos preguntado ¿Cómo se hace una página web con HTML5? la respuesta es muy sencilla. Con este curso de HTML para principiantes vas a conocer los principios básicos de este código primordial para los desarrolladores web en todo sentido.
y… puede que pienses ¡Tanto código!
En realidad este lenguaje de programación es uno de los más sencillos y útiles de aprender. Sus etiquetas son muy especificas y claras. No tendrás mayor problema en desarrollar tu primer proyecto.
Para desarrollar páginas web no solamente necesitamos html. Si quieres consultar otros lenguajes, como PHP, mira aquí y aprende los fundamentos de este lenguaje que también es muy útil para el desarrollo web.
Ya lo verás a continuación…
Curso de HTML: Conceptos básicos de HTML
En este curso de html aprenderás los elementos más básicos para usar este lenguaje de código para crear una página HTML. De esta manera vas a poder mostrarla en un navegador web.
Para este curso vas a necesitar un editor de texto, como el Block de notas, y un navegador de Internet como Internet Explorer o Google Chrome.
¿Qué es el Bloc de notas y dónde lo obtengo? El Notepad es el editor de texto por defecto de Windows. En la mayoría de los sistemas Windows basta con hacer click en el botón Inicio y seleccionas Programas y Accesorios.
Debe ser un ícono de un cuaderno azul. Para usuarios de Mac, en OSX, utiliza TextEdit y fíjíate muy bien de cambiar las preferencias.
Las siguientes preferencias: Selecciona (en la ventana de preferencias) Texto simple en lugar de Texto enriquecido.
A continuación, selecciona Omitir comandos de texto enriquecido en archivos HTML.
Esto es muy importante porque si no lo haces los códigos HTML probablemente no funcionarán.
Una cosa que debes evitar el uso es un procesador de textos (como Microsoft Word) para la creación de tus documentos HTML.
¿Qué es un archivo html?
HTML es un formato que le dice a un ordenador cómo mostrar una página web. Los propios documentos son archivos de texto sin formato con “etiquetas” o códigos especiales que utiliza un navegador web para interpretar y mostrar información en la pantalla de tu computadora.
Un archivo HTML es un archivo de texto que contiene pequeñas etiquetas de marcado. Las etiquetas de marcado indican al navegador Web cómo mostrar la página. Un archivo HTML debe tener una extensión de archivo htm o html
¿Lo intentamos?
Abre tu editor de texto y escribe el texto siguiente:
<Html>
<Head>
<Title> Mi primera página web </ title>
</ Head>
<Body>
Esta es mi primera página de inicio. <B> Este texto está en negrita </ b>
</ Body>
</ Html>
Guarda el archivo como mypage.html. Inicia tu navegador de Internet. Selecciona Abrir (o Abrir página) en el menú Archivo de tu navegador.
Un cuadro de diálogo aparecerá. Selecciona Examinar (o seleccionar archivo) y busca el archivo html que acabas de crear llamado mypage.html haz click en Abrir.
Lo que acabas de hacer es un documento html esqueleto. Esta es la información mínima requerida para un documento web y todos los documentos web deben contener estos componentes básicos.
La primera etiqueta en su documento html es <html>. Esta etiqueta le dice a tu navegador que este es el comienzo de un documento html. La última etiqueta del documento es </ html>. Esta etiqueta le dice a su navegador que este es el final del documento html.
El texto entre la etiqueta <head> y la etiqueta </ head> es información del encabezado. La información del encabezado no se muestra en la ventana del navegador.
El texto entre las etiquetas <title> es el título de su documento. La etiqueta <title> se utiliza para identificar de forma exclusiva cada documento y también se muestra en la barra de título de la ventana del navegador.
El texto entre las etiquetas <body> es el texto que se mostrará en tu navegador.
El texto entre las etiquetas <b> y </ b> se mostrará en negrita.
HTM o extensión HTML
Cuando guardas un archivo HTML, puedes utilizar la extensión .htm o .html. La extensión .htm viene del pasado cuando algunos de los programas de uso común que sólo permitían tres extensiones de carta.
Es perfectamente seguro usar .html o .htm. Pero sé consistente. Mypage.htm y mypage.html son tratados como archivos diferentes por el navegador.
Cómo ver código HTML5
Una buena manera de aprender HTML es mirar cómo otras personas han codificado sus páginas html. Para averiguarlo, simplemente haces click en la opción Ver en la barra de herramientas de tu navegador y selecciona Origen o Fuente de página.
Esto abrirá una ventana que le mostrará el HTML real de la página. Adelante y ver el html de origen para esta página.
Etiquetas HTML ¿Qué son las etiquetas HTML?
Las etiquetas HTML se utilizan para marcar elementos HTML. Están rodeadas por los dos caracteres <y>. Las etiquetas HTML normalmente vienen en parejas como <b> y </ b>. La primera etiqueta de un par es la etiqueta de inicio. La segunda etiqueta es la etiqueta de finalización.
El texto entre las etiquetas de inicio y de fin es el contenido del elemento. Las etiquetas HTML no distinguen entre mayúsculas y minúsculas. <b> significa lo mismo que <B>
Etiquetas lógicas vs. físicas
En HTML hay tanto etiquetas lógicas como etiquetas físicas. Las etiquetas lógicas están diseñadas para describir (al navegador) el significado del texto adjunto. Un ejemplo de una etiqueta lógica es la etiqueta <strong> </ strong>.
Al colocar texto entre estas etiquetas le está diciendo al navegador que el texto tiene una mayor importancia. De forma predeterminada, todos los navegadores hacen que el texto aparezca en negrita cuando se encuentre entre las etiquetas <strong> y </ strong>.
Por otro lado, las etiquetas físicas proporcionan instrucciones específicas sobre cómo mostrar el texto que contienen. Ejemplos de etiquetas físicas incluyen:
<b>: Hace que el texto en negrita.
Se inventaron etiquetas físicas para agregar estilo a páginas HTML porque las hojas de estilo no estaban alrededor. Aunque la intención original de HTML era no tener etiquetas físicas. En lugar de utilizar etiquetas físicas para el estilo de sus páginas HTML, debe utilizar hojas de estilo.
Elementos HTML
Recuerda el ejemplo HTML de la página anterior:
<Html>
<Head>
<Title> Mi primera página web </ title>
</ Head>
<Body>
Esta es mi primera página de inicio. <B> Este texto está en negrita </ b>
</ Body>
</ Html>
Este es un elemento HTML:
<B> Este texto está en negrita </ b>
El elemento HTML comienza con una etiqueta de inicio: <b>
El contenido del elemento HTML es: Este texto está en negrita
El elemento HTML termina con una etiqueta de fin: </ b>
El propósito de la etiqueta <b> es definir un elemento HTML que se debe mostrar en negrita.
Este es también un elemento HTML:
<Body>
Esta es mi primera página de inicio. <B> Este texto está en negrita </ b>
</ Body>
Este elemento HTML comienza con la etiqueta de inicio <body> y termina con la etiqueta de fin </ body>. El propósito de la etiqueta <body> es definir el elemento HTML que contiene el cuerpo del documento HTML.
Etiquetas anidadas
Es posible que hayas notado en el ejemplo anterior, la etiqueta <body> también contiene otras etiquetas, como la pestaña <b>. Cuando se incluye un elemento con varias etiquetas, la última etiqueta abierta debe ser la primera etiqueta cerrada. Por ejemplo:
<P> <b> <em> Esta no es la forma correcta de cerrar etiquetas anidadas. </ P> </ em> </ b>
<P> <b> <em> Esta es la forma correcta de cerrar etiquetas anidadas. </ Em> </ b> </ p>
No importa qué etiqueta sea primero, sino que deben estar cerradas en el orden correcto.
¿Por qué utilizar etiquetas en minúsculas?
Podrías notar que hemos utilizado etiquetas en minúsculas aunque dije que las etiquetas HTML no distinguen entre mayúsculas y minúsculas.
<B> significa lo mismo que <b>.
Atributos de etiquetas
Las etiquetas pueden tener atributos. Los atributos pueden proporcionar información adicional sobre los elementos HTML de tu página. El <tag> le dice al navegador que haga algo, mientras que el atributo le dice al navegador cómo hacerlo.
Por ejemplo, si añadimos el atributo bgcolor, podemos decirle al navegador que el color de fondo de su página debe ser azul, como esto: <body bgcolor = “blue”>.
Esta etiqueta define una tabla HTML: <table>. Con un atributo de borde añadido, puede decirle al navegador que la tabla no debe tener bordes: <table border = “0”>.
Los atributos siempre vienen en pares nombre / valor como este: name = “value”. Los atributos siempre se añaden a la etiqueta de inicio de un elemento HTML y el valor está rodeado por comillas.
¿Estilos de la cita, “rojo” o “rojo”?
Los valores de los atributos deben estar siempre encerrados entre comillas. Las citas de estilo doble son las más comunes, pero también se permiten citas de estilo único.
En algunas situaciones poco convensionales, como cuando el valor del atributo en sí contiene cotizaciones, es necesario utilizar comillas simples:
Nombre = “George” la ametralladora “Kelly”
Etiquetas HTML básicas
Las etiquetas más importantes en HTML son etiquetas que definen encabezados, párrafos y saltos de línea.
<Html> Define un documento HTML
<Body> Define el cuerpo del documento
<H1> a <h6> Define el encabezado 1 en el encabezado 6
<P> Define un párrafo
<br> Inserta un salto de línea
<Hr> Define una regla horizontal
Los encabezados se definen con las etiquetas <h1> a <h6>. <H1> define el encabezado más grande mientras <h6> define el más pequeño.
<H1> Este es un encabezado </ h1>
<H2> Se trata de un encabezado </ h2>
<H3> Se trata de un encabezado </ h3>
<H4> Se trata de un encabezado </ h4>
<H5> Se trata de un encabezado </ h5>
<H6> Se trata de un encabezado </ h6>
Colores HTML: Valores de color
Los colores se definen mediante una notación hexadecimal para la combinación de valores de color rojo, verde y azul (RGB). El valor más bajo que se puede dar a una fuente de luz es 0 (hex # 00). El valor más alto es 255 (hex #FF). Esta tabla muestra el resultado de combinar rojo, verde y azul:
Nombres de color
Solamente 16 nombres del color son apoyados por el estándar del HTML. Aqua, negro, azul, fucsia, gris, verde, cal, marrón, marina de guerra, aceituna, púrpura, rojo, plata, trullo, blanco, y amarillo.
Colores seguros en la Web
Hace algunos años, cuando la mayoría de las computadoras sólo admitían 256 colores diferentes, sugirió una lista de 216 colores seguros web como un estándar Web.
La razón de esto era que el sistema operativo de Microsoft y Mac utilizaba 40 colores de sistema fijo “reservados” diferentes (aproximadamente 20 cada uno).
Esta paleta de 216 colores seguros de seguridad en la web se creó originalmente para garantizar que todas las computadoras mostrarían todos los colores correctamente al ejecutar una paleta de 256 colores.
16 millones de colores diferentes
La combinación de valores Rojo, Verde y Azul de 0 a 255 da un total de más de 16 millones de colores diferentes para jugar (256 x 256 x 256). La mayoría de los monitores modernos son capaces de mostrar al menos 16.384 colores diferentes.
Imágenes HTML: La etiqueta de imagen y el atributo Src
La etiqueta <img> está vacía, lo que significa que sólo contiene atributos y no tiene etiqueta de cierre. Para mostrar una imagen en una página, debes utilizar el atributo src. Src significa “fuente”. El valor del atributo src es la URL de la imagen que deseas mostrar en tu página.
<img src=”graphics/creativiu.gif”>
El atributo Alt
El atributo alt se utiliza para definir un texto alternativo para una imagen. El valor del atributo alt es un texto definido por el autor:
<Img src = “graphics / creativiu.gif” alt = “Creativiu escuela online”>
El atributo alt le dice al lector lo que le falta en una página si el navegador no puede cargar imágenes. El navegador mostrará el texto alternativo en lugar de la imagen. Es una buena práctica incluir el atributo alt de cada imagen en una página.
Para mejorar la visualización y la utilidad de su documento para las personas que sólo tienen navegadores de texto o utilizan lectores de pantalla.
Todo lo que acabamos de ver nos servirá para realizar nuestra primera página web básica. Si deseas dedicarte al desarrollo web vas a tener que ver mucho de este curso de html y aprender a más profundidad.
Si eres principiante pudiste conocer en esta guía los principios fundamentales de html y por ende, de web.
Espero que haya sido muy productivo este artículo y que logres desarrollar la mejor página web que hayas podido hacer.
No olvides comentarme. ¿Qué te pareció este curso de html para principiantes?
More from my site
