Resumen:
1. Qué es una página web.
Este concepto se refiere a un documento individual; es un elemento del sitio web. Socialmente es aceptado hablar de sitio o páginas web para referirse a lo mismo (sitio web).
2. Qué es un sitio web.
Conjunto de páginas web en de las cuales podemos navegarlas y recorrerlas mediante hipervínculos.
3. Qué es un dominio.
Es la dirección web que se compra para asociar a nuestro sitio, es la puerta de acceso al mismo.
Se puede adquirir dominios según país
.ar Argentina
.br Brasil
.cl Chile
.pe Perú
.es España
.jp Japón
.mx México.
.fr Francia
o según el Propósito.
.com Comercial
.gob o .gov Gobierno
.edu Educación
.mil Militar
.tur Turismo
4. Qué es un Hosting web.
Es un servidor, es decir, una computadora que guarda los archivos de nuestro sitio web para que esté disponible 24hs online.
5. Instalación de Visual Studio Code.
Cambio del idioma. (Con las teclas Ctrl + Shift + p, Change Display Lenguaje)
6. Crear una carpeta con el nombre del sitio.
Ingresar al explorador de archivos de Windows.
Clic en Documentos (en el panel izquierdo)
Doble clic en la carpeta con mi nombre.
Veremos las carpetas de proyecto anteriores.
En un espacio en blanco, clic derecho, crear carpeta.
Darle un nombre específico para el proyecto a desarrollar. Por ejemplo, "Sitio Web sobre Restaurante"
7. Abrir la carpeta con Visual Studio Code.
Si hemos creado por ejemplo la carpeta "Sitio Web sobre Restaurante", la debemos abrir con Visual Studio Code para empezar a crear nuestro sitio web:
Abrir Visual Studio Code.
Archivo, Abrir Carpeta, buscar la carpeta de destino (en este caso "Sitio Web sobre Restaurante") y pulsar en abrir.
8. Crear el index.html
En el panel izquierdo de Visual Studio Code aparece la carpeta abierta "Sitio Web sobre Restaurante"
Pulsar en el botón "Nuevo Archivo" Darle nombre index.html ya que es nuestro archivo de inicio del sitio; las demás páginas podran tener otros nombres, sin dejar espacios y sin caracteres especiales. Ejemplos: contacto.html, historia.html, preguntas-frecuentes.html
9. Crear la estructura básica del html con su emmet html:5
Al hacer doble clic sobre el archivo creado (index.html) se abrirá en el panel derecho, y es allí en donde debemos escribir su contenido. Tenemos la ayuda del Emmet html:5
Establecer el idioma es (español) para la página
Cambiar título (para la pestaña del navegador)
La indentación (sangría), con la tecla Tab.
Identificar el <head></head> y el <body></body>
Dentro del body desarrollaremos la estructura de etiquetas del contenido de la página.
10. Agregar etiquetas y sus emmet:
Título h1
Subtítulos h2 hasta h6
Párrafos p
Negrita b
Cursiva i
Subrayado u
El anidamiento de etiquetas.
Son etiquetas dentro de otras etiquetas
Ejemplo de parrafo completamente subrayado:
<u>
<p>Texto del párrafo</p>
</u>
siendo totalmente válido escribirlo en una sola línea: <u><p>Texto del párrafo</p></u>
Los atributos.
Es información adicional que se escribe dentro de la etiqueta de apertura y define una característica, propiedad o comportamiento de la misma.
Su forma genérica es: <etiqueta atributo="valor">Contenido</etiqueta>
El significado semántico.
Para los buscadores, algunas etiquetas tienen un significado que influye en el posicionamiento.
¿Puedo escribir un título dentro de la etiqueta de párrafo <p></p> en vez de colocarla dentro de la etiqueta <h1></h1>?; la respuesta es sí, pero con la consecuencia de que el buscador no le va a dar la importancia de un título, sino que creerá que ese texto es un contenido de párrafo el cual no tiene un título.
Además de los buscadores, es también un tema de accesibilidad, los lectores de pantalla para personas no videntes detectan y leen estas etiquetas; la estructura del sitio web tiene que ser clara para que funcione correctamente.
Tipos de etiquetas:
Etiquetas autocontenidas.
No debemos escribir una etiqueta de cierre, por ejemplo en el caso de las imágenes.
<img src="./imagen.jpg" alt="texto alternativo">
Etiquetas contenedoras.
Es el caso de la mayoría de las etiquetas, aparece una etiqueta de apertura y una de cierre.
<a href="https://www.coopelec.com.ar" target="_blank">Coperativa Eléctrica</a>
11. Descargar imágenes a la carpeta creada.
Es requisito descargar en la carpeta de nuestro proyecto la imagen que vamos a utilizar, por lo tanto, si al descargarla nos pregunta dónde debemos guardarla, debemos situarnos en la carpeta del proyecto que estamos armando (siguiendo el ejemplo que comentamos anteriormente la carpeta "Sitio Web sobre Restaurante")
Renombrar las imagenes con nombres más cortos y entendibles:
El orden es fundamental al realizar el proyecto web; para los nombres de imágenes y demás archivos no debemos agregar caracteres especiales, tildes, espacios o ñ, porque podría fallar el servidor al no reconocer los mismos.
Ejemplos de nombres para imagenes: logo.jpg, foto.jpg, imagen-pizzas.jpg
Agregar etiqueta de imagen:
El emmet es img
<img src="" alt="">
* Se sugiere como buena práctica agregar ./ en el atributo src para indicar que la imagen está en la carpeta principal del proyecto. Aunque de todos modos funciona incluso si no lo agregamos.
Se deben completar sus dos atributos principales obligatoriamente:
<img src="./imagen.jpg" alt="texto alternativo">
Agregar hipervínculo a imágenes o texto:
Hipervínculos Externos:
El emmet es a
<a href=""></a>
Debemos completar el atributo href con la dirección de destino, por ejemplo https://www.coopelec.com.ar
Es adecuado agregar dentro de la etiqueta de apertura target="_blank" para que quien visita nuestro sitio web no salga del mismo al abrir el sitio web del enlace. El emmet es target
Hipervínculos Internos:
Mismo emmet que los hipervínculos externos.
El atributo href llevará el nombre de otro documento html, por ejemplo href="./contacto.html"
Ejemplo básico:
<a href="./contacto.html">Contacto</a>
<a href="./contacto.html">Contacto</a>
No se necesita indicar target ya que funciona por defecto, pero sepan que existe target="_self" para abrir el nuevo documento en la misma pestaña del navegador.
___________________
* Importante:
. Escribir las etiquetas con minúsculas.
. Respetar las comillas de los atributos.
. Observar las etiquetas de apertura y las de cierre.
. Tener en cuenta que los emmet escriben las etiquetas de apertura y cierre y a veces necesitamos mover otra etiqueta dentro de la etiqueta creada.
. Realizar la indentación con la tecla tab para ordenar el código.
___________________________________________
Estructura de un Sitio Web e Hipervínculos internos:
Navegación interna mediante hipervínculos:
El emmet es a
Ejemplo:
<a href="./contacto.html">Comunícate con nosotros</a>
* El elemento ./ (punto barra) dentro del atributo href indica que el archivo está en la misma carpeta que nuestro archivo que estamos creando.
* No es necesario usar el atributo target="_self" ya que los navegadores lo utilizan por defecto.
* Lo aplicamos a textos y a imágenes: los elementos a los que se les aplica el hipervínculo se colocan entre las etiquetas del hipervínculo (en medio de la de apertura y cierre)
_____________________________________________________________
Práctica:
Crearemos la siguiente estructura
Sigue el trabajo práctico paso a paso:
Recursos:
* Descarga las imágenes a tu carpeta "Fábrica de Robots"
* Dales un nombre corto y en lo posible no uses tildes, Ñ ni caracteres especiales, es decir, evitar el uso de por ejemplo á, ñ, @, #, %
¿Qué nombres puedo colocar?
Ejemplos de nombres: fabrica.png, brazo.png, cartesiano.png, contacto.png
Adicionales:
crea una línea horizontal con la etiqueta autocontenida <hr>
Recuerda:
* Título de la página para el navegador: <title> se ubica dentro del head.
* Título del contenido: <h1> se ubica dentro del body.
________________________________________
