Cómo codificar un sitio web

Cómo codificar un sitio webQuiere 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 en funcionamiento que está optimizado y es bastante atractivo al mismo tiempo..

Pero primero, ¿qué es HTML y CSS??

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

  • HTML (Lenguaje de marcado de hipertexto) define la estructura y el contenido de una página web: dónde las cosas van, cómo están dispuestos, y que es en la pagina
  • CSS (Hojas de estilo en cascada) define el estilo / presentación de una página web y los elementos que contiene

Realmente no puede tener uno sin el otro: los dos trabajan juntos para formar 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 forma parte de su sitio web. Mientras que “un sitio web” es lo más completo: todo su sitio con todas sus páginas web individuales.

Cómo crear un sitio web usando HTML y CSS (tabla de contenido):

  1. Aprende los conceptos básicos de HTML
  2. Comprender la estructura del documento HTML
  3. Conozca los selectores CSS
  4. Poner una hoja de estilo CSS juntos
  5. Consigue Bootstrap
  6. Elige un diseño
  7. Personaliza tu sitio web con HTML y CSS
  8. Agregar contenido e imágenes
  9. Ajuste de colores y fuentes
  10. Crea páginas adicionales

Tiempo total para crear un sitio web: 4-5 horas
Nivel de habilidad: Intermedio

Si crees que esto es demasiado complicado, recomendamos crear un sitio web con WordPress o elegir uno de los creadores de sitios web. También puede consultar una lista de los mejores IDE seleccionados para el desarrollo web. 

Contents

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 (hosting). Sin embargo, no te preocupes; no tienes que comprar tu 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.

Con el servidor ordenado, lo siguiente que necesita es un nombre de dominio. El nombre de dominio es lo que el sitio web 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.

La divulgación completa: Ganamos una comisión si termina comprando Bluehost a través de nuestros enlaces de referencia en esta guía. Esto nos ayuda a mantener el WebsiteSetup en funcionamiento y actualizado. Gracias por su apoyo.

Para que esto se solucione sin problemas, le recomendamos que se registre en una empresa como Bluehost.

Manejarán toda la configuración por usted. Lo que significa que lo harán: (una) configurar una cuenta de hosting para usted, (si) registrar un nombre de dominio en su nombre, (C) configurar todo para trabajar juntos, y (re) darle acceso a un tablero fácil de usar.

Anímate y regístrate Bluehost, bueno, espera. Cuando haya regresado y tenga su servidor web configurado y listo para funcionar, avance al siguiente paso.

PD Si solo quieres experimentar con un sitio web HTML en tu computadora, y no intente hacerlo público, use un software de servidor web local. El que recomendamos y nos gusta usar se llama XAMPP. Tiene versiones para Mac y PC, y es fácil de usar. Aqui esta Una guía sobre cómo instalarlo en su computadora.

1. Aprenda los conceptos básicos de HTML

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

Una etiqueta, por ejemplo, se ve así:

ALGUNA COSA

Aquí, estamos lidiando con un etiqueta. Este lo hará negrita un fragmento de texto que se encuentra entre la etiqueta de apertura () y la etiqueta de cierre () En este caso, ese fragmento de texto es ALGUNA COSA.

Pero hay otras etiquetas, solo por nombrar algunas:

  • ... pondrá en cursiva el texto entre las etiquetas de apertura y cierre
  • ... lo subrayará
  • ...

    es un párrafo de texto


  • ...

    es el encabezado principal de la página

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

  • Objeto 1
  • Artículo 2
  • Artículo 3

… puede hacerlo con el siguiente código HTML:

  • Objeto 1
  • Artículo 2
  • Artículo 3

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 código:

Este es un enlace a mi página de inicio

Lea esto para obtener el 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 dada.

Pero en lugar de ladrillos Lego, obtienes etiquetas HTML …

Aquí está la estructura de documento HTML más simple:





Hola Mundo!


Hola Mundo!

Mi primera pagina web.

Puede tomar el código anterior, copiarlo y pegarlo en un nuevo archivo, guardar el documento como index.html, y va a ser una página HTML perfectamente válida.

Expliquemos las partes individuales de este código:

  • – la declaración inicial del documento
  • – otra declaración; dice que lo que vendrá después es un documento HTML escrito en inglés
  • – 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; solo definen lo que sucede debajo del capó
  • – define qué conjunto de caracteres se utiliza para escribir el documento; no es necesario gastar demasiado tiempo en esto; solo usa esta declaración como está
  • Hola Mundo! – 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:

título en el navegador web al crear un sitio web con HTML y CSS

  • – 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

  • Hola Mundo!

    – el encabezado principal de la página

  • Mi primera pagina web.

    – un simple párrafo de texto

  • – 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 facilitarle las cosas, instale una herramienta llamada Texto sublime. Tiene versiones para Mac y PC, y es gratis.

¿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, los parámetros de la etiqueta y otros valores. Básicamente, todo se volverá legible. Así es como se ve nuestra estructura HTML simple en Sublime Text:

la sintaxis sublime es excelente al crear un sitio web con HTML y CSS

Bien, volvamos al tema. Puedes tomar eso nuevo index.html archivo suyo, cópielo donde está 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).

esta página es fea

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

3. Conozca los selectores CSS

Al igual que HTML tiene sus etiquetas, CSS tiene selectores.

Los selectores describen cómo se debe comportar un elemento dado en cuanto a la apariencia. Aquí hay un ejemplo de un selector CSS:

pags {
tamaño de fuente: 18px;
}

Este selector indica que todo HTML

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 CSS no es restringir todas las etiquetas de un tipo determinado a un estilo determinado, sino crear diferentes “clases” y asignarlas a etiquetas una por una.

Por ejemplo, un selector de clase en CSS tiene este aspecto:

.texto normal {
tamaño de fuente: 18px;
}

Observe el punto (.) antes del nombre de la clase (texto normal) 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:

Este texto tendrá 18px.

Dediquemos un minuto más a explicar todos los elementos de ese fragmento de código CSS anterior:

  • .texto normal – 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
  • tamaño de fuente – un ejemplo de propiedad CSS
  • 18px – un valor asignado a la propiedad

Hay un montón de propiedades CSS aparte de las anteriores tamaño de fuente. 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 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 parte del 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 lo que quería.

Esto suena como un trabajo tedioso, y es.

Pero le facilitaremos las cosas y no lo obligaremos a aprender a diseñar 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. Descargue / instale Bootstrap

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

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

Básicamente, Bootstrap no te permite comenzar desde cero y, en cambio, 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 puede tomar:

  • Opción (una): 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 (si): tome un acceso directo: obtenga un paquete de inicio para Bootstrap con un diseño atractivo y una página web de demostración ya construida.

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

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

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

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

6. Elige un diseño

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

Sin embargo, para esta guía, vamos a utilizar una de las plantillas por 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 buscaremos se verá más o menos así:

página de inicio final después de crear un sitio web con HTML y CSS

Para comenzar, la plantilla Creativo, 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 de stock de la plantilla:

iniciar plantilla de arranque

Ya es bastante atractivo, pero ahora es el momento de aprender a usar HTML y CSS para que sea exactamente 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, textos y ajustar todo en general..

Hemos hablado brevemente de la sección principal de un documento HTML. Echemos un vistazo más en profundidad aquí.

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






Creativo - Iniciar tema de Bootstrap





* Además de lo anterior, también había código para cargar fuentes de Google, iconos de Font Awesome y un módulo lightbox para las imágenes que se muestran en la página.

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

  • En primer lugar, todo entre el Los corchetes son un comentario HTML. No aparece en la página final.
  • – es una de las etiquetas de declaración de Bootstrap. Define el tamaño de la ventana gráfica del sitio web.
  • – esta línea carga la hoja de estilo CSS de la plantilla Creativa y también contiene la hoja de estilo predeterminada de Bootstrap.

Modifiquemos esa última declaración, la línea que carga el CSS, para facilitar el trabajo más adelante..

Cambia esa línea a:


Esto es solo una pequeña diferencia: cargará la versión no abreviada de la misma hoja CSS. Esta versión es más fácil de modificar..

Ahora desplácese hasta la parte inferior de la index.html archivo. Verá las siguientes líneas justo antes del cierre. cuerpo etiqueta:

        

Son responsables de cargar archivos JavaScript que manejan algunas de las interacciones más visuales del diseño. Por ejemplo, cuando haces clic en el Acerca de enlace en el menú superior, irá sin problemas al bloque about en la misma página; esto, entre otras cosas, se realiza a través de JavaScript. No necesitamos preocuparnos por comprender este código en este momento. Dejemos esto para otro momento.

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

8. Agregar contenido e imágenes

Lo primero que querrás 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:

Mi sitio HTML

2. Personaliza la sección de héroe

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

sección de héroe

Sería genial tener nuestro propio contenido dentro de él. Para modificar este bloque, regrese a su index.html archivo y encuentre esta sección:

...


...

Saber más

Todo este bloque de código controla lo que hay en la sección de héroe.

Hay algunas etiquetas nuevas aquí:


  • – 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

    etiqueta y

    etiqueta
  • – 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 sabemos) parecen ser un poco más complejas, con múltiples clases de CSS asignadas a ellas. Por ejemplo:

...

Las clases asignadas a

etiqueta aquí es texto-mayúscula texto-blanco font-weight-bold.

Estas clases han sido creadas por Bootstrap y por el desarrollador del tema Creativo. 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 número de clases.

Si desea ver la lista completa de las clases disponibles, puede abrir el menú principal creative.css archivo que está en el css subdirectorio del tema creativo.

Conocer 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 de 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 peso de fuente parámetro así:

.font-weight-light {
peso de fuente: 300;
}

Modificar los textos predeterminados en el index.html El archivo es muy simple. Simplemente encuentre 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:

Tu favorito ...

A algo como lo siguiente:

Admire mi sitio web HTML!

Puede hacer lo mismo con todos los párrafos y otras etiquetas de la página..

Lo importante es que también puede 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:

Iniciar Bootstrap puede ...

Párrafo 2

Ahora, con los textos atendidos, reemplacemos la imagen que está en el fondo.

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

Cuando eche otro vistazo a todo el bloque de código que maneja el Tope sección, verá que está asignado a una clase llamada tope. Esta línea de código maneja la asignación de clase:

los tope clase es la que pone una imagen en el fondo de todo el bloque.

Abramos el creative.css presentar nuevamente y buscar la clase “masthead”:

header.masthead {
acolchado: 10rem;
relleno inferior: calc (10rem - 72px);
fondo: gradiente lineal (hacia abajo, rgba (92, 77, 66, 0.8) 0%, rgba (92, 77, 66, 0.8) 100%), url ("../ img / bg-masthead.jpg" );
posición de fondo: centro;
repetición de fondo: sin repetición;
adjunto de fondo: desplazamiento;
tamaño de fondo: cubierta;
}

Este código hace todo tipo de cosas elegantes 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 una imagen propia, cópiela en img subdirectorio y luego copie y pegue su nombre en lugar del original bg-masthead.jpg archivo. En resumen, cambie esto: url ("../ img / bg-masthead.jpg") a esto: url ("../ img / YOURFILE.jpg").

3. Personalice los otros bloques en la página

A medida que avanzas index.html archivo, notará que ya hay muchas secciones diferentes en la página. Tenemos una sección para el navegación, y acerca de un bloque, algunos servicios, una portafolio, una llamada a la acción, una contacto bloque, y un pie de página.

Si bien hay contenido diferente en todas estas secciones, las secciones en sí son similares en estructura. 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 puede mover secciones enteras (las partes entre

etiquetas). De acuerdo, tienes que hacerlo a mano (cortando y pegando elementos en su lugar), todavía es sencillo hacerlo.

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

9. Ajuste 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:

Texto rojo

En HTML, los colores están representados 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 el siguiente código HTML en el documento principal:

Texto rojo

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 encuentre 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 diciendo “A su servicio”. Actualmente, es negro, y este es el código que lo maneja:

A su servicio

Para cambiar su color, la mejor manera es crear una nueva clase llamada, digamos, .texto-naranja y establezca el valor de color allí, así:

.texto-naranja {
color: # f4623a! importante;
}

* Los !importante 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:

A su servicio

Con estos cambios, el encabezado ahora será naranja:

naranja h2

Para cambiar la fuente y su tamaño, puede hacer algo muy similar. Pero primero, un ejemplo de cómo se ve un bloque de definición de fuente en CSS:

.SOMECLASS {
Familia tipográfica: "Merriweather", Roboto, sans-serif;
tamaño de fuente: 18px;
}
  • cargar fuentes Merriweather, Roboto, y un sistema predeterminado sans-serif fuente (lea esto para obtener información sobre las fuentes seguras para la web)
  • establecer el tamaño de fuente en 18px

Este tipo de definición se puede colocar en cualquier clase 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 para ese encabezado que dice “A su servicio”, primero podríamos crear una clase como esta:

.text-xxl {
tamaño de fuente: 50px;
}

Y luego asigne esta clase al encabezado:

A su servicio

�� Cuando cambie los colores o las fuentes en su plantilla hecha con Bootstrap, primero mire a través de la hoja de estilo CSS para ver las clases que ya pueden proporcionarle tamaños o colores alternativos. Use los que 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 quieras. La única dificultad es armarlo.

HTML y CSS pueden ser difíciles de manejar cuando se comienza desde una pantalla en blanco, por lo que también vamos a usar Bootstrap aquí. Primero, le mostraremos algunos principios para elaborar 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 considerarla como una secuencia de bloques individuales, uno encima del otro. Algo como esto (observe los cuatro bloques distintos):

el diseño al crear un sitio web con HTML y CSS

Lo mejor de Bootstrap es que maneja los principios de diseño básicos 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, crearemos 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, encuadrada 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 index.html archivar y renombrarlo about.html.

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

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

  • los navegación menú (abajo ) 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 ) Este no lo necesitaremos según nuestro proyecto de diseño. Puedes seguir adelante y borrar toda la sección.
  • los acerca de sección (abajo ) 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 entre y ) No necesitamos estas secciones en absoluto. Puedes seguir adelante y borrarlos.
  • los pie de página sección y todo lo que está debajo (debajo ) Esto tendremos que mantener.

Esto hace que nuestro código actual sea bastante simple. Básicamente es solo esto:



























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:

...


...

Ahora cambie las dos primeras líneas a esto:

Como no necesitamos el

encabezado allí y el


elemento, simplemente eliminémoslos. Lo único que queda dentro de todo este bloque será un párrafo de texto. Al igual que:

Un párrafo de texto.

Cuando guarde el archivo y navegue a é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:

sobre el encabezado de la página

Sería mejor tener un fondo blanco en la sección de contenido principal. Para cambiarlo, lo único que tenemos que hacer es eliminar el bg-primario clase de la principal

etiqueta. En otras palabras, haga la etiqueta en esto:

Eso es mejor:

sobre el encabezado de página 2

Agreguemos algunos párrafos ficticios a la página para llenarla un poco más, más quizás un subtítulo:

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

Subtítulo

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Así es como se ve en la página:

sobre el ver 1

Si no le gusta que el texto esté centrado, simplemente elimine el centro de texto clase de uno de los

etiquetas.

sobre la versión 2

Si desea darle más estilo a estos bloques de texto, puede crear nuevas clases 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 asignamos a

y

etiquetas:

Lorem ipsum dolor sentarse amet...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

Subtítulo

Y aquí está el efecto:

sobre el ver 3

Una cosa más que haremos 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:


Bastante simple, ¿verdad? El único parámetro es la ruta al archivo de imagen. Para mantener las cosas bien organizadas, puede poner su imagen en el img directorio nuevamente (tal como lo hizo con ese fondo hace un tiempo). En tal caso, la etiqueta de la imagen será:


Dicho esto, la etiqueta de imagen en esta configuración particular es bastante limitada. Para hacerlo un poco más refinado, vamos a asignarle algunas clases de Bootstrap. Particularmente:


Estas dos clases le darán esquinas redondeadas a su imagen 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 Acerca de. Por ejemplo, aquí:

Lorem ipsum dolor sentarse amet...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

Subtítulo

Y aquí está el efecto final en la página:

sobre el ver 4

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

sobre la página completa

3. Enlace a la nueva página

Con la nueva página terminada, ahora vinculemos desde la página de inicio (el index.html archivo). Naturalmente, el mejor lugar para agregar este enlace es en el menú de navegación (a continuación ).

En particular, busque esta línea:

Acerca de

Vamos a cambiarlo a esto:

Acerca de

Esto es algo de lo que aún no hemos hablado, pero el La etiqueta es una etiqueta de enlace en HTML. Al usarlo, 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 en la que se puede hacer clic, será el texto entre la apertura y el cierre. 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: un página principal y un acerca de página.

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

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

  • Hoja de trucos HTML5
  • Hoja de trucos CSS
  • Hoja de trucos Javascript
  • Tutorial HTML
  • Tutorial de Bootstrap
  • Hoja de trucos Bootstrap

Dominar Bootstrap, muy probablemente el mejor camino disponible actualmente para construir 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 enviarlos en los comentarios.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me