HTML Cheatsheet para la clase de Construcion de Software version 1.0
El tag <h(1-6)> define headers que varian en tamaño
No los usamos para cuando queremos añadirle este estilo a un texto
Ej.
El tag <p> crea un parrafo
Ej. Esto es un parrafo lolololo
Existen varios tipos de contenedores que sirven para dar estilo y ordenar la pagina por bloques de elementos
div se utiliza para definir un bloque de contenido o una seccion del documento
(En VS Code si escribimos "lorem" seguido de un numero nos crea un parrafo de relleno de la cantidad especificada)
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod dolorum accusantium eveniet, tenetur, quaerat culpa est reprehenderit recusandae nihil molestias delectus inventore facilis adipisci tempore nam ab et, odio cum!
header se utiliza para definir un bloque de contenido introductorio
Lorem ipsum dolor sit amet consectetur adipisicing elit. At similique quaerat quia recusandae nesciunt esse labore aperiam eligendi qui nulla a delectus cumque, quis consequatur atque facere id. A, vitae.
El span es un contedor inline que sirve para agrupar elementos en linea
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit, et cum. Quos doloribus perspiciatis quis atque. Nemo, temporibus consectetur magni ipsa obcaecati dolorem, enim quos, magnam maxime necessitatibus similique cum?
article se utiliza para definir una seccion autocontenida dentro del documento
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam quaerat explicabo autem vel dicta eum corporis minima deleniti reiciendis iste, laudantium animi at architecto voluptatem modi corrupti qui vero itaque!
strong sirve para marcar un enfasis en partes de un texto
Ej. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates error cupiditate illum eius totam sequi impedit voluptatibus sapiente assumenda minus perferendis blanditiis, dolorum hic iusto. Voluptatibus quo sint eveniet nihil.
i sirve para marcar una parte del texto en italica
Ej. Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae deserunt ut asperiores soluta quis veniam quibusdam, nihil quaerat odit illo quasi provident nostrum optio! Nesciunt sunt dolorem nostrum nobis maiores!
u sirve para subrayar una parte del texto
Ej. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum ipsam corrupti quas dignissimos autem magni non, corporis sunt amet molestiae nulla aut libero veniam minima et at soluta ab tenetur.
b sirve para marcar una parte del texto en negritas
Ej. Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem quis cumque quia recusandae. Labore optio, voluptas voluptate maiores totam possimus nisi ipsam. Doloremque nulla non, nesciunt perferendis ad minima illum.
strike sirve para tachar con una linea horizontal una parte del texto
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum inventore, quas fugit quaerat sit vero itaque nihil , suscipit saepe soluta accusantium dolorem dicta voluptates. Tempora fugit quaerat sequi inventore illo.
small sirve para hacer la letra de una parte de un texto mas pequeña
Ej. Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam non architecto necessitatibus! accusantium exercitationem earum blanditiis corrupti quos delectus saepe placeat accusamus consequuntur. Quam libero at facere distinctio impedit.
em sirve para marcar enfasis en una parte del texto, utilizando italicas
Ej. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore reprehenderit dolorem repellat nam impedit, repellendus animi architecto tenetur voluptate rerum nemo neque, optio, at corporis velit maxime cumque fugit! Obcaecati?
La etiquete br produce un salto de linea en el texto, no se tiene que cerrar
Ej. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quaerat, nulla doloribus.
Voluptatibus voluptate totam, consequatur rem nesciunt in, molestiae quibusdam sit placeat, aliquid quia perspiciatis expedita consectetur animi quidem itaque?
Existen listas ordenadas y no ordenadas que se definen con <ul> y <ol> respectivamente
Las tablas son un poco mas complicadas de definir. Primero se necesita la tabla en si <table>, luego el header de la tabla o <thead> y el cuerpo o <tbody>. Dentro de cada una de estas secciones se definen primero filas o rows con el tag <tr> y finalmente dentro de las filas se definen los datos de la tabla o las celdas en cada fila <td>
| h1 | h2 | h3 |
| row11 | row12 | row13 |
| row21 | row22 | row23 |
| row31 | row32 | row33 |
Se usa el tag <img> con diferentes atributos
Los links se crean usando el tag <a> y sirven para generar un vinculo a otra pagina dentro del servidor o en el internet
Este tiene como atributo "href" que indica la direccion del link
Hacia Link 1Las formas nos sirven para obtener datos del usuario y posteriormente guardarlos
Una forma de definirlos es usando el tag <input> con el atributo type que indica el dato que se le va a pasar. Algunos ejemplos son:
Las formas normalmente acaban con un boton de submit que es el que nos va a ayudar a declara la accion de guardar los datos