2_2_Conceptos_básicos.pdf

31/3/2020 2.2 Conceptos básicos | 2.2 Conceptos básicos
file:///C:/Users/Alumno/Desktop/rgalangLOCAL/Descargables/HTML_CSS_JS/02_HTML_Introduccion_al_lenguaje/2_2_Conceptos_basicos/2_2… 1/7
2.2 Conceptos básicos
Como se ha indicado, HTML es el lenguaje de marcas que utilizamos para dotar de estructura
al contenido que existe en la Web. En el escenario más simple (los hay mucho más
complejos) escribimos un documento HTML empleando un editor de texto sin formato (texto
plano), lo almacenamos en un servidor web y se visualiza empleando un navegador.
El nombre del documento que creamos suele tener las extensiones .html o .htm y su
contenido está estructurado usando etiquetas que dotan de signi cado semántico al texto
que encierran. La mayoría de estas etiquetas aparecen de dos en dos, con una de inicio y otra
de cierre; y siempre encerradas entre dos antilambdas o símbolos de desigualdad menor que
< y mayor que >. Nótese que el nombre de la etiqueta de cierre aparece precedido, sin
espacios, por el carácter barra /.
Escritura de una etiqueta HTML
https://codepen.io/CRFPTIC/embed/yLLMwKQ?height=135&theme-id=0&default-
tab=html&user=CRFPTIC&slug-hash=yLLMwKQ&pen-title=10001&name=cp_embed_1
See the Pen
Existen algunas etiquetas (que no llevan nunca contenido) que no van en parejas; aparecen
aisladas sin etiqueta de cierre.
Veamos algún trozo de código real.
Podemos crear párrafos de texto usando la etiqueta p
https://codepen.io/CRFPTIC/embed/ZEEePmZ?height=135&theme-id=0&default-
tab=html%2Cresult&user=CRFPTIC&slug-hash=ZEEePmZ&pen-title=1002&name=cp_embed_2
<etiqueta>Aquí iría el contenido</etiqueta>
Resources
HTML
E D I T O N
Result

See the Pen
O el título de la página mediante la etiqueta h1
https://codepen.io/CRFPTIC/embed/yLLMwZw?height=135&theme-id=0&default-
tab=html%2Cresult&user=CRFPTIC&slug-hash=yLLMwZw&pen-title=1003&name=cp_embed_3
See the Pen
También nos permite crear elementos que incluyan otros, como un artículo con su título y
texto;
https://codepen.io/CRFPTIC/embed/abbJMgv?height=165&theme-id=0&default-
tab=html%2Cresult&user=CRFPTIC&slug-hash=abbJMgv&pen-title=1004&name=cp_embed_4
See the Pen
Cuando un navegador web accede al documento, interpreta las etiquetas y muestra el
contenido de acuerdo con sus reglas preestablecidas; así el título se verá con un tamaño de
fuente mayor que los párrafos y en negrita. No obstante, no debemos olvidar que HTML no
es un lenguaje orientado a la presentación de los elementos, sino únicamente a su de nición.
No se preocupa por cómo se ve, sino por qué es. De la presentación se encargará el
<p>Esto es un párrafo</p> Esto es un párrafo
Resources
HTML
E D I T O N
Result
1× 0.5× 0.25× Rerun
<h1>Título</h1>
Resources
HTML
E D I T O N
Result
<article>
<h1>Título</h1>
<p>Párrafo</p>
</article>
Resources
HTML
E D I T O N
Result

navegador mediante sus reglas prede nidas o mediante las que le proporcionemos nosotros
utilizando otro lenguaje, CSS.
A lo largo del curso, hablaremos de etiquetas y de elementos HTML. Es importante tener
clara la diferencia: las etiquetas se usan para construir elementos. Es decir, un elemento
HTML (por ejemplo un párrafo) suele constar de una etiqueta de inicio, un contenido, que en
este caso será el texto del párrafo, y una etiqueta de cierre.
Como se dijo anteriormente, hay elementos que no precisan etiqueta de cierre. Son
elementos sin contenido creados por una única etiqueta, como img, br, etc.
Hay que indicar que podemos escribir las etiquetas indistintamente en minúsculas o
mayúsculas, si bien es cierto que se trata de una práctica actualmente muy extendida el uso
exclusivo de minúsculas para el nombre de las etiquetas.
Los espacios en blanco son tratados de forma algo peculiar en el contenido de los elementos
HTML. Si aparece más de un espacio en blanco o saltos de línea en el contenido de un
documento HTML, éstos se agruparán en uno solo. De este modo, los tres siguientes trozos
de código ofrecerán el mismo resultado:
https://codepen.io/CRFPTIC/embed/xxxqebV?height=265&theme-id=0&default-
tab=html%2Cresult&user=CRFPTIC&slug-hash=xxxqebV&pen-title=1005&name=cp_embed_5
See the Pen
Este comportamiento nos puede crear problemas cuando queramos que aparezcan esos
espacios extras en nuestra web. Para corregirlo siempre podremos recurrir a CSS, no se debe
olvidar que HTML no se encarga de la presentación de los elementos. No obstante, como
recurso a usar antes de que aprendamos a manejar CSS, podremos añadir espacios en blanco
utilizando la entidad HTML 'nbsp' pero siempre como último recurso, ya que todo lo que
tenga que ver con la presentación de la página deberemos modi carlo mediante CSS. Las
<h2> El título de mi sitio web </h2>
<h2>El título de mi sitio web </h2>
<h2>
El
título de
mi
sitio web
</h2>
Resources
HTML
E D I T O N
Result

entidades HTML se escriben precedidas del carácter ampersand y nalizadas por punto y
coma. Una lista de estas entidades la podemos consultar en la especi cación.
https://codepen.io/CRFPTIC/embed/gObopMB?height=265&theme-id=default&default-
tab=html%2Cresult&user=CRFPTIC&slug-hash=gObopMB&pen-
title=1005bis&name=cp_embed_6
See the Pen
Una buena práctica a la hora de escribir nuestro código HTML es cuidar su presentación para
mejorar la legibilidad. En tipografía esto se llama sangrar (o en informática indentar) el
código. Siempre será más legible esto:
https://codepen.io/CRFPTIC/embed/dyyvLMR?height=265&theme-id=0&default-
tab=html%2Cresult&user=CRFPTIC&slug-hash=dyyvLMR&pen-title=1006&name=cp_embed_7
See the Pen
Que esto otro:
<h2>      El título de mi sitio web </h2>
<h2>El      título
de   mi       sitio web
</h2>
<h2>
El<br>
título de<br>
          mi<br>
sitio web
</h2>
Resources
HTML
E D I T O N
Result
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a vehicula
augue. Suspendisse ut arcu tempor, feugiat turpis vel, sagittis arcu. Fusce vel
gravida velit, sed tincidunt sapien.
</p>
<p>
Aliquam eu urna sem. Maecenas eget purus iaculis, pharetra ex sed, vehicula ex.
Morbi id euismod enim. Maecenas in mattis lacus, a vulputate neque.
</p>
</article>
Resources
HTML
E D I T O N
Result

https://codepen.io/CRFPTIC/embed/vYYxMXW?height=265&theme-id=0&default-
tab=html%2Cresult&user=CRFPTIC&slug-hash=vYYxMXW&pen-title=1007&name=cp_embed_8
See the Pen
Las etiquetas, además de su nombre, pueden proporcionar más información sobre el
elemento empleando atributos a continuación de su nombre. Estos atributos suelen aparecer
como atributo="valor" o atributo='valor'
https://codepen.io/CRFPTIC/embed/pooeBNM?height=145&theme-id=0&default-
tab=html%2Cresult&user=CRFPTIC&slug-hash=pooeBNM&pen-title=1008&name=cp_embed_9
See the Pen
Ciertos atributos no precisan que les indiquemos su valor, se denominan booleanos, como
autoplay en el siguiente ejemplo:
https://codepen.io/CRFPTIC/embed/GRRWLWd?height=145&theme-id=0&default-
tab=html&user=CRFPTIC&slug-hash=GRRWLWd&pen-title=1009&name=cp_embed_10
<article><h1>Apuntes de tercero</h1><h2>Tema 1</h2><p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vestibulum a vehicula augue. Suspendisse ut arcu
tempor, feugiat turpis vel, sagittis arcu. Fusce vel gravida velit, sed tincidunt
sapien.</p><p>Aliquam eu urna sem. Maecenas eget purus iaculis, pharetra ex sed,
vehicula ex. Morbi id euismod enim. Maecenas in mattis lacus, a vulputate neque.
</p></article>
Resources
HTML
E D I T O N
Result
<p class="importante">Este párrafo tiene asignada la clase “importante”</p>
Resources
HTML
E D I T O N
Result

See the Pen
Y como vemos, no tenemos por qué limitarnos a un único atributo
https://codepen.io/CRFPTIC/embed/MWWpRoY?height=135&theme-id=0&default-
tab=html%2Cresult&user=CRFPTIC&slug-hash=MWWpRoY&pen-
title=1010&name=cp_embed_11
See the Pen
De la cantidad de atributos que podemos emplear con las etiquetas HTML, un par de ellos
destacan por su versatilidad y porque se usan de forma intensiva junto a CSS y JavaScript
para facilitar la comunicación entre estos distintos lenguajes, los atributos class e id.
Ambos se usan para identi car elementos dentro de nuestra página, un párrafo entre varios
o una serie de imágenes del resto, y ambos admiten cualquier texto como valor. La diferencia
está en que el valor dado al atributo id debe ser único, no repetirse en ningún otro elemento
de la página; mientras que el valor asignado a la clase puede reutilizarse en distintos
elementos.
https://codepen.io/CRFPTIC/embed/LYYWvjL?height=135&theme-id=0&default-
tab=html&user=CRFPTIC&slug-hash=LYYWvjL&pen-title=1011&name=cp_embed_12
See the Pen
<video src="pelicula.avi" autoplay> Tu navegador no admite el elemento video.
</video>
Resources
HTML
E D I T O N
Result
<h1 class="titulo" lang="en">Title</h1>
Resources
HTML
E D I T O N
Result
<p id="datos-personales" class="destacado">Un párrafo con clase e id</p>
Resources
HTML
E D I T O N
Result

Obra publicada con Licencia Creative Commons Reconocimiento Compartir igual 4.0
En el ejemplo anterior, la clase "destacado" podrá usarse en otros elementos de la página,
párrafos o cualquier otro (imaginemos que se usará para aplicar un color al texto diferente
del resto); mientras que el atributo id="datos-personales" no podrá usarse en ningún
otro elemento en la página, sirve para identi car de forma exclusiva el elemento.
Una lista completa de atributos disponibles, junto con las etiquetas HTML en las que están
permitidos y su descripción, puede encontrarse en la página de referencia de atributos HTML
de la Fundación Mozilla: developer.mozilla.org

2_2_Conceptos_básicos.pdf

Recomendados

Recomendados

Más contenido relacionado

Similar a 2_2_Conceptos_básicos.pdf

Similar a 2_2_Conceptos_básicos.pdf (20)

Último

Último (20)

2_2_Conceptos_básicos.pdf