 |
|
 |  |
| Aeronautica | Comunicatii | Drept | Informatica | Nutritie | Sociologie |
| Tehnica mecanica |
Html
|
Qdidactic » stiinta & tehnica » informatica » html Formatarea documentelor HTML |
Formatarea documentelor HTML
Formatarea documentelor HTML
1. Formatare text |
- Titluri - Headings
Sunt sase niveluri de titluri, numerotate de la 1 la 6, pentru 1 caracterele fiind cele mai mari. Automat sub titlu apare un rand gol.
Sintaxa este:
<Hy>Text titlu</Hy>
unde y are una din valorile 1..6.
Iata mai jos un exemplu de sursa HTML pentru cele 6 niveluri de titluri si afisarea lor:
|
<H1>Tehnologii Internet</H1> <H2>Tehnologii Internet</H2> <H3>Tehnologii Internet</H3> <H4>Tehnologii Internet</H4> <H5>Tehnologii Internet</H5> <H6>Tehnologii Internet</H6> |
Tehnologii Internet Tehnologii Internet Tehnologii Internet Tehnologii Internet Tehnologii Internet Tehnologii Internet |
- Paragrafe
In editarea fisierelor HTML, caracterul CR este ignorat. Pentru trecerea la un nou paragraf, aceasta insemnand un rand liber si apoi trecerea la cel urmator, se foloseste eticheta <P>. De obicei textul unui paragraf se include in etichetele perechi, cea de inchidere nefiind insa obligatorie; la intalnirea unei etichete <P>, browserul intelege faptul ca paragraful precedent s-a incheiat.
<P [align=x]>text paragraf</P>
Alinierea implicita este la stanga ( left ); pentru centrata ( center ), respectiv la dreapta ( right ) trebuie precizate.
Exemplu - la afisare, caracterele <CR> sunt ignorate:
|
<P align=left>Acesta <P align=center>Si al treilea</P> |
Acesta este primul paragraf Acesta este al doilea paragraf Si al treilea |
Pentru aliniere se mai pot folosi <DIV align=#></DIV> respectiv <CENTER></CENTER>
- Rand nou
Trecerea la un rand nou se face cu eticheta <BR> In principiu <P> echivaleaza cu <BR><BR>
Intr-un editor WYSIWYG, tastarea CR introduce o eticheta <BR> in fisierul HTML.
|
- Text preformatat
Daca se include textul intre etichetele de preformatare <PRE> si </PRE>, va fi afisat in browser exact cum a fost introdus in fisierul HTML. Este util spre exemplu pentru a afisa sursa unui program.
Liniile de mai jos, inserate in aceasta forma in sursa HTML, vor face ca in browser ele sa fie reproduse la fel ( cu exceptia etichetelor de preformatare, bineinteles ):
|
<PRE> public class ParkingFee extends JApplet implements ActionListener {double total = 0.0; JLabel hoursLabel, feeLabel, calcLabel, totalLabel; JTextField hoursField, feeField, totalField; // Setup the GUI public void init() { // Obtain content pane and set its layout to FlowLayout Container container = getContentPane(); container.setLayout( new FlowLayout() ); </PRE> |
- Linii orizontale
Elementul <HR [atribute]> insereaza o linie orizontala. Atributele posibile:
- size - grosime ( in pixeli )
- width - lungime: data in pixeli sau procentual
- align - aliniere; implicita center
- noshade/shade
- color - culoare
Iata linia afisata pentru eticheta din sursa HTML:
<HR size=3 width=320 align=left noshade color='blue'>
Formatare caractere |
Exista doua stiluri de formatare a caracterelor: fizica si logica - pentru consistenta, este indicat ca intr-un document sa se utilizeze doar un stil.
- Formatare fizica
|
Etichete |
Semnificatie |
Sursa HTML |
Afisare in browser |
|
<FONT [atribute]> </FONT> |
dimensiune (val de la 1 la 7; valoarea implicita e 3; de obicei se precizeaza relativ la aceasta cu + , - ), tip font, culoare caractere |
<FONT size='+1' face='Comic' color='red'>Rosu</FONT> |
Rosu |
|
<B> </B> |
Bold |
<B>martie</B> |
martie |
|
<I> </I> |
Italic |
<B>8 <I>martie</I></B> |
8 martie |
|
<U> </U> |
Underline - nu e indicat, pentru a nu se confunda cu linkurile |
<U>Important</U> |
Important |
|
<STRIKE></STRIKE> |
Cuvinte taiate |
<STRIKE>Gresit</STRIKE> |
|
|
<SUB></SUB> |
Indice |
|
|
|
<SUP></SUP> |
Exponent |
<B>C</B><SUB>N</SUB><SUP>K</SUP> |
CNK |
|
<BLINK></BLINK> |
Blink - doar la Netscape |
<BLINK>Atentie!</BLINK> |
Atentie! |
|
<SMALL></SMALL> |
echivalent cu <FONT size='-1'> |
|
|
|
<BIG></BIG> |
echivalent cu <FONT size='+1'> |
|
|
- Formatare Logica
Iata mai jos cateva dintre etichetele pentru formatare logica - in paranteza apare interpretarea obisnuita a browserelor:
<DFN></DFN>
- pentru definirea unui
cuvant ( Italic )
<EM></EM> - pentru accentuarea unui termen ( emphisis - Italic
)
<CITE></CITE> - citat ( Italic )
<CODE></CODE> - afisare cod ( Font Courier New )
<KBD></KBD> - informatia tastata ( Font Courier New )
<SAMP></SAMP> - rezultat program ( Font Courier New )
<STRONG></STRONG> - marcare ( Bold )
<VAR></VAR> - valoarea unei variabile ( Italic )
<BLOCKQUOTE></BLOCKQUOTE> - bloc citat ( indendare ambelele margini )
<ADDRESS></ADDRESS> - informatia adresa ( Italic )
Pentru afisarea unor caractere si simboluri speciale standardul HTML prevede folosirea unor secvente incadrate intre & si ; Cele mai utilizate apar in tabelul de mai jos:
|
Simbol |
Entitate |
Afisare |
|
Less than |
< |
< |
|
Greater than |
> |
> |
|
Ampersand |
& |
& |
|
nonbreaking space |
|
|
|
em dash |
— |
|
|
quotation mark |
" |
|
|
Copyright sign |
© |
|
|
Registered trademark |
® |
|
|
Trademark |
™ |
|
Exercitii |
Dupa parcurgerea materialului, includeti intr-un fisier HTML cat mai multe din formatarile din material. Fisierul va fi prezentat la laborator trebuind sa contina cel putin:
- trei paragrafe cu alinieri diferite si titlurile lor
- linii pentru separarea paragrafelor - si cu atributul culoare
- un paragraf va fi preformatat
- toate formatarile fizice de caractere, cu trei fonturi si trei culori diferite
- trei caractere speciale
- trei formatari logice.
| Contact |- ia legatura cu noi -| |  |
| Adauga document |- pune-ti documente online -| |  |
| Termeni & conditii de utilizare |- politica de cookies si de confidentialitate -| |  |
| Copyright © |- 2024 - Toate drepturile rezervate -| |  |
