forked from zamuro57/introduccion-html-css
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathnormal.html
159 lines (130 loc) · 7.52 KB
/
normal.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
<!doctype html>
<html lang="en">
<head>
<meta charset='utf-8' />
<title>Bloque ejercicio 1 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,100italic,300italic,100' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/stylo.css">
</head>
<body>
<!--Escala y tipos de titulos en html-->
<h1>Hello, world!</h1>
<h2>Hello, world!</h2>
<h3>Hello, world!</h3>
<h4>Hello, world!</h4>
<h5>Hello, world!</h5>
<h6>Hello, world!</h6>
<!--Parrafos en un html-->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, voluptas harum distinctio culpa fuga voluptatem minus earum vel accusamus cumque error ipsum deleniti cum? Iure illo culpa eius quis nostrum.</p>
<!--Parrafos con bold en un html-->
<p>Lorem <b>ipsum</b> dolor sit amet, <b>consectetur</b> adipisicing elit. <b>Architecto</b>, reprehenderit, accusamus, velit, in molestias deserunt vitae debitis ad provident obcaecati placeat repellendus <b>possimus</b> dignissimos quibusdam <b>iure</b> natus nesciunt perspiciatis molestiae.</p>
<!--Parrafos con cursiva en un html-->
<p>Lorem <i>ipsum dolor </i>sit amet, <i>consectetur adipisicing</i> elit. Libero, voluptas impedit voluptatibus nobis <i>dolore alias ratione</i> dolorum tempore fugit! Voluptatum, <i>earum impedit</i> ea blanditiis ad debitis <i>iure sequi</i> corporis animi.</p>
<!--Parrafos con strong en un html-->
<p><strong>Lorem ipsum</strong> dolor sit amet, <strong>consectetur</strong> adipisicing elit. Quas, <strong>dignissimos</strong>, temporibus autem perspiciatis recusandae harum perferendis vitae quam sunt provident <strong>saepe non vero</strong> dolores <strong>libero</strong> quaerat dolor. Qui, corporis.</p>
<!--Parrafos con underline en un html-->
<p><u>Lorem ipsum dolor sit amet</u>, consectetur adipisicing elit. Facere, alias, pariatur quos eius <u>vitae ullam necessitatibus quas</u> sit praesentium voluptatum voluptate nam distinctio nobis illo <u>recusandae veniam</u> quam cupiditate ut?</p>
<!--Bloques de cita en un html -->
<blockquote>"La noche pasó lentamente. Salió el sol. Los hobbits se levantaron bastante tarde y la mañana prosiguió. Se solicitó el concurso de gente, que recibió orden de despejar los pabellones y quitar mesas, sillas, cucharas, cuchillos, botellas, platos, linternas, macetas de arbustos en flor, migajas, papeles, carteras, pañuelos y guantes olvidados, y alimentos no consumidos, que eran muy pocos."</blockquote>
<!-- Saltos de linea en html-->
<p>En html no los parrafos por si silos no generan saltos de linea por mas Enter que presiones el parrafo seguira hasta el final las etiquetas "br" son las que te ayudan a generar dichos saltos por ejemplo <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quo commodi dolorem perferendis quidem reprehenderit suscipit asperiores eaque! Ad, aut, quam tempora totam voluptate vero velit fuga laudantium delectus est? <br><br> y cuantos mas <br><br>
<br>
<br>
<br>
<br> "br" <br>
<br>
<br>
<br>
<br>agregas mas saltos de linea colocas </p>
<!-- Linea de separacion en html -->
<p> Ejemplo de separación de linea en html Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, fugiat, quidem, voluptatem blanditiis molestias <hr>
Este es el otro lado de la linea jejeje perferendis nemo fugit quibusdam error ipsa soluta voluptate ullam nesciunt voluptatibus tenetur voluptates enim obcaecati!</p>
<!--Tablas en un html-->
<table> <!--Esto define la tabla -->
<thead> <!--Esto es la cabecera de la tabla -->
<tr> <!--Esto define la fila de la tabla -->
<th>Nombre</th> <!--Esto define campos de la cabecera de la tabla-->
<th>Apellido</th>
<th>Edad</th>
<th>Cedula</th>
</tr> <!-- Aqui cierra la fila de la tabla-->
</thead> <!-- Aqui cierra la cabecera de la tabla-->
<tbody> <!-- Esto define el cuerpo de la tabla-->
<tr> <!--Esto define la fila de la tabla -->
<td>Mi nombre</td> <!--Esto define campos del cuerpo de la tabla-->
<td>Mi apellido</td>
<td>Mi edad</td>
<td>Mi cedula</td>
</tr> <!-- Aqui cierra la fila de la tabla-->
</tbody> <!-- Aqui cierra el cuerpo de la tabla-->
</table> <!-- Aqui finaliza la tabla-->
<!-- Listas en html-->
<!-- Ejemplo de lista no ordenada -->
<ul>
<li>Elementos de mi lista no ordenada</li>
<li>Elementos de mi lista no ordenada</li>
<li>Elementos de mi lista no ordenada</li>
<li>Elementos de mi lista no ordenada</li>
<li>Elementos de mi lista no ordenada</li>
</ul>
<!-- Ejemplo de lista ordenada -->
<ol>
<li>Elementos de mi lista ordenada</li>
<li>Elementos de mi lista ordenada</li>
<li>Elementos de mi lista ordenada</li>
<li>Elementos de mi lista ordenada</li>
<li>Elementos de mi lista ordenada</li>
</ol>
<!-- Ejemplo de lista de definicion -->
<dl>
<dt>lista de definicion</dt>
<dd>Elemento interno de la lista de definicion </dd>
<dt>lista de definicion</dt>
<dd>Elemento interno de la lista de definicion </dd>
<dt>lista de definicion</dt>
<dd>Elemento interno de la lista de definicion </dd>
</dl>
<!--divs en un html -->
<div> Los div son como ligas elasticas invisibles que encierran elementos en html para luego por medio de css darles estilos y posicionamiento , todo lo que estas leyendo aca en este parrafo esta encerrado en un div </div>
<!--Elementos en html5-->
<!-- Elementos de cabecera -->
<header>
Sirven para definir la parte supuerior de un elemento en html como por ejemplo el encabezado de un articulo o seccion
</header>
<!-- Etiqueta de navegacion -->
<nav>
Este elemento se utiliza para definir la navegacion de un sitio web o agrupar listas
</nav>
<!--Secciones -->
<section>
Estos elementos se utilizan como remplazo de la divitis en html sirven para separar grupos de elementos como articulos o secciones de una pagina
</section>
<!-- Etiquetas de articulo -->
<article>
Estas etiquetas sirven para seccionar los articulos o bloques de informacion de un sitio web , ejemplo noticias parrafos con imagenes etc...
</article>
<!-- Etiqueta de elemento relacionado o referente -->
<aside>
Esta etiqueta sirve para elementos que estan referentes a una seccion en algunos casos puede tambien hacer referencia a un sidebar o un elemento que compone como referencia a un elemento principal
</aside>
<!-- Etiquetas para recursos multimedia -->
<audio src="" height="20"></audio>
<video src="" height="20"></video>
<svg height="20">Etiqueta para elementos vectoriales </svg>
<canvas height="20">Etiqueta para uso de elementos de canvas, para animacion </canvas>
<hgroup>Etiqueta para definir grupos de titulos </hgroup>
<img src="miimagen" alt="atributos">
<!--Ejemplo-->
<img style="-webkit-user-select: none" src="http://lorempixel.com/g/400/200/">
<a href="enlace">Etiqueta para atributo de enlace </a>
<!--Ejemplo -->
<a href="http://www.facebook.com">facebook</a>
<!-- Etiqueta de pie de pagina -->
<footer>
Esta etiqueta sirve para seccionar todo lo que se contendra en el pie de pagina o parte inferior del sitio web o la seccion
</footer>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/myjs.js"></script>
</body>
</html>