Repaso breve:
Para realizar diseño web necesitamos:
- Diseñar los archivos necesarios (Páginas)
- Un lugar donde alojarlos (Servidor / Hosting / Alojamiento web)
- Una dirección por la cuál los usuarios van a ingresar a mis páginas (dominio / dirección web)
________________________________________
Ejemplos de Precios de HOSTING en Abril de 2025.
Servicio de:
- Donweb --> $29.025 por año.
- Hostinger --> $39.588 por año.
- Wiroos --> $59.844 por año.
- Wnpower --> $152.442,10 por año.
(Usualmente la mayoría aumentan el precio al pasar el año de uso)
________________________________________
Ejemplos de Precios de DOMINIOS en Abril de 2025.
www.nombre.com.ar --> $8.500 en nic.ar
www.nombre.ar --> $25.500 en nic.ar
www.nombre.com --> U$S19,99 el primer año, luego U$S 36,99 en nic.com
www.nombre.edu.ar --> Gratuito en riu.edu.ar
________________________________________
El Propósito del dominio:
.com --> Comercial
.org --> Organización
.net --> Para redes y servicios de internet
.edu --> Eduación
.gov o .gob --> Gobierno
.mil --> Militar
El País:
.ar --> Argentina
.br --> Brasil
.es --> España
.fr --> Francia
________________________________________
Práctica:
Estructura Básica del HTML (Descripción)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Tipos de etiquetas:
Etiquetas de apertura y cierre:
* Tienen contenido dentro.
Etiquetas autocontenidas:
* No necesitan cierre.
* No llevan contenido dentro (Vacías)
Características:
- Indentación (Sangría): la indentación hace que el código sea más legible y muestra una jerarquía.
- Anidamiento: algunas etiqueta puede ser colocadas dentro de otras.
- Atributos: las etiquetas pueden contener atributos, que modifican el comportamiento de la misma.
- Significado semántico: muchas etiquetas que iremos viendo ayudan a los motores de búsqueda y lectores de pantalla a "entender" el contenido.
<!DOCTYPE html>
- Indica el tipo de documento, los navegadores interpretan que es un documento html5.
- Esta etiqueta no se cierra.
_____________________________________________
<html lang="en">
- La etiqueta es <html> más otras etiquetas dentro y finalmente su cierre </html>, pero el en este caso tiene el atributo lang="en" que indica que el documento está en idioma inglés.
- Podremos cambiarle el atributo a idioma español lang="es"
_____________________________________________
<head>
Es la cabecera del documento. Contiene otras etiquetas como por ejemplo el título del sitio.
Es una etiqueta con apertura y cierre. <head> más etiquetas y cierre </head>
* Etiquetas dentro del head:
<meta charset="UTF-8">
Permite que el navegador interprete correctamente los caracteres especiales de diferentes idiomas, como ser tildes á é í ó ú ñ ü, signos ¿ ¡, símbolos $
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Permite que la página se vea bien el los dispositivos más pequeños como celulares.
width=device-width ajusta el ancho a la pantalla del dispositivo.
initial-scale=1.0 establece el nivel de zoom inicial.
<title>Document</title>
Es el título del sitio web, aparece en la pestaña del navegador.
</head> el head debe cerrarse
_____________________________________________
<body>
Aquí dentro irán otras etiquetas que harán la estructura del sitio web.
</body>
Dentro del body podremos colorar párrafos, títulos, subtítulos, imágenes, listas entre otras...
_____________________________________________
</html> la etriqueta del html debe cerrarse al final.
_____________________________________________
Ejemplos de etiquetas para el body:
<h1></h1> Tìtulo.
<h2></h2> a <h6></h6> Subtítulos.
<p></p> Párrafos.
<br> Salto de línea.
<b></b> Negrita.
<i></i> Cursiva.
<u></u> Subrayado.
<img src="imagen.jpg" alt="Descripción de la imagen"> Imagen, ruta y el atributo de accesibilidad (sin cierre)
____________________________________________
¡Vamos a la práctica!
_page-0001.jpg)
_page-0002.jpg)
_______________________________________________________
