Este es el segundo tema del cuso de HTML. En este artículo os voy a mostrar como hacer varias cosas, la primera que vamos a hacer es como insertar un salto de linea en una pagina web. Lo primero que que deberíamos hacer es abrir el programa que uséis para la creación de paginas web, en mi caso el Geany y creamos un documento.
Cuando hacemos una pagina web y escribimos texto, aunque nosotros en el Geany pulsemos Enter y hagamos un salto de linea, cuando eso se muestra en el navegador web no se hace el salto de linea. Si escribimos esta pagina web:
<html>
<head></head>
<body>
Esto es un texto para mostrar
que no hace el salto de linea
</body>
</html>
Al ejecutar esta pagina web en un navegador veremos lo siguiente:
Como podéis ver, en el código hemos pulsado la tecla Enter justo después de la palabra “mostrar” pero el navegador web no hace el salto de linea. Para que lo haga debemos usar la etiqueta “<br>” justo cuando queremos que haga ese salto de linea. En este caso lo vamos a poner después de la palabra “mostrar” así:
<html>
<head></head>
<body>
Esto es un texto para mostrar<br>
que no hace el salto de linea
</body>
</html>
Si ejecutamos ahora veremos algo así:
Bien creo que es bastante sencillo. La siguiente etiqueta que vamos a usar es la etiqueta de párrafo “<p>”. Esta etiqueta servirá para delimitar una frase o conjunto de frases que queremos que vayan juntas y conformen un párrafo. Cuando terminemos el párrafo hay que cerrarla con “</p>” y nos dejara una linea en blanco para poner otra cosa, haría algo así como un <br>. Os muestro un ejemplo:
<html>
<head></head>
<body>
<p>Esto es un texto para mostrar<br>
que no hace el salto de linea</p>
Esto ya no pertenece al parrafo
</body>
</html>
Esto sera el resultado en el navegador:
Hasta aquí la etiqueta párrafo, por ahora es sencillo. Lo siguiente son los títulos, que sirven para indicar una jerarquía dentro de una pagina web. Hay 6 tamaños, del 1 al 6, de importancia de mayor a menor. Están preconfigurados cada uno con un tamaño de texto y cuando se pone uno el navegador añadirá un salto de linea justo después de cada titulo. Aquí os lo muestro con una pagina web:
<html>
<head></head>
<body>
<h1>Titulo 1</h1>
<h2>Titulo 2</h2>
<h3>Titulo 3</h3>
<h4>Titulo 4</h4>
<h5>Titulo 5</h5>
<h6>Titulo 6</h6>
</body>
</html>
El resultado sera el siguiente:
La ultima cosa que vamos a ver en este artículos son las etiquetas de énfasis. Son dos, “<strong>” y “<em>”. Son muy fáciles de usar, solo hay que poner el texto que queramos enfatizar entre ellas. Una pagina de ejemplo:
<html>
<head></head>
<body>
Esto es un <strong>texto</strong> de prueba para ver<br>
como funciona el <em>enfasis</em>
</body>
</html>
El resultado en el navegador web sera el siguiente:
Puede que en la imagen no lo veáis claramente pero la palabra “texto” que esta entre “<strong>” y “</strong>” aparece en negrita y la palabra “enfasis” que esta entre “<em>” y “</em>” aparece en formato itálica o cursiva.
Creo que con esto por hoy es suficiente para ir empezando con el lenguaje HTML y hacer vuestras primeras pruebas. Espero que pueda ir haciendo mas artículos mas rápido sobre HTML en los próximos días con la idea de ir avanzando hacia el CSS.
Si te ha gustado el contenido o te ha servido para algo compártelo en las redes sociales y así puede que le sirva también a otra persona, muchas gracias.
Esto podria interesarte
Video del curso HTML, Tema 1 Curso de HTML, Tema 1 Curso de HTML paso a paso desde cero Las particiones en Windows y Linux Malas noticias para Microsoft Fondos de escritorio 2