-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
220 lines (176 loc) · 9.65 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<!--SECCION DE META DATA-->
<meta charset="UTF-8" />
<link rel="shortcut icon" href="imagen/HTML5_logo_and_wordmark.svg.png" type="image/x-icon">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML, CSS, JavaScript</title>
<meta name="description" content="Pagina de un miniblog usando HTML, CSS y un poco de JavaScript">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Alenny De Vries Angomas">
<meta name="copyright" content="https://advisertecnology.com/" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/8722e720e2.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<!--ENCABEZADO-->
<header>
<h1>Bienvenidos a mi primer miniblog</h1>
</header>
<!--NAVEGACION-->
<nav>
<div class="topnav" id="myTopnav">
<a href="index.html" class="active">Inicio</a>
<a href="sobremi.html">Sobre Mi</a>
<a href="curso.html">Cursos</a>
<a href="contactos.html">Contactos</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</nav>
<!--CONTENIDO-->
<section id="contenido">
<!--ARTICULOS-->
<article >
<h2>¿Qué es HTML?</h2>
<hr>
<p class="Articulo1">
El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para
estructurar y desplegar una página web y sus contenidos. Por ejemplo,
sus contenidos podrían ser párrafos, una lista con viñetas, o imágenes y tablas de
datos. Como lo sugiere el título, este artículo te dará una comprensión básica de
HTML y cúal es su función.</p>
<p class="Articulo1">
HTML no es un lenguaje de programación; es un lenguaje de marcado que define la
estructura de tu contenido. HTML consiste en una serie de elementos que usarás
para encerrar diferentes partes del contenido para que se vean o comporten de una
determinada manera. Las etiquetas de encierre pueden hacer de una palabra o una
imagen un hipervínculo a otro sitio, se pueden cambiar palabras a cursiva, agrandar
o achicar la letra, etc.</p>
</article>
<article>
<h2>Breve historia de HTML</h2>
<p class="Articulo1">
El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador del
CERN (Organización Europea para la Investigación Nuclear) propuso un nuevo sistema
de "hipertexto" para compartir documentos.</p>
<h3>Tim Berners-Lee</h3>
<img class="web" src="https://assets.sutori.com/user-uploads/image/3ae948e9-8204-4a1b-aff1-895f185e92f8/980553b17ff00f274703d8c82fa59ad0.jpeg" alt="">
<p class="Articulo1">
Los sistemas de "hipertexto" habían sido desarrollados años antes.
En el ámbito de la informática, el "hipertexto" permitía que los usuarios accedieran a la
información relacionada con los documentos electrónicos que estaban visualizando.
De cierta manera, los primitivos sistemas de "hipertexto" podrían asimilarse a los enlaces
de las páginas web actuales.</p>
<p>
<a class="leermas" href="https://uniwebsidad.com/libros/xhtml/capitulo-1/breve-historia-de-html" target="_blank" >Leer Mas</a>
</p>
</article>
<article>
<h2>Anatomia de un elemento HTML</h2>
<p class="Articulo1">
Además de etiquetas y atributos, HTML define el término elemento para referirse a las partes que componen los documentos HTML.
<br>
Aunque en ocasiones se habla de forma indistinta de "elementos" y "etiquetas", en realidad un
elemento HTML es mucho más que una etiqueta, ya que está formado por:
<br>
</p>
<ul class="Articulo1">
<li>Una etiqueta de apertura.</li>
<li>Cero o más atributos.</li>
<li>Texto encerrado por la etiqueta.</li>
<li>Una etiqueta de cierre.</li>
</ul>
<p class="Articulo1">
El texto encerrado por la etiqueta es opcional, ya que algunas etiquetas de HTML no pueden
encerrar ningún texto. El siguiente esquema muestra un elemento HTML, formado por una etiqueta
p, atributos y contenidos de texto:</p>
<img class="Web" src="https://uniwebsidad.com/static/libros/imagenes/xhtml/esquema_elementos_html.gif" alt="">
<h3>Esquema de las partes que componen un elemento HTML</h3>
<h2>¿Cómo funciona el html?</h2>
<p class="Articulo1">
El lenguaje html opera en base a marcadores escritos (que aparecen entre comillas angulares), a
partir de las cuales se cifra la apariencia y orden interno de una página web, así como los
scripts o rutinas que operan dentro de ellas. Dicho código fuente hace de ADN de la página
Web, diciéndole al navegador de dónde obtener los recursos para su representación y
en qué orden, secuencia y modo establecerlos. Y siguiendo el código al pie de la letra, el
navegador nos brinda la experiencia de la navegación.</p>
<img class="web" src="https://cdn-icons-png.flaticon.com/512/1197/1197396.png" alt="">
<p>
<a class="leermas" href="https://concepto.de/html/" target="_blank" >Leer Mas</a>
</p>
</article>
<article>
<h2>HTML5</h2>
<p class="Articulo1">
HTML5 es la versión más reciente de este lenguaje de programación, publicada en octubre de 2014
por el consorcio W3C. Esta modernización del lenguaje reemplazó etiquetas en desuso por versiones
actuales y saca provecho a las nuevas tecnologías y necesidades web como formularios, visores, grandes
conjuntos de datos, etc.</p>
<p class="Articulo1">
HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web modernos.
Algunos de ellos son técnicamente similares a las etiquetas div y span, pero tienen un significado
semántico, como por ejemplo nav (bloque de navegación del sitio web) y footer.
</p>
<h3>Novedades</h3>
<ul class="Articulo1">
<li>Incorpora etiquetas (canvas 2D y 3D, audio, vídeo) con codecs para mostrar los contenidos multimedia. Actualmente hay una lucha entre imponer codecs libres (WebM + VP8) o privados (H.264/MPEG-4 AVC).</li>
<li>Etiquetas para manejar grandes conjuntos de datos: Datagrid, Details, Menu y Command. Permiten generar tablas dinámicas que pueden filtrar, ordenar y ocultar contenido en cliente.</li>
<li>Mejoras en los formularios. Nuevos tipos de datos (eMail, number, url, datetime …) y facilidades para validar el contenido sin Javascript.</li>
<li>Visores: MathML (fórmulas matemáticas) y SVG (gráficos vectoriales). En general se deja abierto a poder interpretar otros lenguajes XML.</li>
<li>Drag & Drop. Nueva funcionalidad para arrastrar objetos como imágenes.</li>
</ul>
<img class="web" src="https://www.cursosgis.com/wp-content/uploads/recursos-web-para-programar-en-HTML5.png" alt="">
<p>
<a class="leermas" href="https://es.wikipedia.org/wiki/HTML5" target="_blank" >Leer Mas</a>
</p>
</article>
</section>
<!--PUBLICIDAD-->
<aside>
<h2>PUBLICIDAD</h2>
<br>
<img src="https://listindiario.com/Themes/Default/Content/img/crisis-haiti300.png" alt="">
<br>
<img src="https://tpc.googlesyndication.com/simgad/8898091098211152809" alt="">
<br>
<img src="imagen/moros-nov.gif" alt="">
<br>
<img src="imagen/9387896_273f0.gif" alt="">
<iframe width="100%" height="315px" src="https://www.youtube.com/embed/bxO-m9i5nQc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
<button class="button">
<a href="https://listindiario.com/adsindex" target="_blank" > Ver Mas noticias</a>
</button>
</aside>
<div class="redes">
<h2>Sigueme en mi Redes Sociales</h2>
<!-- Agregamos font awesome icons -->
<a href="https://www.youtube.com/channel/UC3iuwK3yYBvod8t1wn8OSxA" target="_blank" class="fa fa-youtube-square" style="font-size:30px"></a>
<a href="#" class="fa fa-facebook-square" style="font-size:30px"></a>
<a href="https://github.com/Alenny02" target="_blank" class="fa fa-github-square" style="font-size:30px"></a>
</div>
<div class="clearfix" ></div>
<!--FOOTER O PIE DE PAGINA-->
<footer>
<p class="footer"> @ 2022 Creado por Alenny De Vries Angomas <a href="https://www.instagram.com/alennyva/?hl=es-la" target="_blank" >instagram</a></p>
</footer>
</div>
<!--FUNCION JAVASCRIPT PARA EL MENU-->
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>