forked from Edga-f-j/Edga-f-j.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathclase5.html
230 lines (169 loc) · 8.91 KB
/
clase5.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Plantilla</title>
<!-- Importa Bootstrap -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
font-family: Arial, sans-serif;
background-image: url(simagenes/fondotecno.jpg);
background-size: cover; /* Para que la imagen cubra toda la pantalla */
background-attachment: fixed; /* Hace que el fondo permanezca fijo al desplazarse */
background-position: center; /* Centra la imagen */
background-repeat: no-repeat; /* Evita que la imagen se repita */
}
.section-title {
margin-top: 20px;
margin-bottom: 10px;
text-align: center; /* Centra el texto */
}
.custom-section {
padding: 20px;
background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco con ligera transparencia */
border-radius: 10px;
margin-bottom: 20px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Sombra para darle profundidad */
}
.custom-img {
max-width: 100%; /* Asegura que la imagen no se desborde del contenedor */
height: auto;
border-radius: 10px; /* Bordes redondeados para las imágenes */
margin: 10px 0;
}
.container {
margin-top: 50px;
max-width: 900px; /* Ajusta el ancho máximo de la página */
}
.text-center {
text-align: center;
}
/* =============================*/
.custom-section {
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
margin-bottom: 20px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 9);
}
.custom-code {
background-color: #e9ecef;
padding: 10px;
border-radius: 5px;
font-family: 'Courier New', monospace;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<header class="text-center mt-4 p-4 bg-primary text-white rounded shadow-lg">
<h1 class="display-4 font-weight-bold">Mi Primer Portafolio</h1>
<p class="lead">Un recorrido por mis proyectos de programación</p>
</header>
<!-- Sección para colocar el contenido -->
<section id="EstructuraHTML" class="custom-section">
<h2 class="text-center text-primary mt-5 mb-4 pb-2 border-bottom border-primary">Estructura de HTML</h2>
<div class="text-center mt-4">
<img src="simagenesclase5/estructuraHTML.png" alt="estructuraHTML"
style="height: 100%; margin-left: 15px; margin-top: 2%;margin-bottom: 3%; border-radius: 3%;">
</div>
<div class="custom-section">
<ul class="list-group">
<!-- Explicación de !DOCTYPE html -->
<li class="list-group-item">
<div class="custom-code"><!DOCTYPE html></div>
<p>Esta es la declaración del tipo de documento, que le indica al navegador que esta es una página web escrita en HTML5. Es un estándar necesario al inicio de cualquier documento HTML.</p>
</li>
<!-- Explicación de <html lang="es"> -->
<li class="list-group-item">
<div class="custom-code"><html lang="es"></div>
<p>Esta etiqueta abre el documento HTML. El atributo <code>lang="es"</code> especifica que el idioma principal de la página es el español.</p>
</li>
<!-- Explicación de <head> -->
<li class="list-group-item">
<div class="custom-code"><head></div>
<p>se encuentra la información "invisible" que ayuda a configurar la página, como el juego de caracteres, el título y las referencias.</p>
</li>
<!-- Explicación de <meta charset="UTF-8"> -->
<li class="list-group-item">
<div class="custom-code"><meta charset="UTF-8"></div>
<p>Permite representar casi todos los caracteres de diferentes idiomas.</p>
</li>
<!-- Explicación de <meta name="viewport"> -->
<li class="list-group-item">
<div class="custom-code"><meta name="viewport" content="width=device-width, initial-scale=1.0"></div>
<p>Ajusta el ancho de la página al ancho del dispositivo en que se visualiza.</p>
</li>
<!-- Explicación de <title> -->
<li class="list-group-item">
<div class="custom-code"><title>Portafolio Personal</title></div>
<p>Establece el título de la página.</p>
</li>
<!-- Explicación de <link rel="stylesheet"> -->
<li class="list-group-item">
<div class="custom-code"><link rel="stylesheet" href="css/estilos.css"></div>
<p>Enlaza una hoja de estilos externa que define el aspecto visual de la página.</p>
</li>
<!-- Explicación de <body> -->
<li class="list-group-item">
<div class="custom-code"><body></div>
<p>Contiene todo el contenido visible de la página web.</p>
</li>
<!-- Explicación de </body> y </html> -->
<li class="list-group-item">
<div class="custom-code"></body> y </html></div>
<p>Cierra el cuerpo del documento y el documento HTML.</p>
</li>
</ul>
</div>
</section>
<!-- Sección para más texto o contenido -->
<section id="emcabezado html" class="custom-section" >
<h2 class="text-center text-primary mt-5 mb-4 pb-2 border-bottom border-primary">Encabezado o header del HTML</h2>
<p>Ahora vamos a colocar dentro de la parte de </html> la siguiente parte:</p>
<!-- Otra imagen -->
<div class="text-center">
<img src="simagenesclase5/encabezado.png" alt="Encabezado"
style="height: 100%; margin-left: 15px; margin-top: 2%;margin-bottom: 3%; border-radius: 3%;">
</div>
</section>
<section id="emcabezado html" class="custom-section">
<h2 class="text-center text-primary mt-5 mb-4 pb-2 border-bottom border-primary">Sobre Nosotros</h2>
<p>la siguiente parte se divide en: primero colocar un subtitulo usando </h2> y un parrafo
colocando una descripcion propia.
</p>
<!-- Otra imagen -->
<div class="text-center" style="height: 100px;">
<img src="simagenesclase5/sobrenosotros.png" alt="sobrenosotros"
style="height: 100%; margin-top: 2%;margin-bottom: 3%; border-radius: 3%;">
</div>
</section>
<section id="Portafolio" class="custom-section">
<h2 class="text-center text-primary mt-5 mb-4 pb-2 border-bottom border-primary"">Portafolio</h2>
<p>Ahora vamos a colocar los proyectos realizados para presentarlos a cualquiera que entre
a nuestro portafolio usando el siguiente codigo.
</p>
<!-- Otra imagen -->
<div class="text-center" >
<img src="simagenesclase5/portafolio.png" alt="portafolio"
style="height: 100%; margin-top: 2%;margin-bottom: 3%; border-radius: 6%;">
</div>
</section>
<section id="Contactenos" class="custom-section">
<h2 class="text-center text-primary mt-5 mb-4 pb-2 border-bottom border-primary"">Contactenos</h2>
<p>Por ultimo y no menos importante es colocar la informacion al cual nos pueden contactar.</p>
<!-- Otra imagen -->
<div class="text-center" >
<img src="simagenesclase5/contactenos.png" alt="contactenos"
style="height: 100%; margin-top: 2%;margin-bottom: 3%; border-radius: 3%;">
</div>
</section>
</div>
<!-- Script Bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>