Titulos y texto

Bien vamos a empezar a crear nuestra pagina web, primero iniciemos nuestra estructura html como lo hicimos en los ejemplos anteriores.

Adentro de nuestro <body></body> vamos a poner todo el contenido de nuestra pagina, la primera etiqueta que aprenderemos sera la etiqueta de titulo <h1></h1>.

Simplemente debemos de poner adentro de nuestro body la etiqueta de titulo <h1></h1> y adentro de la etiqueta mostrar lo que queremos poner como titulo, por ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hola Mundo!</h1>
</body>
</html>

El resultado seria el siguiente:

NOTA: Para poder ver los cambios de la pagina web tendremos que recargar la pagina para ver los cambios en nuestra pagina.

NOTA: Para poder abrir nuestra pagina solo tendremos que abrir nuestro archivo index.html y listo ya podremos ver nuestra pagina.

Bien ahora lo siguiente que tienes que aprender es los diferentes tipos de titulos que hay: existen 6 tipos de titulos y te los mostrare:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Soy un h1</h1>
    <h2>Soy un h2</h2>
    <h3>Soy un h3</h3>
    <h4>Soy un h4</h4>
    <h5>Soy un h5</h5>
    <h6>Soy un h6</h6>
</body>
</html>

Ahora si quieres poner parrafos o texto en tu pagina utilizaremos la etiqueta <p></p> esta etiqueta nos permitira poner parrafos o texto de lo que queramos mostrar en nuestra pagina, por ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Esto es un parrafo o texto de mi pagina web y puedo poner lo que sea</p>
</body>
</html>

Como puedes ver <h1></h1> es el titulo mas grande que ofrece mientras que <h6></h6> es el mas pequeno, se recomienda usar un <h1></h1> por pagina y utilizar el <h2> en adelante para el resto de cosas. Adentro de los titulos puedes agregar lo que quieras poner como titulo solo debes de escribirlo adentro del titulo.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>Esto es un titulo</h2>
    <h2>Aqui puedo poner cualquier cosa como titulo</h2>
</body>
</html>

Ahora si quieres poner parrafos o texto en tu pagina utilizaremos la etiqueta <p></p> esta etiqueta nos permitira poner parrafos o texto de lo que queramos mostrar en nuestra pagina, por ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Esto es un parrafo o texto de mi pagina web y puedo poner lo que sea</p>
</body>
</html>

Este seria el resultado:

Anterior Siguiente