UNIDAD EDUCATIVA

“LIBERTADOR”

INTEGRANTES:

 Alexa Cherres.
 Alejandra Cholota.
 Anggye Córdova.
 Maite Matamoros.
 Dilinller Macias.
 Mark Macias.
 Joseph Méndez.
 Rubith Rodríguez.
 Verónica Ube.
 Mariángel Guizado.

NIVEL/CURSO: SEGUNDO AÑO DE BACHILLERATO GENERAL

UNIFICADO.

MATERIA: SISTEMAS INFORMÁTICOS MULTIUSUARIOS Y RED,

PROGRAMACIÓN EN LENGUAJES ESTRUCTURADOS.

DOCENTE: TLGO MARCELO MACIAS.

PROYECTO:
DESARROLLO DE SITIO WEB
MOCACHE – LOS RIOS

2021-2022
Contenido General
OBJETIVOS ........................................................................................................................... 3
OBJETIVO GENERAL .......................................................................................................... 3
OBJETIVOS ESPECÍFICOS .................................................................................................. 3
MARCO TEÓRICO................................................................................................................ 4
Desarrollo de sitios WEB ........................................................................................................ 4
Etiquetas HTML ..................................................................................................................... 4
CSS ........................................................................................................................................ 5
¿Qué es CSS?.......................................................................................................................... 5
¿Cómo aplicar estilos CSS? .................................................................................................... 5

Contenido de Tablas
Tabla 1: Etiquetas HTML .................................................................................................. 5
Tabla 3: Etiquetas CSS....................................................................................................... 5
Tabla 5: Recursos Utilizados .............................................................................................. 6

Contenido de Ilustraciones
Ilustración 1: Estructura HTML Menú Inicio ..................................................................... 6
Ilustración 2: Estructura HTML Menú Inicio ..................................................................... 6
Ilustración 5: Estructura HTML Formulario de Registro .................................................... 6
Ilustración 6: Estructura HTML Formulario de Registro .................................................... 6
Ilustración 7: Estructura HTML Productos ......................................................................... 6
Ilustración 9: Estructura HTML Productos ......................................................................... 6
 OBJETIVOS

OBJETIVO GENERAL

Desarrollar un sitio web con estructuras de HTML5, aplicando conocimientos en base a la

investigación antes realizada de etiquetas básicas y los detalles visuales con etiquetas de
CSS

OBJETIVOS ESPECÍFICOS

 Estructurar sitio web con etiquetas de HTML y atributos CSS

 Seleccionar etiquetas adecuadamente e insertarlas en editor de Hipertexto
 Diferenciar y organizar las líneas de etiquetas, conociendo su significado
 MARCO TEÓRICO

Desarrollo de sitios WEB

El desarrollo de sitios web obedece a la necesidad de empresas de tener presencia en el

internet, siendo éste el nuevo medio de comunicación entre negocios, así como el acceso
principal a un mercado internacional permitiendo expandir sus alcances como empresa. Un
sitio web puede brindar toda una serie de beneficios: puede ser un excelente sistema de
venta, una plataforma administrativa, o un sistema de control y monitoreo, dependiendo de
las necesidades y giro de su empresa. Un sitio web permite que los usuarios encuentren la
información de manera fácil y rápida, dividiendo su página en prácticas secciones como
chats, foros, correos electrónicos, galerías de imágenes, sistema de noticias, registro de
usuarios, entre otros. (Softelligence, 2021)

Etiquetas HTML

¿Qué es una etiqueta HTML?

Antes de entrar en materia, conviene explicar de que vamos a hablar. Las etiquetas HTML
son pequeños bloques de código, que indican al navegador como debe interpretar el
contenido recogido entre dichas etiquetas. Por ejemplo, si queremos «pintar» un párrafo de
texto, hay una etiqueta específica para que el navegador interprete ese texto como un
párrafo. Estas etiquetas cuentan además con atributos que podemos añadir y que, en sí,
pueden determinar cómo será el comportamiento específico que tendrá la etiqueta. Te dejo
por aquí un listado de atributos HTML para complementar esta entrada.
Las etiquetas HTML comienzan siempre con el símbolo «<» y finalizan con el símbolo
«>». Entre medias de estos dos símbolos irá el nombre de la etiqueta que queremos que el
navegador interprete.
Todas las etiquetas HTML están compuestas por una etiqueta de apertura, y una etiqueta de
cierre. Aunque hay excepciones, como por ejemplo la etiqueta para cargar una imagen que
son llamadas etiquetas huérfanas, ya que solo tienen etiqueta de apertura.
Las etiquetas de cierre se construyen con una barra «/» justo antes de la propia etiqueta y
los símbolos «<» y «>». Resumiendo, si queremos «pintar» un párrafo en la página web,
abriremos con la etiqueta de apertura de párrafo «<p>», y cerraríamos con la etiqueta de
cierre «</p>».
<p>Esto es un párrafo</p>
Una vez que conocemos que son las etiquetas y como implementarlas en nuestro código
web, pasemos a ver un listado de las etiquetas HTML más comunes (Caronte Estudios ,
2021)
CSS

¿Qué es CSS?

Es un lenguaje que nos permite controlar el aspecto de las páginas web escritas en HTML o
en cualquier lenguaje de marcado basado en XML.

El lenguaje CSS está creado por el World Wide Web Consortium (W3C), la comunidad
internacional que desarrolla estándares que aseguran el crecimiento futuro de la web y vela
por conseguir webs disponibles para todo el mundo. (Eniun, 2021)

¿Cómo aplicar estilos CSS?

Estilos CSS en un documento HTML

Hay tres formas de aplicar estilos CSS en un documento HTML: en línea, incrustado en la
cabecera y mediante hojas de estilo externas.
CSS en línea
Los estilos en línea son declaraciones CSS que se integran en las etiquetas HTML mediante
el atributo style. Este método tan solo afecta al elemento en el que se integra el código. El
CSS en línea es complicado de entender y mantener ya que mezcla los estilos CSS con el
código HTML.
<p style="color:green">Párrafo de color verde.</p> (Eniun, 2021)

Tabla 1: Etiquetas HTML

ETIQUETAS HTML USADAS EN PROYECTO

Etiquetas Conceptos
<href> </href > Se la utilizo para crear un interligamiento en impertexto.
<button> </button> Fue utilizada para clasificar.
<select> </select> Se uso para crear controles interactivos.
<optgroup> </optgroup> Utilizada para insertar imagen.
<option> </option> Se usa para representar un ítem.
<textarea> </textarea> Se utilizo para crear secciones o agrupar contenidos.
Autores: Estudiantes de segundo BGU

Tabla 2: Etiquetas CSS

ATRIBUTOS CSS USADOS EN PROYECTO

ATRIBUTOS CONCECTOS
<color></color>
<background></background>
<margin></margin>
<font-family></font-family>
<padding></padding>
<box-sizing></box-sizing>
Autores: Estudiantes de segundo BGU
Para insertar color en el proyecto.
Se lo utilizo un atajo para definir los valores individuales del
fondo en una única CSS.
Se establecio el margen para los cuatro lados.
Fue definida una lista de fuentes o familias de fuentes, con un
orden de prioridad.
Establecida para rellenar el espacio requerido por todos los lados
de un elemento.
Se utilizo para definir el tamaño de la caja.
 Tabla 3: Recursos Utilizados

Recursos utilizados para realizar el proyecto

RECURSOS CONCECTOS
Cuaderno Para registrar la información obtenida sobre las etiquetas.
Computadora Fue utilizada para redactar dicha información.
Internet Sirvió para obtener información de los temas planteado en el
proyecto.
Celular Fue utilizado para la comunicación con el grupo.
TrebEdit Sirvió como principal recurso para la realización del proyecto.
Visual Studio Code Permitio trabajar con diversos lenguajes de programación.
Autores: Estudiantes de Segundo BGU

Ilustración 1: Estructura HTML Menú Inicio Ilustración 2: Estructura HTML Menú Inicio

Autores: Estudiantes de Segundo BGU Autores: Estudiantes de Segundo BGU

Ilustración 4: Estructura HTML Formulario de Registro Ilustración 3: Estructura HTML Formulario de Registro

Autores: Estudiantes de Segundo BGU Autores: Estudiantes de Segundo BGU

Ilustración 6: Estructura HTML Productos Ilustración 5: Estructura HTML Productos

Autores: Estudiantes de Segundo BGU Autores: Estudiantes de Segundo BGU

 CONCLUSIONES
 Para facilitar el proyecto fue planteado en un ordenador.
 El html permite a los publicadores web crear páginas complejas del texto e
imágenes.
 Las etiquetas css pueden utilizarse en caso de crear solamente una página y que
está tenga un poco de estilo insertado.

RECOMENDACIONES
 Es aconsejable que al generar una pagina html no le apliques estilo en aquel
instante; los estilos se los aplicas cuando hayas finalizado el código directo.
 Es recomendable el uso de unidades relativas siempre que sea posible ya que
mejora la accesibilidad de la página y permite que los documentos se adaptan
fácilmente a cualquier medio y dispositivo.
 Es recomendable que al crear una página html no se le apliquen estilo en ese
momento los estilos de los aplica una vez que hayas finalizado tu código html
directo.
 Bibliografía
Caronte Estudios . (2021). Etiquetas HTML. (C. Estudios, Editor) Recuperado el 20 de
diciembre de 2021, de carontestudio.com: https://carontestudio.com/blog/listado-de-
etiquetas-html/
Eniun. (2021). ¿Qué e
s CSS? Recuperado el 20 de diciembre de 2021, de eniun.com: https://www.eniun.com/que-
es-css-cascading-style-sheets/
Eniun. (2021). Estilos CSS. Recuperado el 20 de diciembre de 2021, de www.eniun.com:
https://www.eniun.com/como-aplicar-estilos-css-html/
INIUN. (2021). Atributos. Recuperado el 20 de diciembre de 2021, de eniun.com:
https://www.eniun.com/atributos-propiedades-textos-css/
Softelligence. (2021). Softelligence. Recuperado el 20 de diciembre de 2021, de
softelligence.com.mx: http://www.softelligence.com.mx/Docs/Desarrollo-de-Sitios-
Web.htm