HTML
SIGLAS: Hypertext markup language-Lenguaje de marcado de hipertexto
HTML: es un lenguaje de modelado de etiquetas
estructura:
el comando inicial acerca de la estrucuta de este es: html:5 (al menos en visual
studio nose si sea por defecto en todos los IDE )
este nos abrira lo siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
NOTA:
Siempre que se abra algun tag se debe cerrar con una diagonal /
P/E:
<html></html>
NOTA:
<!DOCTYPE html>
especifica que es un documento tipo html
<html lang="en">
especifica el lenguaje que se va a trabajar(en este caso en ingles)
<meta charset="UTF-8">
protocolos de tipos de caracteres que nos permiten utilizar caracteres como ñ,',&
entre otros
<meta name="viewport" content="width=device-witdh, initial-scale=1.0">
Es la forma de inicializar el contenido en una escala de 1.0(normal)
NOTA: consejo para que el codigo se acomode conforme la pantalla
ATAJO:
ctl+shift+p
Este abrira el buscador, dentro de el digita
word wrap
Se divide inicialmente en dos ramas:
HEAD: <head></head>
Esta zona es la cabeza de la pagina, al parecer generalmente se usa en esta zona la
programacion de css // Puede, pero no deberia
Tambien se uas para darle el titulo a la pagina web con el tag/etiqueta
<title></title>
BODY: <body></body>
Esta zona basicamente es el cuerpo de la pagina web, desde los encabezados hasta
parrafos,titulos,enlaces,imagenes,e.t.c
Se usan una cantidad de tags algo variados y extensos:
NEGRITAS:
El texto ingresado lo pone en negritas
<b>TEXTO</b>
ENCABEZADOS:
Estos se ocupan para dar titulos y subtitulos en cuanto a la pagna web y su tag es
h, son 6 tipos de encabezados y todos tiene un numero diferente
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
las diferencias entre estos son el tamaño y la posicion(mayormente tamaño).
Solo se debe usar un <h1></h1> esto para quedar en mejor posicion en cuanto al
algoritmo del motor de busqueda del navegador, ya que el motor de busqueda y
posicionamiento se basan en etiquetas
y si usas etiquetas pueden llegar a penalizarte de cierta forma, y esto haria que
quedaramos hasta el fondo de la busqueda
los demas encabezados se pueden usar cuantas veces quieras.
PARRAFOS:
Estos se ocupan como el nombre dice para formar parrafos
<p></p>
no necesitan mucha explicacion
B:
La etiqueta <b></b> se utiliza para poner en negrita el texto deseado.
STRONG:
Esta etiqueta a diferencia de la anteriormente vista se utiliza para dos cosas,
primera; poner en negrita el texto deseado, segunda; Para que el CEO le de
importancia a nivel semantico
<strong></strong>
LISTAS:
Existen dos tipos de listas en esta seccion, listas ordenadas y listas
desordenadas.
ordenadas: estas generalmente se usan para darle prioridad a ciertas cosas(como
decirlo... un ejemplo un top de ciertas cosas y de ahi se les asigna un numero)
<ol></ol>
desordenadas: Son usadas para enlistar sin mas, no dan ningun tipo de prioridad
entre elementos(un ejemplo... una barra de tareas)no tiene necesidad de enumerar
las cosas o darle mas prioridad una que a la otra
<ul></ul>
listas de items: Estas listas van dentro de las listas anteriormente vistas
<li></li>
Tal vez sea similar a la clasificacion o estructura de la programacion orientada a
objetos, realmente desconozco ese aspecto
elemento de lista declara cada uno de los elementos de una lista.
ENLACES:
se inician con la etiqueta <a></a> //tag
con esta etiqueta podemos crear enlaces
sin embargo para que estos enlaces funcionen debemos agregar href=""
posteriormente el enlace: EJEMLPLO
<a href="ENLACE"></a>
con esto leera nuestro enlace y nos mandara a la direccion deseada
aunque a nuestro enlace debemos agregar: https://
esto porque sin ello buscara alguna ruta en nuestro ordenador y no nos enviara a la
pagina que queremos
Posterior a eso el nombre de nuestro enlace, lo que aparece como enlace 4
EJEMPLO:
<a href="https://ENLACE">NOMBRE DE NUESTRO ENLACE</a>
NOTA: Si tu pagina web se encuentra en una carpeta necesitaras poner el nombre de
la carpeta
EJEMPLO:
href = ""
Para conectar nuestros archivos o codigos de web de html entre si debemos haer lo
sguiente
<a href="NOMBRE_DE_TU_ARCHIVO.html">NOMBRE_DEL_ENLACE</a>
con esto puedes viajar entre tus propios archivos.(viajar entre paginas web)
Si el objetivo es que los enlaces se abran en la misma pagina necesitamos añadir lo
siguiente
<a href="ENLACE"target ="_self"></a>
Si el objetivo es que los enlaces se abran en otra pestaña tenemos que cambiar el
target
<a href="ENLACE"target ="_blank"></a>
Otro atributo de los enlaces es el siguiente: title="TEXTO QUE APARECERA"
<a href="ENLACE"title = "TEXTO DESEADO"></a>
Con esto se logra obtener un recuadro que aparece al tener el cursor en el enlace.
Correcion este atributo no solo funciona en cuanto a enlaces sino para cualquier
cosa(usualmente se usa para obtener informacion de ciertas cosas P/E: imagenes,
listas, e.t.c)
IMAGENES:
La siguiente etiqueta a ver sera: <igm>:
Esta funciona de una manera un poco diferente a las demas ya que no tenemos
necesidad de cerrar la etiqueta solamete basta con <igm>. (selfclosing
tags)ETIQUETAS QUE SE AUTOCIERRAN.
dentro de esta etiqueta colocaremos el siguiente atributo:
<igm src = "RUTA DE LA IMAGEN DESEADA">
etiqueta alt = "" : como su nombre lo dice "alternatice", nos sirve para tener
alguna informacion extra por si nuestra imagen se rompe entre otras cosas. EJEMPLO:
<igm src = "RUTA DE LA IMAGEN DESEADA" alt = "DESCRIPCION DE LA IMAGEN">
este texto solamente sera visible si la imagen tiene algun error de carga.
NOTA: Tambien puede servir para el CEO posicionamiento de la pagina web
RUTAS:
ACCESO A ELMENTOS DE OTRAS RUTAS
existen dos tipos de rutas: las absolutas y las relativas.
RUTAS ABSOLUTAS: es un recurso que accede a absolutamente todo. (URL,LINK,E.T.C)
sin necesidad de estar en la misma carpeta o archivo.
La ruta absoluta representa la ruta completa del recurso, parte del directorio raíz
hasta llegar al archivo concreto que se está buscando
RUTAS RELATIVAS: es lo opuesto, necesita estar en la misma carpeta o archivo
generalmente, sin embargo se pueden mandar a llamar de distintas manteras
dependiendo de la posicion de las carpetas
la ruta relativa representa solo una parte de la ruta, ya que en ella se tiene en
cuenta el directorio actual desde el que se está trabajando.
en el caso de las rutas relativas tenemos que saber en que carpeta esta nuestro
objetivo, si esta una carpeta atras, una carpeta adelante o en la misma carpeta.
Para llamar un archivo que esta una carpeta atras necesitamos agregar lo siguiente:
"../"
buscara basicamente uan carpeta atras y nos dara acceso a cualquier elemento que
llamemos de aquella carpeta.
EJEMPLO:
<a href = "../RUTA DE LA IMAGEN, CODIGO, LINK, ETC, DESEADOS">ENLACE A IMAGENES</a>
(DE ADENTRO HACIA AFUERA.)(UNA CARPETA HACIA ATRAS O AFUERA)
<a href = "../../RUTAA DE LA IMAGEN,CODIGO,LINK,ETC, DESEADOS">enlace aimagenes</a>
(DE ADENTRO HACIA AFUERA)(DOS CAPETAS HACIA ATRAS)
Para llamar un archivo que esta una carpeta adelante
<a href = "NOMBRE DE LA CARPETA A BUSCAR/NOMBRE ARCHIVO">enlace</a>
(DE AFUERA HACIA ADENTRO)(UNA CARPETA)
<a href = "NOMBRE DE LA CARPETA A BUSCAR/NOMBRE SEGUNDA CARPETA/NOMBRE
ARCHIVO">enlace</a>
(DE AFUERA HACIA ADENTRO)(DOS CARPETAS )
FORMULARIOS Y INPUT:
<form></form>
se utiliza para crear un formulario que recopila datos del usuario y los envía a
un servidor. Los elementos dentro de un <form> incluyen campos como <input>,
<textarea>, y botones <button> o <input type="submit">, que permiten a los usuarios
ingresar información. El atributo action especifica la URL a la que se enviarán los
datos, y method define el método de envío (por ejemplo, GET o POST).
<form>
<input type = "">
</form>
Se puede de usar de varias maneras todo esto funcionaen base a la logica y
imaginacion de uno mismo
Dentro de input se puede poner el tipo de texto o valor e.t.c que necesitas que se
envie.
<input type = "">
Adelante de type podemo poner value que es lo que tiene adentro de las cosas
<input type = "" value = "">
TYPE:
Este nos permitira abrir mcuhas posibilidades en cuanto a la interaccion de nuestro
sitio web con el usuario.
Los vistos hasta ahora son:
<input type = "text">
Este crea globos de texto para poder escribir en la pagina web.
<input type = "email">
Este crea globos de texto para poder escribir en la pagina web, con la diferencia
que le dira al usuario que debe ser una sintaxis de correo.
<input type = "password">
Este crea globos de texto para digitar una contraseña dentro de este, haciendo que
lo escrito aparezca en puntos.
<input type = "checkbox">
Este crea un recuadro, el cual al clickear aparecera con una paloma de verificacion
P/E:
el famoso "ACEPTAS TERMINOS Y CONDICIONES"
<input type = "radio">
Este crea una casilla de seleccion circular como formato de formulario de opcion
multiple
<input type = "file">
Crea un recuadro el cual nos permitira seleccionar un archivo de nuestro ordenador
local.
<input type = "submit">
Crea un boton, como el nombre lo dice para enviar cosas, a nuestra base de datos,
dominio e.t.c
<input type = "date">
Crea un recuadro el cual pedira una fecha
ATRIBUTOS:
Existen 4 atributos que son importantes para input, son los siguientes:
REQUIRED
Este atributo nos indicara que el campo de texto que al que se designe es
obligatorio llenar
<input type = "text" required>
Otra cosa que agregar, minimo de texto o digitos requeridos para un campo de texto
MINLENGHT
Se usa para establecer la cantidad mínima de caracteres que un usuario debe
ingresar en un campo. Si el usuario intenta enviar el formulario con menos
caracteres de los especificados, el navegador mostrará un mensaje de advertencia.
<input type ="text" required minlenght ="NUMERO_MINIMO_NUM/CARACTER">
NAME
Este atributo define al campo de texto entre otras cosas.
Con un nombre que personalizas.(SON INDENTIFICADORES)
<input type = "text" name = "NOMBRE_PERSONALIZABLE">
(basicamente el nombre de una variable)
PLACEHOLDER
Este atributo es visual, basicamente para mostrar un texto de ejemplo dentro del
campo antes de que el usuario ingrese datos. Este texto desaparece cuando el
usuario comienza a escribir en el campo.
Se utiliza en elementos de entrada, como <input> o <textarea>
<input type = "text" placeholder = "TEXTO_QUE_APARECE_EN_RECUADRO">
CON ESTO DAMOS FIN A HTML...... NIVEL BASICO. unu
DATOS CURIOSO:
en la etiqueta parrafo podemos hcaer lo siguiente:
<p>lorem</p>
Esto abrira el camino hacia el siguiente texto:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque consequuntur
reprehenderit deleniti voluptates eveniet, non consequatur cumque excepturi ad
rerum tempora laborum tempore architecto nulla possimus dolorum sequi neque sunt!
Este es utilizado comúnmente como texto de relleno o demostrativo en el diseño
gráfico, desarrollo web y tipografía. Su función principal es ocupar el lugar del
contenido real en un diseño o maqueta, permitiendo a los diseñadores visualizar
cómo se verá el diseño con texto sin distraerse con el contenido real.
¿De dónde proviene?
El "Lorem ipsum" tiene su origen en un texto de la obra "De finibus bonorum et
malorum" (Sobre los límites del bien y del mal) escrita por Cicerón en el 45 a.C.
El texto que se utiliza hoy en día es una versión modificada y sin sentido, ya que
el texto original en latín ha sido alterado.
¿Qué significa?
El "Lorem ipsum" no tiene un significado real como está escrito, ya que se trata de
un texto distorsionado del latín clásico. No está destinado a tener sentido, sino
simplemente a llenar espacio.
RECORDATORIOS
EXTRAS:
Estructura de la página: HTML organiza el contenido en elementos jerárquicos que
forman la estructura básica de un sitio web.
Etiquetas: Utiliza etiquetas que normalmente tienen una apertura <etiqueta> y un
cierre </etiqueta>.
Ejemplo: <p> define un párrafo.
Atributos: Las etiquetas pueden tener atributos que definen propiedades
adicionales. Ejemplo: src, alt en <img> para imágenes.
Multimedia: Permite incrustar imágenes, videos, audio, y otros elementos
multimedia.
Enlaces: Facilita la creación de hipervínculos mediante la etiqueta <a> para
conectar diferentes páginas o recursos.
Interactividad: Junto con CSS y JavaScript, permite la creación de sitios web
interactivos y dinámicos.
DIV:
Este elemento es un divisor, solamente divide
es un elemento de contenedor genérico utilizado para agrupar otros elementos y
aplicarles estilos o comportamientos comunes. No tiene un significado semántico
específico por sí mismo, pero es muy útil para organizar el diseño de una página
web.
<div></div>
para darle personalizacion en css necesitas 3 requisitos:
background
width
height
LAYOUST:
Son la estructura o disposición de los elementos en una página. Definen cómo se
organizan bloques de contenido, imágenes, texto, y otros componentes en un sitio
web. Los layouts son fundamentales para la usabilidad y estética de una página,
asegurando que el contenido se vea bien en diferentes dispositivos y resoluciones
(diseño responsive). Existen diversos tipos de layouts como el diseño en cuadrícula
(grid), diseño en una sola columna, multicolumna, y layouts flexibles con CSS Grid
o Flexbox para lograr distribuciones dinámicas.
