Curso gratis HTML


Metodologia:

El objetivo desde el inicio del blog y del canal de youtube, es poder explicar desde 0 lo que se debe hacer para crear una pagina web sin un conocimiento previo y os quiero ensenar algo que en realidad no se en este momento.

Quiero explicarles lo que voy aprendiendo cada dia por medio de internet y dejar los proyectos que voy haciendo en la web, donde pueden ir viendo cada vez que estudio, como va mi progreso y cuando lleve cierto tiempo, darse cuenta que pueden aprender este y generar dinero. Espero que con esta metodologia mi yo del futuro se de cuenta todo lo que he aprendido y asi mismo ustedes siguiendo esto, puedan inspirarse y generemos una comunidad de enseñanza gratis.

hoy 25 de abril del 2020 aprendi: Comprar un hosting, dominio, publicar mi primer sitio ("este que estan viendo"), instalar sublime text, crear subdominios, entender distribucion de carpetas, instalacion de certificados ssl, conectar archivo html con hosting, redireccionamientos

dia 1: Un concepto importante son las etiquetas, para el posicionamiento de un sitio web y la estructura de un sitio web, es por ello que usarlas correctamente nos va a permitir obtener mas visitantes, explicare las etiquetas principales a continuacion:

El h1 son los titulos y es uno de los reyes para los motores de busqueda, solo se puede usar una vez ya que le indica a Google cual es el tema principal y es muy importante seleccionar la plabra clave, ya no lo puedo usar mas porque ya lo use en el titulo

El h2 son lo subtitulos, le ayuda a los buscadores a estructurar la idea de nuestra pagina y a posicionar palabras clave, se debe hacer lo mejor posible para mejorar la lectura del usuario

Los h3 son subtitulos de los h2, no tiene tanta importancia en el seo pero ayuda la parte visual del usuario

Los parrafos tienen la etiqueta p

Para colocar las etiquetas en negrilla va la etiqueta b

Para unas negrillas que tienen mas poder en los buscadores colocas la etiqueta strong queda igual de negro pero ojo no abuses tanto.

Span no hace nada en lo cambio visual, pero con css hace estilos

Agrega texto en italica la etiqueta i

Blockquote hace una cita en algun libro etc

Con la etiqueta cite,se coloca el nombre del autor: Andrey cruz

Hr coloca una linea divisora seguimos con redirecciones


Para colocar una redireccion colocamos la etiqueta a, en href="URL">Texto Ir a Google

Para colocar un redireccionamiento relativo, creamos una carpeta o direccion y colocar el nombre, para colocar un ejemplo, donde esta mi index.html hay una carpeta que se llama redirección relativa, ahi coloque una imagen llamada blundur, tengo que colocar el href="redireccion relativa/blundur.jpg> Redireccion relativa" Redireccion relativa

Para colocar una redireccion en una nueva pestana sin que se borre mi sitio, se agrega target="__blank", en href="URL">Texto Nueva Pestana Google

Enviar correo




Dia 2: Aprendimos a crear listas ordenas y desorganizadas, a manejar imagenes, a crear tablas, manejar formularios

Para crear una lista desorneda agregamos la etiqueta ul y adentro la etiqueta li

Para crear una lista ordenada es con ol y adentro la etiqueta li igual pero aparece los numeros

  1. Item #1
  2. Item #2
  3. Item #3
  4. Item #4
  5. Item #5

Para agregar una imagen, agregamos la etiqueta img y su atributo src="carpeta/nombrearchivo.formato"

Para cambiar el tamaño agregamos el atributo width"" (ancho) y height "" (alto) y colocamos el tamaño en pixeles

La imagen anterior se ve desproporcionada, si colocamos una de las dos, se reestablece automaticamente el otro atributo.

Otro atributo dentro de la imagen se usa otro atributo que es el alt="" y principalmente muestra un texto cuando no encuentra la ruta de la imagen y ayuda a posicionar ya que describe la imagen, el atributo title nos brinda un titulo a la imagen y descripcion

tres perritos

La etiqueta table ayuda a craer tablas para mostrar datos, jamas las uses para estructurar tu sitio

etiqueta tr 1 (fila) td 1 (columna) etiqueta tr 1 (fila) td 2 (columna) etiqueta tr 1 (fila) td 3 (columna)
etiqueta tr 2 (fila) td 1 (columna) etiqueta tr 2 (fila) td 2 (columna) etiqueta tr 2 (fila) td 3 (columna)
etiqueta tr 3 (fila) td 1 (columna) etiqueta tr 3 (fila) td 2 (columna) etiqueta tr 3 (fila) td 3 (columna)

Para crear un formulario usamos la etiqueta form, colocamos input type "text", para entradas de texto. Usamos el atributo value="" para colocar el nombre de fondo

Con el atributo placeholder="" colocamos el nombre de fondo pero se borra, maxlengh="" te permite aceptar el tamaño maximo de caracteres, con name="" asignas el valor como se guardara el formulario en el servidor

Si agregamos un atributo id="a" este tiene que ir acompañado con un atributo label for="a" para que lo dirija a llenar el formulario

el atributo type="password" no permite ver el nombre al igual que el atributo type="email" valida que se escriba el correo electronio

el atributo type="checkbox" permite crear opciones para que la persona selecciona 1 o mas

Hombre Mujer Otro

el atributo type="radio" permite seleccionar una de las opciones pero a cada input tenemos que colocarle el name igual para que sepa cuales son las opciones

Hombre Mujer Otro

el atributo type="button" crea un boton y en value colocamos el nombre, con type="submit" el boton envia los datos, con la etiqueta select da opciones para seleccionar (revisar codigo fuente html para analizar la etiqueta select), select encierra las opciones que se van a mostrar y el option agrega las opciones y lo identifica el servidor de acuerdo al name que le dimos

Hay muchos mas que viene en html5 como el type="color", type="range", etc

Ir a día 3