02 lesson basic_html_part_1

15
Jurnalism online. Note de curs. Sergiu Corlat, USM

description

basic text organisation in HTML

Transcript of 02 lesson basic_html_part_1

Page 1: 02 lesson basic_html_part_1

Jurnalism online. Note de curs. Sergiu Corlat, USM

Page 2: 02 lesson basic_html_part_1

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:

Page 3: 02 lesson basic_html_part_1

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 >

Page 4: 02 lesson basic_html_part_1

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>

Page 5: 02 lesson basic_html_part_1

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>

Page 6: 02 lesson basic_html_part_1

Î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

Page 7: 02 lesson basic_html_part_1

<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.

Page 8: 02 lesson basic_html_part_1

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.

Page 9: 02 lesson basic_html_part_1

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ă

Page 10: 02 lesson basic_html_part_1

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

Page 11: 02 lesson basic_html_part_1

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

Page 12: 02 lesson basic_html_part_1

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>

Page 13: 02 lesson basic_html_part_1
Page 14: 02 lesson basic_html_part_1

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>

Page 15: 02 lesson basic_html_part_1

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ă.