Reporte de mi sitio web (tanto el
de solo html y el que tiene CSS)
En este reporte mostrare que hice en cada uno de mis dos archivos, mostrando la sintaxis/
comandos que use, que signi can, para que los use, etc.., hice dos porque le quería dar mejor
presentación a mi pagina web, y aproveche que html es un lenguaje de marcado y CSS un
lenguaje de hojas de estilo muy fáciles de entender en comparación con otros lenguajes de
programación.
Primer archivo (solo html)
Lo primero que hice fue la estructura básica, o sea, el titulo, los subtítulos, luego la imagen con
link apoyándome de la pagina “[Link]" la cual me ayuda a darme el link/url de la
imagen para que asi funcione en todos los dispositivos que tienen acceso a internet, sin
necesidad que ellos descarguen la imagen, la pongan en la misma carpeta y le pongan el
mismo nombre. En algunos casos añadi la lista, también añadi el link de forma directa, lo hice
primero sin ningún tipo de decoración o cosa extra, para asi tener una base solida para luego
expandirme mas.
Ahora bien, organice mi pagina de manera muy sencilla e intuitiva, primero hasta arriba del
todo, el titulo el cual es llamativo, luego una breve introducción, luego de eso el primer
subtitulo el cual es “hábitad” y después de eso la información y abajo la imagen, después de
eso el segundo subtitulo, otra vez información otra vez una imagen, y asi hasta el tercer
subtítulo, luego abajo de la imagen del tercer subtítulo añadi el link de una pagina
gubernamental donde de contaban un poco mas sobre el jaguar.
Que utilice para titulo, subtítulos, la lista, la imagen, el
enlace, etc…?
Bien ahora explicare que utilice para cada cosa de mi pagina web.
MI TITULO:
<h1>Texto</h1>
basicamente utilice <h1>, para decirle al archivo y al navegador que esto es lo
mas “importante” a nivel de jerarquía y que es básicamente el titulo de la
pagina.
LOS SUBTITULOS:
<h2>Texto</h2>
en este utilice h2, le dice al navegador y al archivo que es menos importante
que h1, ayuda a dividir por secciones y a orientar.
LA LISTA
<ol>
<li>Elemento</li>
</ol>
fi
donde <ol> signi ca que haga una LISTA enumerada, y <li> cada
elemento que debe ir en esa lista
LAS IMAGENES
<img src="URL" width=“numero de tamaño”>
donde src viene de source, o sea, de donde viene la imagen, y width el ancho
de la imagen en pixeles.
EL ENLACE
<a href=“URL">Texto</a>
donde <a> signi ca “anchor” (ancla), y se utiliza para crear enlaces a otras
paginas web, href a donde te lleva y Texto el texto que vería el
usuario, en mi caso también yo le puse “target=“_blank” que signi ca que abra
el link en otra pestaña.
COSAS EXTRA QUE USE
EL COLOR DE FONDO
<body bgcolor=“#1b4332">
aqui el “bg” viene de background, o sea, fondo, o sea color de fondo,
por eso bgcolor, y puse el color en hexadecimal.
EL COLOR DEL TEXTO
<body text=“white">
aqui solo indique que el texto debe ser blanco.
FUENTE
<font face=“Arial">
Aqui indique que la tipogra a debía ser Arial
COLOR EN SUBTITULOS
<h2><font color=“# d166”>Texto</font></h2>
solo indique con <font, que el color debía ser el que marcara el hexadecimal
CENTRAR TODO
<center>
A continuación un dibujo que hice cuando inicie la pagina web, y esta misma inspiración fue la
que me motivo a usar CSS ya que el resultado con HTML puro no me convenció del todo.
ff
fi
fi
fi
fi
Segundo archivo (html + css)
En el segundo archivo se utilizó CSS para mejorar la presentación visual de la página web. A
diferencia del primer archivo, donde solo se de nió la estructura con HTML, en este se
añadieron estilos para mejorar el diseño, la distribución de los elementos y la apariencia
general.
Cosas que mejore
DEGRADADO:
Se utilizo la propiedad background con un degradado para darle un mejor aspecto a la
pagina, utilice:
background: linear-gradient(color 1, color2)
donde linear-gradient le da a decir al archivo/navegador que se hará un
degradado
CAJAS(CONTENEDORES):
Se utilizo clases como .contenedor para agrupar el contenido dentro de recuadros con
fondo, bordes redondeados y espacio interno.
para que los contenedores se vieran bien utilice:
padding: espacio interno
margin: espacio externo
border-radius: bordes redondeados
ACOMODAR EN HORIZONTAL:
Se utilizo “display: ex” para acomodar el texto y la imagen de forma horizontal, o sea
utilice:
display: ex = pone elementos en la
gap = espacio entre ellos
align-items = la alineación
IMAGENES:
se modi có el tamaño de las imágenes con width y se mejoro su apariencia con bordes
redondeados.
TIPOGRAFIA:
Se cambio la fuente con font-family para mejorar la legibilidad del texto.
fi
fl
fl
fi
fi
LA ANIMACION:
Se utilizó @keyframes para crear una animación en el título, haciendo que aparezca
suavemente al cargar la página.
@keyframes es como decirle al navegador “quiero que algo cambie poco a poco desde
un estado inicial hasta uno nal” por eso dice “frames”.
@keyframes nombreAnimacion {
from {
/ estado inicial /
}
to {
/ estado nal /
}
}
En mi caso:
@keyframes aparecer {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
Donde 0 es invisible, y 1 es visible, o sea, el titulo aparece poco a poco, el “transform:
translatelY()” donde -30px es igual a que empieza arriba, y 0 es que termina en su lugar
original.
Resultado: el titulo aparece desde arriba y se vuelve visible poco a poco.
El como se aplica la animación
h1 {
animation: aparecer 2s ease-in-out;
}
Donde aparecer es el nombre de la animación (de @keyframes), 2s es la duración, ease-in-out
es la velocidad, o sea, empieza lento, acelera y termina lento
ENLACES:
Se modi có el estilo de los enlaces con color y text-decoration, además de usar :hover para
cambiar su apariencia al pasar el cursor.
fi
fi
fi