Resumen HTML: (utilizando Visual Studio Code)
Etiquetas HTML
- Comando htm5 (crea la base de la web en html)
<h1-6></h1-6> Títulos (google usa como referencia H1, no se puede repetir el uso de H1,
pero h2 y h6 se puede repetir las necesarias con diferente texto.
<meta charset="UTF-8"> sirve para que el sitio no tenga errores con carácteres especiales
Tipos de etiqueta:
En Linea: Utilizan una porción solo necesaria, solo su contenido.
En Bloque: Utilizan todo el ancho de la página.
Etiquetas de párrafo
<br> Punto y aparte
<b> </b>/ <strong></strong> negrita (tiene importancia semántica)
<i> </i> Italic (sin importancia semántica)
<em> </em> Enfasis, tiene importancia semántica.
<small> </small> Achica la fuente
<del> </del> Tachado
<ins> </ins> insight, utilizado como "update" a ser resaltado recientemente
<sub> </sub> Subindice (texto menor a la derecha)
<sup> </sup> es utilizada para representar texto en forma de superíndice
<img> para agregar imagenes de la siguiente manera.
Src="--" : atributo source, para decirle al codigo de donde sacar la imagen.
Ejemplo: <img src="home/imagen.jpg">
Source puede estirar la imagen de donde sea mientras sea dentro del servidor o tambien
fuera de el por medio de un hipervinculo o link.
Ejemplo: <img src="https://img.freepik.com/foto-gratis/collage-paisaje-montanas-
magicas_23-2150800059.jpg">
De esa manera buscará esa imagen en el link que hayamos definido como origen.
Otros comandos utiles para cuando necesitas cargar una imagen en el sitio son:
alt="---": Sirve para hacer saber al usuario en caso de que la imagen no se cargue
correctamente, que se supone que debía ser.
Title="---": Sirve para dar un texto cuando se realize un mouseover sobre la imagen, se
puede utilizar para dar crédito de la imagen o simplemente para resaltar de que se trata.
Width="--" Para editar el ancho de la imagen (recomendado)
height="--" Para editar el alto de la imagen
<a> </a> Insersor de atributos:
Subdivisión de atributos
href="abc" : para insertar un enlace a un texto o imagen
(Ejemplo <a href:"https://www.google.com">Google</a>
En caso de imagen sería :
<a ref=" https://www.google.com">
<img src="imagen.jpg" alt="imagen">
</a>
# = sirve para que el enlace no vaya a ningun lado luego de accionar
target="...." se utiliza para redireccionar
Dentro de target tenemos la opción _blank para enviar a nueva pestaña luego del click
Ejemplo: <a target="_blank" href="https://www.google.com"> Google. </a>
Enviaría al usuario que da click en la palabra "Google." a una nueva pestaña donde la página
oficial de google sería abierta.
, Sin embargo si queremos que se redirecione a otro lado dentro de nuestro propio sitio web,
solo basta con agregar el nombre del archivo htm al que se quiere redirecionar
Ejemplo: <a target="_blank" href="home.htm">Inicio</a>
En caso que la página dentro de nuestra web no esté dentro de la misma carpeta donde el
usuario esté navegando, debemos mencionar primero la carpeta donde se encuentra el archivo htm
para que el código lo reconozca debidamente.
Ejemplo: <a target="_blank" href="Home/home.htm">Inicio</a>
En el ejemplo vemos donde Home hace referencia a la carpeta donde la página home.htm
está alojada en el servidor de nuestro sitio web.
Listas:
Hay desde listas desordenadas y ordenadas, y todas se pueden utilizar con las
siguientes etiquetas:
<ul>
> Se utiliza para iniciar y cerrar la lista por viñetas no ordenadas.
</ul>
<ol>
> Se utiliza para iniciar y cerrar la lista por numeración ordenada.
</ol>
Todas las listas necesitan de la etiqueta <li></li> para ingresar los datos a ser listados.
Se puede utilizar una lista ordenada dentro de una lista desordenada utilizando la etiqueta
<ol> dentro de una de las opciones listadas.
Ejemplo:
<ul>
<li>Html</li>
<li>CSS</li>
<ol>
<li>Responsive Design</li>
<li>Flexbox</li>
</ol>
<li>JavaScript</li>
</ul>
Dandonos el resultado:
• Html
• CSS
1. Responsive Design
2. Flexbox
• JavaScript
Se puede enlazar todo lo necesario.
Se puede utilizar la etiqueta <a></a> "atributos" para agregar enlaces y otros atributos
necesarios.
Etiquetas HTML
- Comando htm5 (crea la base de la web en html)
<h1-6></h1-6> Títulos (google usa como referencia H1, no se puede repetir el uso de H1,
pero h2 y h6 se puede repetir las necesarias con diferente texto.
<meta charset="UTF-8"> sirve para que el sitio no tenga errores con carácteres especiales
Tipos de etiqueta:
En Linea: Utilizan una porción solo necesaria, solo su contenido.
En Bloque: Utilizan todo el ancho de la página.
Etiquetas de párrafo
<br> Punto y aparte
<b> </b>/ <strong></strong> negrita (tiene importancia semántica)
<i> </i> Italic (sin importancia semántica)
<em> </em> Enfasis, tiene importancia semántica.
<small> </small> Achica la fuente
<del> </del> Tachado
<ins> </ins> insight, utilizado como "update" a ser resaltado recientemente
<sub> </sub> Subindice (texto menor a la derecha)
<sup> </sup> es utilizada para representar texto en forma de superíndice
<img> para agregar imagenes de la siguiente manera.
Src="--" : atributo source, para decirle al codigo de donde sacar la imagen.
Ejemplo: <img src="home/imagen.jpg">
Source puede estirar la imagen de donde sea mientras sea dentro del servidor o tambien
fuera de el por medio de un hipervinculo o link.
Ejemplo: <img src="https://img.freepik.com/foto-gratis/collage-paisaje-montanas-
magicas_23-2150800059.jpg">
De esa manera buscará esa imagen en el link que hayamos definido como origen.
Otros comandos utiles para cuando necesitas cargar una imagen en el sitio son:
alt="---": Sirve para hacer saber al usuario en caso de que la imagen no se cargue
correctamente, que se supone que debía ser.
Title="---": Sirve para dar un texto cuando se realize un mouseover sobre la imagen, se
puede utilizar para dar crédito de la imagen o simplemente para resaltar de que se trata.
Width="--" Para editar el ancho de la imagen (recomendado)
height="--" Para editar el alto de la imagen
<a> </a> Insersor de atributos:
Subdivisión de atributos
href="abc" : para insertar un enlace a un texto o imagen
(Ejemplo <a href:"https://www.google.com">Google</a>
En caso de imagen sería :
<a ref=" https://www.google.com">
<img src="imagen.jpg" alt="imagen">
</a>
# = sirve para que el enlace no vaya a ningun lado luego de accionar
target="...." se utiliza para redireccionar
Dentro de target tenemos la opción _blank para enviar a nueva pestaña luego del click
Ejemplo: <a target="_blank" href="https://www.google.com"> Google. </a>
Enviaría al usuario que da click en la palabra "Google." a una nueva pestaña donde la página
oficial de google sería abierta.
, Sin embargo si queremos que se redirecione a otro lado dentro de nuestro propio sitio web,
solo basta con agregar el nombre del archivo htm al que se quiere redirecionar
Ejemplo: <a target="_blank" href="home.htm">Inicio</a>
En caso que la página dentro de nuestra web no esté dentro de la misma carpeta donde el
usuario esté navegando, debemos mencionar primero la carpeta donde se encuentra el archivo htm
para que el código lo reconozca debidamente.
Ejemplo: <a target="_blank" href="Home/home.htm">Inicio</a>
En el ejemplo vemos donde Home hace referencia a la carpeta donde la página home.htm
está alojada en el servidor de nuestro sitio web.
Listas:
Hay desde listas desordenadas y ordenadas, y todas se pueden utilizar con las
siguientes etiquetas:
<ul>
> Se utiliza para iniciar y cerrar la lista por viñetas no ordenadas.
</ul>
<ol>
> Se utiliza para iniciar y cerrar la lista por numeración ordenada.
</ol>
Todas las listas necesitan de la etiqueta <li></li> para ingresar los datos a ser listados.
Se puede utilizar una lista ordenada dentro de una lista desordenada utilizando la etiqueta
<ol> dentro de una de las opciones listadas.
Ejemplo:
<ul>
<li>Html</li>
<li>CSS</li>
<ol>
<li>Responsive Design</li>
<li>Flexbox</li>
</ol>
<li>JavaScript</li>
</ul>
Dandonos el resultado:
• Html
• CSS
1. Responsive Design
2. Flexbox
• JavaScript
Se puede enlazar todo lo necesario.
Se puede utilizar la etiqueta <a></a> "atributos" para agregar enlaces y otros atributos
necesarios.
