ESTUDIO PROGRAMACIÓN
HTML: “ESTRUCTURADO DE WEB, NO DISEÑO”
Etiquetas…
<> = Abre comando.
</> = Cierra comando.
Href= / src= | Ruta de archivo, link, etc
<html> | Esto inicia una plantilla básica para empezar hacer la pagina.
<head></head> | Esto es el cabezal de la pagina.
<title></title> | Este es el nombre de la pestaña de la pagina.
<body></body> | Es el cuerpo de la pagina.
<p></p> | Párrafo.
<center></center> | Centra todo lo que este envuelto en ese comando (X)
<h1></h1> | Se puede hasta el 6, y son títulos cuales ocupan todo el espacio.
<b></b> | NEGRITA
<i></i> | Cursiva
<strike></strike> | TACHADA
<small></small> | CHIQUITA
<br> | Hace ocupar todo el espacio – Deja un renglon.
<link rel="icon" href="(nombre del archivo.ico)"> | Pone icono a la pagina
Links:
siempre el link va como: https://-----.
Cuando se quiere poner un archivo dentro de carpeta es es: carpeta/archivo.html
Si se quiere retroceder es: ../---
<a href="Aca va el link, o archivo" >Acá el nombre de la dirrecion</a>
⬆
Se le pueden añadir cosas
⬇
Target=”BLANK_”
ejemplos:
<a href="https://youtube.com/metallica" >Videos</a>
<a href="https://es.wikipedia.org/wiki/Programación" target="BLANK_">Mas información</a>
<a href="carpetalink/otroarchivo.html">Siguiente página</a>
<ul></ul> | Crea una lista, items con puntitos.
<ol></ol> | Crea una lista, items numerados.
<il></il> | Crea items para listas, o tambien individuales
Imagen:
<img src="Link de la imagen, o direccion local" > | Imagen
⬆
Se le pueden añadir atributos (mejor hacerlo en CSS)
⬇
alt="---"> | SIRVE MUCHISIMO PARA SEO, define titulo
title="---"> | Titulo de imagen (Pasas el mouse por arriba y salta mensaje)
width="tamaño en px" | Ancho de la imagen y se empareja al usarlo individual
height="tamaño en px" | Alto de la imagen y se empareja al usarlo individual
⬇
ESTOS DOS ATRIBUTOS SE PUEDEN USAR A LA VEZ, PERO QUEDA
MAL AL NO ESTAR PROPORCIONADO
Videos:
<video ></video> | Comando para poner algun video
⬆
Se le pueden añadir atributos
⬇
controls | Proporciona controles “predeterminados del navegador” al video
width="tamaño en px" | Ancho del video y se empareja al usarlo individual
height="tamaño en px" | Alto del video y se empareja al usarlo individual
PARA AHORRAR ESCRITURA, EL AUDIO, ES LO MISMO QUE ESTO, SE
LE TIENE QUE PONER CONTROL, UN ARCHIVO CON FORMATO
DE AUDIO Y LISTO, YA LO TENES.
<div></div> | Se usa como divisor (separar, agrupar, etc)
Formularios:
<form></form> | Se inicia un formulario
⬆
Se le añade atributos
⬇
<imput type=" " name=" "> | Entrada de texto que brinda el usuario
method="post" | Se envia a un servidor.
method="post" | Se envia en la propia pagina.
El NAME se usa para nombrar en el servidor
<input type="text"> | Escribe texto
<input type="password"> | Escribe contraseña
<input type="number"> | Escribe numero
<input type="email"> | Escribe email
<input type="color"> | Pone boton para selección de algun color
<input type="range" > | Pone una barra de rango (de 0 a x)
⬇
min="10" max="100">
<input type="date"> | Pone un boton para selección de alguna fecha
<input type="time"> | Pone un boton para selección de algun tiempo
<input type="button" value="nombre del boton”> | Pone un botón
<input type="submit"> | Pone el botón de enviar (envia a servidor)
required=""> | Se le pone algun input para que sea obligatorio
<textarea></textarea> | Área de texto (se le puede dar el tamaño que quieras) funciona como imput
⬇
readonly> | para leer nada mas
METADATOS:
Esto lo usa el navegador para reconocer ciertas cosas y organizarse...
<meta>
charset="utf-8"> | codificación universal
name="keywords" content="harina, leche, etc"> | palabras claves para busqueda
name="description" content="Describí la pagina ideal de 70 a 140 caract.">
name="autor" content="Axel Marchesani"> | Indica el autor de la página
name="copyright" content="Empresa Inc."> | Pone copyright de empresa
name="robots" content="index / noindex"> anula las keywords, es para incog.
name="robots" content="follow / unfollow"> | IDK, es algo del SEO
HTML Semántico:
Correcion en organización de escritura HTML…
Teoria:
1. Header = Presentación / menu / barra de busqueda, cuenta, etc.
2. Articulo = Y despues se divide en el mismo
3. Aside = barra lateral / cosas irrevelantes
4. Pie de pagina
Práctica:
<header></header | Encabezado
<nav></nav> | Dirige a distintas partes del pagina, como mi cuenta, privacidad, etc
(armamos lista con los distintos links) EJEMPLO:
<article></article>| Mostrar contenido de la pagina, va acompañado de…
<section></section> | Para mostrar un solo articulo o varios
<aside></aside> | Es al costado de la pagina y sirve para extras, secundarios
<footer></footer> | El pie de pagina donde va las redes, etc
Tablas:
Se agurpan datos que son del mismo tipo pero en columna
<table></table> | Inicia la tabla
<tr></tr> | Definir las filas
<td></td> | Campos por fila
Atributos a <table>:
border="-px"> | Le añade un borde (Mejor hacerlo con CSS)
PARA CENTRAR UNA TABLA NECESITAS PONERLO ENTRE LOS
TD, NO EN EL TR NI EN EL TABLE (NO RECOMENDADO, MAS
PARA CSS)
id="nombreunico"> | Le pone un nombre unico para identificar al ITEM
<a href="#(nombre del id)" | esto al hacer click te manda a la id
