Lo primero que necesitamos para el desarrollo de páginas web es conocer sobre HTML, tal
y como mencioné en el primer post
de es blog. Así que iré mostrando el código necesario y una imagen de como se ve la página que se representa.
Definiciones:
- HTML: Es un lenguaje de texto enriquecido con etiquetas (Tags en inglés).
- Etiqueta: Es una marca que delimita una sección del código. Es muy importante que cada etiqueta que se abra se cierre, de no hacerlo existirán errores al interpretarse el código por el explorador.
1 - Una primera página web
Este código es el mínimo y necesario para tener una página web básica. Las etiquetas significan:
- <!doctype html> Indica que el tipo de archivo es HTML.
- El texto dentro de las etiquetas <html> y </html> contienen la descripción del documento web.
- El texto dentro de las etiquetas <body> y </body> contienen la descripción de los elementos visibles.
- El texto dentro de las etiquetas <h1> y </h1> contiene el título "Hola mundo".
Al ver este archivo en el explorador el resultado es el que muestra en la imagen anterior.
2 - Etiqueta de párrafo
El código lo incluyo para mostrar que dentro de la etiqueta body se puede agregar más de una etiqueta y en este caso es la etiqueta p que contiene un texto que por defecto estará justificado.
Este archivo en el explorador se muestra como la imagen anterior. En este momento capaz no muestro mucho código dentro del párrafo, pero pueden agregar muchas lineas extras como ejercicio y comprobar como se comporta el texto en la etiqueta p. Otro ejercicio posible es agregar muchos párrafos dentro de body y así comprobar el comportamiento que tiene la etiqueta p.
3 - Etiqueta Head y Title
La importancia de este ejemplo es para mostrar que dentro del HTML existe una sección que se puede colocar para configuraciones, esta etiqueta se llama head y en este caso tiene la configuración para cambiar el nombre de la página, esto lo logramos con la etiqueta title. El resultado se ve en el explorador como la siguiente imagen.
En esta sección es donde normalmente se coloca los links para acceder a los archivos de javascript y CSS, esto en un futuro será muy útil.
4 - Etiqueta Meta y atributos
Hasta ahora tendríamos problemas con el uso de acentos y caracteres especiales, eso lo solventamos usando el formato de codificación UTF 8. La etiqueta que se necesita para esto se llama meta y para especificar este soporte de caracteres especiales se coloca el atributo charset con el valor utf-8. Gracias a esto último se vio también como se especifican los atributos dentro de una etiqueta.
El resultado es como lo que se ve en la imagen anterior, lo cual es simplemente la muestra de las vocales acentuadas.
5 - Configurando lenguaje y comentarios
Para este caso lo que se muestra es como se configura el lenguaje usado dentro del HTML, lo cual tiene como finalidad ser usado para los motores de búsqueda y exploradores. Para ver la lista de todos los lenguajes a configurar dentro del HTML los puede conseguir en este link.
6 - Etiqueta h1-h6
Existen varios títulos configurados en el HTML, estos pueden ser usados con las etiquetas h1, h2, h3, h4, h5 y h6. Los resultados por defecto que estas etiquetas tienen son los que se muestran a continuación.
Para agregar un link es de gran utilidad la etiqueta a. En el ejemplo del código el URL se coloca en el atributo href y lo que queremos mostrar en el HTML se coloca dentro del contenido de la etiqueta.
Usando la etiqueta img es una de las posibilidades de colocar imágenes en el HTML y en el atributo src se coloca la ruta del archivo, el cual puede ser un link o una ruta local.
Otra etiqueta muy útil es ul la cual permite colocar una lista de items con la etiqueta li.
10 - Etiqueta table
La etiqueta table permite colocar una tabla de datos muy fácilmente y la manera de especificar esto es especificar las filas con la etiqueta tr y cada columna se especifica con la etiqueta td.
11 - Etiquetas de entradas de valores
- textarea permite crear un campo de texto para escribir y en este caso se especifican 3 filas, 50 columnas y el texto por defecto es el famoso Lorem ipsum dolor sit amet.
- br Nos permite hacer un salto de línea.
- select nos permite colocar varias opciones en un menu despegable. Las opciones tienen un texto que se muestra al usuario visitante y un atributo llamado value que permite más adelante su extracción a nivel lógico.
- input tiene realmente varios tipos pero solo 3 de ellos son los únicos que muestro aquí porque me parecen los más utilizados. Lo más importante de cada uno es que necesitan un nombre para su extracción futura.
- button es el que permite hacer un simple botón.
Hasta aquí ya les compartí y explique las etiquetas básicas, si quieres saber más sobre ellas puedes acceder a W3School.
Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.
Descarga aquí todos los archivos fuente.
No hay comentarios:
Publicar un comentario