Pe lângă compunerea unui mesaj de poştă electronică în format Plain Text, Microsoft Outlook 2003 poate îmbogăţi aspectul textului prin două metode:
- format Rich Text (meniul Actions -> New Mail Message Using -> Rich Text)
- format HTML (meniul Actions -> New Mail Message Using -> HTML)
Ambele variante sunt realizate printr-un editor vizual înglobat în Outlook, care oferă toate facilităţile (meniuri, butoane, shortcut-uri) pentru realizarea unui text cât mai atrăgător. Ca editor pentru mesaje poate fi folosit şi Microsoft Word 2003.
Formatul HTML (Hypertext Markup Language)
Prezintă avantajul faţă de scrierea în format Rich Text că mesajul poate fi uşor deschis de orice client e-mail, sau interfaţă web. HTML este un limbaj prin care se schimbă modul de prezentare a textului folosindu-se un sistem de marcaje (tags).
Documentele HTML sunt fişiere exclusiv de tip text având codurile speciale de marcare inserate chiar în interiorul textului (spre deosebire de fişierele .doc de exemplu, care sunt fişiere binare, special codate). Prin aceste coduri de marcare se controlează formatarea documentului (font, paragraf), se pot defini legături (links) către alte documente, se introduc imagini, simboluri şi alte elemente grafice.
Codul sursă al unui mesaj e-mail în format HTML este vizibil dacă în modul de vizualizare sau editare a mesajului se dă click dreapta pe conţinutul său şi se alege comanda View Source.
COD DE MARCARE
Codurile de marcare sunt încadrate de două caractere speciale de delimitare pentru a le deosebi de textul propriu-zis al documentului: “<” şi “>”. Toate marcajele HTML conţin aceste caractere şi fiecare caracter de început (“<”) trebuie să aibă un caracter de încheiere (“>”):
<cod>
ELEMENT DE MARCARE
Un element de marcare este în general format din 2 coduri de marcare (de deschidere si de închidere) care înconjoară conţinutul. Cele mai multe coduri – dar nu toate – trebuie să apară în perechi, pentru a identifica blocul asupra căruia se aplică respectivul cod.
<cod> ...conţinut... </cod>
Există elemente de marcare formate şi dintr-un singur cod (fără a avea codul de încheiere), însă acestea nu se aplică unui anumit conţinut, ci sunt de sine stătătoare.
<cod1> ...conţinut... </cod1> <cod2> <cod3> <cod4> ...conţinut... </cod4>
Elementele de marcare se pot imbrica, dar trebuie păstrată structura ierarhică (un element trebuie să se închidă în interiorul elementului ierarhic superior):
<cod1>...conţinut...<cod2>...conţinut...</cod2>...conţinut...</cod1>
ATRIBUTE
Atributele definesc diferite proprietăţi pentru un element de marcare şi se adaugă doar la marcajul de început al acestuia, de forma:
<cod atribut1=“valoare1” atribut2=“valoare2”... >
Numele atributelor nu sunt case sensitive, dar valorile pot fi case sensitive. Enumerarea mai multor atribute pentru acelaşi element se face separându-le prin spaţiu.
FIŞIER HTML
Forma generală a unui document (fişier) HTML este:
<HTML> <HEAD> ... </HEAD> <BODY> ... </BODY> </HTML>
Există 2 marcaje care delimitează documentul, declarându-l de tip HTML. Acestea sunt <HTML> şi </HTML> plasate la începutul, respectiv sfârşitul documentului. În interiorul acestei structuri există 2 blocuri:
Zona de antet (Head) delimitată de marcajele <HEAD> … </HEAD>
Conţine informaţii generale despre document, cuprinzând marcaje ce descriu titlul, informaţii despre autor, cuvinte-cheie despre categoria şi conţinutul site-ului, relaţiile cu alte documente, etc.
Cuprinsul sau conţinutul efectiv al paginii (Body) delimitat de <BODY> … </BODY>
Este cel mai important şi mai cuprinzător marcaj. Aici se găseşte practic întregul conţinut vizibil al documentului.
Marcaje HTML
1. TEXT
1.1 Fonturi, dimensiuni, culori
Marcajul <FONT> … </FONT> poate seta fontul, dimensiunea şi culoarea cu care este scris un text. Atributele marcajului <FONT> care modifică fontul, dimensiunea sau culoarea textului, sunt:
- FACE=”font_1[,font_2][,font_3]” – setează fontul. Se poate indica o listă de fonturi, caz în care se utilizează primul font din listă ce se găseşte instalat în sistemul unde se vizualizează pagina de web. Dacă nici un font nu se găseşte, se foloseşte cel definit implicit în browser.
- SIZE=”x”, SIZE=”+x” sau SIZE=“-x” – specifică dimensiunea fontului, între 1 (cel mai mic) şi 7 (cel mai mare). Semnele plus sau minus în faţa unui număr indică dimensiunea relativă a fontului în raport cu setarea marcajului <BASEFONT>.
- COLOR=”#rrggbb” sau COLOR=”nume_culoare” – setează o culoare aleasă astfel:
- #rrggbb – o combinaţie de 6 cifre hexazecimale din cele 16 posibile (0-9, A-F) ce dau nuanţele de roşu – verde – albastru (Red – Green – Blue)
- un nume standardizat de culoare recunoscut de browser-ul Web
<FONT FACE="Tahoma" SIZE="3" COLOR="GRAY"> Exemplu de font</FONT> <FONT FACE="Tahoma" SIZE="3" COLOR="#808080"> Exemplu de font</FONT>
1.2 Stiluri, efecte
Pentru a scrie un text cu diverse stiluri sau efecte se folosesc marcajele:
<B> … </B> sau <STRONG> … </STRONG> – pentru a scrie îngroşat (Bold)
<I> … </I> sau <EM> … </EM> - pentru a scrie înclinat (Italic)
<U> … </U> – pentru a scrie subliniat (Underline)
<SUP> … </SUP> – pentru a scrie ca exponent Superscript
<SUB> … </SUB> – pentru a scrie ca indice Subscript
<STRIKE> … </STRIKE> – pentru a tăia textul cu o linie orizontală Strikethrough
<STRONG>Text ingrosat</STRONG> <U><EM> Text subliniat si inclinat</EM></U>
2. PARAGRAF
Elementul <P> … </P> marchează existenţa unui nou paragraf.
2.1 Aliniere
Alinierea implicită a unui paragraf este la stânga ecranului. Pentru alte alinieri se foloseşte atributul:
- ALIGN=”center” sau ALIGN=”right” – aliniere la centru sau la dreapta
<P>Paragraf initial.</P> <P ALIGN="RIGHT">Aici incepe un nou paragraf aliniat la dreapta.</P>
2.2 Liste
Listele sunt de două tipuri: neordonate (marcate) şi ordonate (numerotate).
Liste neordonate scot în evidenţă fiecare element component prin adăugarea unui marcaj tipografic (bullet) sau a altui semn distinctiv. Marcaje folosite: <UL> … </UL> (Unordered List) pentru definirea tipului listei şi <LI> … </LI> (List Item) pentru specificarea unui element ala listei. Atribut:
- TYPE=”disc” | “circle” | “square”
<UL TYPE="square"> <LI>Element 1</LI> <LI>Element 2</LI> </UL>
Liste ordonate permit numerotarea automată a elementelor listei. Marcaje folosite: <OL> … </OL> (Ordered List) pentru definirea tipului listei şi <LI> … </LI> (List Item) pentru specificarea unui element ala listei. Atribut:
- TYPE=”1″ | “a” | “A” | “i” | “I”
<OL TYPE="a"> <LI>Element 1</LI> <LI>Element 2</LI> </OL>
2.3 Titluri şi subtitluri (Headings)
Se pot crea folosind marcajele <H1> … </H1> (dimensiunea cea mai mare a textului) până la <H6> … </H6> (dimensiunea cea mai mică).
<H1>Titlu</H1> <H4>Subtitlu</H4>
2.4 Linii orizontale (Horizontal Rule)
O linie sau riglă (“rule”) separă vizual o porţiune dintr-o pagină web de restul documentului. Marcajul este <HR> şi permite atributele:
- SIZE=”x” – grosimea liniei
- WIDTH=”x%” – lungimea liniei raportată la lăţimea paginii.
<HR SIZE=”4” WIDTH=”50%”>
3. FUNDAL
Marcajul <BODY> permite, printre altele, două atribute pentru stabilirea pe fundalul paginii a unei culori sau a unei imagini: BGCOLOR şi BACKGROUND.
3.1 Culoare
- BGCOLOR=”#rrggbb” sau BGCOLOR=”nume_culoare”
<BODY BGCOLOR=”#FF0000”>Aceasta pagina are fundal rosu.</BODY>
3.2 Imagine
- BACKGROUND=”fişier_imagine” – specifică fişierul imagine precedat de calea până la el
<BODY BACKGROUND="fundal.gif"> Aceasta pagina are o imagine pe fundal.</BODY>
4. IMAGINI
Marcajul <IMG> se foloseşte pentru introducerea unor imagini în documentele HTML. Atribute:
- SRC=”fişier_imagine” – specifică sursa (source) folosită, precedată eventual de calea până la acel fişier imagine;
- BORDER=”x” – grosimea chenarului imaginii
- WIDTH=”x” – lăţimea imaginii
- HEIGHT=”x” – înălţimea imaginii
<img src="img3.jpg" border="5" width="350" height="25%">
5. LEGĂTURI (LINKS)
Legăturile se bazează pe marcajul HTML <A> – ancoră (anchor). Acesta permite saltul la o altă resursă sau la o anumită poziţie în cadrul aceluiaşi document. Formatul acestui marcaj este:
<A comandă=”ţintă”>…</A>
unde:
- comandă poate fi:
- “HREF” – referinţă (Hypertext REFerence);
- “NAME” – pentru definirea unei etichete (Bookmark) amplasată undeva în document.
- ţinta unui link poate fi:
- resursă Web – poate fi o adresă sau un fişier; se accesează cu comanda “HREF”;
- etichetă - adresă (poziţie) inserată în pagina web curentă sau în alt document HTML.
5.1 Legătură către o etichetă (Bookmark)
1. Se defineşte în document poziţia etichetei:
<A NAME=”et1”>Eticheta 1</A>
2. Se inserează acolo unde se doreşte linkul către acea etichetă:
<A HREF=”#et1”>Salt la Eticheta 1</A> <A HREF=”doc2.html#pag2”>Pagina 2 din documentul doc2</A>
5.2 Legătură către o altă resursă Web
Resursa accesată poate fi:
- orice fişier, de orice tip, aflat pe calculatorul local, în reţeaua locală (LAN) sau în Internet;
- o adresă de Internet (de orice tip);
- o adresă e-mail (pentru trimiterea unui mesaj prin poşta electronică).
Resursa este identificată printr-o structură URL sub forma:
schema://utilizator:parola@gazdă_Internet:număr_port/cale/până/la/fişier.html?interogare#etichetă
Există următoarele părţi distincte ale acestei sintaxe:
- schema: şir de litere şi/sau cifre prin care se face interacţiunea cu o anumită resursă. Exemple: http – resurse prin protocolul HTTP; https – resurse prin protocolul HTTP Secure; ftp – resurse prin protocolul FTP; mailto – adrese e-mail; file – adresarea unui fişier local. Printre schemele neoficiale: aim, feed, finger, javascript, magnet, mms, skype, ssh, ymsgr.
- structura ierarhică formată din:
- autoritate:
- utilizator:parola (specificate câteodată, în special la servere FTP cu autentificare, dar şi la pagini web cu acces restricţionat)
- gazdă_Internet (hostname – numele domeniului sau adresa IP)
- număr_port (câteodată, când resursa este furnizată pe alt port decât cel implicit pentru un anumit protocol)
- calea: secvenţă asociată unei structuri arborescente până la resursa solicitată (exemplu: “/cale/până/la/”)
- autoritate:
- resursa solicitată (exemplu: “fişier.html”)
- interogare: este exprimată sub forma atribut=valoare, separate prin operatorul & (exemplu: “key1=value1&key2=value2″)
- etichetă: informaţie suplimentară care indică spre o resursă secundară din cadrul resursei principale (de exemplu, un anumit titlu de capitol dintr-o pagină Web).
<A HREF=”http://www.yahoo.com”>Yahoo</A> <A HREF=”mailto:user2@example.com”>Trimite mail lui user2</A> <A HREF=”ftp://ftp.adobe.com/free/acrobat/reader.zip”>Acrobat Reader</A> <A HREF=”http://books.google.ro/books?id=rIgzQlU6RgAC&printsec=frontcover&dq=html&hl=en&f=false">HTML: a beginner's guide</A> <A HREF=”http://www.euroqual.pub.ro/sb.htm#download">Download</A>
6. CARACTERE SPECIALE ÎN HTML
Pentru caracterele speciale, inclusiv caracterele “<” şi “>”, limbajul HTML utilizează o sintaxă specială de forma:
&cod;
unde cod poate fi:
- o mnemonică (secvenţă rezervată de caractere cu o anumită semnificaţie);
- un număr, corespunzător codului de 8 biţi International Standards Organization Latin-1 (ISO 8859/1).
Exemplu: Semnul < (“mai mic decât”) se poate introduce într-un document HTML ca:
- mnemonică: <
- cod ISO: <
7. META-INFORMAŢII
Marcajul <META> … </META> furnizează informaţii generale (meta-informaţii) despre un document HTML. Acest marcaj se plasează în secţiunea <HEAD> şi oferă o descriere a conţinutului documentului, informaţii relevante şi utile pentru browsere sau motoare de căutare: autor, descriere, cuvinte cheie, setul de caractere utilizat, limba în care este scrisă pagina, programul utilizat pentru generarea paginii etc. Format:
<META NAME=”…” CONTENT=”…”>
<META HTTP-EQUIV =”…” CONTENT=”…”>
Motoarele de căutare (Search Engines) folosesc o parte din aceste informaţii pentru a indexa şi a ordona paginile Web în funcţie de diverse criterii (limbă, domeniu, cuvinte cheie, relevanţă etc.).
<meta content="numele autorului"> <meta content="nume recenzor, data recenziei"> <meta content="Curs Software birotica"> <meta content="curs, software, birotica, student, facultate, electronica, office"> <meta content="Microsoft FrontPage 4.0"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="ro"> <meta content="index, nofollow"> <meta http-equiv="expires" content="Mon, 27 Sep 2010 14:30:00 GMT"> <meta content="7 days">
