HTML

Elementos:
Los elementos en HTML deben estar contenidos entre <h1> y </h1>

Ejemplo:
<h1> CatPhotoApp </h1>

Elementos de encabezado:
Los elementos funcionan por importancia (como si fueran capas) donde pueden ser
ennumerados del 1-6, siendo 1 el mas importante. Por consecuencia, el elemento h1 será mas
importante que el elemento h2.

Ejemplo:
<h2> Cat Photos </h2>

Parrafos:
El elemento p es usado para crear un párrafo de texto en sitios web.

Ejemplo:
<p> Los gatos </p>
Comentarios:
Los comentarios te permiten dejar mensajes sin afectar lo que se muestra en el navegador.
Un comentario en HTML comienza con <!—y termina con -->

Ejemplo:
<!- - Mensaje de comentario - ->

Main:
HTML5 tiene diferentes elementos que ayudan a diferenciar diferentes tipos de contenido.
Estos elementos hacen tú código HTML más facil de leer y ayudan con el posicionamiento en
buscadores (search engine optimization – SEO) y accesibilidad.
Esto se hace con la palabra main como elemento.

Ejemplo:
<main> Todas las lineas de código de lo principal </main>

Anidamiento:
Cuando agregas muchos elementos dentro del elemento main como lo son (h1, h2, p) dentro
del elemento main, a eso se le llama anidamiento. Los elementos anidados deben colocarse
dos espacios más a la derecha del elemento en el que están anidados. Este espacio se llama
sangría (indentación en programación) y se utiliza para facilitar la lectura de HTML.

Ejemplo:

Imágenes:
Puedes añadir imágenes a tu sitio web utilizando el elemento img. Los elementos img tienen
una etiqueta de apertura sin una etiqueta de cierre. La etiqueta de un elemento que no necesita
etiqueta de cierre se conoce como etiqueta de autocierre (self-closing tag).

Ejemplo:
<img> Nombre de la imagen

URL:
Los atributos HTML son palabras especiales usadas dentro de la etiqueta de apertura de un
elemento para controlar el comportamiento del elemento. El atributo src en un elemento img
especifica la URL (donde se localiza la imagen).
Ejemplo:
<img src=”URL de la imagen”>

Alt:
Todos los elementos img deben tener un atributo alt. El texto del atributo alt es utilizado por
lectores de pantalla para mejorar la accesibilidad y es mostrado en caso de que la imagen falle
en cargar.
Ejemplo: <img src=”cat.jpg” alt=”A cat”> tiene un atributo alt con el texto A cat.
Anchor:
Puedes enlazar una pagina diferente con el elemento anchor. Por ejemplo:
<a href = “ https://freecodingcamp.com></a>
De tal manera que te enviará a freecodingcamp.com y el enlace no aparecerá en la preview.

El texto del enlace debe ser incluido dentro de los elementos anchor. Basicamente este será el
texto que al hacer click, te reenviará al enlace que hayas agregado.

Nos dá como resultado lo siguiente:

De la misma manera, se pueden convertir palabras en enlace, introduciendo anchors dentro de

elementos, como un parrafo, por ejemplo:

Lo cual al estar entre anchors, convierte las palabras “cat photos” en enlaces.
Atributo target – Blank:
Sirve para que el enlace se abra en otra página (tab) y debe estar incluido en el anchor antes
del enlace.

Convirtiendo imagen a link:

Funciona de la misma manera que en el anchor; Debe estar incluido el enlace en el elemento.

Secciones:
El elemento de secciones se utiliza para separar fotos contenido de contenido futuro. La
sintaxis es la siguiente:
<section> (todo el contenido) </section>
Ejemplo:
Listas desordenadas:
Sirven para introducir textos en forma de lista desordenada. La sintaxis es la siguiente:
<ul> (contenido) </ul>

Objetos de lista:
Son los objetos que van a estar contenidos en una lista. La sintaxis es la siguiente:
<li> (contenido) </li>
Ejemplo:

Figura:
Un elemento figura representa contenido contenido en el mismo que asociara la imagen con
una subtitulo, palabra u oracion. La sintaxis es la siguiente:
<figure> contenido </figure>
Ejemplo:
Figcaption:
Es un elemento utilizado para agregar una descripción a la imagen en la cual está contenido el
elemento de figura. El elemento figura contiene la imagen y por consecuencia, gracias a el se
puede agregar el figcaption (descripción de la imagen).
Sintaxis:
<figcatpion> (descripción) </figcaption>
Ejemplo:

Enfatizar:
Para enfatizar una palabra, se utilizan los elementos em dentro de figcaption.
Sintaxis:
<em> (palabra a enfatizar) </em>

Lista ordenada:
Se utiliza para introducir listas ennumeradas.
Sintaxis:
<ol> (contenido) </ol>
Ejemplo:
Elemento strong:
Se utiliza para indicar que algún texto es de suma importancia o urgencia. Lo resalta en
negritas.
Sintaxis:
<strong> (contenido) </strong>
Ejemplo:

Formas:
Un elemento forma sirve para colectar información del usuario.
Sintaxis:
<form> (contenido) </form>

Atributo acción:
Indica hacia donde se enviará la información. For ejemplo <form action=
“urldealgunapagina”></form? Enviaría la informaci’’on ingresada al url indicado.
Sintaxis:
<form action=”url”></form>
Ejemplo:

Elemento input:
Te permite colectar información de una forma web. Al igual que los elementos de imagen, los de
input son auto contenidos y no necesitan llaves de cerradura.
Sintaxis:
<input>
Ejemplo:

Atributo type:
Se pueden crear varios elementos utilizando el atributo type. De esta manera se puede crear
un campo de password, botón de reset, o un control para permitirle a los usuarios utilizar
archivos desde su computadora.
Sintaxis <input type=”text”>
Para poder ordenar datos al ser accesados desde la localización especificada en el atributo
acción, debes ingresar un nombre al campo de texto del atributo y asignarle un valor que
represente el dato que será enviado. Por ejemplo, puedes utilizar la siguiente sintaxis para un
campo de texto de un correo electrónico:
<input type=”text” name=”email”>
Ejemplo:

Texto placeholder:
Es un texto utilizado para explicarle a la gente sobre que tipo de información se espera que se
ingrese.
Sintaxis:
<input type=”text” placeholder=”Correo electrónico”>
De esa manera ellos podrán leer que en ese campo se requiere introducir su correo electrónico.
Ejemplo:
Atributo required:
Para evitar que un usuario envie información vacia, debes utilizar el atributo required, incluido
en un elemento input. No hay necesidad de poner un valor en el atributo “required”. De otra
forma, solo agrega la palabra required al elemento de input, asegurandote de que haya espacio
entre los otros atributos.
Sintaxis:
<input required (contenido) >
Ejemplo:

Elemento “botón”:
Utiliza el elemento botón para crear un boton clickeable. Por ejemplo: <button> haz click aquí
</button> crea un boton con un texto que dice “haz click aquí”.
Sintaxis:
<button> (descripción del botón) </button>
Ejemplo:

Boton de submit
Cuando agregas elementos de input y botones no aparecen en nuevas lineas. Son elementos
que aparecen en una sola linea, por lo tanto para especificar que el boton es un boton de
submit, hay que agregar el tipo de atributo “submit”.
Sintaxis:
<button type=”submit”> (nombre del boton) </button>

Botones de radio:
Los botones de radio se utilizan para preguntas donde solo quieres una respuesta de opcion
multiple.
Sintaxis:
<input type=”radio”>(nombre de la opción)

Nota:
El nombre de la opción se puede poner al lado izquierdo de input, si ahí se desea visualmente.

Ejemplo:

Label:
Los elementos label son utilizados para ayudar a asociar un texto para un elemento de input
con el elemento de input contenido en el mismo (especialmente para ayudar a tecnologías
como lectores de pantalla), Por ejemplo: <label><input type=”radio”> cat</label> Hace que la
palabra clickeable sea gato y tambie’n selecciona el boton de radio correspondiente.
Sintaxis:
<label><input type=”opción que se requiera”>(nombre de la opción)</label>
Ejemplo:

Id de atributo:
Se utiliza para identificar elementos especificos de HTML. Cada valor de id de atributo debe ser
único de otros valores de id para la pagina entera.
Sintaxis:
Id=”indoor”

Ejemplo:

Atributo name y opcion múltiple:

Si creas mas de un botón de rádio, al momento de agregar los dos, estos pueden ser
seleccionados simultaneamente. Para arreglar esto, debes agregar un atributo llamado name,
de esta manera ya solo se podrá seleccionar uno.
Sintaxis:
Name = “PrimeraOpcion-SegundaOpcion”
Ejemplo:

Enviando respuestas de opción múltiple:

Si seleccionas un botón de radio y envias la forma, el dato del botón será basado en el nombre
y los valores de atributo que tiene. De tal manera que siempre debe agregarse un valor.
Preferentemente relacionado con el id.
Sintaxis:
Value=”(id de opcion)”
Ejemplo:

Fieldset:
El elemento de fieldset es utilizado para agregar inputs y etiquetas(labels) relacionados en una
forma web. Los elementos de fieldset son elementos a nivel bloque, que significa que aparecen
en una linea nueva.
Sintaxis:
<fieldset> (elementos de la forma) </fieldset>
Ejemplo:

Leyenda:
El elemento leyenda actua como una descripción del contenido en un elemento fieldset. Le da a
los usuarios contexto sobre que es lo que deberían ingresar en la forma.
Sintaxis:
<legend> (mensaje) </legend>
Ejemplo:

Checkbox:
Las checkboxes se utilizan para cuando algo requiere mas de una respuesta. Esto se agrega
como un tipo de input.
Sintaxis:
(Palabra) <input type=”checkbox”>(espacio)(Palabra)
Ejemplo:

Atributo For:
El for se utiliza para asociar el texto de un elemento input dentro del elemento mismo. Se
puede encapsular un texto con la misma etiqueta (label) y agregar un atributo for con el mismo
valor que el id del elemento input.
<label for=”(id del elemento asociado)”> (palabra de opción) </label>
Ejemplo:

Casilla marcada predeterminada:

Para que una casilla (checkbox) esté marcada de manera predeterminada se debe agregar el
atributo “checked” dentro de el elemento input.
Sintaxis:
<input (contenido) type= “radio” checked></input>
Ejemplo:

Footer (pie de página):

Se utiliza el elemento footer.
Sintaxis:
<footer> (contenido) </footer>
Ejemplo:

Elemento Head:
El contenido principal debe ir dentro del elemento body, sin embargo la información importante
va dentro del elemento head.
Sintaxis:
<head> (contenido) </head>

Titulo:
El titulo determina lo que el buscador muestra en la barra de titulo o pestaña para la página.
Sintaxis:
<title> (titulo) </title>
Ejemplo:

Elemento html:
Todo el contenido debe estar dentro del elemento html. Ese es el elemento principal.
El atributo “lang” y el valor “en”sirve para especificar el lenguaje en el que se encuentra. En
este caso lang viene de language y en de English (inglés).
Ejemplo:

Doctype HTML:
Todas las páginas deben contener el siguiente código:
<!DOCTYPE html>
Esto es una string especial que se conoce como declaración y se asegura que el código
cumpla con las especificaciones a nivel industria. Esto debe ser la primera línea de código.

Meta elementos:
Se puede modificar el comportamiento de el buscador al agregar elementos meta auto
contenidos. Por ejemplo agregar un parse para diversos lenguajes.
Sintaxis:
<meta attribute = “(value)”>
Ejemplo: