Crearea tabelelor

Inserarea unui tabel se realizează astfel: din meniul Table→Insert→ Table.

Editarea în tabel se execută ca şi în Word. Pentru diverse efecte vizuale marcăm tabelul şi din meniul Table→Table Properties alegem culoarea fundalului, a bordurii, grosimea bordurii, culori diferite pentru bordura care e mai luminoasă şi pentru cea mai întunecată , distanţa în interiorul şi dintre celulele tabelului.

 

Observaţie:

Este recomandat , ca atunci când dorim să edităm un text sub forma unei pagini de ziar, să-l introducem într-un tabel cu margini „invizibile” utilizatorului pentru a păstra forma de coloane.
„Anularea bordurii” o realizăm prin stabilirea bordurii la valoarea zero border=”0”:

<TR> – etichetă care delimitează o linie a tabelului

<TH> – delimitează capul de tabel, datele fiind scrise îngroşat

<TD> – delimitează o celulă a tabelului

Coduri de culori

Culorile acceptate în HTML se regăsesc în tabelul de mai jos:

 

Codul de culori RGB

Acest cod de culori nu este recomandat, deoarece Internet Explorer este singurul browser care suportă valorile RGB în HTML.

RGB este prescurtarea pentru: Red, Green, Blue. Fiecare dintre aceste culori poate lua orice valoare între 0 (nu colorează deloc) şi 255 (în totalitate acea culoare). Am alăturat mai jos forma de scriere a culorilor in RGB. Dacă folosiţi un browser care nu este Internet Explorer nu veţi avea nici un rezultat.

 

bgcolor=”rgb(255,255,255)”	White
bgcolor=”rgb(255,0,0)”	Red
bgcolor=”rgb(0,255,0)”	Green
bgcolor=”rgb(0,0,255)”	Blue

 

Codul de culori hexazecimal

 

Sistemul de culori hexazecimal este sistemul standard pentru toate browser-ele web. Este compatibil în aplicaţiile web sau aplicaţii locale precum gimp, photoshop, corel, etc.

Sistemul coduri de culori hexazecimale este o reprezentare de 6 caractere de culoare. Primele două caractere (RR) reprezintă culoarea roşu (Red), următoarele două (GG) culoarea verde (Green), iar ultimele două (BB) culoarea albastră (Blue).

 

bgcolor=”#RRGGBB”

 

Sistemul hexazecimal conţine 16 valori formate din cifre de la zero la nouă şi apoi literele de la A la F. Prin combinarea lor se obţine un cod de culoare.

Un exemplu de cod hexazecimal ar fi: bgcolor=”#FFAA33″

Sistemul hexazecimal este compatibil cu majoritatea browser-elor. Mai jos aveţi tabel cu codurile corespunzătoare culorilor. Codurile culorilor sunt prezentate în tabel prin cod scurt, pe care îl veţi interpreta astfel: 603 este de fapt „#660033” sau F3C înseamnă „#FF33CC”.

Totuşi doar 22 dintre cele 216 culori sunt cu adevărat sigure şi nu vor fi modificate în reprezentare de către nici un browser. În tabelul de mai sus culorile cu adevărat sigure au fost reprezentate cu un asterix ( * ) în faţă.

 

Tabelul care le conţine numai pe acestea:

Linie orizontala

Eticheta <HR> („horizontal rule„) produce apariţia unei rigle (linii) orizontale în fereastra navigatorului. O astfel de linie e necesară pentru a separa diferite secţiuni din documentul vostru. De exemplu, mulţi adaugă o astfel de linie la sfârşitul textului lor.

Puteţi stabili grosimea liniei, precum şi lungimea ei (procentul din lărgimea ferestrei programului de navigare)

Exemplul următor:

<HR SIZE = 2  Color =”culoare” WIDTH =”50%”>

va afişa linia:

_________________________

 

Specificarea culorii unui element se poate face astfel:

• prin precizarea numelui culorii : de exemplu red, black, lightblue, drakblue
• prin utilizarea unui număr de 6 cifre hexazecimale (0 – 9 , A – F):

Color = “ #RRGGBB” . Orice culoare sau nuanţă de culoare poate fi obţinută prin combinarea unei cantităţi oarecare de roşu, verde şi albastru. Primele două cifre ale constantei RR arată cantitatea de culoare roşie, următoarele două cantitatea de verde şi ultimele două cifre arată cantitatea de albastru. De exemplu #FF0000 reprezintă culoarea roşie iar #00FF00 culoarea verde.

 Indicaţie:

Transformările pe care le puteţi aplica asupra textelor sunt aceleaşi ca şi în programul Word. Fie cu ajutorul Toolbar-ului fie din meniul Format. Pentru a alege alinierea şi stilul fonturilor folosim toolbar-ul. Mai jos este  reprezentat un exemplu în modul Split.

Observaţi tag-urile care apar în plus în funcţie de setările făcute.

Tag-uri diverse pentru fonturi

<b> ….</b>               text îngroşat (bold)

<i>….</i>                    text aplecat (italic)

<u>….</u>                 text subliniat

_…..         _{text afişat ca indice inferior}

^….          ^{text afişat ca indice superior}

<del>…</del>           text tăiat

<code>….</code>     Computer Code Text

Programul ne oferă posibilitatea sa folosim fonturi de mărimea „medium” care se va ajusta în funcţie de mărimea ecranului. Pentru a le folosi se selectează textul şi din meniul Format alegem Size.

 

 

Tag-ul  Preformating

Atunci când scriem un cod HTML vom introduce spaţii, tab-uri sau enter-uri pentru a ne putea orienta mai uşor în liniile de cod. Un browser însă va interpreta codul menţionat ca pe o singură linie de cod ignorând spaţiile şi tab-urile menţionate.

În acest sens avem tag-ul <pre> care facilitează afişarea în browser a formatării.

<pre>

Nume Utilizator        Parola Utilizator       ID Utilizator 

</pre>

Va afişa:

Nume Utilizator        Parola Utilizator       ID Utilizator

Linebreak

Lasă un spaţiu mai mic în comparaţie cu cel de paragraf. Se foloseşte într-un paragraf sau la sfârşitul unei scrisori pentru a evidenţia o semnătură.

<p>

Popescu Ion <br />

Bvd. Revoluţiei 1989, Nr. 47 <br />

Alba Iulia, România <br />

</p>

<p>

Multumesc anticipat,<br />

<br />

<br />

Popescu Ion <br />

Manager

</p>

Va avea ca efect:

Popescu Ion

Bvd. Revoluţiei 1989, Nr. 47

Alba Iulia, România

Multumesc anticipat,

Popescu Ion
Manager

Paragrafe

Spre deosebire de majoritatea editoarelor de texte, returul de car (Enter) nu este important. Aşadar, HTML nu ţine cont de cât de lung este un rând din textul tău şi, în plus, mai multe spaţii vor fi transformate (la afişare) într-unul singur. Un program de explorare nu va interpreta trecerea la un nou rând din cadrul textului tău, decât dacă apare marcajul <P>.

Paragraful este un element de bază în editare de text. Tag-ul pentru paragraf va plasa o linie goală deasupra şi una sub text pentru a fi evidenţiat, iar browser-ul îl va interpreta ca atare.

Astfel, de pildă, textul unui paragraf :

<P Align = „left | right | center | justify”> …………. Aici apare textul ……………</P>

Aşadar, trebuie indicate paragrafele cu marcajele <P>. Un program de explorare ignoră orice identare sau grup de spaţii în cadrul textului sursă. Fără elementele <P>, documentul devine un mare paragraf.

De exemplu, încercaţi următorul exemplu:

    <html>

    <head>

    <TITLE>Un exemplu simplu</TITLE>

    </head>

    <body>

    <H1>HTML este usor de invatat </H1>

    <P>Bine ai venit in lumea HTML!     Acesta

    este       primul paragraf. Chiar daca e asa de

    scurt, este totusi un paragraf! </P>  <P>Iar acesta

    este cel de al doilea paragraf.</P>

    </body>

    </html>

Pentru păstrarea lizibilităţii într-un fişier HTML, puneţi titlurile pe linii separate, folosiţi linii goale acolo unde vă ajută să identificaţi începutul unei noi secţiuni şi folosiţi paragrafe separate cu linii goale, în completarea etichetelor <P>. Acestea vă vor ajuta la editarea documentului, chiar dacă exploratorul le va ignora.

De notat că eticheta de final </P> poate fi omisă. Aceasta deoarece programul de explorare înţelege că întâlnirea unei noi etichete <P> implică şi finalul paragrafului precedent.

Utilizând atributul ALIGN între <P> şi </P> poţi alinia după dorinţă conţinutul respectivului paragraf. Iată un exemplu, în care textul apare aliniat pe centru:

<P align=center>

    Acesta este un paragraf centrat.

    </P>

Efectul va fi:

Acesta este un paragraf centrat.

Titluri

HTML are şase nivele de titluri, numerotate de la 1 la 6, nivelul 1 fiind cel mai proeminent. Titlurile sunt afişate pe ecran în fonturi mai mari şi/sau mai îngroşate decât textul obişnuit. Primul titlu ar oricărui document va fi etichetat cu <H1>.

Sintaxa unui element de titlu este:

<Hy>Textul titlului </Hy>

unde y este un număr între 1 şi 6, indicând nivelul titlului.

Să nu săriţi peste un nivel de titlu în documentele pe care le scrieţi. De exemplu, să nu începeţi cu titlul de nivel unu (<H1>) şi apoi să treceţi direct la nivelul 3 (<H3>).

Liste

HTML acceptă liste numerotate, nenumerotate şi de definiţie. Putem avea şi liste imbricate una în alta, dar folosiţi aceasta cu cumpătare, deoarece mai multe liste imbricate pot fi greu de urmărit.

 

Liste nenumerotate

 

Pentru a face o listă nenumerotată, cu buline în faţă, procedaţi astfel:

1. începeţi cu o etichetă <UL> („unnumbered list”);
2. introduceţi elementele listei precedate de eticheta <LI> („list item”) (nu e nevoie de marcaj final </LI>);
3. încheie lista cu eticheta <UL>.

Iată un exemplu simplu cu trei elemente în listă:

    <UL>

    <LI> mere

    <LI> pere

    <LI> portocale

    </UL>

 

Rezultatul este:

• mere
• pere
• portocale

 

Un item al listei poate conţine mai multe paragrafe, pe care le veţi marca cu <P>.

Se poate introduce atributul TYPE ce va specifica elementul grafic dorit (cerc, disc sau pătrat) , astfel:

<LI Type = „valoare”> ….text…. </LI>

 

Valoarea atributului Type poate fi:

• CIRCLE – afişează un cerc în faţa textului
• DISC – afişează un disc (opţiune implicită)
• SQUARE – afişează un pătrat.

 

Liste numerotate

 

O listă numerotată (numită şi listă ordonată) este identică cu o listă nenumerotată, doar că în loc de marcajul <UL> se foloseşte <OL> („ordered list”). Itemii sunt marcaţi tot cu eticheta <LI>. Selectăm cuvintele ce vor forma itemii listei şi apoi din meniul Format alegem List şi stilul dorit (vezi imaginea). Acelaşi efect îl obţinem prin selectarea comenzii corespunzătoare de pe toolbar.

 

Următorul cod HTML:

    <OL>

    <LI> mere

    <LI> pere

    <LI> portocale

    </OL>

produce următorul rezultat formatat:

 

1. mere
2. pere
3. portocale

 

 

Liste de definiţie

 

O listă de definiţie (marcată prin <DL>) constă, de obicei, din alternarea unui termen de definit (marcat cu <DT>) şi o definire a definiţiei (<DD>). În general, programele de navigare formatează definiţiile pe un nou rând.

Iată un exemplu:

    <DL>

    <DT> HTML

    <DD> HTML, Limbajul de marcare hipertext,

            este folosit pentru descrierea documentelor

            din World Wide Web.

    <DT> WEB

    <DD> WEB vine de la World Wide Web,

            pânza de paianjen mondiala

    </DL>

 

Rezultatul va fi:

HTML

HTML, Limbajul de marcare hipertext, este folosit pentru descrierea

documentelor din World Wide Web.

WEB

WEB vine de la World Wide Web, „pânza de paianjen mondiala”.

 

Elementele <DT> şi <DD> pot conţine mai multe paragrafe (foloseşte eticheta <P> în acest scop), liste sau alte informaţii.

 

 

Liste imbricate

 

Listele pot fi cuprinse una într-alta ca, de exemplu:

<UL>

    <LI> Fructe de vara

                         <UL>

                         <LI> capsuni

                         <LI> visine

                         <LI> cirese

                         </UL>

    <LI> Fructe de toamna

                         <UL>

                         <LI> mere

                         <LI> struguri

                         </UL>

    </UL>

 

Codul de mai sus va avea rezultatul:

Fructe de vara

• capsuni
• visine
• cirese

Fructe de toamna

• mere
• struguri

EDITAREA TEXTELOR

În mediul Design  vom realiza editarea textelor şi apoi deschidem în modul Split sau Source şi observăm că acest text apare cuprins între tag-urile <body> …. </body> .

Notiuni introductive

Lansaţi în execuţie programul KompoZer .

În partea inferioară (stânga) a ferestrei observăm 3 butoane ce reprezintă 3 moduri de lucru: Design, Split şi Source.

În  mediul Design efectuăm editarea propriu-zisă a paginii web. Adică o putem privi ca pe o pagină din Word în care introducem texte, imagini, tabele, diagrame, simboluri, grafice şi încă ceva specific unei pagini web : link-uri.

Link-urile sunt legături către alte pagini. Ele pot fi reprezentate prin texte sau imagini.

În mediul Split putem vizualiza codul sursă din spatele paginii web (care nu este vizibil vizitatorului paginii respective) în timp real. Orice pagină web (prin pagina web înţelegem fişier) trebuie să înceapă cu tag-ul <Html> şi se va încheia cu </Html> .

Prin Tag înţelegem o etichetă  cuprinsă între parantezele unghiulare <…..> şi care reprezintă un anumit efect aplicat textului, imaginii sau asupra oricărei componente a paginii. <TAG> – marchează începutul unui bloc iar </TAG> – marchează sfârşitul blocului.

În mediul Source putem vizualiza numai codul sursă al paginii create de noi.

Observaţie:

Înainte de a începe crearea unor pagini web trebuie să aveţi în vedere următorul lucru: Toate fişierele create trebuie salvate într-un singur director iar întotdeauna fişierul de plecare va avea numele index.html

Cuvinte de reţinut

• Tag – folosit pentru a specifica regiuni ale documentului HTML pe care le va interpreta ulterior browser-ul. Tag-urile vor arăta astfel: <tag>
• Element – este un tag complet, având un <tag> de deschidere şi unul de închidere </tag>

Atribut – este folosit pentru a modifica valoarea unui element în HTML. De obicei un element are mai multe atribute.

Excepţii – Tag-uri care nu au nevoie de închidere

 

Există câteva tag-uri care nu îndeplinesc modelul arătat mai sus. Cel mai simplu exemplu este „line break” <br/> . Line break se foloseşte pentru a spune browser-ului că vrem să coborâm cu o linie mai jos, fără însă a încheia paragraful.

Alte tag-uri care urmează aceeaşi regulă ar mai fi:

 

<img src=”../…./image.jpg” /> – tag pentru poze–

<br /> – tag pentru linie nouă–

<input type=”text” size=”20″ /> – elemente de formular –