Cómo codificar un sitio web (usando HTML y CSS)

¿Quieres aprender a crear un sitio web con HTML y CSS?

Estás en el lugar correcto. En esta guía, le mostramos todos los pasos para pasar de una pantalla en blanco a un sitio web funcional, optimizado y bastante atractivo al mismo tiempo.

Pero primero, ¿qué es HTML y CSS?

Bueno, podría buscar ambos términos en Wikipedia, pero esas definiciones no son muy fáciles de leer. Simplifiquemos un poco las cosas:

HTML (Hypertext Markup Language) define la estructura y el contenido de una página web: dónde las cosas van, cómo están dispuestas y qué en la pagina
CSS (hojas de estilo en cascada) define el estilismo/presentación de una página web y los elementos que contiene

Realmente no puedes tener uno sin el otro: los dos trabajan juntos para crear la página web final, su diseño y el contenido que contiene.

Nota; cuando decimos “una página web”, lo que queremos decir es un solo documento HTML, una sola página que es parte de su sitio web. Mientras que "un sitio web" es la cosa completa: todo su sitio con todas sus páginas web individuales.

Si cree que esto es demasiado complicado, le recomendamos crear un sitio web con WordPress o elegir uno de los creadores de sitios web.

Índice

Antes de comenzar, reúna sus recursos:

Entonces, lo primero que necesita, incluso antes de crear un sitio web con HTML y CSS, es un servidor web (alojamiento). Sin embargo, no te preocupes; usted no tiene que comprar su propia máquina. Muchas empresas de alojamiento web le venderán un servicio de alojamiento simple en sus máquinas. Simplemente busque en Google "alojamiento web" y elija algo que no sea demasiado caro o consulte nuestras reseñas de alojamiento web.

Con el servidor ordenado, lo siguiente que necesita es un nombre de dominio. El nombre de dominio es lo que el sitio web se identifica en la web. Por ejemplo, el nombre de dominio de este sitio es websitesetup.org.

Cuando tiene un nombre de dominio y un servidor, puede conectar los dos juntos.

Para resolver esto sin dolor de su parte, le recomendamos que se registre con una empresa como Bluehost.

Ellos se encargarán de toda la configuración por usted. Lo que significa que ellos: (a) configurar una cuenta de alojamiento para usted, (b) registrar un nombre de dominio en su nombre, (C) configurar todo para que funcione en conjunto, y (d) darle acceso a un tablero fácil de usar.

Anímate y regístrate en cualquiera de los servicios de alojamiento web, te esperamos. Cuando regrese y tenga su servidor web configurado y listo para funcionar, desplácese al siguiente paso.

PD: si solo quiere experimentar con un sitio web HTML en su computadoray no tiene la intención de hacerlo público, use un software de servidor web local. El que recomendamos y nos gusta usar se llama XAMPP. Tiene versiones tanto para Mac como para PC, y es fácil de usar. Aquí hay una guía sobre cómo instalarlo en su computadora.

1. Aprende los conceptos básicos de HTML

Si es nuevo en HTML, puede encontrar útil este HTML para principiantes (Guía definitiva).

El elemento principal de una estructura HTML es un HTML etiqueta.

Una etiqueta, por ejemplo, se ve así:

<b>SOMETHING</b>

Aquí, estamos tratando con un <b> etiqueta. este lo hará audaz un fragmento de texto que está entre la etiqueta de apertura (<b>) y la etiqueta de cierre (</b>). En este caso, ese fragmento de texto es SOMETHING.

Pero hay otras etiquetas, solo por nombrar algunas:

<i>...</i> pondrá en cursiva el texto entre las etiquetas de apertura y cierre
<u>...</u> lo subrayará
<p>...</p> es un párrafo de texto
<h1>...</h1> es el encabezado principal de la página

Aparte de esas etiquetas simples, también hay etiquetas más complejas. Por ejemplo, si desea crear una lista como la siguiente:

… puedes hacerlo con el siguiente código HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
O, si desea agregar un enlace a otra página, como esta:

Este es un enlace a nuestra página de inicio.

… puedes hacer eso con este fragmento de código:
<a href="https://websitesetup.org/">This is a link to my homepage</a>
Lea esto para obtener la lista completa de etiquetas HTML. Será útil cuando cree un sitio web con HTML y CSS.

2. Comprender la estructura del documento HTML

Piense en su página HTML como si estuviera construida con Legos. Pones diferentes ladrillos uno encima del otro para terminar con una estructura más grande.

Pero en lugar de ladrillos de Lego, obtienes etiquetas HTML...

Aquí está la estructura de documento HTML más simple:
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>My first web page.</p>
  </body>
</html>
Puede tomar el código anterior, copiarlo y pegarlo en un nuevo archivo, guardar el documento como index.htmly será una página HTML perfectamente válida.

Expliquemos las partes individuales de este código:

<!doctype html> – la declaración inicial del documento

<html lang="en"> – otra declaración; dice que lo que viene a continuación es un documento HTML escrito en inglés

<head> – marca el inicio de la cabeza sección; la cabeza sección es donde van todos los parámetros básicos de la página; la mayoría de ellos no se mostrarán en la pantalla; simplemente definen lo que sucede debajo del capó

<meta charset="utf-8"> – define qué juego de caracteres se utiliza para escribir el documento; no es necesario dedicar demasiado tiempo a esto; simplemente use esta declaración tal como está

<title>Hello, world!</title> – el título de la página; esto es lo que la gente verá en la barra de título de sus navegadores, por ejemplo:

<body> – marca el inicio de la cuerpo sección; aquí es donde va todo el contenido de la página; es la parte principal de un documento HTML; permítanos enfatizar esto, esta sección es donde incluirá todo el contenido que debe aparecer en la página

<h1>Hello, world!</h1> – el encabezado principal de la página

<p>My first web page.</p> – un simple párrafo de texto

</html> – la etiqueta de cierre de todo el documento HTML

Una nota importante aquí. Trabajar en un archivo HTML en una aplicación de texto básica o en un procesador de texto complejo como MS Word no es una buena experiencia. Para facilitarte las cosas, instala un editor HTML llamado Texto sublime. Tiene versiones tanto para Mac como para PC, y es gratuito.

¿Por qué es mejor? Entre otras cosas, coloreará la sintaxis de un archivo HTML. Es decir, distinguirá visualmente sus etiquetas HTML del contenido de texto, parámetros de etiquetas y otros valores. Básicamente, todo se volverá legible. Así es como se ve nuestra estructura HTML simple en Sublime Text:

Bien, volviendo al tema. Puedes tomar ese nuevo index.html archivo suyo, cópielo donde se encuentra el directorio principal de su servidor web y luego vea esa página navegando a través de un navegador web. Sin embargo, no te emociones demasiado; esta página será bastante fea (ver más abajo).

Bien, entonces la página es fea, ¿cómo hacer que no sea así?

3. Conozca los selectores de CSS

Así como HTML tiene sus etiquetas, CSS tiene selectores.

Los selectores describen cómo debe comportarse un elemento determinado en cuanto a su apariencia. Este es un ejemplo de un selector de CSS:
p {
    font-size: 18px;
}
Este selector indica que todo HTML <p> las etiquetas dentro del documento tendrán un tamaño de fuente de 18px.

Sin embargo, una forma más práctica de usar los selectores de CSS no es restringir todas las etiquetas de un tipo dado a un cierto estilo, sino crear diferentes "clases" y asignarlas a las etiquetas una por una.

Por ejemplo, un selector de clase en CSS se ve así:
.normal-text {
    font-size: 18px;
}
Observe el punto (.) antes del nombre de la clase (normal-text). Con la clase de "texto normal" definida, ahora podemos asignar esa clase a esas etiquetas HTML específicas que queremos que tengan un tamaño de 18px.

Por ejemplo:
<p class="normal-text">This text is going to be 18px.</p>
Tomemos un minuto más para explicar todos los elementos de ese código CSS anterior:

.normal-text – definición de clase; todo después del nombre de la clase y entre los corchetes de apertura y cierre {} define cómo se verán los elementos asignados a esta clase

font-size – una propiedad CSS de ejemplo

18px – un valor asignado a la propiedad

Hay un montón de propiedades CSS además de las anteriores. font-size. Aquí esta la lista completa si tienes curiosidad

4. Armar una hoja de estilo CSS

Un documento HTML es muy estructural: cada elemento tiene su lugar y el orden de los elementos es crucial para la construcción final y la apariencia de la página web en cuestión. Un documento CSS lo es mucho menos.

Los documentos CSS a menudo se denominan hojas de estilo. Básicamente, una hoja de estilo CSS es una lista de todas las definiciones de clase que se utilizan en el documento HTML correspondiente. El orden de las definiciones de clase no es tan crucial la mayoría de las tiempo (al menos para diseños simples).

La forma de armar una hoja de estilo CSS es definiendo cada clase una por una y luego probando si el resultado en el diseño de su página es el que deseaba.

Esto suena como un trabajo tedioso, y lo es.

Pero te facilitaremos las cosas y no te obligaremos a aprender el diseño de HTML y CSS a mano. En lugar de enseñarte todo desde cero, tomaremos un organismo vivo y diseccionaremos sus elementos.

Aquí es donde entra en juego una cosa llamada Bootstrap.

5. Descargar/Instalar Bootstrap

Bootstrap es un conjunto de herramientas de código abierto para crear un sitio web con HTML y CSS.

En lenguaje sencillo, Bootstrap se encarga de la estructura básica de un documento HTML y una hoja de estilo CSS por usted. Ofrece un marco que garantiza que el andamiaje principal de su página web esté listo y optimizado para un mayor desarrollo.

Básicamente, Bootstrap le permite no comenzar desde cero, sino pasar directamente a la parte divertida. Con él, no tiene que trabajar en las primeras etapas, a menudo aburridas, de crear un sitio web con HTML y CSS.

Hay dos caminos que puedes tomar:

Opción (a): aprenda Bootstrap: vaya a la página de inicio de Bootstrap, descargue el paquete principal de Bootstrap y comience a construir sobre él.

Opción (b): tome un atajo: obtenga un paquete de inicio para Bootstrap con un diseño atractivo y una página web de demostración ya creada.

Opción (a) puede tener cierta curva de aprendizaje al principio, pero de ninguna manera es la peor manera de abordar la creación de un sitio web con HTML y CSS. Una vez que domine la estructura básica de Bootstrap, podría ser más fácil para usted crear nuevas páginas y hacer que se vean exactamente como las desea. los Documentación de arranque es un gran lugar para comenzar con este camino.

Vamos a ir con la opción (b) para esta guía. Estamos haciendo esto por un par de razones, la principal de ellas:

Comenzar con una estructura prefabricada ahorra mucho dolor al tratar de descubrir las necesidades básicas de un documento HTML. Esto le permite concentrarse en las cosas interesantes, como diseñar el contenido y hacer que se vea bien.

En resumen, aprender cosas de esta manera le dará un mejor resultado más rápido, que suponemos que es lo que desea.

6. Elige un diseño

Cuando está creando un sitio web con HTML y CSS, puede usar cualquier plantilla de Bootstrap que desee. Todos deberían funcionar de manera bastante similar.

Sin embargo, para esta guía, vamos a utilizar una de las plantillas de Iniciar Bootstrap. Tienen una buena selección de plantillas gratuitas que están optimizadas, funcionan sin problemas y también están muy bien diseñadas.

El tema que vamos a usar se llama Creativo. El efecto final que buscamos se verá así:

Para empezar, la plantilla de Creative, haga clic en el Descarga gratis botón que está a la derecha (en esta página) y guarde el paquete zip en su escritorio.

Descomprima el paquete y mueva su contenido al directorio principal de su servidor web local o su cuenta de alojamiento web.

Ahora abra esa ubicación a través de su navegador web. Verá la versión estándar de la plantilla:

Ya es bastante atractivo, pero ahora es el momento de aprender a usar HTML y CSS para convertirlo exactamente en lo que quieres que sea.

7. Personaliza tu sitio web con HTML y CSS

Primero trabajemos en la página de inicio del diseño. Esto nos mostrará cómo reemplazar los gráficos, los textos y ajustar todo en general.

Hemos hablado brevemente sobre la sección principal de un documento HTML anteriormente. Echémosle un vistazo más profundo aquí.

Cuando abres el index.html archivo de su sitio Bootstrap en Sublime Text, verá una sección de encabezado como esta (eliminamos todas las cosas no cruciales de este código para mayor claridad *):
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Creative - Start Bootstrap Theme</title>

  <! – Theme CSS - Includes Bootstrap – >
  <link href="https://websitesetup.org/website-coding-html-css/css/creative.min.css" rel="stylesheet">

</head>
* Aparte de lo anterior, también había un código para cargar fuentes de Google, íconos de Font Awesome y un módulo de caja de luz para las imágenes que se muestran en la página.

La mayoría de las declaraciones aquí ya las conocemos, pero hay un par de nuevas:

En primer lugar, todo entre el <! – ... – > corchetes es un comentario HTML. No aparece en la página final.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> – es una de las propias etiquetas de declaración de Bootstrap. Define el tamaño de la ventana gráfica del sitio web.

<link href="https://websitesetup.org/website-coding-html-css/css/creative.min.css" rel="stylesheet"> – esta línea carga la hoja de estilo CSS de la plantilla creativa y también alberga la hoja de estilo predeterminada de Bootstrap.

Modifiquemos esa última declaración, la línea que carga el CSS, para que sea más fácil trabajar con ella más adelante.

Cambia esa línea a:
<link href="https://websitesetup.org/website-coding-html-css/css/creative.css" rel="stylesheet">
Esta es solo una pequeña diferencia: cargará la versión no abreviada de la misma hoja CSS. Esta versión es simplemente más fácil de modificar.

Ahora desplácese hacia abajo hasta la parte inferior de la index.html expediente. Verá las siguientes líneas justo antes del cierre cuerpo etiqueta:
<! – Bootstrap core JavaScript – >
<script src="https://websitesetup.org/website-coding-html-css/vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<! – Plugin JavaScript – >
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>

<! – Custom scripts for this template – >
<script src="js/creative.min.js"></script>
Son responsables de cargar archivos JavaScript que manejan algunas de las interacciones más visuales del diseño. Por ejemplo, al hacer clic en el Sobre enlace en el menú superior, se le llevará sin problemas al bloque acerca de en la misma página; esto, entre otras cosas, se hace a través de JavaScript. No necesitamos preocuparnos por entender este código ahora mismo. Dejemos esto para otro momento.

En cambio, trabajemos en agregar nuestro propio contenido a la página:

8. Agregar contenido e imágenes

Lo primero que querrá hacer es cambiar el título de la página.

1. Cambiar el título

Encuentra el título etiqueta en la sección de encabezado y reemplaza el texto entre las etiquetas por algo propio:
<title>My HTML Site</title>
2. Personaliza la sección de héroe

La sección de héroe es lo que llamamos este bloque:

Sería genial tener nuestro propio contenido dentro de él. Para modificar este bloque, vuelve a tu index.html archivo y busque esta sección:
<! – Masthead – >
<header class="masthead">
  <div class="container h-100">
    <div class="row h-100 align-items-center justify-content-center text-center">
      <div class="col-lg-10 align-self-end">
        <h1 class="text-uppercase text-white font-weight-bold">...</h1>
        <hr class="divider my-4">
      </div>
      <div class="col-lg-8 align-self-baseline">
        <p class="text-white-75 font-weight-light mb-5">...</p>
        <a class="btn btn-primary btn-xl js-scroll-trigger" href="https://websitesetup.org/website-coding-html-css/#about">Find Out More</a>
      </div>
    </div>
  </div>
</header>
Todo este bloque de código controla lo que hay en la sección de héroes.

Hay algunas etiquetas nuevas aquí:

<header> – esta es una etiqueta que define que toda esta sección es el encabezado de la página; esta etiqueta tiene un par de hermanos y hermanas en forma de <section> etiquetar y <footer> etiqueta

<div> – es una etiqueta CSS general que indica que lo que sigue es una sección separada (también conocida como división) en el documento HTML; usarlo hace que sea más fácil distinguir visualmente secciones individuales en la página

También notará que algunas de las otras etiquetas (que ya conocemos) parecen ser un poco más complejas, con múltiples clases de CSS asignadas a ellas. Por ejemplo:
<h1 class="text-uppercase text-white font-weight-bold">...</h1>
Las clases asignadas a la <h1> etiqueta aquí es text-uppercase text-white font-weight-bold.

Estas clases han sido creadas por Bootstrap y por el desarrollador del tema Creative. La buena noticia es que usted también puede usarlos libremente al crear un sitio web con HTML y CSS.

Francamente, puede personalizar cualquier etiqueta que agregue a la estructura de su página asignándole cualquier cantidad de clases.

Si quieres ver la lista completa de las clases disponibles, puedes abrir la página principal creative.css archivo que está en el css subdirectorio del tema Creativo.

Comprender todas estas clases puede parecer intimidante al principio, pero en realidad es mucho más fácil de lo que parece.

Por ejemplo, una de las clases asignadas a algunos de los párrafos en nuestro index.html el archivo es font-weight-light. Cuando saltas a la creative.css archivo y ctrl+f buscando ese nombre de clase, verá que simplemente establece el font-weight parámetro así:
.font-weight-light {
  font-weight: 300;
}
Modificar los textos por defecto en el index.html archivo es muy simple. Simplemente busque la etiqueta que desea editar y cambie lo que hay entre las etiquetas de apertura y cierre.

Por ejemplo, para cambiar el título principal, simplemente cambie esto:
<h1 class="text-uppercase text-white font-weight-bold">Your Favorite ...</h1>
A algo como lo siguiente:
<h1 class="text-uppercase text-white font-weight-bold">Admire my HTML website!</h1>
Puede hacer lo mismo con todos los párrafos y otras etiquetas de la página.

Lo importante es que también puedes agregar nuevos párrafos libremente. Por ejemplo, podemos tomar el párrafo que ya está en la página, hacer una copia y pegarlo justo debajo del párrafo original; al igual que:
<p class="text-white-75 font-weight-light">Start Bootstrap can ...</p>
<p class="text-white-75 font-weight-light">Paragraph 2</p>
Ahora, con los textos resueltos, reemplacemos la imagen que está en el fondo.

Esto es un poco más complicado de hacer ya que requiere que ingresemos al archivo de hoja de estilo CSS y hagamos la modificación allí. Como se puede ver en el código HTML de la Masthead sección, ninguna etiqueta indicaría incluir una imagen en la página de ninguna manera. Todo esto se hace a través de CSS.

Cuando echas otro vistazo a todo el bloque de código que maneja el Masthead sección, verá que está asignado a una clase llamada masthead. Esta línea de código maneja la asignación de clase:
<header class="masthead">
los masthead class es la que pone una imagen de fondo de todo el bloque.

abramos el creative.css archivo de nuevo y busque la clase "masthead":
header.masthead {
  padding-top: 10rem;
  padding-bottom: calc(10rem - 72px);
  background: linear-gradient(to bottom, rgba(92, 77, 66, 0.8) 0%, rgba(92, 77, 66, 0.8) 100%), url("../img/bg-masthead.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
}
Este código hace todo tipo de cosas sofisticadas a nuestra imagen (como agregar una superposición, sombreado, etc.), pero la parte importante es esta: url("../img/bg-masthead.jpg"). Esta es la línea que indica dónde encontrar la imagen de fondo. va a estar en el img subdirectorio.

Para cambiar esta imagen de fondo, tome cualquier imagen propia, cópiela en el img subdirectorio y luego copie y pegue su nombre en lugar del original bg-masthead.jpg expediente. En resumen, cambia esto: url("../img/bg-masthead.jpg") a esto: url("../img/YOURFILE.jpg").

3. Personaliza los otros bloques en la página

A medida que pasas por el index.html archivo, notará que ya hay muchas secciones diferentes en la página. Tenemos una sección para el navegacióny sobre un bloque, algunos serviciosa portafolioa llamada a la accióna contacto bloque, y un pie de página.

Si bien hay contenido diferente en todas estas secciones, las secciones mismas tienen una estructura similar. Todos tienen aproximadamente el mismo conjunto de etiquetas HTML, solo diferentes clases de CSS asignadas a ellos.

La mejor manera de modificar la página para que se ajuste a sus necesidades es revisar los bloques uno por uno y experimentar cambiando las cosas.

Además de modificar los textos, también puedes mover secciones enteras (las partes entre las <section> etiquetas). De acuerdo, tiene que hacerlo a mano (cortando y luego pegando elementos en su lugar), todavía es sencillo de hacer.

Dicho esto, hay dos modificaciones bastante básicas de las que aún no hemos hablado. Vamos a cubrir estos a continuación:

9. Ajuste fino de colores y fuentes

Cambiar colores o fuentes es muy fácil de hacer en HTML y CSS. Lo más simple que puede hacer es asignar un estilo en línea a una etiqueta HTML. Por ejemplo:
<p style="color: #FF0000;">Red text</p>
En HTML, los colores se representan por sus valores hexadecimales; “#FF0000” es rojo. Aquí hay una tabla de todos los demás colores estándar.

Una mejor manera de asignar colores es hacerlo a través de la hoja de estilo CSS. Por ejemplo, para obtener el mismo efecto que el código anterior, podríamos poner esto en nuestra hoja de estilo CSS:
p.red {
color: #FF0000;
}
Y luego use la siguiente pieza de código HTML en el documento principal:
<p class="red">Red text</p>
Ese segundo método es básicamente cómo se hacen las cosas en Bootstrap.

Para cambiar el color de cualquier texto en la página, primero busque la etiqueta responsable del estilo de ese texto y luego vaya a la hoja de estilo y modifique la clase correspondiente, o cree una nueva clase.

Aquí hay un ejemplo; diga que desea cambiar el color del encabezado que dice "A su servicio". Actualmente, es negro, y este es el código que lo maneja:
<h2 class="text-center">At Your Service</h2>
Para cambiar su color, la mejor manera es crear una nueva clase llamada, digamos, .text-orange y establezca el valor del color allí, así:
.text-orange {
  color: #f4623a !important;
}
* Los !important se asegurará de que esta configuración de color sobrescriba cualquier otra configuración de color anterior.

Ahora, podemos volver a nuestro encabezado y cambiar su código a:
<h2 class="text-center text-orange">At Your Service</h2>
Con estos cambios, el encabezado ahora será naranja:

Para cambiar la fuente y su tamaño, puedes hacer algo muy similar. Pero primero, un ejemplo de cómo se ve un bloque de definición de fuente en CSS:
.SOMECLASS {
font-family: "Merriweather", Roboto, sans-serif;
font-size: 18px;
}
cargar fuentes Merriweather, robotoy un valor predeterminado del sistema sans-serif fuente (lea esto para obtener información sobre las fuentes seguras para la web)

establecer el tamaño de fuente a 18px

Este tipo de definición se puede colocar en cualquier clase de CSS, al igual que la definición de color. En realidad, las definiciones de fuente y color a menudo se encuentran en las mismas declaraciones de clase.

Volviendo a nuestro ejemplo anterior, para cambiar el tamaño de fuente de ese encabezado que dice "A su servicio", primero podríamos crear una clase como esta:
.text-xxl {
  font-size: 50px;
}
Y luego asigne esta clase al encabezado:
<h2 class="text-center text-orange text-xxl">At Your Service</h2>
Al cambiar los colores o las fuentes en su plantilla hecha con Bootstrap, primero busque en la hoja de estilo CSS las clases que ya podrían proporcionarle tamaños o colores alternativos. Use aquellos donde estén disponibles.

10. Crear páginas adicionales

Ahora que tiene la página de inicio personalizada, es hora de comenzar a trabajar en algunas páginas adicionales y luego vincularlas a la página de inicio.

Al crear un sitio web con HTML y CSS, puede crear cualquier cantidad de subpáginas y luego vincularlas todas juntas.

Estas son algunas de las páginas comunes que la mayoría de los sitios web necesitan:

acerca de la página

contacto

portafolio

productos y servicios

equipo

políticas (política de privacidad, términos, etc.)

1. Comience con el diseño

Al crear una nueva página web, la primera decisión que debe tomar es cuál desea que sea el diseño.

Al crear un sitio web con HTML y CSS, nada le impide crear lo que sea diseño que desee. La única dificultad es en realidad armarlo.

HTML y CSS pueden ser difíciles de manejar cuando se comienza desde una pantalla en blanco, por lo que también usaremos Bootstrap aquí. Primero, le mostraremos algunos principios para crear un diseño y luego le mostraremos cómo hacerlo con Bootstrap.

La forma en que puede pensar en el diseño de su página web es considerarlo una secuencia de bloques individuales, uno encima de otro. Algo como esto (observe los cuatro bloques distintos):

Lo mejor de Bootstrap es que maneja los principios básicos de diseño y los detalles de apariencia para que pueda concentrarse en colocar esos bloques en los lugares correctos.

En esta sección de la guía, vamos a crear una nueva página "acerca de".

Para comenzar, crearemos solo un proyecto muy básico del diseño. Algo como el de arriba.

hay un menú de navegación en la parte superior,

un bloque de título de ancho completo debajo del menú,

la sección de contenido principal en el medio, enmarcada en el centro de la pantalla (no de ancho completo),

y un pie de página.

Ahora construyamos este diseño en HTML.

2. Crea una nueva página

La forma más fácil de comenzar a trabajar en una nueva página es duplicar una página existente y usarla como plantilla. Eso es lo que vamos a hacer.

Crear una copia de la index.html archivo y cambiarle el nombre about.html.

Solo para que las páginas sean más fáciles de distinguir en esta etapa inicial, edite el nuevo about.html archivar y cambiar lo que hay en el <title> etiqueta. Por ejemplo, <title>About Me</title>.

Ahora revisemos el archivo línea por línea y decidamos qué dejaremos y qué eliminaremos:

los navegación menú (abajo <! – Navigation – >). Probablemente desee mantener esta sección intacta, solo para que la experiencia de navegación sea uniforme en todas las páginas.

los héroe principal sección (abajo <! – Masthead – >). Este no lo necesitaremos de acuerdo con nuestro proyecto de diseño. Puede continuar y borrar toda la sección.

los sobre sección (abajo <! – About Section – >). Vamos a reutilizar esta sección como nuestro bloque principal de titulares.

los servicios sección, portafolio sección, llamada a la acción sección, y contacto sección (todo lo que hay entre <! – Services Section – > y <! – Footer – >). No necesitamos estas secciones en absoluto. Puedes continuar y borrarlos.

los pie de página sección y todo lo que está debajo de ella (abajo <! – Footer – >). Esto tendremos que mantenerlo.

Esto hace que nuestro código actual sea bastante simple. Básicamente es solo esto:
<!DOCTYPE html>
<html lang="en">

<head>

<! – all head definitions ... removed for clarity – >

</head>

<body id="page-top">

  <! – Navigation – >
  <! – actual navigation tags removed for clarity – >
  
  <! – About Section – >
  <! – ... – >
  
  <! – Footer – >
  <! – ... – >
  
  <! – Bootstrap script imports – >
  <! – ... – >

</body>

</html>
Lo que nos falta aquí es el contenido principal sección. Para construirlo, vamos a reutilizar la sección acerca de.

Continúe y haga una copia de la sección Acerca de. Éste:
<! – About Section – >
<section class="page-section bg-primary" id="about">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8 text-center">
        <h2 class="text-white mt-0">...</h2>
        <hr class="divider light my-4">
        <p class="text-white mb-0">...</p>
      </div>
    </div>
  </div>
</section>
Ahora cambie las dos primeras líneas a esto:
<! – Main Content Section – >
<section class="page-section bg-primary" id="main-content">
Como no necesitamos el <h2> encabezado allí y el <hr> elemento, simplemente eliminémoslos. Lo único que quedará dentro de todo este bloque será un párrafo de texto. Al igual que:
<! – Main Content Section – >
<section class="page-section bg-primary" id="main-content">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8 text-center">
        <p>A paragraph of text.</p>
      </div>
    </div>
  </div>
</section>
Cuando guarde el archivo y navegue hasta él a través de su navegador, verá que básicamente tiene dos bloques muy similares uno debajo del otro, con el mismo color de fondo:

Sería mejor tener un fondo blanco en la sección de contenido principal. Para cambiarlo, lo único que tenemos que hacer es quitar el bg-primary clase de la principal <section> etiqueta. En otras palabras, convierte la etiqueta en esto:
<section class="page-section" id="main-content">
Eso es mejor:

Agreguemos algunos párrafos ficticios a la página para llenarla un poco más, además de tal vez un subtítulo:
<! – Main Content Section – >
<section class="page-section" id="main-content">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8 text-center">
          
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

        <p>Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...</p>

        <h3>Subhead</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

      </div>
    </div>
  </div>
</section>
Así es como se ve esto en la página:

Si no le gusta que el texto esté centrado, simplemente elimine el text-center clase de uno de los <div> etiquetas

Si desea poner un poco más de estilo en estos bloques de texto, puede crear nuevas clases de CSS (como antes) y asignarlas a los párrafos del bloque. O bien, puede echar un vistazo a la hoja de estilo actual y ver qué clases ya existen para este propósito. Aquí están los que le asignamos al <p> y <h3> etiquetas:
<p class="lead text-muted">Lorem ipsum dolor sit amet...</p>

<p class="text-muted">Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...</p>

<h3 class="h3 mt-4">Subhead</h3>
Y aquí está el efecto:

Una cosa más que vamos a hacer aquí es agregar una imagen en algún lugar de la página.

Así es como se ve una etiqueta de imagen de ejemplo en HTML:
<img src="https://websitesetup.org/website-coding-html-css/image.jpg">
Bastante simple, ¿verdad? El único parámetro allí es la ruta al archivo de imagen. Para mantener las cosas bien organizadas, puede poner su imagen en el img directorio de nuevo (tal como lo hizo con ese fondo hace un tiempo). En tal caso, la etiqueta de la imagen será:
<img src="https://websitesetup.org/website-coding-html-css/img/image.jpg">
Dicho esto, la etiqueta de imagen en esta configuración particular es bastante limitada. Para hacerlo un poco más refinado, asignémosle algunas clases de Bootstrap. Particularmente:
<img src="https://websitesetup.org/website-coding-html-css/img/image" class="rounded img-fluid">
Estas dos clases le darán a su imagen esquinas redondeadas y también se asegurarán de que el tamaño de la imagen no exceda el tamaño del bloque donde se encuentra.

Ahora puede agregar una etiqueta como esta en algún lugar de la sección de contenido principal de su página de información. Por ejemplo, aquí:
<p class="lead text-muted">Lorem ipsum dolor sit amet...</p>

<img src="https://websitesetup.org/website-coding-html-css/img/image.jpg" class="rounded img-fluid">

<p class="text-muted">Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...</p>

<h3 class="h3 mt-4">Subhead</h3>
Y aquí está el efecto final en la página:

Aquí está nuestra página Acerca de en todo su esplendor:

3. Enlace a la nueva página

Con la nueva página lista, vamos a vincularla desde la página de inicio (la index.html expediente). Naturalmente, el mejor lugar para agregar este enlace es en el menú de navegación (abajo <! – Navigation – >).

En particular, busca esta línea:
<a class="nav-link js-scroll-trigger" href="https://websitesetup.org/website-coding-html-css/#about">About</a>
Vamos a cambiarlo a esto:
<a class="nav-link" href="https://websitesetup.org/website-coding-html-css/about.html">About</a>
Esto es algo de lo que no hemos hablado todavía, pero el <a> etiqueta es una etiqueta de enlace en HTML. Utilizándolo, puede vincular a cualquier página web proporcionando la dirección de esa página en el href parámetro. El texto del enlace, la parte del enlace en la que se puede hacer clic, será el texto entre la apertura y el cierre. <a></a> etiquetas

Cuando actualice la página de inicio ahora, verá su nuevo enlace apuntando a la página acerca de.

Otras lecturas

En esta etapa, básicamente ha creado un sitio web simple que consta de dos páginas: una página principal y un sobre página.

Lo que debe hacer ahora es enjuagar y repetir creando nuevas páginas, afinándolas, agregándoles contenido y luego vinculando todo desde el menú de navegación.

Otras cosas que vale la pena hacer a medida que avanza en estos pasos es seguir aprendiendo los principios de HTML y CSS, revisar la lista de verificación y también aprender Bootstrap y sus estructuras y clases. Algunos recursos para eso:

Dominar Bootstrap, probablemente el mejor camino disponible actualmente para crear sitios web optimizados y hermosos con HTML y CSS.

Si tiene alguna pregunta sobre cómo crear un sitio web con HTML y CSS, no dude en enviarla en los comentarios.

Deja una respuesta Cancelar la respuesta