Need help? Chat now!

Hostwinds Blog

Resultados de búsqueda para:


Tutoriales de Hostwinds: Cómo crear un sitio web básico de blogs sin una aplicación de creación de sitios Pt.1 Foto principal

Tutoriales de Hostwinds: Cómo crear un sitio web básico de blogs sin una aplicación de creación de sitios Pt.1

por: Hostwinds Team  /  diciembre 21, 2018


Para empezar, ¿una confesión sincera o algo profesional y elegante? Confesión sincera Es: Estoy tan entusiasmado con esta serie de blogs. ¡Siento que tengo un estuario entero de mariposas en mi estómago! Me encanta el desarrollo y la codificación de software, y ha sido mi sueño durante algún tiempo enseñar a una audiencia encantadora como ustedes, cómo crear un sitio web muy básico (básico ") desde cero. ¡Aquí estamos! Todos ustedes pueden ser mis pequeños conejillos de indias, ya que aprendemos paso a paso cómo generar documentos HTML básicos y documentos CSS (y potencialmente mucho más!), Luego vincule todos ellos juntos, creando así nuestro propio sitio web. Esto no solo será un sitio web promedio sobre los gatitos cayos. No, no lo hará. De hecho, debido a que los blogs son, como dicen los niños en estos días, "increíble como todos y todos los niveles", ¡crearemos un sitio de blogs juntos! Va a ser, ya que esos niños una vez más dicen, "DOPE". ¡No hay tiempo como el presente para empezar! Los documentos HTML son donde comenzaría a crear un sitio web, ya que HTML constituye la base de su sitio web. ¡Es divertido! Antes de crear un documento y código HTML con el lenguaje de programación de computadora HTML, aquí hay algunas cosas que saber sobre HTML en sí:

¿Qué es HTML?

El lenguaje de marcado de hipertexto es la parte más básica de la composición de un sitio web desde cero. La siguiente cita de una publicación de blog anterior sobre HTML explica lo que significa cada parte del "Lenguaje de marcado de hipertexto":

"La "Hipertexto" en HTML se refiere a texto que hace referencia a textos distintos a sí mismo.

los 'Margen' En HTML significa un poco a qué suena. HTML es un idioma que marca una página web con instrucciones sobre lo que se mostrará el sitio web a los espectadores. Esta dirección viene en forma de cosas como etiquetas que componen el idioma que es HTML. El marcado también explica el hecho de que los visores de sitios web no pueden ver el código escrito en segundo plano para crear el sitio web.

los 'Idioma' En HTML explica que HTML es un idioma de computadora y tiene una sintaxis y reglas como el francés o el español ".

Recomiendo encarecidamente echar un vistazo a esa publicación de blog HTML antes de continuar con este tutorial porque 1. Le dará más contexto HTML para sentirse más seguro al construir un sitio, y 2. Estoy desvergonzando la publicación porque es como uno de misOtros bebés del blog, y estoy sesgada por su perfección.El siguiente enlace lo llevará directamente a este blog, bebé, hablo de:

Hostwinds HTML Hype

ALERTA DE SPOILER: Estaré descaradamente conectando varias publicaciones de blog publicadas anteriormente a lo largo de esta publicación de blog porque 1. Son relevantes y pueden servirle como hojas de trucos a medida que aprendemos los complejos procedimientos involucrados en la construcción de un sitio web y 2. Ellos son increíbles y vale la pena conectarlos descaradamente.

Los basicos

De acuerdo, ahora que nos sentimos cómodos sabiendo lo que es HTML, es hora de obtener su documento HTML todo. Comenzaremos con la página de inicio de su sitio web, también conocida como la página de destino del sitio web. Abriremos un archivo en cualquier editor de texto que prefiera. Recomiendo Notepad ++ si está empezando y sublime texto si está un poco familiarizado con el desarrollo / codificación de software. ¡Las mejores noticias sobre estos editores de texto son que ambos son gratis!

El administrador de archivos cPanel también ofrece un editor de texto. Hablando de cPanel, no dude en consultar la siguiente publicación de blog titulada "Tutoriales de Hostwinds: Cómo configurar archivos de sitios web en el Administrador de archivos de cPanel". Pasa por cada paso involucrado en la creación o carga de archivos de sitios web como sus documentos HTML y CSS en su Administrador de archivos de cPanel:

Tutoriales de Hostwinds: Cómo configurar archivos de sitios web en el Administrador de archivos de cPanel

Además, uno de los expertos en primera línea de Hostwinds, Abigail, escribió una brillante guía de base de conocimientos sobre la construcción de una página de inicio para su sitio web.Dentro de esta guía, Abigail explica: "Si está utilizando un panel de control como CPANEL, agregará estos archivos a su directorio public_html o en la raíz del documento para su nombre de dominio.Si no está utilizando un panel de control, lo más probable es que agregue estos archivos a su / var / www / html, aunque la ubicación de la raíz del documento de su dominio puede variar ".

El archivo HTML que crea dentro de su editor de texto generalmente se guarda como "index.html". ¿Por qué? La guía de Abigail aborda esta pregunta exacta: "La forma en que se configura APACHE, en su carpeta de dominio (o Public_HTML), lee su directoryIndex, como index.htm, index.html, o index.php si estos archivos existen y sirven este archivo como la página de inicio de su carpeta. Si no hay uno de estos archivos, entonces mostrará un listado de índice. Puede cambiar su índice de directorio a través de su archivo .htaccess ". No se enchufe más descaradamente, pero también recomiendo revisar tanto esta guía y la publicación del blog sobre el almacenamiento de archivos en cPanel antes de continuar porque le dará las notas finales de este artículo del blog, así como información adicional sobre HTML que no podemos tocar. Haga clic a continuación para verlo:

Cómo crear una página de destino personalizada usando HTML y CSS

Una cita más de la guía de Abigail antes de continuar:

"Las etiquetas son cómo identificamos diferentes elementos en nuestro documento HTML y generalmente vendremos en parejas. La mayoría de las etiquetas tendrán un inicio \ <> y un final \, algunas etiquetas no tendrán la segunda etiqueta y terminarán con A /> Esto se llama un 'elemento vacío', visto principalmente en los enlaces e imágenes ".

Etiquetas

Permítame elaboración de una parte vital de HTML - Etiquetas. Le dicen al navegador cómo desea que se organice su sitio web. Como Abigail se mencionó, en general, las etiquetas están completas con una etiqueta de apertura y cierre. La etiqueta de apertura le dice a la computadora que desea organizar el contenido entre ella y la etiqueta de cierre de una manera determinada. Por ejemplo, el texto dentro de la siguiente etiqueta de párrafo (o etiqueta P) le indica a la computadora que desea que se muestre un párrafo de texto de alguna manera en su sitio web:

Aquí es donde agregaría párrafos de texto a su sitio web.

Algunas etiquetas son auto-terminantes.Esto significa que no requieren una etiqueta de cierre.Un ejemplo de una etiqueta de terminación auto-terminante es la etiqueta de rotura, que denota espacio entre dos elementos en su página web.

Para garantizar que esta publicación del blog no sea tan larga que el Titanic, preparé una publicación de blog exclusivamente sobre las etiquetas HTML. Si no está seguro de los propósitos de cada etiqueta, usamos para crear nuestro documento HTML, haga clic en el siguiente enlace para ver su hoja de trucos de etiqueta HTML:

Hostwinds HTML Hype Parte 2: Charla sobre etiquetas

Contenido

"Contenido" es lo que se encuentra dentro de las etiquetas de apertura y cierre. El contenido es lo que desea que los usuarios vean en el sitio web.

El contenido dentro de las etiquetas de párrafo anteriores, por ejemplo, es:

"Aquí es donde agregaría párrafos de texto a su sitio web".

Elemento

Un "elemento" es toda la línea de código, incluida la etiqueta de apertura, la etiqueta de cierre (si la etiqueta tiene una etiqueta de cierre, que todo no), y el contenido. En otras palabras, el elemento es todo el shebang. En nuestro ejemplo anterior, el elemento es:

Aquí es donde agregaría párrafos de texto a su sitio web.

Dulce, el paso uno para escribir un documento HTML está configurando las etiquetas en posición vertical.Cada vez que creas un documento HTML, querrá configurarlo con una primera plantilla.

Estas son las etiquetas más importantes porque configuran su documento.

La etiqueta denota la versión de HTML que estamos usando. Es importante colocar esto en la parte superior de cada documento HTML que cree.

Cualquier cosa entre los y las etiquetas denota información pertinente al sitio web.

Cualquier cosa entre las etiquetas es algo que no quiere ver en el sitio, pero la información debe comunicarse al navegador para que el sitio web se ejecute correctamente. Por ejemplo, aquí es donde querría poner la línea de código que vincule el documento HTML a un documento CSS. Etiquetas Dar el navegador Información importante sobre la estructura de la página web se denominan "etiquetas META".

Otro ejemplo de una etiqueta meta es la etiqueta. Esta etiqueta denota el conjunto específico de caracteres permitidos para ser utilizados para su sitio web. Los caracteres que comprenden el conjunto de caracteres UTF-8 cubren casi todos los personajes que uno podría pensar.

Cualquier cosa entre las etiquetas está destinada a ser vista en la página de su sitio web (o, en otras palabras, la cuerpo de su sitio web).

Cualquier cosa entre las etiquetas es lo que desea la pestaña en la parte superior de la ventana de su sitio web para decir.

Comentarios

Los comentarios proporcionan descripciones para ciertas etiquetas o elementos que lo ayudan u otras personas que visitan o editan su código en el futuro. Los comentarios son para los desarrolladores del sitio web, y aclaran las cosas para usted cuando escribe el código que asciende a su sitio web. En mi experiencia, es imperativo comentar lo más posible para que pueda recordar cuál es cada parte de código en caso de que usted o otra persona vuelva y edite su código más adelante.

Ejemplos de comentarios que pueden colocarse en su documento HTML:

Preferencia personal: me gusta poner comentarios en cada área de mi página web para que me sea más fácil identificar cada sección. A continuación se muestra un ejemplo de esto:

Mis fotos mi reanudación de la página de inicio de ME Hostwinds

El fragmento de código de arriba solo me recordó que inserte esto muy IMPORTANTE NOTIFICACIÓN: Cuando el trozo de código i inserto en estas publicaciones de blog es demasiado largo para que se ajuste a la ventana, aparecerá una pequeña barra de desplazamiento en la parte inferior de dicho código cuando cambie el mouse sobre esa área. Puede deslizar la barra de desplazamiento a la derecha para ver el trozo de código completo. Tenga esto en cuenta a lo largo de esta publicación de blog y partes 2 y 3 de esta serie de blogs.

Atributos

Los atributos son un poco más complejos, ¡pero nos vamos a sumergir! Como se indica en la publicación del blog "Hostwinds HTML Hype Part 2: Tag Talk", el atributo especifica algo sobre un elemento.

A continuación, se muestran algunos ejemplos de atributos distintos de los ID y las clases (consulte la publicación de blog sobre las etiquetas HTML si no está seguro de qué son los ID y las clases y / o qué hacen):

1. El "Href" parte de la etiqueta de anclaje es un atributo en el sentido de que especifica a qué archivo se hace referencia.

2. El "Alt" Parte de la etiqueta de imagen es un atributo para que especifica lo que desea que el texto se muestre como marcador de posición si, por alguna razón, la imagen no está cargando.

3. Un ejemplo parece la mejor manera de enseñar lo que "objetivo" El atributo lo hace.Digamos que tiene una etiqueta de anclaje en su documento HTML que permite a los usuarios de su sitio hacer clic en un enlace que los lleva a la página de inicio de Hostwinds.

Puede agregar un atributo de destino a la etiqueta de apertura para informar al navegador cómo desea redirigir a los usuarios al sitio de Hostwinds. En otras palabras, puede usar el atributo de destino para elegir si desea que se abra el sitio en la misma ventana que están viendo su sitio en o en una ventana completa (aka TAB).

Dé el atributo de destino el nombre (AKA Value) "_Self" para dirigir a los usuarios al sitio web de Hostwinds en la misma ventana que están actualmente.

Indique el atributo de destino el nombre (AKA Value) "_Blank", así como para dirigir a los usuarios al sitio web de Hostwinds en una nueva ventana (AKA TAB).

Hay otros valores que puedes darle a tu atributo de destino, ¡pero entiendes la idea!

Todo el documento HTML

¡Vaya, tanta información tan rápido! Ahora que sabe mucho sobre HTML, configuremos un documento HTML simple que incluya todo lo que hablamos.

Nota: estaremos configurando nuestro sitio web de blogs para emular el sitio web de blogs de Hostwinds.Sin embargo, será un sitio web de blogs fundamental a medida que empezamos y aprendemos los conceptos básicos de HTML.

Otra nota: Mi hermana muy sabia e inteligente es un exitoso desarrollador web. Ella me dio los siguientes consejos sobre la creación de sitios web: cada vez que desee hacer un nuevo sitio web desde cero, primero intente mapear cómo desea configurarlo / la forma en que desea que se vea. en papel. Una vez que comencé a seguir de este consejo, noté que podía desarrollar sitios web casi el doble de rápido.

Paso 1: Agregue una simple barra de navegación en la parte superior de la página (generalmente, las barras de navegación tienen muchos enlaces, pero solo por ahora, lo mantendremos en un enlace en la barra de navegación que hagamos):

Mi sitio web de blogs

Observe que he colocado las etiquetas de la barra de navegación dentro de las etiquetas del cuerpo.Como discutimos anteriormente, esto garantiza que la barra de navegación sea visible en la página web.La etiqueta de apertura de la barra de navegación está justo debajo de la etiqueta del cuerpo de apertura.Esto asegura que nuestra barra de navegación estará en la parte superior de la página.La etiqueta justo antes de la etiqueta del cuerpo de cierre.Como se mencionó en "Hostwinds HTML Hype Parte 2: Tag Talk", la etiqueta hace un espacio entre dos elementos.Teniendo en cuenta que queremos un espacio entre nuestra barra de navegación y el siguiente elemento, ploppamos una etiqueta entre los dos.

Paso 2: Agregue el área donde sus espectadores pueden hacer clic para ver su primera publicación del blog (también conocido como la publicación de blog más reciente) debajo de la etiqueta:

Mi sitio web de blogs

Título de la publicación de blog 1

Aquí es donde puede colocar una breve sinopsis de la publicación de su blog si lo desea

Leer publicación de blog

Observe que tenemos un encabezado con el nombre del correo del blog justo encima de una imagen destacada para la publicación de blog justo encima de la sinopsis de la publicación del blog justo encima de un botón que nos lleva a la página web que crearemos ahora para nuestra primera publicación de blog.El nombre del archivo HTML que estaremos creando para la primera publicación del blog será "blogpost1.html".En la Parte 2 de esta serie de blogs, crearemos tres documentos HTML más para realizar tres páginas web para tres postes hipotéticos de blog.Nombraremos estos tres documentos HTML "blogpost1.html", "blogpost2.html," y "blogpost3.html".Por lo tanto, podemos hacerles referencia dentro de nuestras etiquetas de anclaje que rodean las etiquetas de nuestros botones.

Observe que las etiquetas de apertura y botón de cierre están anidadas entre las etiquetas de apertura y cierre de anclaje.Esto nos permite hacer clic en el botón y navegar a la página web con la que queremos llegar.

Observe la etiqueta de línea horizontal en la parte inferior de este trozo de código.Tendremos una línea horizontal que separe las tres áreas en las que sus espectadores pueden hacer clic para ver las publicaciones de blog 1, 2 y 3. También tendremos una línea horizontal que separa la publicación del 3ra Blog desde el pie de página.

Rutas de archivo: relativo vs. absoluto

Las rutas de archivo son la forma en que le informa a su navegador sobre qué archivo para agarrarlo cuando lo hace referencia en un elemento. Puede escribir en toda la ruta del archivo, o puede abreviarlo. Una ruta de archivo absoluta es toda la ruta del archivo, y una ruta de archivo relativa es una versión más acortada de la misma ruta del archivo (sin embargo, todavía dirige a los usuarios de su sitio web en el mismo archivo).

Ejemplo de una ruta de archivo absoluta:

<img src= “https://www.hostwinds.com/images/new-pages/home-img.png” alt=“Hostwinds is Awesome”>

Ejemplo de una ruta de archivo relativa:

<img src= “/new-pages/home-img.png” alt=“Hostwinds is Awesome”>

Un sistema fresco en el que el navegador interpreta la ruta del archivo relativo que ingresa en su código.Tocaremos esto un poco ahora, pero no se preocupe si esto es un poco difícil de envolver su mente, ya que probablemente cubriremos el sujeto con más detalle en una de las publicaciones posteriores del blog.

Paso 3: Organicemos rápidamente nuestros archivos un poco. Vaya a sus archivos donde reside su documento index.html. Crea una carpeta llamada "imágenes". Suelta todas las imágenes que te gustaría usar para tu sitio web de blogs en esta carpeta. La imagen destacada para el blog 1, la imagen destacada para el blog 2 y la imagen destacada para el blog 3 suman tres archivos de imagen en total. Puede nombrar sus archivos de imagen como desee, pero para nuestros propósitos, los llamaremos "your_image_goes_here_1.png", "your_image_goes_here_2.png" y "your_image_goes_here_3.png". Además, para este tutorial, usaremos varias imágenes de Hostwinds para nuestras imágenes destacadas.

Usaremos una ruta de archivo relativa para todas las imágenes de nuestro sitio web.Ahora, instruya a los navegadores que vayan dentro de la carpeta "Imágenes" para agarrar cada imagen.

Publicación de blog 1 Imagen destacada

El punto y la barra inclinada al principio de la ruta del archivo le indican al navegador que comience donde está el archivo index.html y que se sumerja en la carpeta "imágenes". La barra diagonal después de "imágenes" le dice al navegador que busque un archivo dentro de esa carpeta.

Paso 4: Agregue el área donde sus espectadores puedan hacer clic para ver su segunda publicación de blog debajo de la etiqueta simplemente copiando el trozo de código que acabamos de crear para la primera publicación de blog y pegamos debajo.Una vez que todo está pegado, todo lo que tenemos que hacer es cambiar todo "1" a "2."

Paso 5: Agregue el área donde sus espectadores puedan hacer clic para ver su tercera publicación de blog debajo de la etiqueta copiando nuevamente el trozo de código que acabamos de crear para la primera publicación del blog y pegándola.Una vez que se haya pegado, todo lo que tenemos que hacer es cambiar todo "1" a "3."

Título de la publicación de blog 1

Aquí es donde puede colocar una breve sinopsis de la publicación de su blog si lo desea

Leer publicación de blog

Paso 6: Ahora, estamos listos para agregar un pie de página debajo de la etiqueta.Lo haremos simple por ahora y la muñe más tarde.

¡Gracias por visitar este sitio de blogs!

Paso 7: Mencioné anteriormente que estamos modelando este sitio web de blogs después del sitio web de blogs de Hostwinds. Observe cuando visite https://www.hostwinds.com/blog/ y haga clic en una de las imágenes destacadas, se le dirige a la publicación del blog asociada con dicha imagen destacada. Queremos que nuestros espectadores del sitio web de los blogs puedan poder hacer lo mismo, y se sorprenderá de lo simple que es crear este efecto. Simplemente (nuevo término de codificación subiendo :) NIDO Las etiquetas para cada imagen destacada entre una etiqueta de anclaje de apertura y cierre (como las etiquetas de anclaje que utilizamos para nuestro enlace y botones de barra de navegación). Refirmaremos nuestro "blogpost1.html", "blogpost2.html" y "blogpost3.html" documentos dentro de nuestras etiquetas de anclaje de la misma manera que hicimos cuando estábamos creando nuestros botones.

Observe las etiquetas de anclaje alrededor de cada etiqueta de imagen en el documento después de realizar este cambio:

Mi sitio web de blogs

Título de la publicación de blog 1

Aquí es donde puede colocar una breve sinopsis de la publicación de su blog si lo desea

Leer publicación de blog

¡Gracias por visitar este sitio de blogs!

Paso 8: ¡Date una ronda de aplausos! ¡Adelante y juega con tu sitio web un poco! Vaya a su Explorador de archivos, haga clic con el botón derecho en el archivo "index.html", y haga clic en "Abrir con". A continuación, seleccione su navegador de Internet preferido (Recomiendo Google Chrome). Intente hacer clic en los botones de "Leer Blog Post" y notifique que lo llevan directamente a su correo de blog correspondiente. Cuando consulte su sitio, haga clic en las imágenes y los botones para asegurarse de que no hubo "errores" (aka tipográfico o errores) en su código.

Página principal

La parte 1 de esta serie de blogs está completa, la gente. Continuaremos agregando un poco más HTML a este sitio web de blogs en la Parte 2 de esta serie, ¡y va a ser un verdadero placer! No quiero alertar alerta al resto, así que concluiremos ahora.

HTML feliz

Manténgase sintonizado para la Parte 2 y mantenga esta hoja de trucos porque nos referiremos a él. ¡Mantente sintonizado para las partes 3 también! ¡Oh, habrá, como dicen los niños, "partes en partes en partes" para esta serie de blogs! Antes de que lo sepamos, tendremos un sitio web mucho más complejo en los que podemos publicar blogs. ¡Hablamos pronto!

Escrito por Hostwinds Team  /  diciembre 21, 2018