HTML (Hyper Text Markup Language, o lenguaje de marcas de hipertexto) es un lenguaje de programación que sirve para crear páginas Web. Permite la inserción de enlaces (hyperlinks) que llevan a otras páginas, imágenes, sonidos,... admiten la inserción de tablas, imágenes, vídeos,...
Un archivo HTML suele tener la extensión .html o .htm.
Si viendo una página en un navegador Firefox pulsamos CTRL+U veremos el código HTML.
En Chrome hay que apretar la combinación de teclas CTRL+MAY+I.
Para ver por ejemplo el título vemos que cada contenido viene rodeado de 2 etiquetas;
una al inicio y otra al final para indicar al navegador cómo presentar el contenido
y qué forma debe darle.
Para realizar las páginas web utilizaremos el programa NOTEPAD++ que podéis descargar en este enlace:
https://notepad-plus-plus.org/downloads/ Si vuestro ordenador es relativamente moderno, descargad
la versión de 64bits y si es más antiguo, descargad la versión de 32 bits.
En Chrome hay que apretar la combinación de teclas CTRL+MAY+I.
Para ver por ejemplo el título vemos que cada contenido viene rodeado de 2 etiquetas;
una al inicio y otra al final para indicar al navegador cómo presentar el contenido
y qué forma debe darle.
Para realizar las páginas web utilizaremos el programa NOTEPAD++ que podéis descargar en este enlace:
https://notepad-plus-plus.org/downloads/ Si vuestro ordenador es relativamente moderno, descargad
la versión de 64bits y si es más antiguo, descargad la versión de 32 bits.
Estructura de un documento HMTL.
Escribiremos el código en HTML en NOTEPAD++ y veremos el resultado en el navegador FIREFOX.
Hay 3 estándares de HTML: HTML4, XHTML y HTML5. No son todos exactamente compatibles,
es conveniente utilizar una API: www.w3schools.com en la sección e REFERENCES,
una referencia de Tags de HTML bastante completa.
Por ejemplo h1: nos dice los navegadores que la soportan, diferencias entre HML4 y 5, o con XHTML
y listado de atributos,…
es conveniente utilizar una API: www.w3schools.com en la sección e REFERENCES,
una referencia de Tags de HTML bastante completa.
Por ejemplo h1: nos dice los navegadores que la soportan, diferencias entre HML4 y 5, o con XHTML
y listado de atributos,…
Otra web interesante es www.quackit.com
Las características del lenguaje HTML son las siguientes:
a) El lenguaje HTML se escribe con etiquetas (o tags, en inglés) que están comprendidas
entre los signos de menor y mayor. Por ejemplo todo el código HTML comenzará
con la etiqueta <html> y acabará con la etiqueta </html>. Muchas etiquetas son de este tipo
y necesitan abrirse y cerrarse con </> con la misma etiqueta.
b) Hay etiquetas anidadas como <body> que va dentro de <html>, tanto la apertura como el cierre.
c) Hay etiquetas que no es necesario abrirlas ni cerrarlas como br, en este caso es conveniente
escribirla con <br/> para avisar de esa peculiaridad. Br hace un saldo de línea.
a) El lenguaje HTML se escribe con etiquetas (o tags, en inglés) que están comprendidas
entre los signos de menor y mayor. Por ejemplo todo el código HTML comenzará
con la etiqueta <html> y acabará con la etiqueta </html>. Muchas etiquetas son de este tipo
y necesitan abrirse y cerrarse con </> con la misma etiqueta.
b) Hay etiquetas anidadas como <body> que va dentro de <html>, tanto la apertura como el cierre.
c) Hay etiquetas que no es necesario abrirlas ni cerrarlas como br, en este caso es conveniente
escribirla con <br/> para avisar de esa peculiaridad. Br hace un saldo de línea.
Empezaremos con <!DOCTYPE html> esta es una etiqueta informativa.
Estructura de un documento creado en HTML:
a) Primero empezaremos con <!DOCTYPE html> esta es una etiqueta informativa.
b) luego seguiremos con la etiqueta HTML, que abrimos (<html>) y cerramos (</html>) ;
c) dentro de la etiqueta anterior habrá dos secciones: head (cabecera o encabezado) que abrimos (<head>)y cerramos (</head>)y debajo la sección body, que también abrimos (<body>) y cerramos (</body>) y que también abrimos y cerramos.
d) En el encabezado ponemos el título (<title>), también abriendo y cerrando la etiqueta
y escribiendo el título en el centro.
y escribiendo el título en el centro.
e) En el cuerpo ponemos un encabezado (<h1> que abrimos y cerramos escribiendo
el contenido en medio) y luego ponemos un párrafo (<p>) también abriendo
y cerrando la etiqueta y poniendo el contenido en medio.
el contenido en medio) y luego ponemos un párrafo (<p>) también abriendo
y cerrando la etiqueta y poniendo el contenido en medio.
Guardamos la página con comillas porque si no nos guardará la página con formato texto.
Actividad 1.
Utilizando NOTEPAD++ escribe el código anterior para crear una página web. Guarda la página con el nombre web1.html.
Visualiza ahora esta página utilizando un navegador.
Guarda el archivo en tu Drive, dentro de la carpeta TIC 2, subcarpeta HTML.
Guarda el archivo en tu Drive, dentro de la carpeta TIC 2, subcarpeta HTML.
Seguimos con la teoría.
Por último decir que las etiquetas se completan mediante atributos que permiten concretar las propiedades o el comportamiento de la etiqueta. Están siempre en la etiqueta de apertura y su valor va siempre entre comillas. Por ejemplo la etiqueta párrafo (<p>) tiene el atributo align que permite alinear el párrafo con las siguientes opciones: left, center, right y justify.
Si queremos hacer una alineación centrada escribiremos:
<p align="center">Esto es un párrafo.</p>
Actividad 2:
Incluye en la página anterior 3 líneas cada una con una alineación distinta. Guarda el archivo con el nombre web2.html.
Etiquetas de texto:
Tenéis en este enlace información sobre cómo estructurar un texto con las etiquetas <p>, <h1>,<h2>, <h3>,... :
https://uniwebsidad.com/libros/xhtml/capitulo-3/estructurar
Haced los ejemplos 3.3, 3.4 y 3.5 y guardadlos en vuestro DRIVE.
En este otro enlace hay varias etiquetas más aplicables a los textos (solo estudiaremos
las etiquetas <em> y <strong>):
https://uniwebsidad.com/libros/xhtml/capitulo-3/marcado-basico-de-texto
Haced el ejercicio 2 y guardadlo en vuestro DRIVE.
Y por último en este otro enlace tenéis información sobre qué etiquetas usar
para poner espacios en blanco ( ),nuevas líneas (<br>) y mostrar el texto
tal y como lo habéis escrito (<pre>) :
https://uniwebsidad.com/libros/xhtml/capitulo-3/espacios-en-blanco-y-nuevas-lineas
Haced los ejemplos 3.12, 3.13, 3.14 y 3.16 y guardadlos en vuestro DRIVE.
Tenéis en este enlace información sobre cómo estructurar un texto con las etiquetas <p>, <h1>,<h2>, <h3>,... :
https://uniwebsidad.com/libros/xhtml/capitulo-3/estructurar
Haced los ejemplos 3.3, 3.4 y 3.5 y guardadlos en vuestro DRIVE.
En este otro enlace hay varias etiquetas más aplicables a los textos (solo estudiaremos
las etiquetas <em> y <strong>):
https://uniwebsidad.com/libros/xhtml/capitulo-3/marcado-basico-de-texto
Haced el ejercicio 2 y guardadlo en vuestro DRIVE.
Y por último en este otro enlace tenéis información sobre qué etiquetas usar
para poner espacios en blanco ( ),nuevas líneas (<br>) y mostrar el texto
tal y como lo habéis escrito (<pre>) :
https://uniwebsidad.com/libros/xhtml/capitulo-3/espacios-en-blanco-y-nuevas-lineas
Haced los ejemplos 3.12, 3.13, 3.14 y 3.16 y guardadlos en vuestro DRIVE.
No hay comentarios:
Publicar un comentario