Upload
sergiu-corlat
View
1.897
Download
2
Embed Size (px)
DESCRIPTION
basic text organisation in HTML
Citation preview
Jurnalism online. Note de curs. Sergiu Corlat, USM
Noţiuni generale:1. Crearea documentelor
– orice editor de text, preferabil NotePad
2. Salvarea – opţiunea SaveAs, cu extensia html, tip: All files
3. Vizualizare:
Structurarea informaţiei în documentele HTML
este realizată prin secvenţe de control / taguri,
marcate de <>. Secvenţele de control
marchează începutul şi sfârşitul fragmentului
asupra căruia este aplicată o transformare /
acţiune. Secvenţa care marchează sfârşitul se
deosebeşte de cea de început prin prezenţa /
Documentele încep cu secvenţa <HTML>,
sfârşitul este marcat cu </HTML>.
Conţin două secţiuni: antetul (elemente
invizibile, de control) delimitat de secvenţele
<HEAD> … </HEAD> şi corpul documentului
(secţiunea de date) delimitat de secvenţele
<BODY> … </ BODY >
Pentru delimitarea titlurilor se folosesc secvenţele <Hx> … </Hx>, unde x este
o valoare de la 1 la 6. <H1> corespunde titlului de dimensiune maximă, <H6> -
dimensiunii minime.
Textul obişnuit este divizat în paragrafe cu secvenţele <P> … </P>.
Suplimentar, textul poate fi aliniat cu ajutorul atributelor align=center | left| right.
<html>
<head>
<title> Exemplul 1.2</title>
<H1 ALIGN=CENTER> Un document HTML putin mai
complicat </H1>
</head>
<body>
<H1 ALIGN=CENTER> Salut </H1>
<H2> Este un exemplu mai complicat al documentului
HTML </H2>
<P> Acum noi cunoaştem că textul poate fi aliniat nu
numai la stinga </P>
<P ALIGN=CENTER>dar şi pe centru</P>
<P ALIGN=RIGHT>sau pe partea dreapta </P>
</body>
</html>
Evidenţieri:Bold: <B> … </B> Italic: <I> … </I>Subliniat: <U> … </U> Tăiat: <Strike> … </Strike>Indice superior <Sup> … </Sup> Indice inferior <Sub> … </Sub>Typewriter <TT> …</TT>
Caracteristici font:<Font color=―nume sau cod culoare‖> … </Font><Font size=―valoare numerică de la 1 la 6‖> … </Font><Font face=―nume font‖> … </Font>Caracteristicile pot fi îmbinate:
<Font face=―Arial Black‖ color=―red‖ size=4> … </Font>
În cazul utilizării stilurilor logice autorul documentului nu poate cu siguranţă
spune, ce va apare pe monitorul cititorului. Diferite sisteme browser
interpretează aceste stiluri în mod diferit. Se poate întâmpla că unele stiluri sunt
ignorate şi în locul or apare text standard, fără elemente de formatare.
Dintre cele mai utilizate stiluri logice vom menţiona următoarele:
<EM> ... </EM> - text accentuat
<STRONG> ... </STRONG> - text puternic accentuat
<CODE> ... </CODE> - recomandat pentru afişarea fragmentelor surselor
documentelor
<SAMP> ... </SAMP> - de la sample (eng.) Se recomandă pentru demonstrarea
comunicărilor afişate de programe.
<KBD> ... </KBD> - de la keyboard (eng.) — tastatură. Se recomandă pentru
evidenţierea fragmentelor, ce trebuie introduse de la tastatură.
<VAR> ... </VAR> - de la variable — variabilă. Se recomandă pentru a scrie
numele variabilelor
<HTML> <HEAD> <TITLE>Exemplul 2.3</TITLE> </HEAD> <BODY> <H1>Marcarea şi formatarea fragmentelor de text</H1>
<P> Acum cunoaştem, că fragmentele de text pot fi evidenţiate <B>semigras</B> , <I>cursiv</I> sau <U> subliniat </U>. De asemenea pot fi introduse fragmente cu caractere de lăţime fixă <TT>(imitarea maşinii de dactilografiat)</TT> </P>
<P> Mai există şi stiluri logice: </P> <P> <EM> EM – de la englezul emphasis - accent </EM> <BR>
<STRONG> STRONG – de la englezul strong emphasis - accent puternic </STRONG> <BR>
<CODE> CODE – pentru fragmente de cod </CODE> <BR> <SAMP> SAMP – de la englezul sample - exemplu </SAMP> <BR><KBD> KBD - de la englezul keyboard – tastatură </KBD> <BR> <VAR> VAR - de la englezul variable - variabilă </VAR> </P>
</BODY></HTML>
Notă: <BR> secvenţă pentru ruperea forţată a rândului în paragraf.
Notă: Pentru păstrarea unei formatări manuale a unui fragment de text se foloseşte secvenţa <PRE>
… </PRE>. Ea face parte din stilurile fizice şi e recunoscută de toate aplicaţiile de explorare.
Liste cu marcaje:Delimitarea listei: <UL> … </UL>Selectarea tipului de marcaj: atributul TYPE= DISC | CIRCLE | SCUAREMarcarea elementelor listei <LI> … </LI>Exemplu, pentru a obţine lista:
Matematica; Informatica; Fizica; Chimia.
va fi nevoie de următoarea secvenţă HTML:
<UL TYPE=SQUARE> <LI> Matematica; <LI> Informatica; <LI> Fizica;<LI> Chimia.
</UL>
Notă: secvenţa <LI> poate să nu fie închisă
Liste numerotate:Delimitarea listei: <OL> … </OL>Selectarea tipului de marcaj: atributul TYPE= 1 | A | a | I | iSetarea numărului de start al listei: atributul START= x (x – primul număr în listă) Marcarea elementelor listei <LI> … </LI>Exemplu, pentru a obţine lista:
1. Matematica; 2. Informatica; 3. Fizica; 4. Chimia.
va fi nevoie de următoarea secvenţă HTML:
<OL > <LI> Matematica; <LI> Informatica; <LI> Fizica;<LI> Chimia.
</OL>
Notă: selectarea atributului Type=1 – numerotare cu cifre arabeType=I –cifre romane majusculeType=i –cifre romane minusculeType=A – numerotare lexicografică,
majusculeType=a – numerotare lexicografică,
minuscule
Delimitarea listei: <DL> … </DL>Delimitarea noţiunii definite <DT> … </DT>Delimitarea definiţiei pentru noţiune <DD> … </DD>
Exemplu, pentru a obţine lista:
HTML Noţiunea HTML (HyperText Markup Language) se descifrează ca ―Limbaj de marcare a hipertextelor. Prima versiune a limbajului HTML a fost elaborată de colaboratorul Laboratorului European de Fizică a particulelor Elementare Tim Berners-Ly.
Document HTML Fişier text cu extensie *.html (În alte sisteme operaţionale denumirea fişierului e însoţită de extensia *.html sau *.htm).
<DL>
<DT>HTML <DD>Noţiunea HTML (HyperText Markup Language) se descifrează ca ―Limbaj de
marcare a hipertextelor. Prima versiune a limbajului HTML a fost elaborată de colaboratorul
Laboratorului European de Fizică a particulelor Elementare Tim Berners-Ly.
<DT>Document HTML <DD>Fişier text cu extensie *.html (În alte sisteme operaţionale
denumirea fişierului e însoţită de extensia *.htmll sau *.htm).
</DL>
Notă: secvenţele <DT> şi <DD> pot să nu fie închise
Listele în documentele HTML pot fi incluse una în alta. Obţinerea efectului cu instrumentele automate web 2.0 este de multe ori anevoioasă sau chiar imposibilă. Realizarea codului HTML este extrem de simplă: în locul elementului listă se include descrierea listei incorporate:
<html> <head> <title> Exemplul 3.1</title> </head > <body> <H1>HTML poate lucra cu câteva tipuri de liste </H1>
<DL><DT><B>Liste fără numerotare </B> <DD>Elementele listelor fără numerotare se evidenţiază prin deplasare spre dreapta şi un
semn special: <UL> <LI>Element 1 <LI>Element 2 <LI>Element 3 </UL> <DT><B>Liste cu numerotare </B> <DD>Elementele listei cu numerotare se marchează prin deplasare spre stânga şi un număr:
<OL> <LI>Element 1 <LI>Element 2 <LI>Element 3 </OL> <DT><B>Liste de definiţii </B> <DD>Acest tip de liste este mai complicat decât precedentele, dar ne oferă mai multe
posibilităţi în lucru. <P>Listele pot fi incluse una în alta, dar nu faceţi abuz de această posibilitate. </P> <P>Un element al listei poate conţine mai multe paragrafe. În acest caz toate vor începe din aceeaşi poziţie de stânga </P> </DL> </body> </html>
Liniile sunt descrise de <HR> cu atribute
auxiliare
SIZE - determină lăţimea liniei în pixeli
WIDTH - determină lungimea liniei în % faţă de
lăţimea ecranului, sau, în lipsa semnului % - în
pixeli.
<html> <head> <title>Exemplul 2.2</title>
</head>
<body>
<H1>O colecţie de linii orizontale </H1>
<HR SIZE=2 WIDTH=100%><BR>
<HR SIZE=2 WIDTH=100><BR>
<HR SIZE=4 WIDTH=50%><BR>
<HR SIZE=4 WIDTH=50><BR>
<HR SIZE=8 WIDTH=25%><BR>
<HR SIZE=16 WIDTH=12%><BR>
</body>
</html>
1. Creaţi în portofoliul personal o pagină cu numele “Experienţe în HTML”
2. Scrieţi în pagină, în regimul de editare HTML câteva paragrafe de text şi subtitluri, folosind diferite tipuri de aliniere.
3. Formataţi primul paragraf, folosind stilurile fizice.4. Formataţi al doilea paragraf, folosind stilurile logice.5. Creaţi câte o listă cu marcare, numerotare, de definiţii. 6. Creaţi o listă inclusă7. Separaţi fiecare element creat de celelalte, folosind linii
de diverse mărimi.8. Salvaţi modificările efectuate în pagină.