Pagina WEB Con Sublime Text & CSS

Mtro.
Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
1. Instalaremos Sublime Text “Descarga” (https://www.filehorse.com/es/descargar-sublime-

text/), además de XAMPP para trabajar con un Host local (APACHE) “Descarga”
(https://www.apachefriends.org/es/download.html), con el fin de trabajar de una mejor
manera al enlazar bases de datos, la instalación de XAMPP deberá ser en Raiz (c:/)
2. Una vez ubicada la carpeta de XAMPP la abriremos y localizaremos la carpeta htdocs, ahí se
generará una nueva carpeta que será la que almacenará nuestro proyecto web (pon el
nombre que desees).
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
3. Una vez generada la carpeta almacenadora de nuestro proyecto, debemos activar apache
en XAMPP, y se activa la casilla de “star”, hasta que esté de color verde.
4. Una vez que esta activado APACHE abriremos el explorador para comprobar que esta activo,
dentro de la barra de direcciones pondremos: localhost y aparecerá como se muestra en la
imagen, carga la pagina de XAMPP porque aun no hemos generado nuestro proyecto.
5. Si probamos una vez más poniendo localhost/nombre_proyecto, no aparece que no

encuentra el objeto, (ver imagen).
6. Para iniciar nuestro proyecto abriremos Sublime Text; File → Open Folder →
c:/xampp/htdocs/carpeta_proyecto, y seguidos damos seleccionar carpeta, posteriormente
se abrirá una pestaña ya con nuestro proyecto activado.
7. Debemos conocer que HTML es un lenguaje web basado en etiquetas y se representan: <>
etiqueta abierta, </> etiqueta cerrada. Ej. <body> </body>
8. Seguiremos generando nuestro archivo html, dando clic derecho en
nuestra carpeta del proyecto ubicada en la parte izquierda de
nuestro sublime text.
9. Posteriormente nos abrirá una pestaña nueva, donde deberemos poner nuestro index.html,
como sabemos será nuestra página principal (pag. Contenedora),
Después de poner el nombre le daremos guardar y deberá estar ubicada dentro de la

carpeta que se genero como proyecto, y ya quedará ubicada en la barra lateral izquierda
como se muestra en la imagen, y si vemos también en la pestaña quedará guardado el
nombre.
Antes de seguir para realizar nuestro primer proyecto debemos instalar el Plugin emmet, el
cual no será muy útil para autocompletar muchas instrucciones y etiquetas en nuestro
código, la ruta es: Tools -> Command Palette -> Package Control -> Install
10. Una vez instalado el plugin, procedemos a realizar nuestro esquema de código, ponemos lo
siguiente: ! seguido de la tecla TAB y nos autocompletara toda la sintaxis básica de HTML.
Primer Línea; <!doctype html>, identifica el tipo de documento (HTML).
Segunda Línea: Esta la etiqueta html <html lang="es">, dentro estará todo el diseño
de nuestra página web, la instrucción Lang nos esta indicando que estamos usando
el lenguaje español.
Tercer Línea: esta la etiqueta <head></head>, en la cual almacenaremos el

encabezado de nuestra página, y dentro de ahí estará la etiqueta <meta
charset="utf-8">, indicando que tenemos la libertad de involucrar metadatos como
por ejemplo: la ñ y los acentos, así mismo la etiqueta <title>Mi Primer Pagina</title>
que nos almacenara el título de nuestra página, apareciendo en la pestaña del
navegador, Y dentro también se declararán los formatos que les asignaremos a
nuestros títulos, fuentes y demás cuadros de texto.
Séptima Línea: aquí está la etiqueta <body></body>, donde se contendrá la parte

nutrida de los elementos e información de nuestra página.
MENU DE NAVEGACION HTML – CSS

11. Se realizará la barra de navegación, dentro de la etiqueta <body>, generamos la etiqueta
<nav></nav> que nos indica que habrá una barra de navegación, anidando una etiqueta
llamada <ul> que es una lista, anidado generamos una etiqueta <li> que son las listas y se
generaran tres dentro de una etiqueta <a>, quedando de la siguiente forma:
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="noticias.html">Noticias</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
Tomar en cuenta que el atributo “href”, nos indica hacia donde se va a dirigir:
Inicio a index.html
Noticias a noticias.html
Contacto a contacto.html
Y por ello la etiqueta <a> hace los enlaces, te muestro el código completo de cómo debe ir
quedando:
Se guarda el avance que llevamos y después hacemos la prueba en el navegador y

verificamos como está quedando.
Como podrás ver tiene los puntos como viñetas y el subrayado, vamos a proseguir a
quitarlos, para esto hay que crear un nuevo archivo tipo CSS, de la misma manera que se
generó el index, se llamara: main.css
Los estilos de CSS se deberán estar referenciados dentro de la etiqueta <head>, se creará
una etiqueta <link>, <link rel="stylesheet" href="main.css">, indicando que ligue a la
referencia de la hoja de estilo CSS, el cual fue generado como main.css.
Nos brincamos a la pestaña main.css para darle el estilo a nuestro menú; en primer termino
le quitaremos los márgenes que nos da el explorador predefinido como se muestra en la
imagen: *: indica que deberá aplicarse a todo el cuerpo de la página, *{margin: 0; border: 0;}
Actualizamos nuestro navegador y nos mostrara:
Ahora retiraremos los puntos de las viñetas de nuestro menú, los cuales fueron creados por
la etiqueta <li>, y tendremos irnos a editar esa etiqueta, regresamos a la pestaña de
main.css y agregamos como lo mostramos en la imagen:
Guardamos Ctrl+s
Actualizamos nuestro explorador y queda de la siguiente manera:
Ahora como verán están subrayados, debemos quitárselos y este atributo lo genera la
etiqueta <a>, por lo tanto, nos vamos nuevamente a la pestaña de main.css y le realizamos
la edición como se muestra en la imagen:
Ctrl+s : Guardar
Y actualizamos el explorador y queda así:
Ahora editaremos la etiqueta <nav>, con el fin de ponerle un fondo para que vaya tomando
un buen diseño, nos regresamos a la pestaña de main.css y llamamos la etiqueta de la
siguiente manera:
Ahí elegimos el código del color que mas nos agrade, en este caso el código: #341198
corresponde al color azul, el cual se mostrara como fondo de nuestro menú.
Y una ves guardado el cambio nos vamos al navegador para visualizar lo generado:
vemos como la etiqueta <nav> sufrió el cambio.
Como podemos ver el color del texto se pierde, por lo que procederemos a realizarle una
edición al texto cambiándolo de color, así como alinearlos quitando estar uno encima del
otro, para este último, nos vamos a la pestaña del main.css y agregamos esos atributos a la
etiqueta <li> de la siguiente manera:
Actualizamos el Navegador, quedando nuestro menú de forma lineal.
Ahora para cambiarle el color nos vamos a la etiqueta <a> y agregamos el siguiente atributo:
color: #ffffff, representando este código el color blanco.
Actualizamos nuevamente nuestro navegador arrojándonos:
A la etiqueta <nav> se le aplicaran un padding (20 px), lo que significa hacer más grande el
recuadro azul que tiene nuestro menú, haciéndolo de la siguiente manera y actualizando el
navegador vemos el resultado:
Ahora para hacerlo más estético, queremos separar el menú un poco más, ramos al main.css
en la etiqueta <a> y le aplicamos también un padding (20px), con las mismas dimensiones
de PX, quedando de la siguiente forma:
TIPOGRAFIA CON GOOGLE-FONTS

12. Nos pasaremos ahora a la etiqueta <body> para darle un fondo e ir adquiriendo mas
formalidad y colorido a nuestra página web, entramos a la pestaña main.css y llamamos a
la etiqueta de la siguiente manera para darle las propiedades: el fondo será de un color
mostaza con el código #E8AD0E
Dentro de la etiqueta <body> se generará otra como Titulo <h1></h1> y quedara ubicado
de la siguiente manera dentro de nuestra pestaña de index.html:
Ctrl+s y actualizamos el Navegador arrojando lo siguiente: poniendo de mostaza el fondo y

agregado el título h1
Ahora nos regresamos a la pestaña main.css y le daremos formato a la etiqueta <h1> color,
tamaño y tipo de letra. El color por el #codigo es blanco el texto, Font-size; tamaño de 30px
y la alineación; text-align-lasts centrado
Actualizamos el navegador y nos resulta lo siguiente:
Complemento: para darle el tipo de letra nos apoyamos con los estilos que Google Fonts
nos ofrece en línea, así como el código disponible, ingresamos a la página
http://fonts.google.com/ y ahí nos proveerá de distintos estilos para que elijamos la que
más nos guste.
Se elige y se le da click en el icono de + y se abrirá una pestaña como la imagen, ahí nos
dará el código con el que haremos el link para que nos aplique el estilo elegido, así como las
especificaciones que pondremos en la pestaña de main.css.
La ruta del link se ubicará en la etiqueta <head>
El código CSS lo ubicaremos en la pestaña de main.css dentro de la etiqueta h1

Se guarda Ctrl+s, actualizamos nuestro navegador y se ve como queda nuestro titulo <h1>
con las propiedades que le asignamos.
Se observa que el titulo se ve pequeño, le daremos más tamaño solo yéndonos a la pestaña
main.css y aumentamos el numero para afectar el tamaño. Font-size: 50px
Y para darle mejor orden separamos el título del recuadro del menú aplicándole un padding
(20px).
Visualizamos como quedo después de la aplicación del padding

13. En este paso agregaremos imágenes que sirvan de enlace para otro frame, donde
busquemos dividir dos opciones para el visitante, por lo que para realizar esta actividad hay
que generar una carpeta con el Nombre de: imagen, para ahí almacenar por el momento 2
y cumplir con la práctica, tu puedes agregar las que más te convengan según tu diseño.
Seguimos creando una etiqueta <div> dentro del <body> asignándole una clase contendor
(<div class="contenedor">), dentro de, se generarán dos enlaces que vendrán a llamar las
fotos desde la carpeta imagen, y será una etiqueta <a>, dentro de, una etiqueta imagen
<img> habrá un atributo src que servirá de enlace y que nos direccionara a la carpeta
imagen, pondremos seguido la diagonal inversa (/) seguido del nombre de la imagen,
quedando el código como se ve en la imagen:
Guardamos Ctrl+s y actualizamos el navegador para visualizar las imágenes puestas en el

cuerpo del sitio.
Para darle más presentación se aplicarán estilos con el propósito de ponerlas más pequeñas
y centradas.
Para esto nos vamos a la pestaña de main.css y llamamos la clase contenedor (.contenedor)
le daremos un ancho (width) del 80%, un margen automático (margin: auto).
A las imágenes se les dará un ancho y alto en la etiqueta img (width: 500px).
Ctrl+s y actualizamos el navegador:

Ahora daremos más presentación a nuestras imágenes, pondremos una a lado de la otra
aplicándole mas estilos, vamos a la pestaña de main.css para darle las propiedades a la clase
.contenedor aplicándole un display y justificación del contenido, como se muestra en la
figura:
Y visualicemos como queda con las propiedades aplicadas actualizando el navegador:
Posteriormente se les asignara un subtitulo a cada una de las imágenes, para realizar esto
vamos a colocar a cada imagen dentro de una etiqueta <div> y dentro de cada etiqueta
<div> pondremos una <h2> (subtítulos), y a esos subtítulos le pondremos “Hombre” “Mujer”
Ahora nos brincamos a la pestaña de main.css para darle estilos a eso subtítulos, primero
llamamos la etiqueta <h2> y aplicamos un text-aline: center (centrarlo), un margen
automático, y un color de fondo (back ground) con el patrón rgba (rojo, verde, azul,
transparencia),
A esto le agregamos en la misma etiqueta <h2> un width: 350px y un padding: 15px
Ctrl+s y actualizamos nuestro navegador y aparece de esta manera:
Si queremos homologar la letra del título con los subtítulos solo agregamos el enlace de
Google-fonts que ya tenemos, font-family: 'Satisfy', cursive; quedando de esta manera
dentro del main.css para la etiqueta <h2> :
h2{text-align-last: center; margin: auto; background-color: rgba(250, 250, 250, .5); width:
350px; padding: 10px; font-family: 'Satisfy', cursive;}
Quedando de esta manera en el navegador:
14. Ahora generaremos los frames para direccionar nuestras imágenes haciendo la vinculación
de los subtítulos <h2> : “Hombres” / “Mujeres”.
Nos posicionamos en la barra izquierda y damos click derecho para generar Nuevo Archivo:
Le pondremos como Nombre “hombres.html”
Ctrl+s; Guardamos y los ubicamos en la carpeta contenedora generada desde el inicio:

Posteriormente crearemos la sintaxis básica de HTML como lo realizamos en el frame de

inicio (index.html).
Iniciamos a editar nuestra sintaxis básica con la etiqueta de <tittle>, poniéndole “Ropa para
Hombre”
Nos pasamos a la pestaña de index.html y copiamos la etiqueta <nav> de navegación con la

información del menú antes generado:
Nos brincamos a la pestaña de hombres.html y le damos pegar dentro de la etiqueta <body>

Después de la etiqueta <nav> pondremos otra <h1> con el nombre de “Ropa para
Hombres”, después una etiqueta más <div> donde estará teniendo las imágenes, y dentro
generamos una clase que se llame: “class=”imágenes” en donde pondremos 5 imágenes
que deberás tener en la carpeta IMÁGENES que anteriormente generamos, quedando el
código de la siguiente manera:
Ctrl+s Guardamos y posteriormente nos ubicamos en el navegador y lo actualizamos y nos

aparece:
Después damos un clik en la imagen de hombres y nos direcciona a:
Para darle el mismo estilo de la pagina inicial (index.html) ponemos el estilo css en el frame
de hombres dentro de la etiqueta <head>
Ctrl+s Guardamos, y actualizamos el navegador y ya toma el estilo que venimos manejando.

Seguimos dándole presentación a nuestra página, nos vamos a la pestaña main.css y le

vamos a dar estilo a nuestra clase imágenes, así como a las propias imágenes, poniendo los
parámetros como se visualizan en la imagen:
Ctrl+s, y nos vamos a actualizar el navegador para visualizar los estilos asignados a la clase
e imágenes.
En este proceso iniciamos a vincular el menú que arrastramos desde el index.html, para
esto, nos posicionamos en la pestaña de hombres y dentro de la etiqueta <ul>, en el primer
“href” (referencia), de inicio le ponemos que nos mande a: index.html para regresarnos a
la página principal.
Ahora nos daremos a la tarea de hacer el mismo proceso con el frame de “Mujeres”, nos
vamos a la barra izquierda y damos click derecho para generar Nuevo Archivo, ponemos
como nombre mujeres.html guardamos e iniciamos el mismo proceso anterior.
Guardamos: Ctrl+s, y actualizamos el navegador para que aparezca de la siguiente manera:
Y para realizar el mismo proceso de regresarnos al inico mediante el menú, agregamos lo siguiente
dentro del href del Inicio: <li><a href="index.html">Inicio</a></li>.
15. Ahora después de haber realizado los catálogos de la ropa de Hombre-Mujer, y con el link
al inicio, haremos la parte del footer, nos ubicamos antes de finalzar el body, se genera la
etiqueta <footer></footer> dentro de esta, generamos una <div></div>, una para
información de derechos de autor y otra para las redes sociales y contacto, y generamos el
código como sigue: una etiqueta con clase copy y otra con redes:
Dentro de la primera eqtique <div> con clase copy pondremos dos párrafos: 1 con “todos los
derechos reservados” la otra generaremos el símbolo de Copyrigt y esto lo generamos poniendo el
símbolo & seguido de la palabra copy y cerrado por el punto y coma (©), seguido le pondremos
el nombre de la página (©fashion):
Ahora en la etiqueta donde esta la clase redes pondremos tres etiquetas de párrafos <p></p> con
enlace “href”, donde se pondrán “Facebook” “Instagram” “Twitter”;
Ctrol+s Guardamos y nos vamos a actualizar nuestro navegador y queda de la siguiente manera:
Ahora le daremos el estilo a nuestro footer nos brincamos a la pestaña de main.css y llamamos a la
etiqueta <footer>, para iniciar a darle estilo, podremos un tamaño, fondo y espaciado adecuado
para estilizar nuestra presentación:
Actualizamos nuestro navegador y vemos que aun falta darle estilo a nuestro parramos, a los que
les daremos un color de texto (blanco al copy) y un padding vertical y horizontal y queda de la
siguiente manera:
Al footer se le agregara una alineación para ir estilizando nuestro proyecto, alinearemos de manera
vertical nuestros ítems del footer
Les aumentamos el tamaño de las letras para que se vean mejor:

Ahora iremos con el párrafo de las redes sociales, para igualar los estilos del copy, aplicaremos el
estilo pertinente como se ve:
Ahora le pondremos la ruta adecuada de nuestras redes sociales, cargaremos cada una de ellas en
el navegador y copiaremos la url correcta, nos ubicamos en la pestaña de index.html para pegar la
ruta dentro del “href” :
Pero si vemos que al darle a los enlaces de las redes sociales nos cierra la pagina principal de nuestro
proyecto, para corregir esto daremos la indicación de que abra una nueva pestaña en el navegador
con una instrucción “target” y queda de la siguiente manera:
16. Ahora replicaremos el footer a las demás frames “Hombres”-“Mujeres”
Copiaremos toda la etiqueta <footer>,
abriremos la pestaña de “hombres.html”
Repetimos la acción a “mujeres.html” ,
Pero cuando actualizamos el navegador con estas acciones aplicadas, el footer de posiciona en un
lugar no muy adecuado, entonces procederemos a darle la indicación que siempre se deberá
posicionar hasta la parte inferior de cada pagina.
Para esto le daremos la instrucción brincándonos a main.html , nos ubicaremos en la etiqueta

<footer> y agregamos el estilo:
17. Ahora trabajaremos el título de menú “noticias”, no posicionamos en la carpeta

contenedora y damos clik derecho y generamos el archivo “noticias.html”;
Ctrl+s Guardamos el archivo en la carpeta contenedora.
Ahora copiaremos del index el apartado de navegación:
Posteriormente enlazaremos los estilos de la pestaña main.css, con el propósito de tomar los estilos
que pondremos en este frame.
Ahora enlazaremos noticias.html dentro del index.html, para ir vinculando nuestros menús.
Esto lo repetimos en todos los frames donde tenemos la clase de navegación.

Ahora generaremos en noticias.html, una etiqueta <div> con una clase noticias, dentro de <body>,
ahí habrá 4 secciones tipo: <div>:
Dentro de cada <div> generaremos una clase imagen (<img src=” “ alt “ “>), además de una clase
descripción (<div class=“desc”>).
Para esto ya tenemos ubicado de donde iremos a visitar las noticias, para tener ya visualizadas las
imágenes que descargaremos a la carpeta contenedora de las imágenes.
Ya una vez guardadas en la carpeta las mandaremos llamar en cada clase para que se muestren en
cada una de las etiquetas creadas.
Posteriormente a cada una de las clases imagen las pondremos dentro de una etiqueta <a> </a>
Dentro de la clase descripción (<div class=”desc”>) hay que agregar una etiqueta de título <tittle> y
párrafo <p>,
Seguido nos vamos a la pagina de donde extraeremos las noticias referente a las imágenes
descargadas y copiamos los títulos para copiarlo en la etiqueta <h1>,
Así de manera consecutiva a cada uno de las etiquetas <h1> de cada imagen.
Posteriormente pegamos ese titulo en la etiqueta <h1> de la imagen 1
De manera seguida copiamos el párrafo en la etiqueta <p>, desde la pagina de noticias a la que
haremos el link.
De igual manera que el titulo nos vamos a la etiqueta <p> para pegar el contenido del párrafo:
Así de la misma manera hacemos el copiado y pegado de los títulos y párrafos en cada una de las
imágenes.
Si actualizamos el navegador una ves que guardamos todas las modificaciones y estilos que
aplicamos, nos queda un poco desorganizada, por lo que procederemos a darle los estilos para que
se visualice de mejor manera.
Como en todas las paginas o archivos que estamos generando, pondremos el footer para que vaya
dándose mas estandarización, para esto nos vamos a index.html y copiamos el código:
Y lo pegamos en noticias.html, después de la ultima foto de noticias,

Seguidos nos vamos a main.html para aplicarle al <body> una posición relativa (position = relative;),
para que se aplique al final el footer como en las demás paginas.
Cada imagen tiene un “desc” , y nos iremos al main.css para aplicar estilos, llamamos la clase:
<div.noticias>, para darle mejor presentación a nuestra página “noticias”.
Agregaremos además un “flex-wrape”, esto para acomodar cada imagen de manera consecutiva si
no cabe en la pagina y evitar generar una barra de desplazamiento horizontalmente.
Ahora los <div.noticias div> le daremos una edición de los anchos y altos para darle mejor
presentación, los textos y párrafos también tendrán su estilo:
Modificamos también el margen que tiene el titulo debajo de la imagen para verlo mas estilizado:
O podemos cambiarlo a 5px para que este mejor distribuido

Ahora el espaciado entre el titulo y el párrafo también se ve que esta muy amplio hay que aplicarle
un margen también.
También podemos cambiarlo a 10px si lo requerimos.
Para hacerlo más atractivo podemos ponerle a la imagen, titulo y párrafo un fondo blanco.
Posteriormente podemos aplicarle un “padding” para que no queden tan pegados el titulo y el
párrafo.
Pero vemos que nuestras imágenes, títulos y párrafos están centrados, pero no alineados arriba por
lo que quitaremos el estilo que le dimos (align-items: center;),
Lo supliremos por un margin-top: 50px. Y además de un margin-bottom: 50px.
Ahora le daremos el enlace a cada noticia hacia donde esta realmente esa información, damos clik
derecho en la imagen y seleccionamos copiar dirección de enlace, para esto nos regresamos a
noticias.html y nos posicionamos en la etiqueta <a href=” “ y dentro de las comillas pegamos la
dirección del enlace que copiamos.
De esa misma manera haremos con todas las demás imágenes de nuestras noticias.
Pero como en las demás enlaces externos que hacemos, vemos que se nos cierra la pagina inicial,
por lo que le daremos que al linkear la imagen de la noticia me la envié a otra pestaña sin cerrar la
nuestra, y para esto daremos un target. Posicionándolo después de la ruta de enlace.
De manera similar haremos para todos los enlaces de las imágenes que tenemos de nuestras
noticias.
Además agregaremos un titulo antes de la sección o etiqueta de noticias y que tenga un titulo
“Noticias Actuales”
18. Seguiremos dándole estilos a nuestra página, ahora pondremos los iconos que vendrán a
darle presentación a nuestro sitio, visitamos la pagina “fontello.com”, descargaremos de
ahí los iconos de Facebook, Instagram y Twiter.
Una vez que los seleccionamos nos brincamos a la pestaña “Customiza names”, donde tenemos
los iconos elegidos para descargar, y damos click al icono “Download webfont”,
Una vez que le dimos en descargar arrojara un zip donde este contenido lo que vamos a
necesitar, abrimos el zip, ubicamos la carpeta Font y la abrimos, necesitaremos esa carpeta.
Extraeremos la carpeta Font a la carpeta raíz de nuestro proyecto.
Además de ingresar a la carpeta CSS y extraeremos el archivo: “fontello.css” hacemos el mismo

proceso de extrae a la carpeta raíz de nuestro proyecto,
De ahí buscamos la carpeta CSS que esta dentro de nuestra carpeta raíz del proyecto,
Si nos regresamos a Sublime Text, visualizamos en la parte izquierda donde esta el contenedor
de nuestras carpetas, ya existen lo que descargamos en el proceso anterior.
Y para llamar lo que acabamos de descargar, nos ubicamos en la pestaña de “index.html” y nos
posicionamos en la etiqueta <head> para linkear el css descargado.
Haremos el mismo proceso en todos los archivos .html que tenemos en nuestro proyecto.
Noticias mujeres
Una ves que ya tenemos linkeado “fontello.css” en todas nuestros .html nos regresamos al
“index.html” para sustituir el nombre de nuestras redes sociales por el icono que descargamos.
vamos a quitar los nombres, y ahí vamos a general una etiqueta <span></span> esta llevara una
clase en la que contendrá el icono descargado, llamando la clase “.icon-facebook” y así
sucesivamente con las otras redes sociales.
Y de la misma manera haremos este proceso con los archivos .html que tengan el footer
19. Ahora estaremos generando la pagina de Contacto y para esto nos posicionamos en la parte
izquierda de Sublime text y seleccionamos la carpeta principal, damos click derecho para
generar un nuevo archivo, y se nos abrirá una pestaña nueva y le pondremos contacto.html,
Ctrl+s para guardarlo y se genere la página.
Posteriormente copiamos todo el código que tenemos en el “index.html” a “contacto.html”, y

ahí solo necesitaremos la barra de navegación y el footer, se borra lo que esta en el recuadro
rojo.
En este apartado de contacto utilizaremos el apoyo de Bootstrap para darle mejores estilos en
CSS, para esto nos vamos a “getbootstrap.com” -> Documentación -> CSS, y copiamos el enlace
que nos proporcionan (ver imagen).
Nos posicionamos en contacto.html y después de la etiqueta <tittle> y pegamos los copiado en la

página Booststrap.
Hecho esto ahora generaremos un formulario de contacto para enviar correos o mensajes al autor
de la página, se generara una etiqueta <form></form> dentro del cuerpo y antes de la etiqueta
<footer> , esa etiqueta form le daremos una acción que nos proporcionara lo que hará, y dentro
generamos unos campos de texto con la etiqueta <input> con un tipo de texto indicándonos que el
campo será de ese tipo, seguido de la propiedad “placeholder” que sirve para mostrar el mensaje
que estará en el cuadro de texto que servirá de guía al usuario, y de manera siguiente hacemos otro
input pero con el tipo de email y poniendo como mensaje guía “correo”, otro para el teléfono, y por
ultimo generamos un textarea este es para poner un mensaje mas amplio, y cerramos generando
una etiqueta <bottom> al que le pondremos “enviar”.
Como visualizamos la imagen del navegador, está presentándose sin estilo, ahora procedemos a
darle mejor presentación, y dentro de cada input aplicamos una clase “font control” y la etiqueta
<form> la ponemos dentro de un <div> para darle el estilo que nos facilito Bootstrap, ponemos una
clase: class = “container”,
A la etiqueta <bottom> le aplicaremos una clase, donde le aplicamos estilo y queda como aparece
en la imagen.
Ahora al textarea le aplicaremos un “placeholder” para que también tenga un mensaje guía para el
usuario.
Ahora en al “container” se le dará

márgenes y estilos:
Ese mismo estilo se lo pondremos a todos los inputs para que se vea mejor presentable.
Ya solo agregamos una etiqueta <h1> para poner el título “Contáctanos”.
Para hacerlo mas atractivo agregaremos un mapa de Google maps, (maps.google.com), y buscamos
nuestra ciudad y le damos click en la ubicación seleccionada y pondrá una bandera roja,
posteriormente nos vamos al icono de la parte izquierda “compartir”, de ahí nos posicionamos en
la ceja de incorporar mapa, y ponemos que no lo incorpore (mediano, chico o grande), y copiamos
la ruta HTML,
Una vez copiado la ruta nos pasamos a la página contacto.html y después de la etiqueta </form>
pondremos el mapa, y vemos que pega la etiqueta <iframe> que es la que contiene la ruta del mapa.
Ahora le pondremos un margen también de 5 (“class=mt-5”), dentro del <iframe>

También pondremos un título <p>, para darle mejor estilo, “Encuéntrame aquí”
Y para cerrar, de manera opcional podemos poner información de quien genero la página o datos
personales, esto después del cierre de la etiqueta </iframe>
20. En este punto vamos a aplicar estilos CSS de animaciones en nuestro proyecto, nos
posicionamos en main.css buscamos la etiqueta div.contenedor img, lo copiamos y lo
ubicamos debajo de esta, aplicaremos una Pseudo clase “hover” este captura un evento y
lo proyecta, por ejemplo al pasar sobre la imagen o algún otro apartado de nuestro
proyecto, seguido pondremos un filtro “filter: blur” de 10 px, y después en la imagen
contenedora ponemos una transición de 1 seg.
Esta misma pseudo clase se quiere aplicar en el menú de navegación, para esto nos regresamos a
main.css y ubicamos nuestro menú (nav.nav ul li) seguido de ahí copiamos y pegamos en otro
evento. El color que ponemos de fondo es el mismo de nuestro cuerpo principal (#E9B105).
Ahora aplicaremos estos mismos efectos a las imágenes de nuestras noticias, buscamos el
contenedor de esas noticias en el mismo main.css, “div.noticias div img”, lo copiamos y lo pegamos
seguida de esta, aplicaremos un filtro “filter: contrast (70%)” así mismo su transición.
Y para hacerle mejor presentación aplicamos un efecto de traslación hacia arriba para que tengamos
una mejor exposición de nuestro proyecto.

Pagina WEB Con Sublime Text & CSS

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Pagina WEB Con Sublime Text & CSS

Cargado por

Copyright:

Formatos disponibles

Mtro.

Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega

1. Instalaremos Sublime Text “Descarga” (https://www.filehorse.com/es/descargar-sublime-

5. Si probamos una vez más poniendo localhost/nombre_proyecto, no aparece que no

Después de poner el nombre le daremos guardar y deberá estar ubicada dentro de la

Primer Línea; <!doctype html>, identifica el tipo de documento (HTML).

Tercer Línea: esta la etiqueta <head></head>, en la cual almacenaremos el

Séptima Línea: aquí está la etiqueta <body></body>, donde se contendrá la parte

MENU DE NAVEGACION HTML – CSS

Se guarda el avance que llevamos y después hacemos la prueba en el navegador y

Actualizamos nuestro navegador y nos mostrara:

Actualizamos nuestro explorador y queda de la siguiente manera:

Y actualizamos el explorador y queda así:

Actualizamos el Navegador, quedando nuestro menú de forma lineal.

Actualizamos nuevamente nuestro navegador arrojándonos:

TIPOGRAFIA CON GOOGLE-FONTS

Ctrl+s y actualizamos el Navegador arrojando lo siguiente: poniendo de mostaza el fondo y

Actualizamos el navegador y nos resulta lo siguiente:

La ruta del link se ubicará en la etiqueta <head>

El código CSS lo ubicaremos en la pestaña de main.css dentro de la etiqueta h1

Visualizamos como quedo después de la aplicación del padding

Guardamos Ctrl+s y actualizamos el navegador para visualizar las imágenes puestas en el

Ctrl+s y actualizamos el navegador:

Y visualicemos como queda con las propiedades aplicadas actualizando el navegador:

A esto le agregamos en la misma etiqueta <h2> un width: 350px y un padding: 15px

Ctrl+s y actualizamos nuestro navegador y aparece de esta manera:

Quedando de esta manera en el navegador:

Ctrl+s; Guardamos y los ubicamos en la carpeta contenedora generada desde el inicio:

Posteriormente crearemos la sintaxis básica de HTML como lo realizamos en el frame de

Nos pasamos a la pestaña de index.html y copiamos la etiqueta <nav> de navegación con la

Nos brincamos a la pestaña de hombres.html y le damos pegar dentro de la etiqueta <body>

Ctrl+s Guardamos y posteriormente nos ubicamos en el navegador y lo actualizamos y nos

Después damos un clik en la imagen de hombres y nos direcciona a:

Ctrl+s Guardamos, y actualizamos el navegador y ya toma el estilo que venimos manejando.

Seguimos dándole presentación a nuestra página, nos vamos a la pestaña main.css y le

Guardamos: Ctrl+s, y actualizamos el navegador para que aparezca de la siguiente manera:

Les aumentamos el tamaño de las letras para que se vean mejor:

16. Ahora replicaremos el footer a las demás frames “Hombres”-“Mujeres”

Copiaremos toda la etiqueta <footer>,

abriremos la pestaña de “hombres.html”

Repetimos la acción a “mujeres.html” ,

Para esto le daremos la instrucción brincándonos a main.html , nos ubicaremos en la etiqueta

17. Ahora trabajaremos el título de menú “noticias”, no posicionamos en la carpeta

Ctrl+s Guardamos el archivo en la carpeta contenedora.

Ahora copiaremos del index el apartado de navegación:

Esto lo repetimos en todos los frames donde tenemos la clase de navegación.

Posteriormente pegamos ese titulo en la etiqueta <h1> de la imagen 1

Y lo pegamos en noticias.html, después de la ultima foto de noticias,

O podemos cambiarlo a 5px para que este mejor distribuido

También podemos cambiarlo a 10px si lo requerimos.

Lo supliremos por un margin-top: 50px. Y además de un margin-bottom: 50px.

Extraeremos la carpeta Font a la carpeta raíz de nuestro proyecto.

Además de ingresar a la carpeta CSS y extraeremos el archivo: “fontello.css” hacemos el mismo

Posteriormente copiamos todo el código que tenemos en el “index.html” a “contacto.html”, y

Nos posicionamos en contacto.html y después de la etiqueta <tittle> y pegamos los copiado en la

Ahora en al “container” se le dará

Ya solo agregamos una etiqueta <h1> para poner el título “Contáctanos”.

Ahora le pondremos un margen también de 5 (“class=mt-5”), dentro del <iframe>

También podría gustarte