Scribd
Cargar
43 vistas25 páginas

Resumen HTML5

Resumen sobre HTML5 desde cero

Cargado por

Alvaro Daniel Martínez Irrazabal
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
43 vistas25 páginas

Resumen HTML5

Resumen sobre HTML5 desde cero

Cargado por

Alvaro Daniel Martínez Irrazabal
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 25

HTML5

Es para estructurar los objetos de las paginas. Cada nuevo archivo es una pagina.

Guardar la primera pagina como index.html

El editor funciona mediante etiquetas, estas etiquetas son como una especie de caja en la que se
guarda la información y se distribuyen en la página.

Para abrir una etiqueta se usa el símbolo < y para cerrarlo >.

Esta etiqueta es Esta etiqueta es para


para abrir un objeto cerrar un objeto

Esta etiqueta tiene un atributo, son las propiedades, características que tiene el objeto (por ejemplo
color).
Los atributos tienen un valor, ese valor va entre comillas.

Un ejemplo puede ser este:

Este objeto es un botón rojo, grane y de bordes negros.

NOTA: El comando boton es Button pero esta en español para entender el ejemplo.

Hay etiquetas que se cierran solas, por ejemplo que sirve para dejar un espacio en linea.

Y otras que se abren y se cierran

Las etiquetas que hay que cerrarlas tienen algo en su interior, por ejemplo la etiqueta h1 es para
contener un titulo.

Para comentar algo en html (es parte de codigo o texto que el usuario no puede leer pero quienes
accedan al codigo si) se hace con la etiqueta <!-- codigo o texto a comentar -->
Para comenzar a trabajar en una pagina se debe abrir
una etiqueta, presionar h y buscar html en la lista que se
despliega.
NOTA: Tag es etiqueta en ingles

Al clickear en html aparecerán la siguiente información:

Define que es la ultima versión de html

Lo que este dentro de las etiquetas <html> </html> esta lo


que contiene la pagina, puede ser contenido que se ve
como la que no se ve en la página.
Lo que no podemos ver en la página se encuentra dentro
de la etiqueta <head> </head>.
Lo que podemos ver se encuentra dentro de la etiqueta
<body> </body>.

La etiqueta <title> </title> (que se encuentra dentro de


<head> </head>) contiene el titulo que se va a ver en la
pestaña del navegador.

La etiqueta <h1> </h1> se utiliza para títulos dentro del body, van desde el h1 hasta el h6, a partir de
este ya no existen. El h1 debe estar solo una vez.
NOTA: el h2 y h3 preferentemente dos veces, h4 y h5 pueden estar mas veces, mas que nada para
mantener orden (semántico) de la página.
NOTA 2: SEO optimización en los motores de búsqueda. Mantener un orden semántico es necesario
para el SEO.
NOTA 3: Al escribir las etiquetas es recomendable hacerlo con “sangrias” para que quede mas
ordenado
PIQUE: para modificar cosas iguales al mismo tiempo puede ponerse el cursos donde se quiera
modificar, apretar ctrl, mientras lo mantengo hacer click en lo otro que quiero modificar y se van hacer
las modificaciones en simultaneo.
Parrafo

La etiqueta <p> </p> se utiliza para párrafos, lo que se encuentre en esta etiqueta es lo que
aparecerá como texto en la página.
NOTA: Al poner (dentro de la etiqueta <p> </p>) lorem y apretar TAB aparecera un texto por
defecto
Otras etiquetas de texto son
<b> </b> es para que el texto en su interior este en negrita
<i> </i> es para que el texto en su interior este en Italica
<strike> </strike> es para que el texto en interior aparezca tachado
<small> </small> es par que el texto en su interior aparezca mas chico
<strong> </strong> pone el texto en negrita pero tiene un valor semantico mas alto (mas jerarquico)
<em> </em> resalta el texto en italica con mayor valor semantico
<ins> </ins> subraya el texto
<del> </del> tacha el texto
<sup> </sup> superindice para poner exponentes
<sub> </sub> subindice para poder poner formulas quimicas

NOTA: En Html siempre aparecen las etiquetas debajo de la otra, por mas que lo ponga en el
costado en el editor de texto (sublime text 3) El tabular las etiquetas y darle “sangrias” nos sirven
para darle jerarquía a las etiquetas y sean mas fáciles de leer
NOTA 2: Las etiquetas coo h1, h2... h6, p y otras etiquetas, completan la linea (aunque el contenido
termine antes la etiqueta hace que complete el “renglon”
NOTA 3: las etiquetas como b, i, strike, small, etc. no completan la linea, se adaptan al texto y por
eso aparecen en la imagen una al lado de la otra
Quotes, citas y referencias

<q> </q> pone el texto en su interior entre comillas no seleccionables.


<abbr> </abbr> se usa para abreviar, si se pone el mouse arriba de la palabra dentro de la etiqueta
muestra la palabra completa que se agrega en el atributo de la etiqueta.

<address> </address> se usa para los remitente en caso de una carta, resaltando en italica.
<cite> </cite> se usa para citar, referenciar.

Link/enlaces

La etiqueta de texto <a> </a> redirige a otra pagina contenida en la etiqueta. esta etiqueta tiene un
atributo href que es para poner el link hacia onde se va a redirigir.
Hay dos tipos de rutas: locales, las que se encuentra en nuestro ordenador y las externas son
fuera de nuestro ordenador.

Las rutas externas deben cumplir el protocolo de transferencia de hiper texto (https://)

NOTA: Lo que se encuentra despues del link es el texto que quiero que aparezca en la pagina
en lugar de mostrar el link
agregarle el atributo y valor target=”_blank” nos permite abrir el enlace en otra pestaña, mientras que
hacerlo con target=”_self” hace que se habra en la misma pestaña redireccionando
La otra manera de redirigir es de manera local, por ejemplo redirigiendonos a otro archivo, por
ejemplo otra pagina que hayamos creado
NOTA: recordar que cada archivo es UNA página.
Para redirigir a un archivo local alcanza con poner el nombre del archivo (si se encuentra en la
misma carpeta que la pagina) después del atributo href, o la ruta donde esta el archivo (de manera
relativa).

NOTA: recordar que los atributos van dentro de los signos <>

El atributo id nos permite identificar quien accede

a la etiqueta <a> </a> puede ponerse una etiqueta de img y una direccion de imagen para que sea una
imagen que cuando se clickee redirija a la pagina puesta en la etiqueta <a> </a>.

NOTA: La direccion de la imagen va dentro de las comillas despues de src=.

Tambien se puede hacer que un texto sea el que se usa para redirigir al hacer click encima. (el conocido
“click aqui”.
se hace usando una etiqueta <p> </p> para poder poner texto, dentro de esta una etiqueta <a> </a>
con href en su interior con el link o la ruta, y la palabra que sea la que redirige.
En este caso usamos la etiqueta a para crear un link que nos envie a la parte de
abajo del texto (lo llamamos codigo ij3...etc)

Es una forma de enlazar secciones de una pagina usando una id.


Para redirigir hacia un archivo que se encuentre en otra carpeta debe ponerse la ruta.

En este caso de la pagina se redirige a la pagina 2 que se encuentra en la carpeta “cosas”.


(cosas/pagina2.html) carpeta cosas, archivo pagina2.html

Para volver a un archivo que se encuentra en una carpeta anterior se debe poner en la ruta ../

El ../ es como decir que vuelva una carpeta para atrás.


NOTA: si tengo que volver dos carpetas atrás basta con poner ../../
Ejemplo:
Etiqueta <br>

Como se dijo antes la etiqueta <br> es para completar la linea.


En el siguiente ejemplo se ve como se usa esta etiqueta para separar el párrafo:

NOTA: si pongo texto del lado derecho de la etiqueta <br> tambien aparecera abajo, ya que br
completa la linea

NOTA2: cuanto mas <br> ponga mas va a bajar

Listas
Hay dos tipos de listas, las desordenadas <ul></ul> que dentro contiene los <li></li> que son los
elementos de la lista

A cada elemento de la lista les agrega un punto. Para ordenarla mediante números se usa la
etiqueta <ol></ol> y el resto igual que <ul></ul>.
Se puede modificar las listas con atributos de tipo y de inicio.
Ordenadas

Desordenadas

Dentro de un <ol></ol> o <ul></ul> solo puede haber elementos <li></li>


Las listas se pueden anidar agregando un <ol></ol> o <ul></ul> dentro de un <li></li>
Multimedia

Para mostrar una imagen en la pagina se usa la etiqueta img que tiene como atributo src
(source) teniendo como valor la ruta donde se encuentra la imagen (funcionan de la misma
manera que los links, de manera local o externa.

El inconveniente de usar una ruta externa es que si se borra


la imagen del servidor se borrará la imagen de mi página.

Para hacerlo de manera local se debe guardar la imagen y


hacerlo igual que en los links locales

NOTA: Los siguientes atributos no son recomendables usarlos ya que normalmente se utiliza
CCS para modificar y darle estetica a las pagina, HTML es para estructurar, aun asi se van a
ver para tenerlos en conocimiento.

Atributos width y height son para modificar el tamaño de la imagen. Si se pone un atributo de
esos dos automáticamente mantiene la proporción de la imagen. Si se utilizan los dos
atributos si no respetara la proporción

En este caso la imagen esta desproporcionada.

NOTA: Si definimos las medidas en HTML NO vamos a poder


modificarla en CCS.
NOTA2: La etiqueta img no es necesario cerrarla.
El atributo alt para las imagenes es muy importante para el SEO,
haciendo que la imagen tenga una especie de titulo.
Hace que en caso de no poder cargar la imagen aparecera el titulo del
la imagen.

El atributo title nos permite ponerle un titulo que aparecera arriba del cursor cuando este sobre la
imagen.

Video

Para agregar un video a la página se usa la etiqueta <video></video>. Al


igual que en img usa el atributo src.

NOTA: El link del video debe contener al final la extensión del mismo, en este caso .ogg
También púede ser mediante un archivo local

A esto le estaría faltando el atributo controls para poder ver


el video. Este atributo tiene un valor determinado por el
navegador, por lo tanto no debemos ingresarlo nosotros.
NOTA2: Con el atributo autoplay hacemos que el video se reproduzca apenas cargar la pagina. Con
el autributo muted hace que quede muteada la reproduccion.
NOTA3: Utilizando la etiqueta <source></source> se puede agregar diferentes fuentes por si el
navegador no permite una extension. Siendo src=”” la fuente y type=”” el formato.

Audio
Para agregar un audio a la página se usa la etiqueta <audio></audio>

NOTA: El atributo controls también debe usarse en la etiqueta audio

Para agregar un audio de manera local es igual que un video (debe incluir la extensión del
archivo)

NOTA2: Al igual que video puede usarse autoplay, muted y source y un mensaje en caso de que no
funcionen las fuentes.

Multimedia de terceros

La etiqueta <iframe></iframe> nos permite utilizar contenido multimedia de otras paginas. por ejemplo
un video de youtube, sonidos, mapas, etc.

Los atributos width=”” y height=”” permiten cambiar el tamaño, src=”” es la fuente de donde se saca,
titled=”” el titulo del video, frameborder=”” son los bordes del video, allow=”” son acciones que se
permiten hacer con el video y allowfullscreen permite pantalla completa.
Para los mapas es de la misma manera

NOTA: el atributo loading=”lazy” hace que el mapa se vaya cargando a medida que nos
desplazamos.
Div
Es una etiqueta que permite separar y agrupar contenidos.
Suponiendo que las etiquetas son cuadros, el div nos permite delimitar los cuadros en
diferentes bloques. Puede usarse por ejemplo para limitar la linea completa de un titulo
h1.

Span
Por otro lado la etiqueta <span></span> es un elemento en linea, por lo tanto ocupa el ancho de el
contenido.
Center

La etiqueta center permite centrar el contenido. Normalmente no se usa mucho ya que la parte
estetica se hace en CCS. Sirve tanto para imagenes como para texto, etc.

NOTA; No es muy aconsejable usar el center ya que dificulta la lectura del codigo y los fines
visuales se resuelven en CCS
Formulario

Para crear formularios se usan la etiqueta <form> </form>. Estas etiquetas tienen atributos que se
llaman <input>.
NOTA: Input es la entrada de datos, luego viene el procesamiento de datos y después el output.
Los atributos que tiene input son type y name
Type es el tipo de informacion que ingresa (typear), puede
ser texto, contraseña, numero, email, etc.
Name es el nombre del dato que ingresa el usuario, en ese
caso seria el valor nombre de ese input.
Cuando hacemos un input por defecto lo pone como texto

En el valor range podemos


poner atributo min para darle un
minimo y max para darle un
valor maximo.

El valor de button debe tener un


value si o si, lo que ponga en
ese atributo aparecera como
nombre en el boton.

En submit es un boton que nos


envia los datos
En el valor color nos permite
elegir un color

Agregarle el valor required hace que sea un valor obligatorio si se quiere enviar los datos

NOTA: Para un boton de seleccionar archivo se usa <input type=”file”> y agregandole el atributo
multiple, permite seleccionar varios archivos.
Cuando se trabaja con Backends se usan métodos de encriptacion. Hace que se envien los
datos al servidor.

Etiqueta textarea
La etiqueta <textarea></textarea> permite crear un campo para agregar texto

Agregarle el atributo readonly hace que sea un cuadro de solo lectura


NOTA: Se aconseja usar el atributo disabled, en lugar
de readonly, ya que queda mejor a nivel estetico.

NOTA2: Se puede ponerle un tamaño


default al textarea con los atributos
cols=”” y rows=””

NOTA3: Agregar el atributo value=”” a un input text hara que aparezca ese texto dentro del cuadro

NOTA4: Agregando el atributo placeholder=”” hace que el contenido en el interior del atributo aparezca
engris claro en el input

NOTA5: con el atributo autofocus hace que ese input aparezca resaltado para darle enfasis a su llenado
al iniciar la pagina.
NOTA6: Agregar los atributos minlength=”” (minimo) y maxlength=”” (maximo) hara que acotemos la
cantidad de caracteres que se pueden poner al input text

Para el caso de numeros se pone el atributo min=”” y max=””

NOTA7: Con el atributo autocomplete=”off” hacemos que no quede el autocompletado y deba ingresar
el texto manualmente

Etiquetas select y option

Se utilizan para crear listas desplegables (tambien conocidas como menus desplegables o selectores)
en formularios web. Estas etiquetas permiten a los usuarios seleccionar una opcion de una lista
predefinida.

Submit
Es el elemento para enviar un formulario. Se
puede usar la etiqueta <button> o la etiqueta
<input> con el atributo type=”submit”

Metodos de envio method


Etiqueta label
La etiqueta <label></label> sirve para agregarle algun texto por delante del input text textarea, etc. Se
debe poner dentro del atributo for=”” el mismo nombre utilizado en el atributo id=”” del input text.

Input radio button

Es un input que permite poner varias opciones, sin embargo solo deja seleccionar una de ellas. Para
usarlo se debe poner radio luego del atributo type=””.

NOTA: Si intento seleccionar otra opcion, la primera opcion seleccionada sera desmarcada.

Input type checkbox


Al igual que input radio button permite poner varias opciones pero a diferencia del primero este permite
seleccionar varias opciones. Se usa poniendo checkbox en el atributo type=””

NOTA: el atributo value=”” nos sirve que para recabar informacion al momento de enviar el formulario,
agrega un valor que pueda significar algo en la informacion recibida del formulario.
Al momento de enviar el formulario, se envia en la url todos los datos puestos, ya que si no se
especifica, los datos son enviados por el metodo get que es el default

Al no especificar, se toma como que en el atributo action=””, del form, esta vacio, y en el atributo
method=”” hay un get. Escrito seria algo asi:

NOTA: En el atributo action=”” del form normalmente suele haber algun tipo de receptor backend que
puede procesar la informacion

Con el method post, se envia en el body con una informacion HTTP

NOTA2: Dependiendo de cómo tengas


configurado el navegador puede ser
que te aparezcan distintos los
nombres, pero la informacion es
enviada de la misma manera.
Estructuracion de pagina web

Lo primero que tienen las paginas es un encabezado y un nav (donde el usuario pueda navegar),
pueden estar juntos o separados.

El contenido de la pagina se separa en secciones. Teniendo una central y unos articulos


secundarios (a side), y un pie de pagina en la parte inferior.

Para hacer el nav debe incluirse en el header (encabezado)


Metadatos

Los metadatos son una especie de informacion que describen la informacion de un objeto.
Describe recursos (un video, etiquetas, descripcion, etc.)
La etiqueta <meta> se pone en el head. La etiqueta <meta> tambien sirve para cambiar algo,
afirmar, como por ejemplo la codificacion para que se pueda usar acentos (agregandole
charset=”utf-8")

Esta etiqueta tambien sirve para


agregarle palabras claves que puedan
aparecer en resultados de busqueda en
los motores de busqueda.
Para este se utiliza name=”keywords”.
Utilizando name=”description” permite
crear una peque;a descripcion sobre la
pagina.
Name=”author” es [para informar el autor
de la pagina.
Name=”copyright” es para indicar si tiene
copyright y a que empresa pertecnece.
Name=”robots” es para indicar si la pagina es index o no. (noindex hace que la pagina no aparezca
en los motores de busqueda)
La etiqueta <article></article> nos permite crear un articulo, se utiliza para que quede bien
semanticamente, en el caso de tener muchos articulos, dentro de la etiqueta <article> se utilia la
etiqueta <section></section>. Este <section></section>contiene h1, h2, p, etc

La etiqueta <aside></aside> nos permite crear una seccion en la que se vean otras cosas para
atraer la atencion sin quitar protagonismo al articulo principal.
NOTA: En html el aside aparece abajo, normalmente va a un costado pero eso se pone con
CCS

La etiqueta <footer></footer> nos


permite hacer un pie de pagina, en
este caso contiene los enlaces a
otras redes y el tema del copyright.
Tablas

Son estructuras de columnas y filas. Se trabajan con la etiqueta <table></table>.


la etiqueta <tr></tr> son para definir las filas, para definir los campos por fila usamos la etiqueta
<td></td>

Cada fila es un tr entero y cada dato es un td.


A <table></table> se le puede dar propiedades,
como por ejemplo agregarle borde; border=””

Tambien puedo usar la etiqueta <th></th> que


se utilizaria para el titulo de las columnas
(table header). <th>
<tr>

Para centrar el contenido de una tabla debo usar la


etiqueta <center></center> dentro del td

<td>
Agregar colspan=”” hace que un titulo por ejemplo, ocupe una cantidad de columnas deseadas
(dependiendo del numero puesto entre comillas) en la tabla. Por ejemplo en este caso se pone que
Nombre y Apellido ocupe 2 columnas. Ayuda a extender horizontalmente.

Ocupa el espacio de 2 columnas

Para el caso de extender verticalmente se utiliza rowspan=””

ocupa 2 filas

Con <colgroup></colgroup> podemos agrupar para modificar ciertas partes. en este caso de utiliza
para cambiar el color de fondo de la columna 1 (span=”1")
Icono de pestaña Favicon

Para poner icono en la pestaña se usa la etiqueta link y el atributo rel para luego usar href
donde se pone el enlace/ruta donde se encuentre el archivo
NOTA: El formato de la imagen debe ser .ico (cambiando el nombre de la extension de la
imagen).
NOTA2: Esto se hace en el head

También podría gustarte