El diseño de un sitio web es una tarea compleja que involucra la planificación y el diseño de lo que se quiere lograr, una vez establecidos estos requerimientos se debe tomar en cuenta el aprendizaje de diferentes lenguajes de programación o tecnologías indispensables para su creación.
Los sitios web están compuestos por diferentes archivos vinculados entre sí, estos archivos existen en un directorio con un índice o página principal que contiene los enlaces hacia los demás documentos, son archivos HTML cuya extensión o formato es .html por ejemplo index.html es un archivo HTML que puede funcionar como página de inicio.
En este temario se pretende explicar cómo funciona el HTML, cada elemento de un sitio web como pueden ser títulos, párrafos, enlaces, tablas e imágenes se crean a partir de etiquetas HTML.
Definición
HTML: Sus siglas significan Hypertext Markup Language (Lenguaje de Marcado de Hipertexto) Es un estándar o estructura de etiquetas (no se considera lenguaje de programación) que los Navegadores Web transforman o interpretan para mostrar en forma de diseño con sus distintos bloques, colores, imágenes, videos, enlaces, entre otros.
Etiquetas
HTML consta de diferentes etiquetas, cada etiqueta representa un elemento o tiene una función dentro del documento HTML, estas etiquetas tienen una apertura y un cierre y contienen dentro de ellas un contenido (texto) o a otras etiquetas de forma anidada, es decir que por ello para su comprensión es recomendable acomodarlas usando sangría según el orden en el que estén colocadas
Ejemplo de Etiqueta
Las etiquetas se establecen con el símbolo <etiqueta> contenido </etiqueta> dónde la etiqueta puede ser el nombre reservado body, head, title, dependiendo lo que se desea hacer, y lleva un cierre anteponiendo al nombre de la etiqueta una diagonal o pleca /, por ejemplo:
<body> </body>, <head> </head>, <title> </title>...Estructura elemental de un archivo HTML:
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>
<body>
<!-- cuerpo o contenido del archivo-->
</body>
</html>
Ejercicio
- Copia este código
<!DOCTYPE html> <html> <head> <title>Mi primera página web</title> </head> <body> <p>Hola mundo, esta es mi primera página web, que emoción!!!</p> </body> </html> - Abre bloc de Notas, una forma de abrirlo es presionando la combinación de teclas Inicio + R luego escribes notepad y presionas ENTER
- Pega el código y ve a Archivo → Guardar
- Guarda el archivo con el nombre index.html (importante colocar .html al final)
- Buscar el archivo guardado y ábrelo con tu navegador web predeterminado y listo, así luce una primera página web!
Support the project, Buy me a coffee!!
