Deseño Web 01: Creando páxinas
Para deseñar as nosas webs imos empregar ferramentas moi sinxelas. Crea un cartafol no teu ordenador que se chame "webTeuNome" para ir gardando todo o traballo que fagamos, logo tes que abrir un editor sinxelo de texto, como é o gedit ou o Mousepad en Linux ou o Bloc de notas en Windows (se aínda se chama así...).
Unha vez teñamos aberto o editor, imos copiar este texto e pegalo no arquivo:
<html>
<body>
<h1>Informática</h1>
<p>A informática é unha cousa moi chula.</p>
</body>
</html>
Unha vez o teñas pegado, vaite a Arquivo>Gardar Como e garda o arquivo co nome indexTeunome e a extensión que che ofreza por defecto, que será .txt.
Agora imos voltar a ir a Gardar Como, pero esta vez lle imos poñer como extensión .html.
Se vas ao cartafol, agora verás que tes dous documentos, un coa icona do Bloc de Notas e outro coa icona do navegador, algo semellante a esta imaxe:
Se abres os dous arquivos, malia que teñen o mesmo contido, un debería abrirche co editor de texto e outro co navegador que teñas instalado por defecto, algo así:
Comprobarías que o resultado é diferente, o arquivo .html aberto co navegador non amosa ningunha desas palabras e caracteres estranos que aparecen no arquivo .txt, e, pola contra, o que si que aparece é un texto cunhas características de tamaño e grosor que non aparecían no texto que pegamos. Se agora probas a abrir o arquivo .html co editor de texto, comprobarás que volta aparecer todo o texto orixinal, cos caracteres estranos.
De momento, imos traballar sempre con arquivos .html . Abrirémolos co editor de texto cando queiramos crealos ou modificalos, e co navegador cando queiramos ver o resultado.
Cando abrimos o arquivo .html cun editor de texto, podemos ver as etiquetas do documento. As etiquetas son esas palabras e letras encerradas entre ángulos (<>) que, se te fixas, verás que adoitan ir por pares, é dicir, se repite a mesma palabra ou letras dúas veces, unha vez sen barra inclinada (<html>) e outra con barra inclinada (</html>). A primeira dicimos que é unha etiqueta de apertura, e a segunda dicimos que é unha etiqueta de peche.
Dicimos que as etiquetas van aniñadas (nested), xa que unha etiqueta pode conter dentro dela outras, que, á súa vez, poden conter outras etiquetas dentro, que poden conter outras etiquetas dentro... así até o infinito:
A etiqueta <html> indica que se abre un bloque de linguaxe html, que inclúe todo o que hai até </html>.
<body> </body>está dentro do bloco <html>, e indica que o que está aí delimitado é a parte visible do documento (entraremos con detalle nisto máis adiante).
<h1> e </h1> están dentro de <body> e de <html>, e indican que o texto "Informática" terá que ser amosado con características de título de primeiro nivel, neste caso, cun tamaño máis grande e a fonte en negriña.
<p> e </p> delimitan un texto que ten que ser amosado con formato de parágrafo estándar.
O que fai o navegador é interpretar esas etiquetas, aplicando unha acción específica sobre todo o que está encerrado entre unha etiqueta de apertura e unha de peche. Igual que cando falamos de python, poderiamos dicir que un navegador é un intérprete de html. De aí que, cando o navegador le o documento anterior, o resultado que nos dá é o que xa vimos antes:
Garda o documento e pasa ao apartado seguinte.
Exercicio:
- Sobre este documento, co bloc de notas, xoga un pouco, cambia os textos, proba a engadir outro título, outro parágrafo... es capaz?