ÁREA: INFORMÁTICA.
TEMA N° 1: INTRODUCCIÓN AL LENGUAJE HTML.
HTML (Hyper Text Markup Lenguage) es un leguaje de marcado de texto, lo cual
nos indica que no es un lenguaje de programación como Java, PHP, C++ o
VisualBasic. HTML es el lenguaje para escribir o hacer páginas web. Las marcas,
conocidas como etiquetas, describen la forma en la que se estructura el contenido
de una página web.
Las etiquetas describen diferentes elementos de la página, por ejemplo, la etiqueta
<p> se utiliza para delimitar párrafos de texto y la etiqueta <img> para definir
imágenes. El encargado de interpretar estas etiquetas es un programa llamado
navegador (browser), por ejemplo, el navegador Chrome de Google o el Firefox
de Mozilla. Los archivos que contienen el código HTML tienen la extensión .htm o
.html, y son archivos de texto plano (sin formato).
Una página web debe estar escrita en HTML, pero también suele incorporar otros
elementos como hojas de estilo CSS y programación con el lenguaje JavaScript.
Con CSS se define el aspecto estético de la página y con JavaScript se pueden
realizar tareas adicionales cómo abrir y cerrar ventanas, validar los datos
introducidos por los usuarios, y otras tareas que requieren ser programadas.
Vemos cada uno:
HTML (lenguaje de marcas de hipertexto), es el lenguaje donde se define la
información o el contenido del documento, su función es definir la estructura de
una página web, el formato de los archivos es .html
CSS (cascading style sheets), es el lenguaje donde se especifica el diseño del
documento, maneja todo lo relacionado con la parte visual, el formato de los
archivos es .css
JavaScript, es el lenguaje que hace que todo sea interactivo, es realmente el
lenguaje de programación que nos permite crear páginas web, el formato de los
archivos es .js
Recordemos que realmente el que interpreta estos lenguajes es el Navegador.
NOTA: Se recomienda escribir CSS y JavaScript separado de HTML.
Podemos relacionarlo con el cuerpo humano, HTML representa las bases con las que
se sostiene el cuerpo, como los huesos, CSS nos permite definir la impronta visual
de la web, como la piel, la ropa y accesorios, y JavaScript nos permite otorgarle a la
web, dinamismo y movimiento, como los músculos del cuerpo humano.
El conjunto de HTML, CSS y JavaScript es lo que se conoce como front-end o
capa de presentación. Esta capa se ejecuta en el navegador, mientras que con
back-end o capa de datos se hace referencia a la programación realizada en el
servidor con lenguajes de programación web, (Java, PHP, Python, ...)
normalmente para obtener y grabar información en una base de datos.
Los lenguajes de programación orientados a la web, ejecutados en el servidor, son
capaces de generar el código HTML que finalmente se va a ver en el navegador
web.
Recordemos que para ver una página web desde cualquier dispositivo electrónico
(computador, Tablet o Smartphone) conectado a internet, debe estar alojada
(guardada) en un servidor de internet (servidor web).
ETIQUETAS HTML.
Las etiquetas (marcas) delimitan cada uno de los elementos que componen un
documento HTML.
El lenguaje HTML se basa en etiquetas, por eso es importante entender bien la
sintaxis de las etiquetas.
Algunas etiquetas no tienen contenido, y se cierran sobre sí mismas, no tienen
etiqueta de cierre, se llaman etiquetas vacías, como la etiqueta < br >.
La etiqueta <br> produce un salto de línea.
Las etiquetas vacías no tienen contenido, pero si pueden tener atributos. Algunas
otras etiquetas vacías son <hr>, <img>, <input>, <link>, <meta>, <param> y
<source>.
NOTA: La etiqueta es un código HTML que se utiliza para definir una
estructura de la página, los atributos son valores que se pueden asignar
a las etiquetas (se escriben después de la etiqueta de apertura), como
colores, fondos, entre otros.
Las etiquetas siempre van escritas dentro de <> por ejemplo <font>
(etiqueta de fuente) y los atributos son los valores que le doy a esa
etiqueta, por ejemplo, le asignaré un color azul al texto:
<font color ="blue">Hola mundo</font>
Como podemos ver, uso la etiqueta <font> y dentro de ella le agrego el
atributo "color" asignándole el valor dentro de comillas dobles (““)
Cuando visualizamos en el navegador, notamos el resultado.
La etiqueta de apertura está delimitada por el signo < "menor que", a continuación,
el propio nombre de la etiqueta (en este caso font), y opcionalmente, un atributo
(en este caso color=” blue”), finalmente el signo > "mayor que".
A continuación, está el texto del contenido (Hola mundo) de la etiqueta, lo más
frecuente es un texto, pero podría ser otra etiqueta, una imagen, entre otros.
La etiqueta de cierre está delimitada por el signo < "menor que", a continuación,
la barra inclinada /, el propio nombre de la etiqueta (en este caso font), y finalmente
el signo > "mayor que".
En una etiqueta, la primera palabra que aparece es el nombre de la etiqueta.
También podemos encontrar atributos con sus valores, siguiendo el formato
<etiqueta atributo1="valor" atributo2="valor">.
La forma más correcta es escribir el nombre de la etiqueta y los atributos en
minúscula, y los valores entre comillas dobles.
Ejemplo:
<a href= “https://misalondeclasesvirtuales.wordpress.com/tecnologia-e-
informatica/11-2/3-periodo/tema-n-1-introduccion-al-lenguaje-html/”>Visita
Lladeco Virtual</a>
Produce este resultado en el navegador: Visita Lladeco Virtual
Etiqueta de apertura: <a>
Atributo: href=
Valor: “https://misalondeclasesvirtuales.wordpress.com/tecnologia-e-
informatica/11-2/3-periodo/tema-n-1-introduccion-al-lenguaje-html/”
Contenido (título del enlace): Visita Lladeco Virtual
Etiqueta de cierre: </a>
En general las etiquetas se pueden anidar, pero no se pueden “cruzar”. Ejemplo:
Anidadas Correctamente Cruzadas incorrectamente
<div> <div>
<p> <p>
Texto del párrafo Texto del párrafo
</p> </div>
</div> </p>
La sintaxis de las etiquetas HTML ha sufrido variaciones a lo largo del tiempo y
hay etiquetas que ya no está recomendado su uso.
Por esto se pueden encontrar páginas web antiguas cuyo código HTML no se
considera correcto hoy en día, sin embargo, esas páginas siguen funcionando y
mostrando el contenido para el que fueron diseñadas.
Por otro lado, los navegadores pueden obviar pequeños errores y mostrar la
página correctamente, como si no tuviera esos errores.
Link de Etiquetas y Atributos
EDITORES DE HTML
los archivos que contienen el código HTML tienen la extensión .htm o .html, y son
archivos de texto plano, es decir, lo que se ve es lo que hay, no hay código oculto
como ocurre con los archivos de los procesadores de texto (como Microsoft Word
y otros) esto quiere decir que un archivo HTML puede ser escrito con cualquier
editor que sea capaz de escribir archivos de texto plano, como el Bloc de notas de
Windows, aunque lo recomendable es utilizar editores específicos para páginas web
como Brackets, Atom, NotePad++, Sublime, Dreamweaver, entre otros.
Estos editores específicos nos ayudan a escribir de forma más rápida el código
HTML. Podemos dividirlos en dos grandes grupos:
1. Los editores de código: Por ejemplo, Brackets, Atom, Sublime,
NotePad++, son editores en los que nosotros debemos escribir el código HTML, es
decir, las etiquetas.
Por lo tanto, debemos saber qué etiqueta debemos escribir en cada momento según
lo que queramos hacer. Por ejemplo, para poner una palabra en negrita hay que
utilizar la etiqueta <strong>, o para insertar una imagen la etiqueta <img> con sus
correspondientes atributos.
Para ver el resultado de lo que estamos escribiendo debemos abrir el archivo con
un navegador.
NOTA: Para trabajar en el pc se recomienda instalar el programa editor de código
de texto Brackets y en el celular (Smartphone) instalar la aplicación Sublime Text.
2. Los editores con modo diseño: Por ejemplo, Dremweaver y Kompozer,
son editores en los que no hace falta que nosotros escribamos el código HTML ya
que el propio editor se encarga de hacerlo según nuestras indicaciones. Por
ejemplo, para poner una palabra en negrita basta seleccionarla y pulsar el "botón
negrita".
Para insertar una imagen bastará pulsar en el comando "Insertar imagen", y el
editor nos abrirá una ventana para elegir la imagen. Con estos editores se suele
trabajar en la vista Diseño que nos muestra directamente el resultado de la página,
es decir, al aplicar negrita veremos directamente la palabra en negrita, y al insertar
una imagen, esta aparecerá en la pantalla. Estos editores también permiten escribir
directamente las etiquetas en la vista código. Este tipo de editores también son
conocidos como WYSIWYG, (What You See Is What You Get, lo que ves es lo
que obtienes).
Clic al Link para observar el video y ampliar tu conocimiento en HTML
