En el vídeo anterior
logramos entender
como funcionan la etiquetas de HTML5, las etiquetas obsoletas, las nuevas etiquetas
y ahora pues vamos a
escribir el código
para poder generar
cualquier página web
vamos abrir el editor de código
voy a...
colocar aquí el localhost
localhost
y voy a entrar dentro del directorio course
todavía no hay nada, porque todavía no he escrito nada
vamos a ir...
al editor de código, yo utilizaré Emacs
ahí está
voy a borrar, esta parte
voy a minimizar también esto, ahí está!, voy a agrandar el texto
ahí está
bien primero podríamos...
escribir la etiqueta doctype
ahora también se acostumbra también a escribir en minúscula
que sería de esa forma
doctype html etiqueta html
y etiqueta html que cierra
de esta forma
como véis
Emacs no me ha coloreado
No me ha coloreado la parte de la sintaxis
eso es porque estoy en mode-lisp
los que usáis Emacs ya me entenderéis
Si utilizáis otro editor pues automaticamente
les va a detectar la sintaxis
voy a utilizar el web-mode
y aquí como podéis observar
tenemos
ya la estructura básica
doctype html
etiqueta html
siempre tiene que llevar
un atributo que es el artributo lenguaje, y dentro pues colocar
el idioma, en esta caso Español-España (es-es)
también podría ser inglés: en
podría ser portugués: pt_BR
cualquier tipo de idioma: zxy
En este caso voy a poner español-españa, y dentro de la etiqueta html
siempre va un head
un head que abre un head que cierra
aquí van todas las etiquetas que describen a la página, el título, los metadata, todo eso va ahí
y luego tenemos la etiqueta
body
que también tiene su contraparte
¿qué va dentro de la etiqueta head?
ahí vamos a colocar
toda la información, el titulo, la información, toda esa información se va a colocar allí
y aquí en la etiqueta body
se va a colocar la información
que se le va a mostrar al usuario
por ejemplo
vamos a regresar a conocimientos libres
ah... vamos a ver...
la parte interna
aquí lo tenemos
en body, en body
tenemos que colocar todo lo que se le va a mostrar al usuario
la cabecera, el área de navegación
parte de los artículos, la figuritas
toda esa información, va dentro de la etiqueta body, todo va dentro de la etiqueta body
todo esto que véis aquí esta dentro de la etiqueta body
lo que esta dentro de la etiqueta head, es esta parte, lo que se encuentra arriba, donde dice conocimientos libres y hay un logito
eso va dentro de la etiqueta head, ahí va
no confundáis head con esta otra etiqueta que es header
son palabras similares pero diferentes
pueden ser dos
pueden haber dos etiquetas header
he visto sitios donde tienen más de un cabecera
bien primero vamos a completar la parte del head
en donde esta la información, esto vamos a ponerlo debajo
y aquí vamos a colocar
al igual como
aquí en conocimientos libres
vamos a poner una etiqueta bastante sencilla que...
...que es la etiqueta title vamos a colocar allí la etiqueta title
ahí esta la etiquet title, dentro de la etiqueta title
vamos a...
poner el título
En este caso vamos a poner aquí: mi primera web en HTML5
correcto!
bien, aún...
parece algo simple esto
vamos a guardarlo para ver si funciona.
voy a guardarlo
aquí, ya es cuestión de qué editor utilizáis yo aquí utilizó Emacs, simplemente hice C-x C-s
y ahora voy a guardarlo dentro del directorio "srv"
.../http/...
y voy a entrar a course, y lo voy a guardar con el nombre
para esta parte
de manera predeterminada
el nombre que va llevar el archivo HTML
por defecto debería de ser index
debería ser index.html
¿por qué index?
porque...
este nombre
el nombre index
es el que los servidores web
como por ejemplo: el apache, el nginx
va a buscar en cada directorio
sino encuentra el archivo llamado index.html o index.php
sino los encuentra
pues lo que va hacer es...
mostrar la jerarquía de los archivos que están dentro
por ejemplo vamos a colocar ahora.
vamos hacer esto
demo.html
supongamos que es así
que no le pusimos index y le pusimos demo.html
aparentemente no pasó nada, simplemente se guardó
y ahora vamos a ir al navegador
al localhost
actualizamos
y vemos el archivo demo.html
vamos a
colocar ahí
no se ve nada
porque no hemos escrito nada en el body, solamente en el head
y si os fijáis
en esta parte
pueden ver que dice «Mi primera web en HTML5» es bastante genial esto
ahora
para que veáis ese problema, hemos tenido que entrar dentro del archivo demo.html, no se ha mostrado automáticamente
es decir no hemos recargado esto
aparecido automáticamente la página, sino que hemos tenido que entrar dentro del archivo demo.html
que pasaría si a este archivo demo.html le cambio de nombre
por ejemplo
ahora ya no se va llamar así, sino se va a llamar
se va a llamar ahora pues...
index.html ¿cómo hago eso?
muy sencillo
yo por acá tengo
el directorio de course
aquí está!
he voy a cambiarle de nombre
a index.html
y automáticamente al actualizar me va ha cargar
me va ha cargar el archivo index.html
bien!, nos vemos en el siguiente vídeo para continuar avanzando