La guía para principiantes de HTML y CSS

Aunque puede encontrar muchas tecnologías diferentes que impulsan nuestros sitios hoy, los dos archivos más importantes en todo Internet son HTML y CSS. Sí, si necesita algo complejo, también necesitará más tecnologías que lo acompañen. Pero si lo único que desea es crear una página web personal sencilla, todo lo que necesita es HTML y CSS.

Introducción a los fundamentos

Esta es una guía para principiantes de HTML y CSS que le mostrará cómo crear un sitio simple lo más rápido posible. Los resultados no serán necesariamente “compatibles con los estándares”. Y tendrá que leer un poco por su cuenta si desea modificarlo y expandirlo más. Pero será un sitio y funcionará “como debería” en la mayoría de los navegadores.

Dado que el espacio es un bien escaso, no profundizaremos demasiado en todos los aspectos del desarrollo y diseño web. En cambio, lo guiaremos a través de los pasos para pasar de cero a una página web completamente funcional, explicando lo que hace todo en el proceso.

Los dos archivos necesarios

Un sitio moderno consta de muchos archivos, pero dos son los más esenciales: un archivo HTML y un archivo CSS. El archivo HTML define los elementos y la estructura de una página. El archivo CSS define la apariencia de esos elementos.

Ambos son archivos de texto esencialmente típicos, que contienen texto específicamente estructurado. No necesita ningún tipo de programa especial para crearlos o modificarlos: cualquier editor de texto “simple” servirá. Por “simple”, nos referimos a su aplicación típica de estilo de bloc de notas, no a algo como el editor de LibreOffice o Microsoft Words que podría “enriquecer” el texto de alguna manera.

El primer paso es crear una nueva carpeta en su escritorio con dos archivos de texto vacíos dentro. Nombra uno de ellos “index.html” y el segundo “style.css”.

Crear archivos HTML y CSS de un sitio

Configura tu espacio de trabajo

Ejecute su navegador favorito y cargue el archivo HTML en él, ya sea seleccionando “Archivo -> Abrir” o arrastrando y soltando el archivo en su ventana.

Abra tanto el archivo HTML como el CSS en su editor de texto tipo bloc de notas favorito.

Poder ver las tres ventanas al mismo tiempo es la forma más conveniente de trabajar. Si no tiene dos pantallas para distribuirlas, le recomendamos que organice las ventanas como en la imagen de abajo.

Hacer una configuración de espacio de trabajo del sitio

“Pegue” la ventana de su navegador en un lado de la pantalla para ocupar la mitad (verticalmente) 4 y coloque las dos ventanas del bloc de notas en el otro lado, una debajo del otro.

Bloques de construcción

Escriba algo en el bloc de notas con el archivo HTML y guarde los cambios. A continuación, actualice la ventana de su navegador presionando F5. Verá inmediatamente que el texto que ha escrito aparece en la ventana de su navegador.

¡Felicitaciones por configurar su primer sitio! Y no estamos bromeando, ya que los primeros sitios en Internet no diferían mucho en su apariencia en comparación con lo que acaba de crear. Lo importante, en ese entonces, era el contenido en sí.

HTML le permite “marcar qué es cada contenido”, utilizando un conjunto específico de “códigos”. Algunas de las más importantes son:

  • html: Denota un documento html. Debe estar al comienzo de cada archivo html.
  • body: Todo el contenido que ve en un navegador está incluido en este body etiqueta. Representa el aspecto visual de un documento html.
  • p: Párrafo de texto
  • img: Imágenes
  • a href: Enlaces a direcciones web
  • div: Establece un “cuadro” alrededor de cualquier contenido que luego pueda “aplicar estilo” con CSS.

Para “definir” un fragmento de contenido, normalmente tiene que estar encerrado por el mismo código con una ligera diferenciación al principio y al final. Por ejemplo, un párrafo de texto se define como:

” indica que “lo que sigue es un párrafo” y “

” que “el párrafo termina aquí”. Al reemplazar “p” con “div” en ambos casos, define un cuadro que encierra el contenido en lugar de “marcarlo como un párrafo”.

Tenga en cuenta que hay excepciones: elementos como imágenes (img) y líneas divisorias (hr) no requieren un “código de cierre”.

Hacer un primer párrafo del sitio

Cambiar y actualizar

Reemplace todo en su archivo HTML con lo siguiente:

Actualice su navegador (F5) y verá las palabras HEADER, CONTENT y FOOTER aparecer una debajo de la otra. Acabamos de crear tres cajas “div” invisibles y autónomas. Cada uno de ellos contiene una de las palabras.

Para poder definir su apariencia a través de CSS, a cada uno le asignamos una palabra clave, una “identidad” (el “id = nombre” en el código), correspondiente a su contenido: encabezado, contenido y pie de página. Todos los elementos de una página web pueden tener dicho alias, configurado como una “clase” o una “identificación”. Las clases definen alias para elementos que aparecen varias veces en la misma página web, como párrafos, enlaces, etc. Los ID definen alias para elementos que aparecen solo una vez en cada página, como el nombre o el logotipo de un sitio.

Crear un pie de página de contenido de encabezado de sitio

Contenido real

Elimine la palabra “HEADER” entre los códigos div, sin cambiar su estructura, y en su lugar, ingrese el nombre que le gustaría para su sitio.

Haga lo mismo con su “CONTENIDO”, pero en lugar de simplemente ingresar texto, también asegúrese de “marcar” el principio y el final de cada párrafo como vimos anteriormente. Reemplace el “CONTENIDO” con dos o tres párrafos de texto.

Ahora es el momento de hablar también de enlaces. Para convertir cualquier frase de su texto en un enlace, estructúrelo como:

Puede copiar y pegar esto y reemplazar “DIRECCIÓN” con “lo que desea que apunte su enlace” y el “TEXTO” con la frase que aparecerá en su sitio. Vinculamos una frase en nuestro pie de página a nuestro sitio web con lo siguiente:

Finalmente, reemplace la palabra “PIE de página” con su nombre, una pequeña oración que indica quién diseñó o es dueño del sitio o cualquier otra cosa que desee.

Guarde los cambios y actualice su navegador para verlos allí.

Convertir un sitio en contenido real

Tienes estilo (.CSS)

El primer elemento de cualquier página web es la cabecera. En él, generalmente encontramos código que define la identidad del sitio, su nombre, creador e idioma, así como cualquier tecnología, además de HTML. utilizado en él. Ahí es donde se encuentran la mayoría de los enlaces a archivos JavaScript y CSS externos. Agregue uno a su sitio insertando lo siguiente en la parte superior de su archivo HTML, justo después del html etiqueta:

Para poder diseñar los elementos de una página web con CSS, deberá cargar el archivo CSS desde dentro del HTML. Y esto significa incluirlo en tu “cabeza”. Lo siguiente indica que la página HTML se “vinculará” a un archivo de “hoja de estilo”, de tipo “texto / css”. llamado “style.css”:

Copie y pegue nuestro código, tal como lo ve, “dentro” del encabezado, es decir, debajo de “” y arriba de “”. Guarde los cambios y dirija su atención al archivo CSS. Allí, ingrese lo siguiente:

Hacer un sitio primero CSS

Sitio real

CSS, o hojas de estilo en cascada, son simplemente conjuntos de reglas de visualización que corresponden a elementos específicos de una página web. Con CSS podemos diseñar tanto “dónde” y “cómo” todo aparecerá en una página web.

En el paso anterior, presentamos un conjunto de reglas en blanco para todos los elementos de nuestra página. Ahora, veamos cómo podemos agregarles parámetros que definirán su apariencia.

Comience con el cuerpo, que incluye todo en su sitio web. Modifíquelo de la siguiente manera:

Las reglas anteriores establecen que queremos que nuestro sitio ocupe todo el ancho de la ventana del navegador (ancho: 100%), que no queremos que tenga ninguna distancia de los bordes de la ventana del navegador (margen: 0), y no quiere cualquier espacio en blanco a su alrededor (relleno: 0).

Todas las reglas de un elemento deben incluirse entre corchetes y cada regla debe terminar con un “;” como el siguiente:

Continúe actualizando su CSS “#header, #content, #footer” a lo siguiente:

Con esto, estás diciendo que la posición de los tres elementos debe seguir algunas reglas comunes: cada uno debe ser “relativo” al anterior y “seguirlo” (float: left). No importa su tamaño, forma, apariencia o cualquier otro factor, cada uno de ellos “empujará” el siguiente elemento y nunca se superpondrán.

Actualice #header, #footer con lo siguiente para que su página web se parezca más a un sitio real:

Lo anterior define que queremos que tanto el encabezado como el pie de página de nuestro sitio web sean 100% de ancho, 100 píxeles de alto, y que el texto que se muestra en ellos tenga un tamaño de 3em y esté centrado.

Las reglas de fondo y color especifican, respectivamente, qué color tendrá todo el encabezado y pie de página “div box” y el color de cualquier texto contenido en ellos. “RGBA” establece el color según el estándar de mezcla de colores rojo, verde y azul. Cada color puede tener un valor de 0 a 255, con combinaciones de diferentes valores de rojo, verde y azul que permiten la visualización de cualquier color. El último número corresponde a la transparencia. Entonces RGBA (255,0,0,0.5) nos daría un rojo translúcido, mientras que RGBA (50,50,255,1) nos daría un azul brillante y “sólido”.

Termine enfocándose en el contenido básico del sitio. Defina su apariencia como:

Guarde todos los cambios nuevamente y actualice la ventana de su navegador para verlos.

Estilo de imagen

Crear un sitio agregando imágenes

Para agregar imágenes a su sitio, debe volver al archivo HTML. Allí, “dentro” del contenido pero antes del primer párrafo, ingrese lo siguiente:

Donde “PATH” y “FILE.JPG” son la “ubicación” y el nombre de archivo de cualquier imagen, disponible en línea o localmente, y “TEXT” una descripción de lo que representa para fines de accesibilidad.

Hacer una adición de imagen burda al sitio

Si intenta guardar y verificar los cambios después de esta adición, encontrará que su sitio está deformado. El problema se solucionará una vez que cree reglas CSS sobre cómo deben mostrarse las imágenes en su sitio web.

Regrese al archivo CSS y declare cómo desea que todas las imágenes (img) estén alineadas a la izquierda, siguiendo el flujo de otros elementos (flotante: izquierda y posición: relativa).

Hacer que las imágenes de un sitio sean fijas

Para no exceder los límites de la página, especifique cómo desea que su ancho sea el máximo de la página en sí (ancho: 100%). Para evitar que las imágenes toquen su texto, agregue un margen vertical en la parte superior e inferior. El resultado debería verse así:

Hacer un sitio alineado con imágenes

Complete agregando otra imagen, esta vez alineada a la izquierda o derecha. Como antes, primero debe volver al código HTML y pegar allí un enlace a su imagen, como vimos anteriormente. La diferencia es que deberá agregar una “clase”, un identificador al elemento. Luego, especificará a través de las reglas de visualización de CSS sobre él y cualquier otro elemento donde la misma clase esté “adjunta”.

Llamamos a nuestra clase “alignright” ya que queremos que cualquier objeto, donde está adjunto, se muestre en el lado derecho de la página.

Intente crear el código usted mismo. Agregar un .alignright class en su “style.css” y luego cree reglas que deberían darle estilo. El código CSS debe especificar que queremos que los elementos floten hacia el lado derecho de la página y tengan un ancho del 46% (ancho: 46%). No queremos que las imágenes toquen el texto, por lo que también debemos agregar un espacio del 2% alrededor de ellas, dividido como un margen del 1% (la distancia de cualquier otro elemento) y un 1% de relleno (un “espacio en blanco adicional alrededor del elemento ”).

Por tanto, nuestras reglas deben definir que cualquier imagen con un .alignright la clase adjunta ocupará el 46% del ancho de la página, más un margen del 1% en cada lado, más un 1% de relleno en cada lado. Todo suma hasta un 50%, exactamente la mitad del ancho de la página. El resultado debería verse algo así:

Siguiente página

Su primera página web está lista y en pleno funcionamiento. Si aprende más sobre HTML y CSS, puede enriquecer aún más su contenido, agregar nuevos elementos y mejorar su apariencia. Como siguiente paso, intente copiar y cambiar el nombre del archivo HTML, modificar su contenido y vincular cada nueva página a las demás.

No suena demasiado difícil, ¿verdad? Bienvenido al desarrollo web: al copiar, modificar y vincular diferentes páginas a través de enlaces, habrá creado su primer sitio completo, “adecuado” de varias páginas.

Credito de imagen: Pluks gatitos, Pluks gatitos, IMG_20171124_142629

¿Es útil este artículo?

¡Ayúdanos a difundirlo!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *