Este será el diseño que estaremos haciendo para el blog así que vamos a abrir lo que viene siendo anunció.
Voy a copiar este template y voy a crear uno nuevo que voy a nombrar blog junto a HTML extremely y lo
pegamos y el primer paso es que voy a quitar todo lo que esté dentro del texto que está aquí dentro
del menú me lo voy a mantener y también esta imagen y corto SH1 me lo voy a llevar hacia adentro del
Main en este caso va a estar dentro del Main porque no tenemos por ejemplo como en la imagen anterior
una imagen que saliera totalmente del contenido en esta parte me lo traigo hacia dentro del Main de
nueva cuenta.
Entonces vamos a tener un contenedor una sección y el contenido centrado.
Todo esto se mantiene la clase para la H1 fue muy €300 centrar el texto se mantiene también se escribe
en blog que dice aquí quiere decir nuestro blog no debe decir casa no se qué.
Entonces nuestro blog se va viendo bien y el siguiente paso es abrir el índex tenemos ya algunas entradas
de blog.
Si recuerdas dentro de los artículos entonces nada más podemos copiar estas dos entradas no los llevamos
al blog aquí y los pegamos en esta parte entonces guardamos cambios abrimos nuestro proyecto y puedes
ver que se posicionan correctamente y se ven bastante bien.
No tenemos que hacer nada más de nueva cuenta por la forma en que estamos escribiendo nuestro CSS puedes
ver que por ejemplo este contenido puede considerarse como un componente lo generamos desde aquí entradas
blog.
Por lo tanto tiene sus propios estilos y cuando lo llevas de un lugar hacia otro es mucho más fácil
hacerlo portable es decir poderlo utilizar en diferentes secciones aquí lo hubiéramos puesto por ejemplo
en una sección que diga inicio eso ya lo haría más complicado de reutilizar.
Por lo tanto yo recomiendo que vayas creando o dividiendo tu contenido de esta forma por ejemplo de
entrada blog y creas los estilos de este componente únicamente y de esa forma vas a poderlos copiar
y pegar en diferentes páginas como en este caso que puedes ver que se ve bastante bien.
Entonces nuestro diseño tiene cuatro entradas de blog a copiar lo que vienen siendo estas estos artículos
al menos dos veces tenemos uno pegamos dos y vamos a ver un poco de scroll.
Tenemos el blog 1 blog 2 blog 3 Aquí puedes ver que en las imágenes que esté dando tenemos del 1 al
4.
Entonces si pones un 5 pues no va a servir y vamos a colocar aquí el texto para la entrada del blog
3 y creo que todos dicen lo mismo y todos dicen lo mismo pero bueno vamos a poner aquí los 4 y vamos
a guardar cambios abrir el proyecto entonces tenemos diferentes imágenes en la casa esta segunda vamos
a ponerla como construye una alberca en tu hogar obstruye una alberca en tu hogar y apaga la decoración
de tu casa está bien y vamos a ponerlo como guía para la decoración de tu habitación.
Esa habitación guardamos cambios abrimos nuestro proyecto y que tenemos diferentes entradas.
Ahora de nueva cuenta cuando creas un blog usualmente bueno PHP Maisí hay muchos lenguajes de programación
para mí el PHP es el que es más fácil de aprender para alguien que va empezando.
Podrías hacerlo de esa forma.
Otra opción que muchas personas incluso yo utilizo cuando un cliente me pide un blog es construirlo
con WordPress te lo va a hacer mucho más sencillo.
Y este video ha sido un poco corto por lo tanto vamos a crear de una vez la entrada del blog es decir
cuando yo decaigan alguna de estos enlaces donde se abrirá el blog y vamos a ponerlo aquí por ejemplo
en estos enlaces selecciono un enlace y mandeo controlde y vamos a enlazar la entrada a punto HTML de
la misma forma el índex vamos a enlazar una entrada HTML entonces a ver por ejemplo aquí en el índex
si haces una búsqueda por el signo de gato o numeral x aquí ver propiedad esto es de ver propiedad son
los que nos llevan hacia anuncio punto HTML ese no lo habíamos agregado y estos dos de acá nos deben
llevar lo que son las entradas los entradas de blog nos deben de llevar a entrada con HTML y el temple
de entrada.
Por ejemplo si habrá aquí mis diseños puedes ver que ya casi estamos por terminar este templetes muy
similar al de al que creamos anteriormente de.
Por lo tanto voy a copiar este y creamos entrada en tu HTML pegamos y vamos a ver un poco de scroll
en la parte del Gdeim del encabezado aquí voy a poner o eliminar esta parte de aquí voy a poner consejos
para tener una alberca en tu casa sin gastar demasiado y la imagen destacada va a ser imagen destacada
2 está agregada en los materiales y aquí vamos a poner imagen principal y después vamos a colocar lo
que viene siendo contenedor sección Contenido entrada y de una vez voy a colocar una clase llamada texto
entrada.
Por qué.
Porque si recuerdas aquel blindex tenemos definido texto entrada entonces éste tiene algunos estilos
que vamos a hacer que se pasen automáticamente hacia este templete que estamos creando entonces tenemos
gran entrada texto entrada etcétera todo este resumen que está aquí lo vamos a eliminar y vamos a colocar
en esa parte si vemos nuestro templete puedes ver qué dice aquí escrito él y quién lo escribió ese texto
ya lo tenemos en esta parte.
Aquí por ejemplo lo pegamos.
Entonces tenemos nuestra entrada tenemos un poco de la se empezó a hacer un poco más grande para que
se vea como una entrada de blog más real con un poquito más de contenido entonces algo así.
Guardamos cambios y vamos a ver por ejemplo en esta entrada que nos lleva hacia la entrada de blog con
la imagen bastante grande y lo que simula una entrada de blog que se ve bastante bien.
Puedes ver que al ser el contenido centrado que creamos anteriormente esta clase de aquí se ve un poco
más pequeño y existen muchos blogs como que el contenido lo central para que sea más sencillo de leer
que parezca más como una hoja en lugar del otro que estaba muy ancho.
Entonces se va viendo bastante bien me está gustando la verdad mucho espero estás aprendiendo mucho
y lo último que nos falta es el contacto así que el contacto va a ser un poco más complicado porque
puedes ver que tenemos un formulario bastante grande en un formulario bastante largo porque la idea
es mostrarte todos los tipos de campos que hay en HTML así que los veremos paso a paso en el siguiente
video.