Deseño Web 03: Títulos, parágrafos e saltos de liña.
Imos abrir co gedit o arquivo indexTeunome.html que crearamos no apartado 1. Se non o modificaras moito, tiña que ter un texto como o do recadro, se non é así cópiao e pégao no canto do que ti teñas.
<html>
<body>
<h1>Informática</h1>
<p>A informática é unha cousa moi chula.</p>
</body>
</html>
Xa viramos un pouco o que eran estas etiquetas, para os exercicios que imos facer non te tes que preocupar demasiado de <body> (que define a parte visible no navegador do documento) nin de <html> (que define que a linguaxe na que está escrito o documento é html). Unicamente lembra poñelas sempre na mesma posición nos distintos documentos que fagamos, pero non é preciso entender moito máis.
Títulos (Headings)
As etiquetas <h1>, <h2>,..., <h6> definen os títulos nun documento html. Hai seis niveis, e é moi importante empregalos sempre para establecer as seccións do documento. Aparentemente, o único que fan é dar un formato específico ao texto que poñemos entre elas, pero a súa utilidade é moito maior, xa que serven para que os buscadores atopen mellor a información que precisan e, sobre todo, empregando unha cousa que se chaman follas de estilo en cascada ou CSS, podemos cambiar cómodamente o formato de todos os títulos dunha ou moitas páxinas á vez sen escribir máis de unha ou dúas liñas. É importante que lembres EMPREGAR SEMPRE TÍTULOS PARA AS SECCIÓNS.
Para probar, imos engadir un par de títulos e parágrafos máis a este documento. Engade as liñas en azul e comproba o resultado no navegador.
<html>
<body>
<h1>Informática</h1>
<p>A informática é unha cousa moi chula.</p>
<h2>Programación</h2>
<p>A programación non se nos deu moi ben.</p>
<h2>Deseño Web</h2>
<p>O deseño web váisenos dar moito mellor.</p>
</body>
</html>
Poderías engadirlle algún título máis de distinto nivel?
Parágrafos e saltos de liña
Sobre o mesmo arquivo, imos comprobar bloc de notas bloc de notas un par de cousas que son importantes. Copia as seguintes liñas respetando todos os saltos de liña, espacios e posicións das etiquetas.
<html>
<body>
<h1>Informática</h1>
<p>A informática é unha cousa moi chula.</p> <h2>Programación</h2>
<p>A programación non se nos deu moi ben.</p>
<h2>Deseño Web</h2>
<p>O deseño web váisenos dar moito mellor.</p>
<p>Sobre
todo
porque
imos </p>
<h1>Traballar na clase!</h1><p>(desde o primeiro día...)</p>
</body>
</html>
Podes comprobar como, aínda que nós escribimos uns parágrafos a continuación de outros, ou insertamos saltos de liña dentro do parágrafo, o navegador non nos fixo moito caso, colocou cada parágrafo e título nunha nova liña e pasou de todos os saltos de liña que nós lle metimos. Isto é porque o html non require estar disposto en liñas ordenadas, se o facemos así é para facilitar a nosa lectura, pero daría o mesmo resultado se escribimos todo o código nunha soa liña. Ademais, HTML ten unha etiqueta específica para insertar un salto de liña (break en inglés), que é <br> , e non recoñece os saltos de liña que fagamos co enter dentro dun parágrafo. A etiqueta <br> non ten etiqueta de peche.
Cambia o texto anterior polo seguinte e comproba o resultado:
<html>
<body>
<h1>Informática</h1>
<p>A informática é unha cousa moi chula.</p> <h2>Programación</h2>
<p>A programación non se nos deu moi ben.</p>
<h2>Deseño Web</h2>
<p>O deseño web váisenos dar moito mellor.</p>
<p>Sobre<br>todo<br>porque<br>imos</p>
<h1>Traballar na clase!</h1><p>(desde o primeiro día...)</p>
</body>
</html>
Exercicios:
- Realiza un documento html que teña varios títulos de varios niveis, con varios parágrafos nos que empregues os saltos de liña e envíamo por correo.
- Crea un documento html que o navegador debe amosar deste xeito:
Exercicio revisión
A miña páxina (título 1)
Esta será a miña páxina persoal (parágrafo)
De que vai isto? (titulo 2)
Isto é unha páxina de proba para aprender deseño web. (parágrafo)
Cousas que aprendemos: (título 3)
Títulos.
Parágrafos.
Saltos de liña. (parágrafo con saltos de liña)
Quen fai isto? (título 2)
Eu, que me chamo tucho méndez. (parágrafo)