El curso de HTML que debe ser ordenado y estructurado para poder entender y tener toda la
información de manera adecuada:
con este curso podremos no solo aprender si no también repasar cada vez que lo necesitemos
y así tener la mejor herramienta a la hora de empezar a escribir código¡
lo primero que debemos saber es que HTML: lenguaje de marcado de hipertexto, es un
lenguaje que sirve para estructurar la pagina e ingresar la información que queremos tener en
ella
lo primero que debemos hacer es crear un documento con el tipo de archivo que en este caso
es .html (es un formato)
este lenguaje se basa en etiquetas de las cuales cada una tiene un valor de código
estructura inicial:
<etiqueta atributo=”valor”></etiqueta>: esta es la estructura de las etiquetas en su mayoría dentro de
HTML y es como decirle a la pagina que tenemos un objeto que a su vez tiene un atributo( son las
propiedades o características que tiene la etiqueta)y podemos incluir muchos atributos a una etiqueta
como tamaños, bordes y otros mas y a su vez tienen un valor que siempre se pone entre comillas,
ejemplo:
hay 2 tipos de etiquetas que a su vez se desprenden muchas mas
las que se cierran solas:
<br>: esta etiqueta sirve para separar párrafos o para terminar de completar la linea
las que se abren y se cierran:son porque llevan contenido adentro de ellas la que usamos en el ejemplo
sirve para mostrar títulos y
<h1></h1>
HTML es etiquetas dentro de etiquetas y ya, asi de simplificado y lo importante de estas etiquetas es que queden
bien estructurada
Estas etiquetas ocupan toda la línea de la etiqueta en la que se encuentre(ocupar de extremo a extremo la
etiqueta)
Estas etiquetas se adaptan al tamaño del contenido (varias etiquetas en una sola línea)
Etiquetas de navegación:
existen 2 tipos de ruras, las locales (las que tenemos en nuestras carpetas del ordenador en esta debemos seguir
la ruta de donde esten guardadas)
y las externas (las que no tenemos de manera local y estan fuera de nuestro ordenador y en esta debemos usar
protocolo: https)
Si quieres que te redireccione a la pagina anterior simplemente en la etiqueta <a
href="[Link]">volver</a> con la ruta de la pagina principal
de esta manera tenemos varias paginas dentro de un mismo sitio que seria como un conjunto de paginas dentro
de la misma pagina
pero si queremos que el enlace se abra en una pestaña aparte para que no se vaya de nuestra pagina debemos
incluir un atributo a la etiqueta llamada <a href=”[Link]
Y esto:
Se convierte en esto:
listas
Las desordenadas que se usan con <ul></ul> y dentro de esta etiqueta están los <li></li> que son los elementos
de la lista
Y esto:
Seria esto:
Las ordenadas que se usan con <ol></ol> y dentro de esta etiqueta están los <li></li> que son los
elementos de la lista y lo único que diferencia estas de lasa otras son que en vez de salir puntos salen
números ennumerando los ítems
Etiquetas multimedia
Las etiquetas de multimedia sirven para agregar contenido multimedia a la pagina
Existen:
<img src=""> para imágenes y tiene 2 atributos para aumentar o disminuir tamaño de la imagen que son :
<img src="[Link]"width="200px">
<img src="[Link]" height="300px">
estos atributos deben estar sobre las mismas medidas o pixeles porque si no queda distorsionada la imagen y
estos atributos es mejor no usarlos porque con CSS podemos modificar tamaños
y esto:
Es esto:
<video src="video.mp4"height="300px" controls=""></video>
Esta seria la del video que es exactamente igual a la de imagen solo que reproduce video y tiene un atributo que
se llama controls y sirve para que el video se pueda reproducir y también se le adiciona el tributo heigt para
ajustar tamaño
Y con audio es lo mismo:
<audio src="video.mp4" controls=""></audio>
quedaría asi:
Div:
para estructurar de manera correcta se utiliza la etiqueta <div></div> porque separa y agrupa el contenido,
aunque se usa mayormente en CSS también es bueno implementarlo en HTML y asi semánticamente queda bien
Esto:
Quedaría asi:
Formularios:
Estas etiquetas sirven para enviar datos que se ingresan a la pagina, como usuario, clave y otros datos que usamos
para ingresar a alguna cuenta, tenemos varias etiquetas y botones que podemos incluir
El usuario envia esos datos para que el servidor los reciba y procese esa información
Esto:
Seria esto:
Cada espacio tiene un valor, como se ve en la imagen del editor de código cada etiqueta tiene un valor y un
atributo y el required=”” quiere decir que es obligatorio llenar el campo
Metadatos:
Lo que hacen los metadatos es describir recursos es describir información que no se puede ver porque esta se
ubica dentro del heat y posicionar mejor la pagina, que si un usuario la quiere encontrar le sea mas fácil o al
contrario no la pueda encontrar
En la imagen se ven las 5 mas relevantes pero hay otras mas y como se puede observar en las etiquetas meta,
estas nos ayudan a posicionar mejor la pagina
Y el usuario jamás accede a esta información
Estructura de una pagina con HTML:
Una pagina de internet se vasa en varias secciones dentro de esta, para cada sección hay una etiqueta y esas son
las que veremos acontinuacion:
<header></header> es lo que encabeza la pagina, (es el letrero de bienvenida a la pagina) y dentro de esta esta
la barra de navegación que es el <nav></nav> y este nos envia a distintas partes de la pagina y esas distintas
partes las creamos nosotrosa mismos dentro dev la misma pagina guardándolas siempre dentro del mismo
documento con el formato .HTML y para ponerlas se usan las listas que habíamos visto anteriormente y casi
siempre se usan listas desordenadas <ul></ul> y dentro de estos también van los <li></li> y dentro de este va
<a href=""> y asi podemos crear secciones dentro de la misma pagina
SENCILLO¡
Seria esto:
Se ve un sencillo menú pero recuerden que cuando damos click a cada opción envia a una pagina dentro de la
pagina con la información que hemos creado
Y dentro del editor de código en la parte del incicio de la pagina como se ve en la imagen anterior quedaría asi:
Y en la pagina se vería asi:
Esto seria una pagina bien estructurada con HTML
Tablas:
Las tablas tienen columnas y filas , las columnas son campos en los que vamos recopilando datos de un solo tipo
por ejemplo todos los nombres de la base de datos u apellidos pero esa columna es solo para datos de un solo
tipo y se hacen asi
<table>
<tr>
<td><b>nombre</b></td>
<td><b>apellido</b></td>
<td><b>edad</b></td>
</tr>
</table>
Con la <table></table> estamos creando la tabla, con <tr></tr> estamos creando la lista y con <td></td> estamos
creando la columna
Quedaría asi:
y se vería asi:
Ahora veremos atributos y etiquetas importantes dentro de las etiquetas:
alt=”” es importante colocarlas dentro de las imágenes para que defina una espcie de titulo y es vital usar este
atributo
<center></center> sirve para centrar las imágenes, videos, textos, tablas o cualquier información que tengamos
en nuestra pagina aunque esta etiqueta no es muy recomendable usarla y es mejor centrar la información con CSS
Para enviarnos a secciones de la pagina podemos crear “atajos” con <a href="#codigo">click aqui para ir al
codigo</a> seria donde deberías hacer cleck para que te envie a <h2 id="codigo">el codigo es: dethrseygs</h2>
entonces con estas etiquetas puedes ir de un lado a otro sin tener que viajar por toda la pagina
Seria asi:
Y se vería asi:
Icono:
Esta etiqueta dentro del head sirve para ponerle el icono a la pestaña de la pagina y asi personalizar nuestra
pagina mucho mejor
<link rel="icon" href="[Link]" > pero el formato de la imagen no puede ser PNG ni JPG, solo debe ser .ICON
para que sea compatible
Esto:
Seria esto que se ve en las pestañas con sus iconos cada pagina: