bueno!
quitaré h1 si es que la w3C dice que la etiqueta title
la etiqueta title
tiene más relevancia que la etiqueta h1
por mientras entonces, por ahora
es válido utilizar la etiqueta h1
pero si en determinado caso la w3c decide
que esta etiqueta h1 es lo mismo que poner title
dentro del head
pues
se empezaría ya a utilizar la etiqueta h2
bien vamos a
seguir
en la parte html
vamos a ver que aquí pues ya sigue apareciendo lo mismo
vamos a ver
una etiqueta
más importante que es para el head
que es la etiqueta
meta>
la etiqueta meta es importante para el head
¿por qué?
porque qué pasaría si aquí yo le pongo por ejemplo
carácteres especiales
eñes
tíldes
a ver... ahí esta! Tíldes
por ejemplo de esa forma: «Ñú»
qué pasa si es que guardo así como está
así como esta sin ponerle ninguna etiqueta meta>
porque dentro de la etiqueta meta hay una propiedad
que es el meta charset="UTF-8"
charset se conoce como charset
que la codificación de las palabras
qué pasaría si es que yo no coloco esto dentro del head
bueno tengo aquí el atributo lang que me indica que es español-españa, pero no me esta diciendo nada
si nosotros nos vamos al navegador
por defecto el navegador pues... a mi me coloca
la Ñ, me pone aquí la Ñ
pero eso no ocurren en todos los navegadores
eso no ocurre en todos los navegadores
esto es porque mi servidor
mi servidor
que es nginx
tiene la configuración de
UTF-8 por defecto
si no tuviese esa configuración utf...
perdón UTF-8 por defecto
lo que haría
sería mostrarme carácteres extraños en el body
por ejemplo, voy a...
ir a la parte de
del terminal
aqui voy a mirar un ratito la configuración de nginx
y si observáis
a ver
aquí está!
voy a bajarle un poquito
el zoom
ven aquí está: cat /etc/nginx/nginx.conf
y en la parte de aquí, ahí está!
yo le he puesto
que sea charset="UTF-8" por defecto
pero eso yo lo he puesto dentro del servidor nginx
pero no todos los servidores
tienen
el meta charset dentro de...
...su configuración, esto es porque yo he puesto el charset
...UTF-8
entonces de esa forma
para mi en mi servidor
es irreleante
si yo pongo
el meta charset aquí
pero
lo recomendable es colocarlo, es decir decirle a la página web
en qué codificación está escrita
cómo se hace eso
muy sencillo
vamos a colocar aquí la etiqueta meta
que
que es una etiqueta que cierra a si misma
es decir no tienes que colocar
etiqueta meta que se cierra
simplemente colocáis ahí
en XML era necesario colocar la barrita
en HTML no es necesario
si queréis la colocáis sino no
correcto, ahora vamos a poner charset
meta charset="UTF-8"
de est forma
si es que el servidor
en este caso
si es que yo en mi servidor
no hubiese colocado
el atributo
charset UTF-8
si yo no hubiese colocado esto
automáticamente
en la parte
y aquí
no aparecería
no aparecería la Ñ
ejemplo
ya que tengo el terminal aquí
y sé dónde está, voy a
comentar
voy a comentar
ese...
esa configuración del UTF-8
voy a
voy a editarla
voy a comentarla ahorita para que...
me arroje el error que les estoy explicando
aquí está, charset
le pongo una almuadilla delante
y por supuesto reinicio el servidor nginx
ahí esta lo he reiniciado
ahora regresamos
así como esta configuración poniendole el meta charset
la Ñ
se va a mostrar correctamente
es decir no importa que haya desactivado yo...
el charset en mi servidor
se va a mostrar correctamente
si observáis actualizó
continúa estable
ahora que pasaría si es que yo le quito la etiqueta meta charset
yo le quito, yo le borro
ahi está ya le borré la etiqueta
entonces yo voy aquí al servidor
a la parte de la página
actualizo y automáticamente se arruina todo
aparecen
aparecen carácteres
que yo no coloqué
aparecen carácteres que yo no coloque
una barrita arriba
a por ejemplo, una parte de simbolo de grados
aparece lo que yo no deseo que aparezca
entonces
para corregir ese error
debemos colocar el meta charset="UTF-8" sí o sí
para evitar problemas
y ahora voy a regresar aquí a la parte de mi servidor lo voy a dejar normal como estaba
con
el UTF-8
yo hago esto porque
mi servidor siempre yo lo tengo en UTF-8
es por eso
vamos a reiniciarlo, ahí está!. bien!
esta etiqueta es importante
otra etiquet importante es el
también es un meta
que es el meta name viewport
name, atributo name
viewport
bueno y me dirán para que rayos es esto
el viewport
propiedad name con su...
con su atributo viewport
es
hacer que la página
pueda ser mostrada correctamente
en la pantallas pequeñas como los teléfonos móviles
mayormente se utiliza la propiedad
el atributo content
para indicar y decirle
al viewport
ya al viewport
vamos a ver qué es viewport
el viewport es:
todo el body, todo lo que...
podéis observar aquí
todo lo que véis aquí
toda esta parte
toda esta parte es el viewport
voy actualizar aquí para que no se vean eso carácteres raros
bien
toda esta parte es el viewport
correcto
toda esta parte es el viewport
toda la pantalla, todo lo que se muestra dentro de esta pantalla
entonces qué vamos a decirle mediante está etiqueta
a la pantalla
la pantalla va a tener esta codiciones
la página va a tener estas codiciones sobre la pantalla
que el ancho
el ancho
va a ser igual
el ancho de la web va a ser igual
al ancho
del dispositivo es decir
igual al ancho de la pantalla
ahí está
el ancho
de la página web
va a ser igual
al ancho de la página
colocamos una coma
para decirle algo más
le vamos a decir
que la escala inicial, initial-scale, escala inicial
por defecto
va a ser 1, ahí está
y si queréis trabajar con números decimales mayormente se pone 1.0
escala en 1
es decir
que si yo aquí mediante CSS digo
la etiqueta de css (style>/style>) se coloca dentro de head
aquí se coloca
bueno como decía
si yo le digo mediante diseño
le digo el ancho va a ser tanto, entonces
la pantalla pues va a funcionar con ese ancho que yo le dije, no lo va a escalar, va a utilizar ese ancho que le dije
no va haber ningún problema con el diseño
y es más que todo importantísimo, porque si no colocáis este atributo
si no colocáis la etiqueta meta con su atributo name viewport
no váis a poder hacer, lo que se conoce como Responsive Desing
no váis a poder hacerlo
podéis haber colocado los mediaqueries y todo el resto, pero si te olvidas de colocar esta etiqueta
si no sabes por qué no funciona tu CSS
esta etiqueta te va a
va a colapsar todo, no se va a mostrar bien, algo va a fallar
algo siempre va a fallar
por eso es importante que colocáis esta etiiqueta
bien
hasta ahí
vamos
vamos mirando
la parte
de las etiquetas y la sintaxis
de la estructura
HTML
en el siguiente vídeo vamos a
ver ya, de la parte del body>
aunque ya hemos visto un poquito, vamos a empezar
con el header que es la parte principal del body
aquí también antes de cerrar el vídeo
que es favicon
el favicon
que es el logo que tiene por ejemplo aquí
dónde está, a ver aquí está
aquí tengo la página web de conocimientos libres
aquí como podéis observar aparece un ícono
voy a darle aquí en ver código fuente, aparece un ícono, ese ícono es esta imagen
es esa imagen
vamos a tomar el enlace de
conocimientos libres para el ejemplo, porque ahorita no tengo imagenes dentro del directorio
de course, en este directorio no hay imágenes no hay nada
solamente el archivo index
vamos a agarrar de ejemplo para terminar el vídeo
vamos a ir a la parte del head>
y vamos a escribir una etiqueta llamada link
una etiqueta link se cierra así misma como la etiqueta meta
entonces vamos a
colocar
un atributo que se llama "rel"
con
su información
y le vamos a decir que ese enlace es un ícono
va a tener su atributo href
href hace referencia a un enlace externo de un recurso que se encuentra en otro lado
en este caso
voy a utilizar
mi enlace de
conocimientos libres
la figurta que coji hace poquito
el nombre de la imagen
además de eso voy a decir que con la propiedad "sizes"
le voy a decir el tamaño de esa imagen para ese favicon
que sería de 16x16
y con eso
con esto
estaría colocando lo que se conoce como favicon
ahora los comentarios simplemente
colocáis el coments
ahora si yo
guardo el index.html y regreso
a la parte de
de la página web, voy a recargar
y como podéis obervar automáticamente aparece el ícono
el ícono en qué formato debería de estar pues
podéis usar PNG o icon, yo recomiendo PNG para que no tengáis problemas con los móviles
y pues es así de esta forma se coloca un favicon, bien!
en el siguiente un poquito más sobre body
y bueno seáis felices, nos vemos en el siguiente vídeo