-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathmaquetado.html
124 lines (114 loc) · 6.93 KB
/
maquetado.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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>OVI</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
<div class="banner">
<div class="logo">
<img src="img/logo-white.png">
</div>
<h1>Diseño de sitios web</h1>
</div>
<nav class="navbar navbar-primary navbar-expand-md navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Inicio</a>
</li>
<li class="dropdown nav-item">
<a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">Diseño web <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="maquetado.html">HTML</a></li>
<li class="nav-item"><a class="nav-link" href="estilos.html">CSS</a></li>
<li class="nav-item"><a class="nav-link" href="design.html">Diseño web</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="autores.html">Autores</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div class="row">
<aside class="col-sm-3 d-none d-md-block">
<div class="aside-module">
<h4>Menu</h4>
<ul class="list-menu">
<li>
<a class="nav-link" href="index.html">Inicio</a>
</li>
<li>
<a class="nav-link">Diseño web</a>
<ul>
<li><a class="nav-link" href="maquetado.html">HTML</a></li>
<li><a class="nav-link" href="estilos.html">CSS</a></li>
<li><a class="nav-link" href="design.html">Diseño web</a></li>
</ul>
</li>
<li>
<a class="nav-link" href="autores.html">Autores</a>
</li>
</ul>
</div>
</aside>
<div class="col-12 col-sm-8 ml-sm-auto text-justify">
<h2>HTML</h2>
<p>Actualmente la mayoría de las personas han visto cientos de páginas web pero muchos se preguntarán ¿Qué es HTML? ¿Para qué me sirve? ¿Cómo funciona? ¿Es difícil escribir en HTML? ¿Dónde puedo escribir HTML? Y otras preguntas como estas serán respondidas a continuación.</p>
<p>Si buscas en GOOGLE o en cualquier otro buscador la definición de HTML, probablemente encontrarás está:</p>
<div class="codigo-ejemplo">
<p><i>“HTML es un lenguaje de programación que se utiliza para el desarrollo de páginas de Internet. Se trata de la siglas que corresponden a HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto”.</i></p>
</div>
<p>No obstante, este tipo de definiciones no nos dice mucho porque la definición es técnica. Para algunas personas al leer esto, piensan que HTML incluye el diseño gráfico de las páginas web, sin embargo, eso no es cierto ya que HTML sólo sirve para indicar como va ordenado el contenido de una página web. Esto lo hace por medio de las marcas de hipertexto las cuales son etiquetas conocidas en inglés como tags.</p>
<div class="text-center">
<img src="img/html-tags.png">
</div>
<br>
<p>Hasta el momento ya tenemos una idea sobre lo que hace HTML pero aún no sabemos cómo funcionan las etiquetas. Para esto vamos a imaginar que tienen que hacer un ensayo sobre algún tema, consideraremos que el ensayo será nuestra página web y la manera en la que va ordenado un ensayo es por un título, la introducción, el desarrollo y la conclusión, si se tiene en cuenta que esto nos dice cómo debe ir nuestro ensayo podemos considerar que éstas serían las etiquetas porque nos dicen la estructura que lleva, es decir, la forma en que se acomoda el texto en nuestro ensayo. Cabe mencionar que las etiquetas no sólo sirven para ordenar nuestro contenido sino que ayudan a los buscadores como Google, Yahoo search y muchos otros a encontrar la información por medio de las etiquetas.</p>
<p>Ahora que entendemos el concepto de etiquetas, necesitamos poder identificarlas. Éstas se caracterizan porque van dentro de los caracteres menor que < y mayor que >, como en este ejemplo: <Aquí dentro va el nombre de la etiqueta></p>
<p>Aunque eso no es todo debido a que deben tener un inicio y un fin. El inicio de una etiqueta es normal, en otras palabras lleva los dos caracteres que mencioné anteriormente y dentro de estos se encuentra el nombre, sin embargo, existe una diferencia para el fin de la etiqueta ya que antes de escribir el nombre de la etiqueta debemos escribir una diagonal /. Como en este ejemplo:</p>
<p><Inicio de la etiqueta></p>
<p></Fin de la etiqueta></p>
<p>Existes ciertas excepciones con el fin de las etiquetas, ya que algunas usualmente sólo se utilizan con el inicio de la etiqueta, ejemplos de esto son las etiquetas BR (salto de línea), IMG (etiqueta para poner una imagen), entre otras.</p>
<h3 id="multimedia">Multimedia</h3>
<div class="col-xs-12 text-center" style="margin-top: 20px;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/O0Qc_hqhTAU?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<h3 id="referencias" style="margin-top: 50px;">Referencias</h3>
<div class="referencias text-left">
<ul>
<li>
códigofacilito - Javier Flores Herrera. Qué es HTML. Recuperado de: <a href="https://codigofacilito.com/articulos/que-es-html">https://codigofacilito.com/articulos/que-es-html</a>.
</li>
<li>
HTML Rules (2017, 29 Marzo). ¿Qué es HTML?. Recuperado de: <a href="https://www.youtube.com/watch?v=O0Qc_hqhTAU">https://www.youtube.com/watch?v=O0Qc_hqhTAU</a>.
</li>
</ul>
</div>
</div>
</div>
</div>
<footer>
<p>Desarrolado por: <b>DIEGO FERNANDO VANEGAS</b></p>
<p>Universidad nacional abierta y a distancia</p>
<p>UNAD</p>
<p>2018</p>
<center><a href="https://www.cerotec.net/estadisticas-118512/dfvanegas8.github.io" title="contador"><img src="https://www.cerotec.net/contador.php?t=5&s=4&i=118512" alt="www.cerotec.net"></a> <br><a href='' style='font-size:12px;' ></a></center>
</footer>
<script src="js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/menu.js"></script>
</body>
</html>