Hola que tal bienvenidos aquí a Cybersy, a Conocimientos Libres
Vamos a iniciar
con el
pequeño curso de HTML
vamos a ver los fundamentos de HTML
HTML5 es un lenguaje
de Marcado
que permite
estructurar la página web
de manera sencilla
para poder así luego
mantener
un posicionamiento adecuado
sobre la página web
ya se para temas de SEO
para...
Entregar
una buena información al usuario
cuando visite
cualquier sitio web
la versión actual de HTML es:
5.2
que tiene que ver con HTML
viene de las siglas en inglés
HyperText Markup Lenguage = HTML
Lenguaje de Marcado de HyperTexto
¿qué quiere decir esto?, pues...
que es un lenguaje de marcado
no es un lenguaje de programación
es un lenguaje de marcado
¿qué tiene la versión 5?
nos dice que debemos de...
utilizar etiquetas
etiquetas
semánticas
que le den sentido a la información que se publica dentro de la web
primero
por ejemplo tenemos aquí cargada la página de conocimientos Libres
vamos a ver su código fuente
que este caso sería el HTML
para que apareza todo eso
vamos a ver...
su código fuente
simplemente bastaría con dar click derecho
ver código fuente, en este caso está en inglés dice: view page source
si observáis bien
podéis ver que para poder declarar
un archivo...
HTML, un documento HTML
la primera etiqueta obligatoria es ponerle el tipo de documento
HTML
luego vemos...
a esto se le llama etiqueta
hay etiquetas que se cierran solas
como las etiquetas
es decir
se puede escribir en una sola línea
por ejemplo aquí etiqueta
y aquí tiene una pequeña barra que indica
que esta etiquete se cierra
en la misma etiqueta
aquí
la barra
que puedes observar ahí
si trabajarmos con XML es obligatoria
pero
cuando estamos trabajando con HTML5
esa barra
podría haberla obviado
y no pasaría nada
si deseáis podéis colocarla
lo recomendable es colocarla aquí yo no lo he puesto
pero como os dije no es necesario colocarla
hay algunos desarrolladores que no la colocan
para ahorrar bits
al momento de escribir
luego tenemos las etiquetas...
que tienen su contraparte
es decir
la etiqute
como podéis observar ahí en la pantalla
tiene su contraparte, su etiqueta contraparte
donde esa etiqueta
tiene una barra
tiene un slash: /
donde indica pues que la etiqueta termina allí
en este caso tenemos el título que sería Conocimientos Libres
ahí lo puedéis observar
luego ya tenemos un sin número de etiquetas y propiedades
aquí hay bastante código
como puedes observar todo este código es para que...
pueda pintarse toda la página web
ya para que pueda estructurase
la parte del diseño
ya se encarga de eso...
HTML
junto a CSS
las imágenes son guardadas dentro de etiquetas también
por ejemplo, si queremos
saber dónde esta
esta imagen
nos vamos al código fuente
vamos a la parte que dice
contenido de la página
y como podéis observar
aquí hay una etiqueta llamada figura o
que también tiene su contraparte aquí puedéis observar
esta etiqueta tiene propiedades
lo que más se maneja dentro de las etiquetas son las clases y los id's
mayormente es eso
donde agregamos atributos en la etiqueta
donde agregamos el atributo "rel", "href"
de lenguaje
en la mayoría de etiquetas siempre utilizamos las clases
que es para trabajar con CSS
mediante las clases
nosotros agregamos el tipo
de diseño que se va mostrar en la etiqueta, cómo se va a mostrar
he las dimensiones que va a tener
las cosas con respecto al diseño
he la etiqueta
tiene un atributo que se llama "SRC"
allí puedes observar
y tiene un enlace hacia la imagen, si yo pico aquí
me va a mostrar la imagen
y alternativamente
tiene
un atributo "alt" que todas las imágenes deben de tener
que es
su texto alternativo
es impresindible
para una imagen
¿por qué?
porque cuando la imagen por ejemplo desaparece del servidor
en vez de que no se muestre la imagen
cuando la imagen no existe muestra...
un ícono roto indicando que la imagen no está disponible
entonces al colocarle el "alt" el texto alternativo en vez de mostrarse ese ícono
roto, se reemplaza por el texto que se agregó en el atributo "alt"
bien, qué voy a utilizar aquí para escribir código
ya para escribir el código HTML la parte de etiqueta
voy a utilizar EMACS podéis utilizar cualquier otro editor de código
ya es cuestión de preferencias podéis utilizar geany
cualquier tipo editor de código que os parezca bien nano, no sé quizás VIM
para la parte de práctica vamos a ir bastante a fondo, cómo funciona esto
solamente este video es una pequeña introducción, es un pequeño paso
recapitulando HTML no es un lengiuaje de programación es un lenguaje de marcado de etiquetas
que permite pues posicionar la página web si esta bien escrito
y a lo último pues de este curso veremos cómo validar HTML, sin embargo vamos hacerlo también
cada vez de escribarmos algo al finalizar lo validaremos para comprobar si hemos escrito correctamente las etiquetas
bien! nos vemos en el siguiente vídeo