Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Curs - Initiere HTML PDF

    Încărcat de

    Suciu Bogdan Ioan
    31 vizualizări13 pagini
    Un curs util pentru initierea in limbajul HTML.

    Titlu original

    curs_initiere HTML.pdf

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    Formate disponibile

    PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    Un curs util pentru initierea in limbajul HTML.

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    31 vizualizări13 pagini

    Curs - Initiere HTML PDF

    Încărcat de

    Suciu Bogdan Ioan
    Un curs util pentru initierea in limbajul HTML.

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 13

    HTML DE BAZ -----------------------------------------------------------------STRUCTURA UNUI DOCUMENT HTML -----------------------------------------------------------------<HTML> <HEAD> <TITLE> Formatare paragraf intr-un document HTML </TITLE>

    </HEAD> <BODY> Salut! Ma numesc Alina si sunt eleva la un liceu din Craiova. Acum este tare tarziu, dar cum somnul intarzie sa vina iata-ma hai-hui pe internet. Saptamana viitoare trebuie sa prezint la ora de engleza un referat cu tema "Internet viitorul omenirii?" in care voi vorbi despre implicatiile pe care le are informatica si, in special, internetul in viata omului viitorului. Sigur ca trebuie sa fie o viziune a mea asupra viitorului si nu o profetie. Daca tu, draga mea prietene de pe internet, m-ai putea ajuta cu cateva sugestii in realizarea acestui referat ti-as ramane indatorata. </BODY> </HTML> -----------------------------------------------------------------FORMATAREA PARAGRAFELOR Trecerea la linie noua Marcajul <BR>. El se poate folosi si in combinatie cu parametrul CLEAR=optiune, optiune ce forteaza trecerea la linie noua fata de marginea specificata. Valorile posibile pentru optiune sunt left, right, all. -----------------------------------------------------------------<HTML> <HEAD> <TITLE> Formatare paragraf intr-un document HTML </TITLE> </HEAD> <BODY> Salut! <BR CLEAR=all> Ma numesc Alina si sunt eleva la un liceu din Craiova. Acum este tare tarziu, dar cum somnul intarzie sa vina iata-ma hai-hui pe internet. <BR> Saptamana viitoare trebuie sa prezint la ora de engleza un referat cu tema "Internet viitorul omenirii?" in care voi vorbi despre implicatiile pe care le are informatica si, in special, internetul in viata omului viitorului. Sigur ca trebuie sa fie o viziune a mea asupra viitorului si nu o profetie. </BR> Daca tu, draga mea prietene de pe internet, m-ai putea ajuta cu cateva sugestii in realizarea acestui referat ti-as ramane indatorata. </BODY> </HTML> -----------------------------------------------------------------1

    -----------------------------------------------------------------Specificarea unui paragraf Marcajul <P>...<P/P> -----------------------------------------------------------------<HTML> <HEAD> <TITLE> Formatare paragraf intr-un document HTML </TITLE> </HEAD> <BODY> Salut! <P>Ma numesc Alina si sunt eleva la un liceu din Craiova. Acum este tare tarziu, dar cum somnul intarzie sa vina iata-ma hai-hui pe internet. </P> <P>Saptamana viitoare trebuie sa prezint la ora de engleza un referat cu tema "Internet viitorul omenirii?" in care voi vorbi despre implicatiile pe care le are informatica si, in special, internetul in viata omului viitorului. Sigur ca trebuie sa fie o viziune a mea asupra viitorului si nu o profetie. </P> <P>Daca tu, draga mea prietene de pe internet, m-ai putea ajuta cu cateva sugestii in realizarea acestui referat ti-as ramane indatorata.</P> </BODY> </HTML> -----------------------------------------------------------------Alinierea unui paragraf Marcajul <P>...<P/P> se imbogateste cu optiunea align. Optiunea align poate primi ca valoare unul din cuvintele: left, right, center. -----------------------------------------------------------------<HTML> <HEAD> <TITLE> Formatare paragraf intr-un document HTML </TITLE> </HEAD> <BODY> <P align="center">Salut!</P> <P>Ma numesc Alina si sunt eleva la un liceu din Craiova. Acum este tare tarziu, dar cum somnul intarzie sa vina iata-ma hai-hui pe internet. </P> <P>Saptamana viitoare trebuie sa prezint la ora de engleza un referat cu tema "Internet viitorul omenirii?" in care voi vorbi despre implicatiile pe care le are informatica si, in special, internetul in viata omului viitorului. Sigur ca trebuie sa fie o viziune a mea asupra viitorului si nu o profetie. </P> <P>Daca tu, draga mea prietene de pe internet, m-ai putea ajuta cu cateva sugestii in realizarea acestui referat ti-as ramane indatorata.</P> </BODY> </HTML> -----------------------------------------------------------------2

    -----------------------------------------------------------------Centrarea textului Marcajul <CENTER>...</CENTER> are ca efect centrarea rapida a textului. {Are acelasi efect ca marcajul <P align="center">...</P>} -----------------------------------------------------------------<HTML> <HEAD> <TITLE> Formatare paragraf intr-un document HTML </TITLE> </HEAD> <BODY> <CENTER> Salut! </CENTER> <P>Ma numesc Alina si sunt eleva la un liceu din Craiova. Acum este tare tarziu, dar cum somnul intarzie sa vina iata-ma hai-hui pe internet. </P> <P>Saptamana viitoare trebuie sa prezint la ora de engleza un referat cu tema "Internet viitorul omenirii?" in care voi vorbi despre implicatiile pe care le are informatica si, in special, internetul in viata omului viitorului. Sigur ca trebuie sa fie o viziune a mea asupra viitorului si nu o profetie. </P> <P>Daca tu, draga mea prietene de pe internet, m-ai putea ajuta cu cateva sugestii in realizarea acestui referat ti-as ramane indatorata.</P> </BODY> </HTML> -----------------------------------------------------------------FORMATAREA FONT-URILOR -----------------------------------------------------------------Un font reprezinta un set de caractere (256) cu un aspect grafic unitar. Stiluri de afisare: ingrosat, inclinat, subliniat. Marcajul <B>...</B> este folosit daca vrem ca un cuvant sau o portiune din text sa ne apara ingrosat. Marcajul <I>...</I> este folosit daca vrem ca un cuvant sau o portiune din text sa ne apara ingrosat. Marcajul <U>...</U> este folosit daca vrem ca un cuvant sau o portiune din text sa ne apara subliniat. Nivele de titlu Marcajele <Hn>...</Hn> pun in evidenta nivelele de subtitlu al unui document; n poate lua valori de la 1 la 6. Cel mai inalt nivel este 1, apoi nivelul descreste pana la nivelul 6, nivelul 6 fiind cel mai mic nivel. Alegerea tipului de font Marcajul <FONT>...</FONT> impreuna cu optiune face (ce va primi ca valoare numele fontului ce intentionam sa-l folosim incadrat de ghilimele) -> permite alegerea tipului de font cu care dorim sa fie afisat textul.
    3

    <FONT face="Courier, Arial">...</FONT> Alegerea dimensiunii caracterelor Marcajul <FONT>...</FONT> impreuna cu optiune size (ce va primi ca valoare un numar incadrat intre ghilimele). <FONT face="Courier,Arial" size="4">...</FONT> Alegerea culorii font-ului Marcajul <FONT>...</FONT> impreuna cu optiune color. Valoarea acestei optiuni va fi numele in limba engleza incadrat de ghilimele sau codul culorii precedat de semnul # si incadrat, de asemenea, de ghilimele. <FONT face="Courier,Arial" size="4" color="red">...</FONT> <FONT face="Courier,Arial" size="4" color="#FF0000">...</FONT> -----------------------------------------------------------------LINII DE DELIMITARE SI COMENTARII -----------------------------------------------------------------Marcajul <HR>, plasat oriunde in document, are ca efect trasarea unei linii orizontale. Se poate folosi in combinatie cu parametrii: SIZE=optiune, WIDTH=optiune, ALIGH=optiune si NOSHADE. - optiunea parametrului SIZE este un numar ce stabileste grosimea liniei; - optiunea parametrului WIDTH poate stabili cat la % din latimea paginii va ocupa rigla respectiva; - parametrul ALIGN se utilizeaza impreuna cu parametrul WIDTH si optiunea lui are drept efect fortarea liniei fata de marginea specificata. Valorile posibile pentru optiune sunt left, right. - optiunea COLOR stabileste culoarea riglei; - prin prezenta parametrului NOSHADE, fara nici o optiune, se dezactiveaza afisarea umbrei pentru rigla orizontala. Comentarii Comentariile sunt texte incadrate intre <!-- si -->. Rolul comentariilor este de a face un document HTML mai usor de inteles prin plasarea unor expicatii din loc in loc. Ele nu vor fi afisate in cuprinsul paginii Web creata prin documentul respectiv. ------------------------------------------------------------------

    MBUNTIREA PAGINII WEB CU IMAGINI, LISTE I TABELE Imagini GIF si JPG Formele grafice permise de HTML sunt: GIF(imagini;256 culori) i JPG (imagini; milioane de culori). Inserarea imaginilor Marcajul <IMG SRC=nume_imagine> Exemplu (PISICA.html) <HTML> <HEAD> <TITLE> Includerea unei imagini </TITLE> </HEAD> <BODY> <HR SIZE=30 color=RED> <IMG SRC=C:\catel.jpg> <H1><CENTER> Salut!</CENTER></H1> <CENTER><FONT face="Courier, Arial" color="RED" size="6"><P> Ma numesc Motanel!</P></FONT></CENTER> <CENTER><IMG SRC=C:\pisica.jpg></CENTER> <HR SIZE=30 color=RED> <I>pisica@k.ro</I><HR COLOR=red> </BODY> </HTML> Efect

    Salut! Ma numesc Motanel!

    pisica@k.ro

    Liste in pagini Web Liste Ordonate (elementele sunt automat numerotate). Declararea unei liste ordonate se face cu ajutorul marcajului: <OL>..</OL> Ex. Nr.1 (LO1.html) <OL> <LI>element 1 <LI>element 2 <LI>element 3 </OL> Ex. Nr.2 (LO2.html) <OL TYPE=A> <LI>element 1 <LI>element 2 <LI>element 3 </OL> Ex. Nr.3 (LO3.html) <OL TYPE=I START=3> <LI>element 1 <LI>element 2 <LI>element 3 </OL> Ex. Nr.4 (LO4.html) Efect 1. element 1 2. element 2 3. element 3 Efect A. element 1 B. element 2 C. element 3 Efect III. IV. V. element 1 element 2 element 3 Efect element 1 element 2 element 3 element 4

    III. <OL TYPE=I START=3> <LI>element 1 X. <LI VALUE=10>element 2 <LI VALUE=20>element 3 XX. <LI>element 4 XXI. </OL>

    Liste Neordonate sau liste marcate (elementele sunt marcate printr-un semn special). Declararea unei liste neordonate se face cu ajutorul marcajului: <UL>..</UL>. Ex. Nr.1 (UL1.html) <UL> <LI> element 1 <LI> element 2 <LI> element 3 </UL> Ex. Nr.2 (UL2.html) <UL TYPE=circle> <LI> element 1 <LI> element 2 <LI> element 3 </UL> Efect

    element 1 element 2 element 3 Efect

    o o o

    element 1 element 2 element 3

    {Schimbarea simbulului care preced elementele din lista se poate face utilizand parametrul TYPE al marcajului <UL>..</UL>, caruia i se pot asocia una dintre urmatoarele valori> disc, circle i square.} Liste de Definitii de termeni si definitiile lor asociate. Declararea unei liste ordonate se face cu ajutorul marcajului <DL>..</DL> utilizat impreuna cu marcajul <DT> pentru termenul definit si marcajul <DD> pentru definitia propriu zisa. Exemplu (DL.html) <DL> <DT>Aldine<DD>Caracteristica a fonturilor de a fi reprezentate prin caractere mai ingrosate. <DT>Date<DD>Flux nesfarsit de materiale care apar pe Internet. <DT>Font<DD>Utilizarea particulara a unui anumit stil de caractere. </DL> Efect Aldine Caracteristica a fonturilor de a fi reprezentate prin caractere mai ingrosate. Date Flux nesfarsit de materiale care apar pe Internet. Font Utilizarea particulara a unui anumit stil de caractere. Liste in liste liste imbricate Listele pot fi coninute una ntr-alta. n proiectarea unei pagini Web trebuie avut n vedere urmtorul lucru foarte important: informaia coninut n pagin s fie structurat astfel nct s poat fi uor de urmrit i de gsit. n acest sens combinarea celor trei tipuri de liste este foarte util. Exerciiu: Construii o pagin Web n care s redactai propria agend telefonic utiliznd listele de definiii. Documentul va fi salvat sub numele Agenda.html n directorul Elev al directorului rdcin. Exemplu (Liste_imbricate.html) <HTML> <HEAD> <TITLE>Liste in pagini Web</TITLE> </HEAD> <BODY> <HR SIZE=30 COLOR=RED> <IMG SRC=c:\Alina.jpg allign=right> <H1><CENTER>Salut!</CENTER></H1> <HR WIDTH=50%> <UL> <LI><H3>Date personale</H3> <DL>
    7

    <DT>Nume:<DD>Mateescu. <DT>Prenume:<DD>Alina <DT>Data nasterii:<DD>12_04_1985 <DT>Profesia:<DD>Eleva anul II la Colegiu </DL> <LI><H3>Stare emotionala</H3> Acum este tarziu, dar cum somnul intarzie sa apara iata-ma hai-hiu pe internet. <P><LI><H3>Preocupari actuale</H3> Saptamana viitoare trebuie s prezint la ora de engleza un referat cu urmatoarele caracteristici> <UL> <LI>Tema- "Internet viitorul omenirii?" <LI>Continutul:-implicatiile pe care le are informatica si, in special, internetul in viata omului viitorului <LI>Concluzia:-Sigur ca trebuie sa fie o vizine a mea asupra viitorului si nu o profetie </UL> <LI><H3>Sugestii</H3> Daca tu, draga prietene de pe internet, m-ai putea ajuta cu cateva sugeestii in realizarea acestui referat ti-as ramane indatorata. <P> </UL> <HR WIDTH=20% ALLIGN=left NOSHADE><H3>Alina</H3><P> <I>alina@k.ro</I><HR COLOR=RED> </BODY> </HTML> Efect

    Salut!

    Date personale
    Nume: Mateescu. Prenume: Alina Data nasterii: 12_04_1985 Profesia: Eleva anul II la Colegiu

    Stare emotionala
    Acum este tarziu, dar cum somnul intarzie sa apara iata-ma hai-hiu pe internet.

    Preocupari actuale
    Saptamana viitoare trebuie s prezint la ora de engleza un referac cu urmatoarele caracteristici>
    o o o

    Tema- "Internet viitorul omenirii?" Continutul:-implicatiile pe care le are informatica si, in special, internetul in viata omului viitorului Concluzia:-Sigur ca trebuie sa fie o vizine a mea asupra viitorului si nu o profetie

    Sugestii
    Daca tu, draga prietene de pe internet, m-ai putea ajuta cu cateva sugeestii in realizarea acestui referat ti-as ramane indatorata.

    Alina
    alina@k.ro

    Inserarea tabelelor Marcajul pentru definirea unui tabel este: <TABLE>..</TABLE> iar n interiorul acestui marcaj se utilizeaz marcajele: <TR>..</TR> pentru definirea unei linii a tabelului; <TH>..</TH> pentru definirea antetului tabelului; <TD>..</TD> pentru definirea datei unei cellule a tabelului.

    Parametrii marcajului <TABLE> BORDER=n permite definirea zonei umbrite din jurul tabelului (n, nr. ntreg). BORDER COLOR=cod_culoare permite definirea culori zonei umbrite. CELLSPACING=n definete spaiul lsat ntre celule (n, nr. ntreg - pixeli). CELLPADDING=n - definete spaiul lsat dintre data din celul i chenarul celulei (n, nr. ntreg pixeli).

    Parametrii marcajului <TD> COLSPAN=n permite unei celule s se extind pe mai multe coloane. ROWSPAN=n permite unei celule s se extind pe mai multe rnduri. GBCOLOR=culoare permite definirea culorii de fond a unei celule. ALIGN=pozitie specific alinierea orizontal a datei din celul. Opiunile posibile sunt: Left, Right, Center. BACKGROUND=fisier_imagine permite specificarea unei imagini grafice de fond n interiorul unei cellule.

    WIDTH=n permite definirea limii dorite a tabelului (n, n pixeli sau n procente). HEIGHT=n permite definirea nlimii dorite a tabelului (n, n pixeli sau n procente).

    Ex. Nr. 1 (Tabel1.html) <HTML> <HEAD> <TITLE>Tabele</TITLE> </HEAD> <BODY> <TABLE> <TR><TH>Nume</TH> <TH>Prenume</TH> <TH>Media</TH> <TR><TD>Petcu</TD> <TD>Ionut</TD> <TD>8.20</TD> </TABLE> </BODY> </HTML>

    Efect

    Nume Prenume Media Petcu Ionut 8.20

    Ex. Nr. 2 (Tabel2.html) <HTML> <HEAD> <TITLE>Tabele</TITLE> </HEAD> <BODY> <TABLE BORDER COLOR=RED> <TR><TH>Nume</TH> <TH>Prenume</TH> <TH>Media</TH> <TR><TD>Petcu</TD> <TD>Ionut</TD> <TD>8.20</TD> </TABLE> </BODY> </HTML>

    Efect

    Nume Prenume Media Petcu Ionut 8.20

    Ex. Nr. 3 (Tabel3.html) <HTML> <HEAD> <TITLE>Tabele</TITLE> </HEAD>


    10

    <BODY> <TABLE BORDER HEIGHT=100 WIDTH=100> <TR><TH rowspan=2 bgcolor=lightblue>Candidat</TH> <TH>Nume</TH> <TH>Prenume</TH> <TH>Media</TH> <TR><TD>Petcu</TD> <TD>Ionut</TD> <TD>8.20</TD> </TABLE> </BODY> </HTML> Efect Nume Prenume Media Petcu Ionut 8.20

    Candidat

    Exerciiu: Construii o pagin Web de prezentare a oraului n care locuii. nserai imagini cu monumente semnificative ale oraului. Structurai pagina utiliznd un tabel fr chenar. Folosii pentru antetul tabelului o culoare de fundal pastelat. Documentul va fi salvat sub numele Oras.html n directorul Elev al directorului rdcin.

    11

    REFERINE N PAGINI WEB Referine interne Referine externe Link-uri i imagini Principala caracteristic a hipertextelor o constituie legturile (links). Un links este o conexiune ctre alt resurs Web, resurs care poate fi accesat din fereastra browser ului printr-un singur clic. Link-urile pot fi de dou tipuri: interne i externe. Marcajul principal att pentru referinele interne ct i pentru cele externe este: <A></A> (anchor- ancor), acesta trebuie s conin parametrul HREF=valoare, fr de care nu are nici un sens. Referine interne S presupunem c dorim s adugm un cuprins unei pagini Web de dimensiune mare pentru a permite utilizatorului s se deplaseze ntr-un anumit loc din aceeai pagin. Locurile n care dorim s se fac deplasarea se numesc intele salturilor interne din paginile Web sau ancore cu nume i sunt specificate, n cadrul documentului HTML, prin utilizarea parametrului name al marcajului <A></A>: <A name=valoare>Mesaj</A> Ex.: <A nume="baza">Baza material</A> Unde valoarea parametrului name poate fi orice secven de caractere, numere sau semen de punctuaie. Adugarea legturilor ctre inte din cadrul paginii Web Corespondentul unei ancore cu nume care definete saltul ctre aceast int este: <A HREF=#NumeAncorCuNume>Mesaj</A> <A HREF="#baza">Baza materiala</A> Exemplu care ilustreaz cum ar arta un set de ancore cu nume ntr-un document HTML destinat s afieze o pagin Web a unei coli. <html> <body background="C:\Documents and Settings\andye\My Documents\My Pictures\404.gif" text="steelblue"> <h1>Scoala cu clasele I-VIII "Nicolae Iorga" Bacau</h1> <h2><I>Prof. ing. Bostan Mihaela</I></h2> <Font color="green" size="5"> <P><a href=#jos name=sus>Du-te jos</a> <P><A HREF="#baza">Baza materiala</A> <P><A HREF="#profile"> Profile</A> <P><A HREF="#profesori"> Profesori</A> <P><A HREF="#elevi"> Elevi</A> <A NUME="baza"><h2>BAZA MATERIALA</h2></A> <br>27 sali de clasa <br>14 laboratoare si sali specializate
    12

    <br>un atelier scoala <br>o biblioteca <br>laboratoare de informatica cu retea de calculatoare si acces la Internet <br>cabinet metodic de perfectionare <br>dispensar medical scolar <br>cabinet stomatologic scolar <br>un bazin de inot in constructie <br>baza sportiva proprie <br>o cantina <br>un camin <br><a name=jos href=#sus>Du-te sus</a> <A NAME="profile"><h2>PROFILE</h2> <br>Profil Pedagogic <br>Invatatori-Educatoare <br>Profil Bibliotecar si Pedagog scolar <br>Bibliotecar documentarist <br>Instructor animator <br>Pedagog scolar <br>Profil Matematica-Informatica <br>Profil Stiinte ale naturii <br>Profil Filologie <br><a name=jos href=#sus>Du-te sus</a> <A NAME="profesori"><h2>PROFESORI</h2> <br>Gorbanescu <br>Stoica <br>Negrea <br> ... <br> <br><a name=jos href=#sus>Du-te sus</a> <A NAME="elevi"><h2>ELEVI</h2> <br>5A-Dir.: Prof. Negrea <br>5B-Dir.: Prof. Mocanu <br>5C-Dir.: Prof. Vintila <br>6A-Dir.: Prof. Cuciureanu <br>6B-Dir.: Prof. Arsinte <br>6C-Dir.: Prof. Bibire <br>7A-Dir.: Prof. Escu <br>7B-Dir.: Prof. Costea <br>7C-Dir.: Prof. Mirzac <br> <br><a name=jos href=#sus>Du-te sus</a> </body> </html>

    13

    S-ar putea să vă placă și