Scribd
Cargar
22 vistas21 páginas

Pde Hanna

El documento presenta evidencias del portafolio de una alumna de ingeniería en software. Incluye conceptos básicos de programación web como una tabla con etiquetas HTML, un mapa de sitio del proyecto de la página web creada, y capturas de pantalla de la interfaz terminada. El portafolio muestra el aprendizaje y aplicación práctica de los conceptos durante el curso.

Cargado por

Hanna Paola Martinez de la Portilla
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
22 vistas21 páginas

Pde Hanna

El documento presenta evidencias del portafolio de una alumna de ingeniería en software. Incluye conceptos básicos de programación web como una tabla con etiquetas HTML, un mapa de sitio del proyecto de la página web creada, y capturas de pantalla de la interfaz terminada. El portafolio muestra el aprendizaje y aplicación práctica de los conceptos durante el curso.

Cargado por

Hanna Paola Martinez de la Portilla
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 21

UNIVERSIDAD POLITÉCNICA

DE TECÁMAC

Ingeniería en Software
“PORTAFOLIO DE EVIDENCIAS”

LINK: https://koaland.nicepage.io/?version=0164f33a-affe-
4e42-8599-277a8d6a2f80

ALUMNA: Hanna Paola Martinez de la Portilla

PROFESOR: Néstor Apolo López González

MATRICULA: 1322134368

GRUPO:1423IS

FECHA DE ENTREGA: 4 octubre 2023


CONTENIDO
INTRODUCCION .................................................................................................... 3

CONCEPTOS .......................................................................................................... 4

TABLA DE HTML ..................................................................................................... 6

MAPA DE SITIO .................................................................................................... 10

METODOLOGÍA WEB ........................................................................................... 11

CAPTURAS DE SITIO WEB ................................................................................. 14

CONCLUSIONES.................................................................................................. 20

REFERENCIAS ..................................................................................................... 21
INTRODUCCION
En la primera unidad en la materia Programación Web, se aprendieron una
variedad de temas y conceptos en el cual en este documento encontraremos
evidecias de ellas, iniciando con conceptos basicos de programacion web, tambien
con una tabla la cual nos muestra etiquetas, descripción, atributos y ejemplos,
para un mayor entendimiento de HTML esa tabla se creo atraves de exposiciones
de mis compañeros complementada con información del profesor.

A lo siguiente fue un mapa de sitio pues conforme nuestro proyecto que fue crear
una pagina web, nos dio la herramientas para crearlo y poner en practica.

Por ultimo tenemos capturas de mi pagina ya terminada, podemos observar una


captura por interfaz.
CONCEPTOS
TABLA DE HTML
Etiqueta Descripción Ejemplo
html Abre y cierra el <DOCTYPE html>
documento de html y </html>
permite que los
navegadores ven la
página
title Sirve para poner un <title>Pagina</title>
título a la página
head Sirve para dar <head>
información adicional <meta>
y metadatos <link>
Atributos <script>
head
Link Sirve para dar una hoja </head>
de estilo y un icono a
nuestra página
Meta Sirve para dar
metadatos, los cuales
son aquellos que dan
información, como los
caracteres
Script Manda llamar un script
JS
Body Sirve para dar cuerpo a <Body alink=”#ff7” background=”red” bottommargin=”4px”
la página web leftmargin=”4px” rigthmargin=”4px” topmargin=”4px”
Atributos vlink=”cian” text=”white”>
body
Alink Color a letras de un </body>
hipervínculo
Background Cambia el color de
fondo
Bottommargi Da un margen a la
n zona inferior de la
página
Leftmargin Da un margen a la
zona izquierda de la
página
Rigthmargin Da un margen a la
zona derecha de la
página
Topmargiin Da un margen a la
zona superior de la
página
Vlink Color de un vínculo no
visitado
Text Color al texto

Font Etiqueta obsoleta para <font size="5" color="red" fase=”Helvetica”>


dar una fuente a un
texto tamaño o estilos
Atributos Font
Title Da fuente a un titulo
Size Da un tamaño
Color Da un color a una
parte del texto
Face Da un tipo de letra al
texto
Ol Una lista ordenada <ol>
Li Sirve para listar <li>Primer elemento</li>
Ul Lista desordenada </ol>
Atributos <ul>
listas <Li>Otro elemento</li>
Reverse Ordena al revés la lista <ul>
Start Comenzar con un valor
definido <ul>
Style Nos ayuda a dar un <li></li>
estilo a la página <ol><li></li><ol>
Aa Mayúsculas o <ul>
minúsculas
I Letras griegas
1 Numeros

Listas Estas son listas


anidadas normales que están
dentro de otras listas
B Nos permite hacer en El texto en <b>negrita</b>
negritas un texto
i Permite texto itálica El texto en <i>itálica</i>
u Subraya un texto El texto <u>subrayado</u>
Strong Hace más importante texto en <strong>negrita</strong>
las negritas de un
texto
Div <div>
Aquí ponemos lo que nececitemos
</div>
Table Crea una tabla <table>
Atributos <caption>Tabla de datos</caption>
Table <tr>
Th Encabezado de una <th>Nombre</th>
tabla <th>Edad</th>
Tr Sirve para crear filas <th>País</th>
en una tabla </tr>
Caption Agrega título a una <tr>
tabla <td>Juan Pérez</td>
Td Coloca datos en una <td>25</td>
tabla <td>México</td>
tbody Agrupa las filas de </tr>
datos en una tabla <tr>
<td>María López</td>
<td>20</td>
<td>España</td>
</tr>
</table>
Combinar <table>
celdas <tr>
Colspan Combina las columnas <th>Nombre</th>
Rowspan Combina las filas <th>Edad</th>
<th>País</th>
</tr>
<tr>
<td colspan="2">Juan Pérez</td>
<td rowspan="2">México</td>
</tr>
<tr>
<td>25</td>
</tr>
</table>
a Nos permite añadir un <a href="https://google.com">Google</a>
link
Href Nos permite poner el
enlace
correspondiente en las
etiquetas
correspondientes
Enlace en Una imagen actúa <a href="https://example.com/cat.jpg">
imagen como un enlace <img src="https://example.com/cat.jpg" alt="Imagen de un
gato">
</a>
Enlaace E- Abre correo y puede <a
mail mandar un mensaje href="mailto:tu_correo_electró[email protected]">Envíano
s un correo electrónico</a>
Video Es un enlace hacia un <video controls autoplay loop preload="metadata"
video en carpeta o poster="https://example.com/poster.jpg">
internet <source src="https://example.com/video.mp4"
Atributos type="video/mp4">
video </video>
Controls Da controles de play,
pausa, maximizar y lo
básico de un video
Autoplay El vídeo se carga
automáticamente
Loop El vídeo se reproduce
en bucle
Preload Pre carga un video al
ingresar a la página
Poster Da miniatura del video
del link
Sub Permite poner <p>
subíndices El número de Avogadro es <sub style="color: red;">6.022 ×
10<sup>23</sup></sub>.
Sup Permite poner </p>
superíndices
Caracteres De estos hay 256 que &#241 para la ñ
especiales son el código ascii

H1-h6 Es el tamaño de los <h2>Titulo de h2</h2>


títulos
P Párrafos <p>
Pondremos todo el texto
</p>
Style Estilos <style>Aquí ponemos estilos</style>
MAPA DE SITIO
METODOLOGÍA WEB
CAPTURAS DE SITIO WEB
CONCLUSIONES

Gracias al acercamiento con los diferentes conceptos que juegan un papel


importante en la programación web, ayudo mucho el proceso de creación de la
misma página, interactuar con las diferentes etiquetas de HTML fortaleció los
conocimientos ya existentes, haciendo posible el concebir un sitio web en
funcionamiento

En este proyecto se demarco mucho el enriquecerse de un tema o de la


tecnología a desarrollar en su caso, esto con el fin de fomentar las buenas
prácticas, conocer el funcionamiento de las diferentes etiquetas de HTML, así
como su uso y función.

Este proyecto ayudara a futuros proyectos, pues los conceptos aprendidos a su


vez fueron puestos en práctica.
REFERENCIAS
• https://developer.mozilla.org/es/docs/Learn/Server-side
• https://www.nationalgeographicla.com/animales/2020/04/koala
• https://www.savethekoala.com/spanish/spkoalasphysic
• https://www.ecologiaverde.com/curiosidades-de-los-koalas-3778.html
• https://www.cs.buap.mx/~asanchez/iweb/MetodologiasWeb.pdf

También podría gustarte