Skip to content

Instantly share code, notes, and snippets.

@highercomve
Last active August 29, 2015 14:03
Show Gist options
  • Save highercomve/7118b2d2e9fc38abdb62 to your computer and use it in GitHub Desktop.
Save highercomve/7118b2d2e9fc38abdb62 to your computer and use it in GitHub Desktop.
Clase 1 de HTML/CSS
<!doctype html>
<html lang="en">
<head>
<meta charset='utf-8' />
<title>Introduccion al HTML | Escuelaweb</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</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>
<!-- 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>
<!-- Imagenes -->
<img src="miimagen" alt="atributos">
<!--Ejemplo-->
<img src="http://lorempixel.com/g/400/200/">
<!-- Enlaces -->
<a href="enlace">Etiqueta para atributo de enlace </a>
<!--Ejemplo -->
<a href="http://www.facebook.com">facebook</a>
<!--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>
<!-- 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>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment