devfzn/Intro_basicos_HTML_CSS
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Init repo

Browse Source
This commit is contained in:
jp.dev 2020-11-18 01:21:49 -03:00
commit 02ed61699c
80 changed files with 1622 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
CursoHTML/01_estructura.html Executable file
View File

@ -0,0 +1,12 @@
<html>
<head>
<meta charset="utf-8">
<title>Título del Documento</title>
</head>
<body>
Hola Mundo!
<hr>
<!-- Link Local -->
<a href="02_comentarios.html">Siguiente--></a>
</body>
</html>

20
CursoHTML/02_comentarios.html Executable file
View File

@ -0,0 +1,20 @@
<html>
<head>
<meta charset="UTF-8">
<title>Comentarios</title>
</head>
<body>
Este es un contenido en el body
<!-- Comentario de una linea -->
<!--
Este es un comentario
de varias
lineas
-->
Ingreso mas contenido
<hr>
<!-- Link Local -->
<a href="01_estructura.html"><--Anterior</a>
<a href="03_encabezados.html">Siguiente--></a>
</body>
</html>

19
CursoHTML/03_encabezados.html Executable file
View File

@ -0,0 +1,19 @@
<html>
<head>
<meta charset="UTF-8">
<title>Encabezados</title>
</head>
<body>
Texto Antes del título
<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<h4>Encabezado 4</h4>
<h5>Encabezado 5</h5>
<h6>Encabezado 6</h6>
<hr>
<!-- Link Local -->
<a href="02_comentarios.html"><--Anterior</a>
<a href="04_parrafos.html">Siguiente--></a>
</body>
</html>

25
CursoHTML/04_parrafos.html Executable file
View File

@ -0,0 +1,25 @@
<html>
<head>
<meta charset="UTF-8">
<title>Párrafos</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, earum, sed sunt neque nemo culpa
voluptatibus esse quis repudiandae iure veniam atque ratione enim optio iusto. Omnis assumenda modi dicta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, dolorum, deleniti veniam harum asperiores
hic optio illum ipsum velit et modi consequatur tempora possimus at excepturi porro corporis quidem id!Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, nam expedita id numquam amet suscipit eius
culpa incidunt. Veritatis, ad ipsum aliquid quisquam nemo quis non ex ducimus vero eveniet.Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Omnis, a, sapiente in voluptatem beatae architecto tenetur asperiores
incidunt pariatur officia consequatur iste nihil iusto libero nulla molestiae et explicabo dicta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, provident, at mollitia iusto quisquam
soluta minima facilis esse laudantium harum perspiciatis distinctio modi voluptatibus quis quo voluptate
eveniet! Dolor, animi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, suscipit quod
praesentium! Tempore, sint, dolorum, officia porro adipisci autem rem soluta sequi quos quis sed maiores ad
perferendis neque modi.</p>
<hr>
<!-- Link Local -->
<a href="03_encabezados.html"><--Anterior</a>
<a href="05_elementos_vacios.html">Siguiente--></a>
</body>
</html>

21
CursoHTML/05_elementos_vacios.html Executable file
View File

@ -0,0 +1,21 @@
<html>
<head>
<meta charset="UTF-8">
<title>Elementos Vacíos</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, animi, perferendis, magni illo nam quod consequuntur sequi sit maxime eius tempora aspernatur ea eos veniam veritatis. Omnis, voluptate quis optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Inventore, soluta, itaque, aperiam aliquid aliquam voluptatum sequi natus a voluptate quo obcaecati eligendi nesciunt dolor unde quod eius nam maiores fuga.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, animi, perferendis, magni illo nam quod consequuntur sequi sit maxime eius tempora aspernatur ea eos veniam veritatis. Omnis, voluptate quis optio.
<br> <br> <!-- Salto de Linea -->
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, soluta, itaque, aperiam aliquid aliquam voluptatum sequi natus a voluptate quo obcaecati eligendi nesciunt dolor unde quod eius nam maiores fuga.
<hr> <!-- Horizontal Ruler -->
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, animi, perferendis, magni illo nam quod consequuntur sequi sit maxime eius tempora aspernatur ea eos veniam veritatis. <br> Omnis, voluptate quis optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, soluta, itaque, aperiam aliquid aliquam voluptatum sequi natus a voluptate quo obcaecati eligendi nesciunt dolor unde quod eius nam maiores fuga.</p>
<hr>
<!-- Link Local -->
<a href="04_parrafos.html"><--Anterior</a>
<a href="06_elementos_frase.html">Siguiente--></a>
</body>
</html>

31
CursoHTML/06_elementos_frase.html Executable file
View File

@ -0,0 +1,31 @@
<html>
<head>
<meta charset="UTF-8">
<title>Elementos de frase</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, <em>adipisicing elit.</em> Atque, temporibus,
laudantium <strong>erum nobis tenetur inciduntr</strong> enim quasi cumque earum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, non <small>quos ipsa</small>. Ut,
voluptates, reiciendis tempora possimus quae ea porro ab perferendis
voluptatem <mark>officiis sapiente</mark> similique ex iste aperiam adipisci!
soluta velit quo in molestias blanditiis illo laboriosam esse. Corporis, architecto.</p>
<p> 10<sup>3</sup> </p>
<p> H<sub>2</sub>O </p>
<!-- Anidación -->
<em><strong><mark>officiis sapiente</mark></strong></em>
<p>
<em>Cursiva</em>
<strong>Negrita</strong>
<mark>Destacado</mark>
<small>Pequeña</small>
<sup>Indice Superior</sup>
<sub>Indice Inferior</sub>
</p>
<hr>
<!-- Link Local -->
<a href="05_elementos_vacios.html"><--Anterior</a>
<a href="07_elementos_cita.html">Siguiente--></a>
</body>
</html>

26
CursoHTML/07_elementos_cita.html Executable file
View File

@ -0,0 +1,26 @@
<html>
<head>
<meta charset="UTF-8">
<title>Elementos de Cita e Indentado</title>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, odit corporis possimus illo reprehenderit. Consectetur, dolor, aperiam, a officia consequatur ducimus dolores iusto velit perferendis soluta asperiores ratione harum tempore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, amet, nulla, repellendus, voluptate voluptatum deleniti modi laboriosam nesciunt neque eveniet odio corrupti aliquam inventore earum officiis veritatis omnis quaerat fuga.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, in, error, deserunt necessitatibus dolores impedit unde ducimus ab ipsam ipsa dignissimos amet culpa tempora reprehenderit tempore odit consequuntur totam accusantium.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste rerum facilis ullam ipsum minus. Cumque, dolorem, recusandae saepe velit nobis consectetur eaque quis voluptatibus deserunt eligendi. Veniam, quae quaerat accusamus.</p>
<blockquote>
Lorem Ipsum dolor sit amet, consectetur adipisicing elit. Minus, Como lo dijo Lorem:<q> alias, similique, neque corrupti esse mollitia earum hic pariatur aliquam iusto </q> repellat ipsam laboriosam vitae repudiandae animi totam vero voluptatem explicabo!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, at, asperiores, expedita velit eveniet dolore commodi vel facere harum dicta sunt omnis ipsum libero iusto eligendi reprehenderit earum blanditiis voluptates!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, beatae, a, accusamus assumenda harum veniam similique rerum eum magni placeat deleniti laudantium mollitia amet obcaecati ea blanditiis minus tempore vero.
Lorem Impsum dolor sit amet, consectetur adipisicing elit. Esse, odit, non, aut, in reiciendis similique voluptatem quia corrupti expedita hic necessitatibus repellendus cum natus dignissimos quos quibusdam officiis repudiandae dicta.
</blockquote>
<adress>
Lorem Impsum, autor del documento, Calle 3 No. 56-96
</adress>
<hr>
<!-- Link Local -->
<a href="06_elementos_frase.html"><--Anterior</a>
<a href="08_atributos.html">Siguiente--></a>
</body>
</html>

24
CursoHTML/08_atributos.html Executable file
View File

@ -0,0 +1,24 @@
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p align="center"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, <br>
obcaecati, et aliquam nesciunt facilis suscipit itaque accusantium. <br><br>
Officia eius labore nisi vel placeat dolores porro veritatis. Autem laborum itaque ipsum!<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, impedit, eaque magnam ut <br>
placeat mollitia vel similique earum architecto cupiditate vitae nihil voluptate asperiores quasi numquam eos <br>
laudantium quidem tenetur? <br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>
Molestias, quibusdam, expedita, animi accusantium fugiat laboriosam placeat <br>
rerum maxime soluta officiis dolor repudiandae eligendi quia in necessitatibus aut debitis asperiores ratione.<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, enim, optio, nihil <br>
repudiandae dolorum dignissimos dolor hic culpa laboriosam asperiores quod officia accusantium ad nostrum ab s<br>
apiente veritatis soluta inventore.</p>
<hr>
<!-- Link Local -->
<a href="07_elementos_cita.html"><--Anterior</a>
<a href="09_links.html">Siguiente--></a>
</body>
</html>

58
CursoHTML/09_links.html Executable file
View File

@ -0,0 +1,58 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Links o Vínculos</title>
</head>
<body>
<p id="hola">Hola a Todos!</p>
<!-- Links -->
<!-- Link Remoto -->
Thanks <a href="https://fossheim.io/writing/" target="_blank" title="Fossheim">Link Remoto</a>
<hr>
https://fossheim.io/writing/
<!-- Link Local -->
<a href="03_encabezados.html" target="_blank">Link Local</a>
<hr>
<!-- Link de Correo -->
<a href="mailto:turbo@blaster.com">Link de Correo</a>
<hr>
<!-- Link Anclado -->
<a href="#chao">Link Anclado "Abajo"</a>
<hr>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#hola">Link Anclado "Arriba"</a>
<p id="chao">Hasta Pronto!</p>
<hr>
<!-- Link Local -->
<a href="08_atributos.html"><--Anterior</a>
<a href="10_imagenes.html" target="_self">Siguiente--> </a>
<footer>
<style>
.mifooter {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: magenta;
color: white;
text-align: right;
}
</style>
<div class="mifooter">
<p>Footer</p>
</div>
<p style="text-align:left;">
This text is left aligned
<span style="float:right;">
This text is right aligned
</span>
</p>
<p>Author: Hege Refsnes<br>
<a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>
</body>
</html>

94
CursoHTML/10_imagenes.html Executable file
View File

@ -0,0 +1,94 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Imagenes</title>
</head>
<body>
<img src="img/ojo.jpg" alt="Comentario alterno que ayuda a describir el contenido de la imagen"
title="Comentario o texto"
width="380" align="left"> <!--height="280"-->
<p> Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Rerum, quaerat, in, eligendi a excepturi dolorem consequuntur tenetur nam accusantium
iste ut quis porro distinctio labore aperiam unde qui vitae commodi.consectetur adipisicing
elit. Eos, error quam obcaecati sunt neque facilis placeat earum tempora aliquam autem odio
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, reprehenderit
excepturi id ipsam incidunt libero dolor nam consequatur tempore dolorum culpa possimus quos
sed aliquid autem quisquam facilis. Alias, eum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, reprehenderit
excepturi id ipsam incidunt libero dolor nam consequatur tempore dolorum culpa possimus quos
sed aliquid autem quisquam facilis. Alias, eum.
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Rerum, quaerat, in, eligendi a excepturi dolorem consequuntur tenetur nam accusantium
iste ut quis porro distinctio labore aperiam unde qui vitae commodi.consectetur adipisicing
elit. Eos, error quam obcaecati sunt neque facilis placeat earum tempora aliquam autem odio
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, reprehenderit
excepturi id ipsam incidunt libero dolor nam consequatur tempore dolorum culpa possimus quos
sed aliquid autem quisquam facilis. Alias, eum.
laboriosam totam assumenda amet aperiam voluptatibus dolore minus excepturi
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, reprehenderit
excepturi id ipsam incidunt libero dolor nam consequatur tempore dolorum culpa possimus quos
sed aliquid autem quisquam facilis. Alias, eum.
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Rerum, quaerat, in, eligendi a excepturi dolorem consequuntur tenetur nam accusantium
iste ut quis porro distinctio labore aperiam unde qui vitae commodi.consectetur adipisicing
elit. Eos, error quam obcaecati sunt neque facilis placeat earum tempora aliquam autem odio
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, reprehenderit
excepturi id ipsam incidunt libero dolor nam consequatur tempore dolorum culpa possimus quos
sed aliquid autem quisquam facilis. Alias, eum.
laboriosam totam assumenda amet aperiam voluptatibus dolore minus excepturi
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, reprehenderit
excepturi id ipsam incidunt libero dolor nam consequatur tempore dolorum culpa possimus quos
sed aliquid autem quisquam facilis. Alias, eum.
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Rerum, quaerat, in, eligendi a excepturi dolorem consequuntur tenetur nam accusantium
iste ut quis porro distinctio labore aperiam unde qui vitae commodi.consectetur adipisicing
elit. Eos, error quam obcaecati sunt neque facilis placeat earum tempora aliquam autem odio
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, reprehenderit
excepturi id ipsam incidunt libero dolor nam consequatur tempore dolorum culpa possimus quos
sed aliquid autem quisquam facilis. Alias, eum.
laboriosam totam assumenda amet aperiam voluptatibus dolore minus excepturi
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Rerum, quaerat, in, eligendi a excepturi dolorem consequuntur tenetur nam accusantium
iste ut quis porro distinctio labore aperiam unde qui vitae commodi.consectetur adipisicing
elit. Eos, error quam obcaecati sunt neque facilis placeat earum tempora aliquam autem odio
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, reprehenderit
excepturi id ipsam incidunt libero dolor nam consequatur tempore dolorum culpa possimus quos
sed aliquid autem quisquam facilis. Alias, eum.
Rerum, quaerat, in, eligendi a excepturi dolorem consequuntur tenetur nam accusantium
iste ut quis porro distinctio labore aperiam unde qui vitae commodi.consectetur adipisicing
elit. Eos, error quam obcaecati sunt neque facilis placeat earum tempora aliquam autem odio
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, reprehenderit
excepturi id ipsam incidunt libero dolor nam consequatur tempore dolorum culpa possimus quos
sed aliquid autem quisquam facilis. Alias, eum.
Rerum, quaerat, in, eligendi a excepturi dolorem consequuntur tenetur nam accusantium
iste ut quis porro distinctio labore aperiam unde qui vitae commodi.consectetur adipisicing
elit. Eos, error quam obcaecati sunt neque facilis placeat earum tempora aliquam autem odio
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, reprehenderit
excepturi id ipsam incidunt libero dolor nam consequatur tempore dolorum culpa possimus quos
sed aliquid autem quisquam facilis. Alias, eum.
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Rerum, quaerat, in, eligendi a excepturi dolorem consequuntur tenetur nam accusantium
iste ut quis porro distinctio labore aperiam unde qui vitae commodi.consectetur adipisicing
elit. Eos, error quam obcaecati sunt neque facilis placeat earum tempora aliquam autem odio
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, reprehenderit
excepturi id ipsam incidunt libero dolor nam consequatur tempore dolorum culpa possimus quos
sed aliquid autem quisquam facilis. Alias, eum.
laboriosam totam assumenda amet aperiam voluptatibus dolore minus excepturi
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Rerum, quaerat, in, eligendi a excepturi dolorem consequuntur tenetur nam accusantium
iste ut quis porro distinctio labore aperiam unde qui vitae commodi.consectetur adipisicing
elit. Eos, error quam obcaecati sunt neque facilis placeat earum tempora aliquam autem odio
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, reprehenderit
excepturi id ipsam incidunt libero dolor nam consequatur tempore dolorum culpa possimus quos
sed aliquid autem quisquam facilis. Alias, eum.
laboriosam totam assumenda amet aperiam voluptatibus dolore minus excepturi
laboriosam totam assumenda amet aperiam voluptatibus dolore minus excepturi.</p>
<hr>
<!-- Link Local -->
<a href="09_links.html"><--Anterior</a>
<a href="11_link-imagen.html">Siguiente--></a>
</body>
</html>

16
CursoHTML/11_link-imagen.html Executable file
View File

@ -0,0 +1,16 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Links - Imagenes</title>
</head>
<body>
<a href="http://www.google.com" target="_blank">
<img src="img/roca.jpg" alt="Comentario de la roca" width="400">
</a>
<hr>
<!-- Link Local -->
<a href="10_imagenes.html"><--Anterior</a>
<a href="12_listas.html">Siguiente--></a>
</body>
</html>

53
CursoHTML/12_listas.html Executable file
View File

@ -0,0 +1,53 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Listas</title>
</head>
<body>
<!--Listas Ordenadas-->
<!-- Numeración type = 1, I, i, A, a-->
<ol type="A" start="3">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
<li>Elemento 5</li>
</ol>
<!-- Listas No Ordenadas-->
<!-- Type = disc, circle, square-->
<ul type="circle">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
<li>Elemento 5</li>
</ul>
<ol type="i" start="10">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<ul type="square">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
<li>Elemento 5</li>
</ul>
<li>Elemento 4</li>
<li>Elemento 5</li>
</ol>
<!-- Listas de definición-->
<dl>
<dt>Photochop</dt>
<dd>Software para hacer shops helados con la justa espuma.</dd>
<dt>GIMP</dt>
<dd>Software para hacer harinaos o navegaos como un profesional.</dd>
<dt>Presidento</dt>
<dd>Mierda de Presidente, para una mierda de Pueblo</dd>
</dl>
</body>
<hr>
<a href="11_link-imagen.html"><--Anterior</a>
<a href="13_tablas.html">Siguiente--></a>
</html>

45
CursoHTML/13_tablas.html Executable file
View File

@ -0,0 +1,45 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" width="300" cellspacing="4" cellpadding="5">
<caption>Tabla de Posiciones</caption>
<thead>
<tr>
<th>Equipo</th>
<th>Puntos</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rojo</td>
<td>16</td>
</tr>
<tr>
<td>Amarillo</td>
<td>15</td>
</tr>
<tr>
<td>Azul</td>
<td rowspan="2">7</td>
</tr>
<tr>
<td>Naranja</td>
<!--td>7</td-->
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Posiciones luego de 6 partidos</td>
<!--td>&nbsp;</td-->
</tr>
</tfoot>
</table>
</body>
<hr>
<a href="12_listas.html"><--Anterior</a>
<a href="14_div-span.html">Siguiente--></a>
</html>

29
CursoHTML/14_div-span.html Executable file
View File

@ -0,0 +1,29 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DIV / SPAN</title>
</head>
<body>
<div><!--Para Ser USADO CON CSS-->
<img src="img/ojo.jpg" width="250" alt="El Ojo">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, hic nobis perferendis
quidem quia sint accusamus? Similique, ex, ut reprehenderit saepe doloribus modi quasi
amet facilis consequuntur corporis molestiae incidunt. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Eveniet, ex, quis, atque ab est corporis officiis
perspiciatis <span>obcaecati dicta nobis cum aspernatur reprehenderit eligendi </span> laborum aliquid.
Id, molestiae vitae quos. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
saepe vero ex totam quas. Dolores, suscipit corrupti praesentium perferendis reiciendis
ratione at officia accusamus inventore eos. Cupiditate, porro obcaecati perferendis.
Delectus, laudantium veritatis vel at aliquid consequuntur quia aspernatur ipsam voluptates
itaque voluptatem impedit officiis a eligendi obcaecati enim ipsum dignissimos. Eaque
dignissimos cum facilis suscipit nulla rem laudantium id.
Fuga, exercitationem, voluptatibus labore dicta sit quos. Modi, maiores, earum, nostrum,
obcaecati voluptatibus iure possimus perspiciatis iste nesciunt officia ea voluptate
inventore ullam tenetur voluptatem ad repellendus saepe sunt recusandae.
</div>
</body>
<hr>
<a href="13_tablas.html"><--Anterior</a>
<a href="15_iframe.html">Siguiente--></a>
</html>

17
CursoHTML/15_iframe.html Executable file
View File

@ -0,0 +1,17 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d747445.0124244334!2d-3.151125072102944!3d42.9633768798429!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd4fd1dee354ac6f%3A0x308230a14ae3bd3c!2zUGHDrXMgVmFzY28sIEVzcGHDsWE!5e0!3m2!1ses-419!2scl!4v1513714652317" width="600" height="500" frameborder="1" style="border:1" name="cuadro1"></iframe>
<iframe src="03_encabezados.html" width="600" height="500" name="cuadro2" scrolling="yes" frameborder="1" ></iframe>
<hr>
<a href="07_elementos_cita.html" target="cuadro2">Ir a documento de cita</a><br>
<a href="http://www.google.com" target="cuadro1">Ir a Google</a>
</body>
<hr>
<a href="14_div-span.html"><--Anterior</a>
<a href="16_caracteres.html">Siguiente--></a>
</html>

14
CursoHTML/16_caracteres.html Executable file
View File

@ -0,0 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Caracteres Especiales</title>
</head>
<body>
&lt; &nbsp; &nbsp; &nbsp; &gt; &amp; &cent; &pound; &yen; &euro; &copy; &reg; &trade; &times; &divide;
<!-- &nbsp; Espacio en blanco -->
</body>
<hr>
<a href="15_iframe.html">&lt;--Anterior</a>
<a href="17_formularios.html">Siguiente--&gt;</a>
</html>

60
CursoHTML/17_formularios.html Executable file
View File

@ -0,0 +1,60 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Formularios</title>
</head>
<body>
<!--<form action="http://www.algo.com/ejemplo.php" method=" 'get o post' "></form>
<form action="ejemplo.php" method="post"></form>
method="get" 8192 bytes viajan de manera pública
method="post" >8192 bytes viajan de manera oculta -->
<form action="#" method="post">
Nombre &nbsp;&nbsp;:&nbsp;&nbsp;<input type="text" name="usuario" size="15" maxlength="30"><br>
Password :&nbsp; <input type="password" name="password" size="15" maxlength="10"><br>
Comentarios : <br>
<textarea name="comentarios" cols="25" rows="5"></textarea>
<hr>
Servicio de música : <br>
<input type="checkbox" name="servicio" value="itunes" checked> iTunes <br>
<input type="checkbox" name="servicio" value="lastFM"> Last.fm <br>
<input type="checkbox" name="servicio" value="spotify"> Spotify <br>
<hr>
Selecciones su sexo : <br>
<input type="radio" name="sexo" value="masculino"> Masculino <br>
<input type="radio" name="sexo" value="femenino" checked> Femenino <br>
<hr>
Seleccione el dispositivo que utiliza para escuchar música : <br>
<select name="dispositivo" id="">
<option value="">Dispositvo de favorito</option>
<option value="S4" selected>Samsung S4</option>
<option value="Notebook">Notebook</option>
<option value="equipo">Equipo de Sonido</option>
</select>
<hr>
<select name="dispositivo" size="4" multiple>
<option value="">Dispositvo de favorito</option>
<option value="S4" selected>Samsung S4</option>
<option value="Notebook">Notebook</option>
<option value="equipo">Equipo de Sonido</option>
</select>
<hr>
<label for="edad">Edad:</label>
<input type="text" name="edad">
<hr>
<fieldset>
<legend>Información de contacto</legend>
<label for="email">Email :</label>
<input type="text" name="email"><br>
<label for="celular">Celular :</label>
<input type="text" name="celular"><br>
<label for="telefono">Teléfono :</label>
<input type="text" name="telefono"><br>
</fieldset>
<input type="submit" name="inscripcion" value="Inscripcion">
</form>
</body>
<hr>
<a href="16_caracteres.html"><--Anterior</a>
<a href="18_Script1.html">Siguiente--></a>
</html>

16
CursoHTML/18_Script1.html Executable file
View File

@ -0,0 +1,16 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Script 1</title>
</head>
<body>
<h2>Script ---------------------></h2>
<script type="text/javascript">
alert("Hola Mundo!");
</script>
</body>
<hr>
<a href="17_formularios.html"><--Anterior</a>
<a href="18_Script2.html">Siguiente--></a>
</html>

14
CursoHTML/18_Script2.html Executable file
View File

@ -0,0 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Script 2</title>
<script src="js/script.js"></script>
</head>
<body>
<h2>Script 2 -------------------></h2>
</body>
<hr>
<a href="17_formularios.html"><--Anterior</a>
<a href="19_cabecera.html">Siguiente--></a>
</html>

25
CursoHTML/19_cabecera.html Executable file
View File

@ -0,0 +1,25 @@
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="refresh" content="5;url=http://www.google.com">
<meta name="author" content="FuzanToko">
<meta name="description" content="Curso de HTML y CSS, el legnuaje de desarrollo de páginas web">
<meta name="keywords" content="HTML, CSS, curso HTML, Curso CSS">
<meta name="robots" content="index, follow">
<!--
index, follow -> Permite indexar y rastrear los contenidos del sitio
noIndenx follow -> Evita indexar pero permite el rastreo
index, nofollow -> Permite indexar pero no el rastreo
noindex, no follow -> Evita indexar y el rastreo
-->
<title>Elementos de la cabecera</title>
</head>
<body>
Hola desde el body! <br>
en 5 segundos esta pagina se redirigirá a google.cl <br>
Pulsa la tecla ESC para cancelar.
</body>
<hr>
<a href="18_Script2.html"><--Anterior</a>
<a href="20_doctype.html">Siguiente--></a>
</html>

26
CursoHTML/20_doctype.html Executable file
View File

@ -0,0 +1,26 @@
<!-- <!DOCTYPE HTML> HTML 5-->
<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> HTML 4.1 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplos Doctype</title>
</head>
<body><h4><br>
DOCTYPE DE ESTE DOCUMENTO (HTML 1.0) : <br> <br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; <br>
<br><hr>
DOCTYPE DOCUMENTO HTML 4.1 : <br> <br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; <br>
<br><hr>
DOCTYPE DOCUMENTO HTML 5 : <br> <br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;!DOCTYPE HTML>&gt; <br>
<br></h4>
</body>
<hr>
<a href="19_cabecera.html"><--Anterior</a>
<a href="21_Estilos_Inline.html">Siguiente--></a>
</html>

16
CursoHTML/21_Estilos_Inline.html Executable file
View File

@ -0,0 +1,16 @@
<html>
<head>
<meta charset="UTF-8">
<title>Estilos Inline</title>
</head>
<body>
<h1 style="color: red;">El título del documento</h1>
<p style="font-family: arial; color:blue">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, sit, cupiditate sequi fugit laudantium dolor eaque maiores <br>
natus deleniti nesciunt minima tenetur ipsam aliquid labore et hic dolorem quod repudiandae. Lorem ipsum dolor sit amet, <br>
consectetur adipisicing elit. Nostrum, error odit delectus dolorem neque expedita iure itaque nulla natus soluta rerum veritatis <br>
iste voluptate voluptas similique sint eligendi. Nostrum, harum.</p>
</body>
<hr>
<a href="20_doctype.html"><--Anterior</a>
<a href="22_Estilos_Incrustados.html">Siguiente--></a>
</html>

25
CursoHTML/22_Estilos_Incrustados.html Executable file
View File

@ -0,0 +1,25 @@
<html>
<head>
<meta charset="UTF-8">
<title>Estilos Incrustados</title>
<style type="text/css">
h2 { color: darkmagenta; }
p {color:cadetblue;}
</style>
</head>
<body>
<h2>El título del documento(h2) </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, sit, cupiditate sequi fugit laudantium dolor eaque maiores <br>
natus deleniti nesciunt minima tenetur ipsam aliquid labore et hic dolorem quod repudiandae. Lorem ipsum dolor sit amet, <br>
consectetur adipisicing elit. Nostrum, error odit delectus dolorem neque expedita iure itaque nulla natus soluta rerum veritatis <br>
iste voluptate voluptas similique sint eligendi. Nostrum, harum.</p>
<h2>Título 2 del documento (h2) </h1>
<p>Clesium ipsum delor sit amet, consectetur adipisicing elit. Fugiat, sit, cupiditate sequi fugit laudantium dolor eaque maiores <br>
natus deleniti nesciunt minima tenetur ipsam aliquid labore et hic dolorem quod repudiandae. Lorem ipsum dolor sit amet, <br>
consectetur adipisicing elit. Nostrum, error odit delectus dolorem neque expedita iure itaque nulla natus soluta rerum veritatis <br>
iste voluptate voluptas similique sint eligendi. Nostrum, harum.</p>
</body>
<hr>
<a href="21_Estilos_Inline.html"><--Anterior</a>
<a href="23_Estilos_Vinculados.html">Siguiente--></a>
</html>

22
CursoHTML/23_Estilos_Vinculados.html Executable file
View File

@ -0,0 +1,22 @@
<html>
<head>
<meta charset="UTF-8">
<title>Hojas de Estilo Vinculadas</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body>
<h2>El título del documento(h2) </h1>
<p><strong>IMPORTANTE: recordar la prioridad de la aplicacion de estilos, INLINE -> INCRUSTADOS -> VINCULADOS</strong> <br>
natus deleniti nesciunt minima tenetur ipsam aliquid labore et hic dolorem quod repudiandae. Lorem ipsum dolor sit amet, <br>
consectetur adipisicing elit. Nostrum, error odit delectus dolorem neque expedita iure itaque nulla natus soluta rerum veritatis <br>
iste voluptate voluptas similique sint eligendi. Nostrum, harum.</p> <br>
<h2>Título 2 del documento (h2) </h1>
<p>Clesium ipsum delor sit amet, consectetur adipisicing elit. Fugiat, sit, cupiditate sequi fugit laudantium dolor eaque maiores <br>
natus deleniti nesciunt minima tenetur ipsam aliquid labore et hic dolorem quod repudiandae. Lorem ipsum dolor sit amet, <br>
consectetur adipisicing elit. Nostrum, error odit delectus dolorem neque expedita iure itaque nulla natus soluta rerum veritatis <br>
iste voluptate voluptas similique sint eligendi. Nostrum, harum.</p>
</body>
<hr>
<a href="22_Estilos_Incrustados.html"><--Anterior</a>
<a href="24_Estilos_Importados.html">Siguiente--></a>
</html>

25
CursoHTML/24_Estilos_Importados.html Executable file
View File

@ -0,0 +1,25 @@
<html>
<head>
<meta charset="UTF-8">
<title>Hojas de Estilo Importadas</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body>
<h2>El título del documento(h2) </h2>
<h3>Subtítulo del documento (h3)</h3>
<p><strong>IMPORTANTE: recordar la prioridad de la aplicacion de estilos, INLINE -> INCRUSTADOS -> VINCULADOS</strong> <br>
natus deleniti nesciunt minima tenetur ipsam aliquid labore et hic dolorem quod repudiandae. Lorem ipsum dolor sit amet, <br>
consectetur adipisicing elit. Nostrum, error odit delectus dolorem neque expedita iure itaque nulla natus soluta rerum veritatis <br>
iste voluptate voluptas similique sint eligendi. Nostrum, harum.</p>
<br>
<h2>Título 2 del documento (h2) </h2>
<h3>Subtítulo del documento (h3)</h3>
<p>Clesium ipsum delor sit amet, consectetur adipisicing elit. Fugiat, sit, cupiditate sequi fugit laudantium dolor eaque maiores <br>
natus deleniti nesciunt minima tenetur ipsam aliquid labore et hic dolorem quod repudiandae. Lorem ipsum dolor sit amet, <br>
consectetur adipisicing elit. Nostrum, error odit delectus dolorem neque expedita iure itaque nulla natus soluta rerum veritatis <br>
iste voluptate voluptas similique sint eligendi. Nostrum, harum.</p>
</body>
<hr>
<a href="23_Estilos_Vinculados.html"><--Anterior</a>
<a href="25_Selector_Universal.html">Siguiente--></a>
</html>

25
CursoHTML/25_Selector_Universal.html Executable file
View File

@ -0,0 +1,25 @@
<html>
<head>
<meta charset="UTF-8">
<title>Selector Universal</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body>
<h2>El título del documento(h2) </h2>
<h3>Subtítulo del documento (h3)</h3>
<p><strong>IMPORTANTE: recordar la prioridad de la aplicacion de estilos, INLINE -> INCRUSTADOS -> VINCULADOS</strong> <br>
natus deleniti nesciunt minima tenetur ipsam aliquid labore et hic dolorem quod repudiandae. Lorem ipsum dolor sit amet, <br>
consectetur adipisicing elit. Nostrum, error odit delectus dolorem neque expedita iure itaque nulla natus soluta rerum veritatis <br>
iste voluptate voluptas similique sint eligendi. Nostrum, harum.</p>
<br>
<h2>Título 2 del documento (h2) </h2>
<h3>Subtítulo del documento (h3)</h3>
<p>Clesium ipsum delor sit amet, consectetur adipisicing elit. Fugiat, sit, cupiditate sequi fugit laudantium dolor eaque maiores <br>
natus deleniti nesciunt minima tenetur ipsam aliquid labore et hic dolorem quod repudiandae. Lorem ipsum dolor sit amet, <br>
consectetur adipisicing elit. Nostrum, error odit delectus dolorem neque expedita iure itaque nulla natus soluta rerum veritatis <br>
iste voluptate voluptas similique sint eligendi. Nostrum, harum.</p>
</body>
<hr>
<a href="24_Estilos_Importados.html"><--Anterior</a>
<a href="26_Selector_Tipo.html">Siguiente--></a>
</html>

25
CursoHTML/26_Selector_Tipo.html Executable file
View File

@ -0,0 +1,25 @@
<html>
<head>
<meta charset="UTF-8">
<title>Selector de Tipo o Etiqueta</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body>
<h2>El título del documento(h2) </h2>
<h3>Subtítulo del documento (h3)</h3>
<p><strong>IMPORTANTE: recordar la prioridad de la aplicacion de estilos, INLINE -> INCRUSTADOS -> VINCULADOS</strong> <br>
natus <span>deleniti nesciunt minima</span> tenetur ipsam aliquid labore et hic dolorem quod repudiandae. Lorem ipsum dolor sit amet, <br>
consectetur adipisicing elit. Nostrum, error odit delectus dolorem neque expedita iure itaque nulla natus soluta rerum veritatis <br>
iste voluptate voluptas similique sint eligendi. Nostrum, harum.</p>
<br>
<h2>Título 2 del documento (h2) </h2>
<h3>Subtítulo del documento (h3)</h3>
<p>Clesium ipsum <span>delor sit amet</span>, consectetur adipisicing elit. Fugiat, sit, cupiditate sequi fugit laudantium dolor eaque maiores <br>
natus deleniti nesciunt minima tenetur ipsam aliquid labore et hic dolorem quod repudiandae. Lorem ipsum dolor sit amet, <br>
consectetur adipisicing elit. Nostrum, error odit delectus dolorem neque expedita iure itaque nulla natus soluta rerum veritatis <br>
iste voluptate voluptas <span>similique sint</span> eligendi. Nostrum, harum.</p>
</body>
<hr>
<a href="25_Selector_Universal.html"><--Anterior</a>
<a href="27_Selector_Class.html">Siguiente--></a>
</html>

25
CursoHTML/27_Selector_Class.html Executable file
View File

@ -0,0 +1,25 @@
<html>
<head>
<meta charset="UTF-8">
<title>Selector de Clase</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body>
<h2 class="subrayado">El título del documento(h2) </h2> <!-- No aplica el estilo pq es definido solo para <span> -->
<h3>Subtítulo del documento (h3)</h3>
<p><strong>IMPORTANTE: recordar la prioridad de la aplicacion de estilos, INLINE -> INCRUSTADOS -> VINCULADOS</strong> <br>
natus <span class="subrayado">deleniti nesciunt minima</span> tenetur ipsam aliquid labore et hic dolorem quod repudiandae. Lorem ipsum dolor sit amet, <br>
consectetur adipisicing elit. Nostrum, error odit delectus dolorem neque expedita iure itaque nulla natus soluta rerum veritatis <br>
iste voluptate voluptas similique sint eligendi. Nostrum, harum.</p>
<br>
<h2>Título 2 del documento (h2) </h2>
<h3>Subtítulo del documento (h3)</h3>
<p>Clesium ipsum <span class="subrayado">delor sit amet</span>, consectetur adipisicing elit. Fugiat, sit, cupiditate sequi fugit laudantium dolor eaque maiores <br>
natus deleniti nesciunt minima tenetur ipsam aliquid labore et hic dolorem quod repudiandae. Lorem ipsum dolor sit amet, <br>
consectetur adipisicing elit. Nostrum, error odit delectus dolorem neque expedita iure itaque nulla natus soluta rerum veritatis <br>
iste voluptate voluptas <span>similique sint</span> eligendi. Nostrum, harum.</p>
</body>
<hr>
<a href="26_Selector_Tipo.html"><--Anterior</a>
<a href="28_Selector_Id.html">Siguiente--></a>
</html>

25
CursoHTML/28_Selector_Id.html Executable file
View File

@ -0,0 +1,25 @@
<html>
<head>
<meta charset="UTF-8">
<title>Selector ID </title>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body>
<h2 class="subrayado">El título del documento(h2) </h2> <!-- No aplica el estilo pq es definido solo para <span> -->
<h3 id="mayusculas">Subtítulo del documento (h3)</h3>
<p><strong>IMPORTANTE: recordar la prioridad de la aplicacion de estilos, INLINE -> INCRUSTADOS -> VINCULADOS</strong> <br>
natus <span class="subrayado">deleniti nesciunt minima</span> tenetur ipsam aliquid labore et hic dolorem quod repudiandae. Lorem ipsum dolor sit amet, <br>
consectetur adipisicing elit. Nostrum, error odit delectus dolorem neque expedita iure itaque nulla natus soluta rerum veritatis <br>
iste voluptate voluptas similique sint eligendi. Nostrum, harum.</p>
<br>
<h2>Título 2 del documento (h2) </h2>
<h3>Subtítulo del documento (h3)</h3>
<p>Clesium ipsum <span class="subrayado">delor sit amet</span>, consectetur adipisicing elit. Fugiat, sit, cupiditate sequi fugit laudantium dolor eaque maiores <br>
natus deleniti nesciunt minima tenetur ipsam aliquid labore et hic dolorem quod repudiandae. Lorem ipsum dolor sit amet, <br>
consectetur adipisicing elit. Nostrum, error odit delectus dolorem neque expedita iure itaque nulla natus soluta rerum veritatis <br>
iste voluptate voluptas <span>similique sint</span> eligendi. Nostrum, harum.</p>
</body>
<hr>
<a href="27_Selector_Class.html"><--Anterior</a>
<a href="29_Pseudo-Class.html">Siguiente--></a>
</html>

27
CursoHTML/29_Pseudo-Class.html Executable file
View File

@ -0,0 +1,27 @@
<html>
<head>
<meta charset="UTF-8">
<title>Selector Pseudo-Clase </title>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body>
<h2 class="subrayado">El título del documento(h2) </h2> <!-- No aplica el estilo pq es definido solo para <span> -->
<h3 id="mayusculas">Subtítulo del documento (h3)</h3>
<p><strong>IMPORTANTE: recordar la prioridad de la aplicacion de estilos, INLINE -> INCRUSTADOS -> VINCULADOS</strong> <br>
natus <span class="subrayado">deleniti nesciunt minima</span> tenetur ipsam aliquid labore et hic dolorem quod repudiandae. Lorem ipsum dolor sit amet, <br>
consectetur adipisicing elit. Nostrum, error odit delectus dolorem neque expedita iure itaque nulla natus soluta rerum veritatis <br>
iste voluptate voluptas similique sint eligendi. Nostrum, harum.</p><br>
<a href="http://www.w3c.org">Ir a W3C</a><br>
<a href="http://www.google.com">Ir a Google</a>
<br>
<h2>Título 2 del documento (h2) </h2>
<h3>Subtítulo del documento (h3)</h3>
<p>Clesium ipsum <span class="subrayado">delor sit amet</span>, consectetur adipisicing elit. Fugiat, sit, cupiditate sequi fugit laudantium dolor eaque maiores <br>
natus deleniti nesciunt minima tenetur ipsam aliquid labore et hic dolorem quod repudiandae. Lorem ipsum dolor sit amet, <br>
consectetur adipisicing elit. Nostrum, error odit delectus dolorem neque expedita iure itaque nulla natus soluta rerum veritatis <br>
iste voluptate voluptas <span>similique sint</span> eligendi. Nostrum, harum.</p>
</body>
<hr>
<a href="28_Selector_Id.html"><--Anterior</a>
<a href="30_Selector-atributo.html">Siguiente--></a>
</html>

28
CursoHTML/30_Selector-atributo.html Executable file
View File

@ -0,0 +1,28 @@
<html>
<head>
<meta charset="UTF-8">
<title>Selector de Atributo</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body>
<h2 class="subrayado">El título del documento(h2) </h2> <!-- No aplica el estilo pq es definido solo para <span> -->
<h3 id="mayusculas">Subtítulo del documento (h3)</h3>
<img src="img/ojo.jpg" alt="ojo" title="El OJO">
<p><strong>IMPORTANTE: recordar la prioridad de la aplicacion de estilos, INLINE -> INCRUSTADOS -> VINCULADOS</strong> <br>
natus <span class="subrayado">deleniti nesciunt minima</span> tenetur ipsam aliquid labore et hic dolorem quod repudiandae. Lorem ipsum dolor sit amet, <br>
consectetur adipisicing elit.</p><br>
<a href="http://www.w3c.org">Ir a W3C</a><br>
<a href="http://www.google.com">Ir a Google</a>
<br>
<h2>Título 2 del documento (h2) </h2>
<h3>Subtítulo del documento (h3)</h3>
<img src="img/roca.jpg" alt="mineral" title="Mineral">
<p>Clesium ipsum <span class="subrayado">delor sit amet</span>, consectetur adipisicing elit. Fugiat, sit, cupiditate sequi fugit laudantium dolor eaque maiores <br>
natus deleniti nesciunt minima tenetur ipsam aliquid labore et hic dolorem quod repudiandae. Lorem ipsum dolor sit amet, <br>
consectetur adipisicing elit. Nostrum, error odit delectus dolorem neque expedita iure itaque nulla natus soluta rerum veritatis <br>
iste voluptate voluptas <span>similique sint</span> eligendi. Nostrum, harum.</p>
</body>
<hr>
<a href="29_Pseudo-Class.html"><--Anterior</a>
<a href="31_Fuente.html">Siguiente--></a>
</html>

23
CursoHTML/31_Fuente.html Executable file
View File

@ -0,0 +1,23 @@
<html>
<head>
<meta charset="UTF-8">
<title>Propiedades - Fuente</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body>
<h2 class="subrayado">El título del documento(h2) </h2> <!-- No aplica el estilo pq es definido solo para <span> -->
<h3 id="mayusculas">Subtítulo del documento (h3)</h3>
<p><strong>IMPORTANTE: recordar la prioridad de la aplicacion de estilos, INLINE -> INCRUSTADOS -> VINCULADOS</strong><br>
<h2>Título 2 del documento (h2) </h2>
<h3>Subtítulo del documento (h3)</h3>
<img src="img/font-size.png" alt="fuente" title="Tamaño Fuente" width:300px>
<p>Clesium ipsum <span class="subrayado">delor sit amet</span>, consectetur adipisicing elit. Fugiat, sit, cupiditate sequi fugit laudantium dolor eaque maiores <br>
natus deleniti nesciunt minima tenetur ipsam aliquid labore et hic dolorem quod repudiandae. Lorem ipsum dolor sit amet, <br>
consectetur adipisicing elit. Nostrum, error odit delectus dolorem neque expedita iure itaque nulla natus soluta rerum veritatis <br>
iste voluptate voluptas <span>similique sint</span> eligendi. Nostrum, harum.</p>
</body>
<hr>
<a href="30_Selector-atributo.html"><--Anterior</a>
<a href="32_Texto.html">Siguiente--></a>
</html>

23
CursoHTML/32_Texto.html Executable file
View File

@ -0,0 +1,23 @@
<html>
<head>
<meta charset="UTF-8">
<title>Propiedades - Texto</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body>
<h2 class="subrayado">El título del documento(h2) </h2> <!-- No aplica el estilo pq fue definido solo para <span> -->
<p><strong>IMPORTANTE: recordar la prioridad de la aplicacion de estilos, INLINE -> INCRUSTADOS -> VINCULADOS</strong><br>
<h2>Título 2 del documento (h2) </h2>
<h3>Subtítulo del documento (h3)</h3>
<img src="img/font-size.png" alt="fuente" title="Tamaño Fuente" width:300px>
<a href="http://www.w3c.org">Ir a W3C</a>
<p>Clesium ipsum <span class="subrayado">delor sit amet</span>, consectetur adipisicing elit. Fugiat, sit, cupiditate sequi fugit laudantium dolor eaque maiores <br>
natus deleniti nesciunt minima tenetur ipsam aliquid labore et hic dolorem quod repudiandae. Lorem ipsum dolor sit amet, <br>
consectetur adipisicing elit. Nostrum, error odit delectus dolorem neque expedita iure itaque nulla natus soluta rerum veritatis <br>
iste voluptate voluptas <span>similique sint</span> eligendi. Nostrum, harum.</p>
</body>
<hr>
<a href="31_Fuente.html"><--Anterior</a>
<a href="33_Fondo.html">Siguiente--></a>
</html>

23
CursoHTML/33_Fondo.html Executable file
View File

@ -0,0 +1,23 @@
<html>
<head>
<meta charset="UTF-8">
<title>Propiedades - Fondo</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body>
<h2 class="subrayado">El título del documento(h2) </h2> <!-- No aplica el estilo pq fue definido solo para <span> -->
<p><strong>IMPORTANTE: recordar la prioridad de la aplicacion de estilos, INLINE -> INCRUSTADOS -> VINCULADOS</strong><br>
<h2>Título 2 del documento (h2) </h2>
<h3>Subtítulo del documento (h3)</h3> <br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, quisquam, dicta ad rerum fugiat iste error accusantium molestias. Pariatur, numquam reprehenderit tempora sit deserunt voluptas aut molestiae modi beatae odio.</p>
<img src="img/font-size.png" alt="fuente" title="Tamaño Fuente" width:300px>
<a href="http://www.w3c.org">Ir a W3C</a>
<p>Clesium ipsum <span class="subrayado">delor sit amet</span>, consectetur adipisicing elit. Fugiat, sit, cupiditate sequi fugit laudantium dolor eaque maiores <br>
natus deleniti nesciunt minima tenetur ipsam aliquid labore et hic dolorem quod repudiandae. Lorem ipsum dolor sit amet, <br>
consectetur adipisicing elit. Nostrum, error odit delectus dolorem neque expedita iure itaque nulla natus soluta rerum veritatis <br>
iste voluptate voluptas <span>similique sint</span> eligendi. Nostrum, harum.</p>
</body>
<hr>
<a href="32_Texto.html"><--Anterior</a>
<a href="34_Cuadro_1.html">Siguiente--></a>
</html>

19
CursoHTML/34_Cuadro_1.html Executable file
View File

@ -0,0 +1,19 @@
<html>
<head>
<meta charset="UTF-8">
<title>Propiedades - Cuadro</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body>
<div id="cuadro">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, est, error obcaecati tempora accusantium deserunt
libero labore cumque itaque reprehenderit repellat tenetur eaque doloremque ipsa sit aliquid veniam in cum. Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, culpa, blanditiis! Incidunt, facere, molestias
optio obcaecati atque molestiae iure labore ut rem perspiciatis corrupti voluptatum beatae officiis eius consectetur
ullam.
</div>
</body>
<hr>
<a href="33_Fondo.html"><--Anterior</a>
<a href="35_Cuadro_2.html">Siguiente--></a>
</html>

22
CursoHTML/35_Cuadro_2.html Executable file
View File

@ -0,0 +1,22 @@
<html>
<head>
<meta charset="UTF-8">
<title>Propiedades - Cuadro 2</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body>
<div id="cuadro">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, est, error obcaecati tempora accusantium deserunt
libero labore cumque itaque reprehenderit repellat tenetur eaque doloremque ipsa sit aliquid veniam in cum. Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, culpa, blanditiis! Incidunt, facere, molestias
optio obcaecati atque molestiae iure labore ut rem perspiciatis corrupti voluptatum beatae officiis eius consectetur
ullam.
</div>
<p>Este es un parrafo, no uno cualquiera, uno de los mejores al lado del cuadro</p>
<br> <hr>
<img src="img/modelo-caja.png" alt="modelo" width= 450px >
</body>
<hr>
<a href="34_Cuadro_1.html"><--Anterior</a>
<a href="36_Display.html">Siguiente--></a>
</html>

27
CursoHTML/36_Display.html Executable file
View File

@ -0,0 +1,27 @@
<html>
<head>
<meta charset="UTF-8">
<title>Propiedades - Display</title>
<link rel="stylesheet" type="text/css" href="css/display.css">
</head>
<body>
<div id="uno">Este es el div1</div>
<div id="dos">Este es el div2</div>
<div id="tres">Este es el div3</div>
<p><span>Este sería un subtitulo</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, accusantium,
temporibus est dolorum cupiditate recusandae maiores nulla delectus architecto praesentium soluta enim laudantium
blanditiis modi omnis doloribus quasi. Doloribus, deserunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Inventore, magni, optio officiis porro velit et ipsa tenetur amet eligendi ipsum cum accusantium autem vel quidem
mollitia maiores ducimus molestias libero!. Consectetur adipisicing elit. Magnam, odit, pariatur consequatur autem
nostrum doloremque rem laborum accusantium esse eveniet temporibus natus ab optio sed quidem soluta libero animi similique.
Consectetur repellat ut itaque similique cum illum sequi placeat error. Consequuntur tenetur rerum cupiditate ratione
reiciendis! Qui, facilis, dignissimos sapiente labore ex consectetur mollitia architecto iste quod amet laborum aperiam?
Illum, sit, excepturi cupiditate iure molestiae in asperiores id nostrum minus praesentium quos quam quo! Deserunt,
quibusdam, quidem, numquam nostrum rem fuga dolorem architecto officiis quas vel corrupti rerum porro!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et nulla suscipit reiciendis delectus quaerat. Aliquam,
dolorum a deleniti id aspernatur officia aut veniam harum doloremque natus dolores obcaecati delectus accusamus.</p>
</body>
<hr>
<a href="35_Cuadro_2.html"><--Anterior</a>
<a href="37_Listas.html">Siguiente--></a>
</html>

19
CursoHTML/37_Listas.html Executable file
View File

@ -0,0 +1,19 @@
<html>
<head>
<meta charset="UTF-8">
<title>Propiedades - Listas</title>
<link rel="stylesheet" type="text/css" href="css/listas.css">
</head>
<body>
<ul>
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
</ul>
</body>
<hr>
<a href="36_Display.html"><--Anterior</a>
<a href="38_Tablas.html">Siguiente--></a>
</html>

20
CursoHTML/38_Tablas.html Executable file
View File

@ -0,0 +1,20 @@
<html>
<head>
<meta charset="UTF-8">
<title>Propiedades - Tablas</title>
<link rel="stylesheet" type="text/css" href="css/tablas.css">
</head>
<body>
<table>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td></td>
</tr>
</table>
</body>
<hr>
<a href="37_Listas.html"><--Anterior</a>
<a href="39_Position.html">Siguiente--></a>
</html>

31
CursoHTML/39_Position.html Executable file
View File

@ -0,0 +1,31 @@
<html>
<head>
<meta charset="UTF-8">
<title>Propiedades - Posición</title>
<link rel="stylesheet" type="text/css" href="css/position.css">
</head>
<body>
<div id="padre">
<div id="fija">Fija</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, vitae,
voluptatem placeat iusto nemo architecto error maiores nostrum a vel perferendis temporibus
facilis dolor possimus fugit consectetur doloribus quibusdam sed.
Autem, laborum</p>
<div id="hijo">Cuadro</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, atque, magnam, laboriosam
a rerum mollitia dolore quo illo dolorem expedita nulla eius quibusdam. Odio, mollitia, libero
laboriosam rerum et quae?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, atque, magnam, laboriosam
a rerum mollitia dolore quo illo dolorem expedita nulla eius quibusdam. Odio, mollitia, libero
laboriosam rerum et quae?</p>
</div>
</body>
<hr>
<a href="38_Tablas.html"><--Anterior</a>
<a href="39a_Zindex.html">Siguiente--></a>
</html>

16
CursoHTML/39a_Zindex.html Executable file
View File

@ -0,0 +1,16 @@
<html>
<head>
<meta charset="UTF-8">
<title>Propiedades - Z index</title>
<link rel="stylesheet" type="text/css" href="css/zindex.css">
</head>
<body>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 2</div>
</body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<hr>
<a href="39_Position.html"><--Anterior</a>
<a href="40_Float.html">Siguiente--></a>
</html>

31
CursoHTML/40_Float.html Executable file
View File

@ -0,0 +1,31 @@
<html>
<head>
<meta charset="UTF-8">
<title>Propiedades - Float</title>
<link rel="stylesheet" type="text/css" href="css/float.css">
</head>
<body>
<div id="principal">
<img src="img/ojo.jpg" alt="ojo">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, laudantium, ut,
magni doloremque expedita maiores voluptates in quaerat nulla voluptatum laboriosam
fugiat a dolorem sequi iure quasi cumque. Deleniti, ex!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, laudantium, ut,
magni doloremque expedita maiores voluptates in quaerat nulla voluptatum laboriosam
fugiat a dolorem sequi iure quasi cumque. Deleniti, ex!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, laudantium, ut,
magni doloremque expedita maiores voluptates in quaerat nulla voluptatum laboriosam
fugiat a dolorem sequi iure quasi cumque. Deleniti, ex!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, laudantium, ut,
magni doloremque expedita maiores voluptates in quaerat nulla voluptatum laboriosam
fugiat a dolorem sequi iure quasi cumque. Deleniti, ex!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, laudantium, ut,
magni doloremque expedita maiores voluptates in quaerat nulla voluptatum laboriosam
fugiat a dolorem sequi iure quasi cumque. Deleniti, ex!</p>
</div>
</body>
<br>
<hr>
<a href="39a_Zindex.html"><--Anterior</a>
<a href="41_Float_vs_display.html">Siguiente--></a>
</html>

31
CursoHTML/41_Float_vs_display.html Executable file
View File

@ -0,0 +1,31 @@
<html>
<head>
<meta charset="UTF-8">
<title>Propiedades - Float vs Display</title>
<link rel="stylesheet" type="text/css" href="css/float2.css">
</head>
<body>
<article id="principal">
<div id="div1">Uno</div><div id="div2">Dos</div><div id="div3">Tres</div><div id="div4">Cuatro</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, laudantium, ut,
magni doloremque expedita maiores voluptates in quaerat nulla voluptatum laboriosam
fugiat a dolorem sequi iure quasi cumque. Deleniti, ex!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, laudantium, ut,
magni doloremque expedita maiores voluptates in quaerat nulla voluptatum laboriosam
fugiat a dolorem sequi iure quasi cumque. Deleniti, ex!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, laudantium, ut,
magni doloremque expedita maiores voluptates in quaerat nulla voluptatum laboriosam
fugiat a dolorem sequi iure quasi cumque. Deleniti, ex!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, laudantium, ut,
magni doloremque expedita maiores voluptates in quaerat nulla voluptatum laboriosam
fugiat a dolorem sequi iure quasi cumque. Deleniti, ex!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, laudantium, ut,
magni doloremque expedita maiores voluptates in quaerat nulla voluptatum laboriosam
fugiat a dolorem sequi iure quasi cumque. Deleniti, ex!</p>
</article>
</body>
<br>
<hr>
<a href="39a_Zindex.html"><--Anterior</a>
<a href="42_Agrupar_Selectores.html">Siguiente--></a>
</html>

16
CursoHTML/42_Agrupar_Selectores.html Executable file
View File

@ -0,0 +1,16 @@
<html>
<head>
<meta charset="UTF-8">
<title>Agrupar Selectores</title>
<link rel="stylesheet" type="text/css" href="css/agrupar.css">
</head>
<body>
<h1>Titulo h1</h1>
<h2>Titulo h2</h2>
<h3>Titulo h3</h3>
</body>
<br>
<hr>
<a href="42_Agrupar_Selectores.html"><--Anterior</a>
<a href="43_Herencia.html">Siguiente--></a>
</html>

20
CursoHTML/43_Herencia.html Executable file
View File

@ -0,0 +1,20 @@
<html>
<head>
<meta charset="UTF-8">
<title>Herencia de Selectores</title>
<link rel="stylesheet" type="text/css" href="css/herencia.css">
</head>
<body>
<div>
<p>Párrafo 1 dentro del div.</p>
<p>Párrafo 2 dentro del div.</p>
<span><p>Parrafo 3 dentro del div.</p></span>
</div>
<p>Párrafo 4 fuera del div.</p>
<p>Párrafo 5 fuera del div.</p>
</body>
<br>
<hr>
<a href="42_Agrupar_Selectores.html"><--Anterior</a>
<a href="44_Cursor.html">Siguiente--></a>
</html>

14
CursoHTML/44_Cursor.html Executable file
View File

@ -0,0 +1,14 @@
<html>
<head>
<meta charset="UTF-8">
<title>Propiedades - Cursor</title>
<link rel="stylesheet" type="text/css" href="css/cursor.css">
</head>
<body>
<p>Párrafo "HOLA" desde el body.</p>
</body>
<br>
<hr>
<a href="43_Herencia.html"><--Anterior</a>
<a href="45_.html">Siguiente--></a>
</html>

13
CursoHTML/css/agrupar.css Executable file
View File

@ -0,0 +1,13 @@
body {
font-family: arial, helvetica, sans-serif;
}
/*
h1 { color: red; }
h2 { color: red; }
h3 { color: red; }*/
h1, h2, h3 {
color: red;
text-decoration: underline;
}

8
CursoHTML/css/cursor.css Executable file
View File

@ -0,0 +1,8 @@
body {
font-family: arial, helvetica, sans-serif;
}
p {
cursor: pointer; /* crosshair, alias... */
}

17
CursoHTML/css/display.css Executable file
View File

@ -0,0 +1,17 @@
div { /* elementos de bloque, ocupan todo el espacio horizontal ( la diferencia se muestra vacia)*/
width: 200px;
height: 200px;
background: #CCC;
display: inline-block;
}
span {
color: darkgreen;
font-weight: bold;
display: block;
}
#dos {
/*display: none; oculta el contenido en pantalla, y este no ocupa espacio*/
visibility: hidden; /* solo lo oculta pero sigue ocupando espacio */
}

106
CursoHTML/css/estilos.css Executable file
View File

@ -0,0 +1,106 @@
@import url(otrosEstilos.css);
h2 { color: crimson; }
p { color: deeppink }
/* SELECTOR UNIVERSAL <-- Aplica una caracteristica a TODOS los elementos de un html */
/** { font-family:arial; } */
/* SELECTOR DE TIPO O ETIQUETA <-- Modifica etiquetas especificas del documento HTML */
span { color: darkgreen; }
/* SELECTOR CLASS <-- Permiten crear una clase personalizada (class subrayado ejm.).A su vez permite limitar la aplicación de esta clase a un tipo de elemento */
span.subrayado { text-decoration: underline; }
/* SELECTOR ID <-- Similar al selector Class, se define con un signo #, y se aplica con id="" */
h3#mayusculas { text-transform: uppercase; }
/* SELECTOR PSEUDO-CLASS */
a:link { color: darkred; } /* Link NO visitado */
a:visited { color: aquamarine; } /* Link Visitado */
a:hover { font-weight: bold; text-decoration: none; } /* Cursor sobre el link */
a:active { color:brown; } /* Link presionado (al hacer click) */
/* SELECTOR DE ATRIBUTO */
img[title]{ width:200px; height:auto; }/* <-- Aplica sobre todos los elementos con el atributo especifico*/
img[alt="mineral"]{ width: 400px; height: auto;}/* <-- Y también piede aplicar a todos los elementos con el atributo especifico y con un valor especifico del mismo atributo */
img[alt="fuente"]{ width: 650px; height: auto;}
/* COLORES CSS
p{ color:red; } <--- Valores por nombre del color
p{ color: #FF0000; } <--- Valores en notación hexadecimal
p{ color: #F00; } <-- Valores en notación hexadecimal abreviada
p{ color: rgb(255, 0, 0); } <-- Valores en notación RGB
*/
/* PAGINAS DE AYUDA PARA SELECCIONAR COLORES */
/* websafecolors.info/color-chart */
/* www.colors.commutercreative.com/grid/ */
/* https://color.adobe.com/es/create/color-wheel */
/* https://css-tricks.com/snippets/css/named-colors-and-hex-equivalents/ */
/* FUENTE */
body {
/*font-family: arial,hevetica,sans-serif;
font-size: 14px;
font-weight: 300; /* 0 = normal, 1000 = bold *//*
font-style: italic;
font-variant: small-caps;
line-height: 1.5; *//* tb puede ser 150% o 50px*/
/* Shorthand o metodo abreviado (en el sgte orden) */
font: italic small-caps bold 20px/150% aria, helvetica, sans-serif;
}
/* TEXTO */
p {
text-align: justify; /* left, center, right, justify */
text-indent: 20px; /* número o porcentaje */
text-transform: capitalize; /* lowercase, uppercase */
text-decoration: overline; /* line-through, underline, overline, none */
}
a {
text-decoration: none;
}
img {
vertical-align: middle;/* top, middle, bottom, sup, sub....*/
}
h2 {
letter-spacing: 15px; /* */
word-spacing: 30px;
}
/* FONDO */
body { /* puede ser en cualquier parte del documento */
/*background-color: peachpuff;*/
/* background-image: url(../img/ojo.jpg);
background-repeat: no-repeat; /* repeat, repeat-x*, repeat-y */
/* background-position: 20% 50%; /* bottom, center, left, right, top, center top, 100px 200px */
/* background-attachment: fixed; /* como se va a mover segun el contenido{ scroll, fixed } */
}
/* CUADRO */
#cuadro {
width: 400px; /* Define el ancho del elemento*/
height: 200px; /* Define el alto del elemento*/
overflow: auto; /* scroll, hidden */
background: lime;
/* border-width: 4px; */
/* border-style: solid; *//* dotted, dash, double, groove, ridge, outset, inset */
/* border-color: darkblue; */
border: 4px dashed darkblue; /* border-bottom, border-left..... */
/* padding-top: 25px;
padding-bottom: 50px;
padding-left: 50px;
padding-right: 50px;*/
padding: 25px 50px 50px 50px; /* desde arriba y en sentido horario*/
/* margin-top: 80px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 100px;*/
margin: 20px 0px 0px 100px;
}

24
CursoHTML/css/float.css Executable file
View File

@ -0,0 +1,24 @@
body {
font-family: arial, helvetica, sans-serif;
font-size: 14px;
}
#principal {
width: 800px;
padding: 20px;
border: 2px dashed #3498DB;
margin: 20px auto;
color: #888888;
}
img {
width: 30%;
height: auto;
margin: 0 20px 10px 0;
float: right; /* left */
}
p {
line-height: 1.5;
margin: 0 0 10px 0;
}

26
CursoHTML/css/float2.css Executable file
View File

@ -0,0 +1,26 @@
/* Float vs Display: Inline-block */
body {
font-family: arial, helvetica, sans-serif;
}
#principal {
width: 800px;
padding: 20px;
border: 2px solid #3498DB; /* dashed */
margin: 20px auto;
color: 888888;
}
div {
padding: 30px 0;
text-align: center;
width: 25%;
/*float: left;*/
display: inline-block; /* elementos se comportan como texto */
}
#div1 { background: #FFCC00; }
#div2 { background: #99FFAA; }
#div3 { background: #AADDFF; }
#div4 { background: #EEAAFF; }
/* p { clear: both; } /* evita acplamiento ( cuando se usa float)*/

13
CursoHTML/css/herencia.css Executable file
View File

@ -0,0 +1,13 @@
body { font-family: arial, helvetica, sans-serif; }
/* SELECTOR PADRE */
/*div p { background: #FF0; }*/
/* SELECTOR HIJO */
/*div > p { background: #FF0; }*/
/* SELECTOR ADYACENTE GENERAL */
/*div ~ p { background: #FF0; }*/
/* SELECTOR ADYACENTE INMEDIATO */
div + p { background: #FF0; }

10
CursoHTML/css/listas.css Executable file
View File

@ -0,0 +1,10 @@
ul {
font-size: 22px;
line-height: 150%;
padding: 50;
border: 1px solid red;
/*list-style-type: lower-greek; /* circle, square, decimal,lower-alpha */
/*list-style-image: url(../img/arriba.png);
/*list-style-position: inside; /* outside */
list-style: url(../img/arriba.png) inside;
}

1
CursoHTML/css/otrosEstilos.css Executable file
View File

@ -0,0 +1 @@
h3 { color: darkmagenta ;}

40
CursoHTML/css/position.css Executable file
View File

@ -0,0 +1,40 @@
/* POSITION
- static
- relative
- absolute
- fixed
Todos los elementos HTML tienen por defecto asignada la posicion "Static" */
body {
font-family: arial, helvetica, sans-serif;
padding-bottom: 1200px;
}
#padre {
width: 600px;
height: 500px;
border: 4px solid #0CC;
margin: 20px auto;
padding: 20px;
position: relative; /* los elementos hijo dependen de la posicion del padre para tomar las coordenadas 0,0 */
}
#hijo {
text-align: center;
padding: 50px;
background: rgba(128,128,128,0.7);
font-size: 2em;
position: absolute; /*absolute, relative (si el padre es relative las coordenandas hijo parten del 0,0 del padre)*/
top: 150px;
left:150px;
}
#fija {
text-align: center;
padding: 50px;
background: rgba(220,20,128,0.5);
font-size: 2em;
position: fixed; /*posicion fija, no se mueve*/
top: 50px;
right: 350;
}

13
CursoHTML/css/tablas.css Executable file
View File

@ -0,0 +1,13 @@
table {
width: 500px;
height: 500px;
empty-cells: hide; /* hide, show*/
border-spacing: 15px 30px;
border-collapse: collapse; /* separate por defecto (celdas unidas o separadas) */
}
td {
border: 1px solid #08d;
text-align: center;
font-size: 28px;
}

32
CursoHTML/css/zindex.css Executable file
View File

@ -0,0 +1,32 @@
/* Z-Indez = indice de profundidad */
body {
font-family: arial, helvetica, sans-serif;
}
div {
width: 200px;
height: 150px;
padding: 20px;
position: absolute; /* para usar el z index todos los elementos deben tener el mismo tipo de position*/
}
#div1 {
background: #FC0;
top: 0;
left: 0;
z-index: 10;
}
#div2 {
background: #0FC;
top: 50px;
left: 50px;
z-index: 20;
}
#div3 {
background: #AE0;
top: 100px;
left: 100px;
z-index: 30;
}

BIN
CursoHTML/img/arriba.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 410 B

BIN
CursoHTML/img/font-size.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 119 KiB

BIN
CursoHTML/img/modelo-caja.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 207 KiB

BIN
CursoHTML/img/ojo.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 173 KiB

BIN
CursoHTML/img/roca.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 97 KiB

BIN
CursoHTML/img/workshop.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 114 KiB

1
CursoHTML/js/script.js Executable file
View File

@ -0,0 +1 @@
alert("Hola mundo desde un script externo");

31
Workshop-CursoHTML/css/estilos.css Executable file
View File

@ -0,0 +1,31 @@
* { margin: 0; padding: 0; }
body { background: url(../img/fondo.jpg) no-repeat top center;
font-family: arial, helvetica, sans-serif;}
#contenedor { width: 960px; margin: 0 auto; /*border: 1px solid;*/ }
#redes { position: fixed; right: 0; top: 420px; width: 36px;}
#cabecera { position: relative; padding-top: 20px; }
#logo { width: 21%; float: left; color: #FFF; font-size: 34px;
background: url(../img/nube.png) no-repeat left center; padding-left: 4%;}
#menu { width: 75%; float: right; text-align: right; padding-top: 15px;}
#menu ul { list-style: none; }
#menu ul li { display: inline-block; }
#menu ul li a { color: #FFF; text-decoration: none; padding: 5px 20px; font-size: 14px; }
#menu ul li a:hover, #menu ul li a#activo:hover { border-bottom: 2px solid #FFF; }
#menu ul li a#activo { border-bottom: 1px solid #FFF; }
#mensaje { clear: both; height: 340px; position: relative; text-align: center;
color: #FFF; background: url(../img/nube-mensaje.png) no-repeat center 90px; }
#mensaje h2 { position: relative; font-size: 32px; text-transform: uppercase; font-weight: normal;
top: 160px; }
#mensaje p { position: relative; font-size: 18px; top: 170px; letter-spacing: 4px;}
#mensaje a { position: relative; color: #FFF; text-decoration: none; top: 210px;
border: 2px solid #FFF; padding: 10px 30px; font-size: 14px; }
#principal, #footer { padding: 20px 0; }
#principal img { width: 50%; float: right; margin-left: 20px; }
#principal h1 { color: #F60; background: url(../img/nube-naranja.png) no-repeat left center;
padding-left: 30px; margin-bottom: 15px;}
#principal p { font-size: 12px; color: #555; letter-spacing: 1px; line-height: 1.9;}
#principal hr { border: none; border-top: 1px solid #CCC; margin: 25px 0; }
#principal iframe { width: 100%; height: 250px; }
#footer { background: #CCC; text-align: center; position: relative;}
#footer p { color: #555; font-size: 12px; }
#footer img { position: absolute; right: 5px; top: 50%; margin-top: -7.5px;}

BIN
Workshop-CursoHTML/img/Thumbs.db Executable file
View File

Binary file not shown.

BIN
Workshop-CursoHTML/img/arriba.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 410 B

BIN
Workshop-CursoHTML/img/cc_new.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
Workshop-CursoHTML/img/facebook.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 345 B

BIN
Workshop-CursoHTML/img/favicon.ico Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
Workshop-CursoHTML/img/fondo.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
Workshop-CursoHTML/img/laptop.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
Workshop-CursoHTML/img/licencia-cc-by-nc-sa.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
Workshop-CursoHTML/img/nube-mensaje.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 943 B

BIN
Workshop-CursoHTML/img/nube-naranja.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
Workshop-CursoHTML/img/nube.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 348 B

BIN
Workshop-CursoHTML/img/twitter.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 556 B

64
Workshop-CursoHTML/index.html Executable file
View File

@ -0,0 +1,64 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="description" content="Curso de HTML y CSS el lenguaje de programación y desarrolo
de páginas web">
<meta name="keywords" content="HTML, CSS, Curso HTML, Curso CSS, Curso diseño de páginas web, chile, concepcion, notepadd++">
<meta name="author" content="FuzanToko@gmail.com">
<meta name="robots" content="index, follow">
<meta name="googlebot" content="index, follow">
<title>Curso HTML & CSS</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
</head>
<body>
<div id="redes">
<a href="#"><img src="img/facebook.png" alt="Facebook"></a>
<a href="#"><img src="img/twitter.png" alt="Twitter"></a>
</div>
<div id="contenedor">
<div id="cabecera">
<div id="logo">Logo</div>
<div id="menu">
<ul>
<li><a href="index.html" id="activo">Home</a></li>
<li><a href="#">Temario</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Galería</a></li>
<li><a href="#">Contáctenos</a></li>
</ul>
</div>
<div id="mensaje">
<h2>Página modelo HTML & CSS</h2>
<p>Workshop aplicación de conocimientos adquiridos en el curso.</p>
<a href="#principal">Leer más</a>
</div>
</div>
<div id="principal">
<!--- <img src="img/laptop.jpg" alt="Curso HTML & CSS"> -->
<h1>Curso de HTML & CSS</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo natus ut obcaecati
ratione culpa. Voluptas, odit, ut, quidem voluptatem doloribus possimus harum
architecto est ipsum ea quos suscipit facilis temporibus. Optio, nulla, quos,
blanditiis ducimus delectus similique cupiditate perferendis qui error mollitia
ipsam ut accusamus suscipit ab culpa facilis alias eaque quia deleniti dignissimos
iste officiis accusantium quod est reprehenderit laborum distinctio totam voluptas
eum recusandae assumenda doloremque voluptatem aut architecto perspiciatis harum
quo earum doloribus amet ex! Expedita, rem, deleniti, id, architecto cupiditate
debitis quibusdam commodi fugiat nemo accusantium aspernatur quod quis mollitia
tenetur ducimus repellat quam aliquam perspiciatis.</p>
<hr>
<iframe src=https://ta-te-tijpav.fuzan.repl.run/ max-width="400" max-height="360" frameborder="1" style="border:1" >Gato Python</iframe>
<hr>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d3193.8810858488696!2d-73.04917210909245!3d-36.82136934072769!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses-419!2scl!4v1514312380792" width="800" height="600" frameborder="0" style="border:0">Mapa de Google Maps</iframe>
</div>
</div>
<div id="footer">
<p>2017 Esta página se publica bajo licencia creative commons</p>
<a href="#contenedor"><img src="img/arriba.png" alt="Subir"></a>
</div>
</body>
</html>

BIN
Workshop-CursoHTML/wireframe.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB