FISA1: HTML

Notiuni de baza

Creati pe discul C un folder “IX -HTML”.
Creati in acest folder o noua pagina HTML cu numele first_page.html
Setati titlul paginii nou create “Prima mea pagina web”
Scrieti in pagina urmatorul continut “Aceasta pagina este prima din sutele de pagini web pe care le voi crea”
Scrieti in pagina urmatorul comentariu “All rights reserved”

Formatare text

1. Deschideti pagina first_page.html creata anterior.

2. Copiati in sectiunea <body> textul de mai jos:

Top 5 tendinte in Securitatea IT. Amenintarile informatice ale anului 2011
1. Browserul dumneavoastra preferat. Va deveni principala modalitate prin care baietii rai (aka hackeri, spammeri, crackeri, etc.) vor incerca sa implanteze pe calculatorul dumneavoastra malware sau sa va fure date personale, conturi bancare, etc . Fie ca folositi Windows, Linux, Mac, Android, iPhone aveti un browser instalat, browser care este poarta dumneavoastra prin care accesati Internetul. Cu ajutorul unor instrumente precum exploit-uri, phishing, tehnici de inginerie sociala, in 2011 browserul dumneavoastra este principala tinta de atac.

1. Formatati textul „Top 5 tendinte in Securitatea IT.” titlu H1, aliniat la centru

2. Formatati textul „Amenintarile informatice ale anului 2011” titlu H2

3. Formatati restul textului la Arial,dimensiune 2,aliniat la stanga

4. Introduceti o linie orizontala dupa titlul „Amenintarile informatice ale anului 2011”

5. Creati un nou paragraf care sa contina textul „Cu ajutorul unor instrumente precum exploit-uri, phishing, tehnici de inginerie sociala, in 2011 browserul dumneavoastra este principala tinta de atac.”

Liste

Creati in pagina o lista ordonata cu urmatorul aspect:

10 tendinte majore ale anului 2011

1. Crearea de malware

· In 2010, am inregistrat o crestere semnificativa a volumului de malware, o tendinta constanta a ultimilor ani. In acest an, au fost create peste 20 de milioane de noi tulpini, cu mult peste volumul din 2009.

· In prezent, baza de semnaturi Panda, numita Collective Intelligence, stocheaza peste 60 de milioane de amenintari deja clasificate.

2. Razboi cibernetic

· Cazul "Stuxnet" si articolele WikiLeaks insinuand implicarea guvernului chinez in atacurile informatice impotriva Google sau a altor tinte au marcat un punct de cotitura in istoria acestor conflicte.

· In razboaiele cibernetice, ca si in conflictele actuale din viata reala, nu mai exista uniforme si grade, care ne-ar permite sa distingem intre inamic sau aliat. Este ca si in cazul razboaielor de gherila, in care este dificil sa identifici cine lanseaza atacul si de unde. Singurul lucru posibil a fi stabilit este obiectivul atacului.

3. Protestele cibernetice

· Aceasta noua miscare a fost initiata de gruparea "Anonymous", care a lansat operatiunea "Payback" (rom. "Revansa"), tintind in special organizatii care incearca sa impiedice pirateria pe Internet si ulterior pentru a isi arata suportul pentru Julian Assange, redactorul sef al WikiLeaks.

· In ciuda incercarilor pripite ale multor tari de a bloca aceste tipuri de activitati sau de incriminare a protestatarilor, consideram ca in 2011 vor fi si alte proteste cibernetice, organizate de acest grup sau de altele noi.

Sem. II: 27-31.05.2013

Sarcina de lucru:

1. Realizati o pagina web cu urmatorul continut:

Elevii, dupa noua lege
Fara lectii in orar
Fara teme, nici de forma.
Lasa fugile la bar.
Merg in pasii de reforma!

"Profesorul cu adevarat intelept nu te invita sa intri in casa intelepciunii sale ci, mai curand, te calauzeste catre pragul mintii tale".
Kahlil Gibran

2. Marcaje de baza

<HTML> </HTML>	Defineste un fisier in format Web
<HEAD> </HEAD>	Antetul documentului
<TITLE> </TITLE>	Tilul documentului
<BODY> </BODY>	Corpul paginii HTML
BGCOLOR = culoare	Culoarea de fond a paginii
TEXT=culoare	Culoarea textului pe paginii
LINK=culoare	Culoarea legaturiilor nevizitate din paginii
VLINK=culoare	Culoarea legaturiilor vizitate din paginii
ALINK=culoare	Culoarea legaturiilor pe durata clicului exacutat de utilizator
BACKGROUND = url	Imaginea de fond pentru pagina
<P>	Paragraf
<Hn> <Hn>	Nivel de subtitlu al documentului (n = 1-6)
<FONT> </FONT>	Specifica atribute ale textului incadrat
SIZE=n	Dimensiunea textului este 1-7
FACE="a,b"	Specifica fontul: a, daca este disponibil, sau b
COLOR=s	Culoarea textului: fie un nume de culoare , fie o valoare RGB
<BR>	Linie noua
<PRE> </PRE>	Informatie preformatata
<!-- -->	Comenatriu HTML
<CENTER> </CENTER>	Centreaza materialul in pagina
<HR>	Rigla orizontala
SIZE=x	Inaltimea riglei in pixeli
WIDTH=x	Latimea riglei in pixeli sau in procente
NOSHADE	Dezactiveaza afisarea umbrei pentru rigla orizontala
ALIGN=x	Alinierea riglei orizontala in pagina (left, center, right)
COLOR=x	Culoarea riglei orizontale(numai pentru IE)
<A> </A>	Marcaj de tip ancora
HREF=url	Referinta hipertext
HREF=#nume	Referinta catre o ancora interna
Name=nume	Definitia unei ancore interne

Marcaje pentru liste

<DD>	Descriere definitie
<DL> </DL>	Lista de tip definitie
<DT>	Termen de definitie
<LI>	Element de lista
<OL	Lista ordonata (numerotata)
TYPE=tip	Tipul numerotarii. Valori posibile: A, a, I, i, 1
START=x	Numarul de inceput al listei ordonate
<UL	Lista neordonata (marcata)
TYPE=forma	Forma marcajului. Valori posibile: circle, square, disc.

Formatarea caracterelor

<B> </B>	Afiseaza text cu caractere aldine
<I> </I>	Afiseaza text cu caractere cursive
<U> </U>	Afiseaza text subliniat
<TT> </TT>	Text cu font monospatiu
<CITE> </CITE>	Citare bibliogarfica
<CODE> </CODE>	Listing de program
<EM> </EM>	Stil logic de evidentiere
<KBD> </KBD>	Text de la tastatura
<STRONG> </STRONG>	Evidentiere logica puternica
<VAR> </VAR>	Program sau variabila
<BASEFONT SIZE = n>	Specifica dimensiunea implicita a fontului din pagina

Marcaje pentru cadre

<FRAMESET> </FRAMESET>	Definirea redactarii paginii
COLS=x	Numarul si marimea relativa a coloanelor
ROWS=x	Numarul si marimea relativa a liniilor
BORDER=x	Specifica starea "on" (activa) sau "off" (inactiva) pentru chenarul cadrului FRAMESET (1 sau 0)
FRAMEBORDER = x	Specifica marimea chenarului
FRAMESPACING = x	Marimea spatiului dintre doua cadre adiacente
<FRAME>	Definitia unui anumit cadru
SRC=url	URL-ul sursa pentru cadru
NAME=nume	Numele cadrului (utilizat impreuna cu TARGET=nume ca parte componenta a marcajului de tip ancora <a>
SCROLLING=scrl	Defineste optiunea barei de derulare.Valori posibile: on(activa), off(inactiva), auto (automat)
FRAMEBORDER=x	Marimea chenarului din jurul cadrului
MARGINHEIGHT=x	Spatiul suplimentar de deasupra si dedesubtul unui anumit cadru
MARGINWIDTH=x	Spatiu suplimetar la stanga si la dreapta unui anumit cadru
<NOFRAMES> </NOFRAMES>	Sectiunea de pagina afisata pentru utilizatorii care nu pot vedea un cadru
<IFRAME>	Cadru intern (numai pentru (IE)
SRC=url	Sursa cadrului
NAME=s	Numele ferestrei (util pentru TARGET)
HEIGHT=x	Inaltimea cadrului inglobat
WIDTH=x	Latimea cadrului inglobat

Marcaje pentru tabele

<TABLE> </TABLE>	Tabel HTML
BORDER=x	Chenarul tabelului
CELLPADDING=x	Spatiul suplimentar in cadrul celulelor tabelului
CELLSPACING=x	Spatiul suplimentar intre celulele tabelului
WIDTH=x	Latimea impusa tabelului
FRAME=valoare	Ajustarea fina a tabelului
RULES=valoare	Ajustarea fina a riglelor tabelului
BORDERCOLOR = culoare	Specifica culoarea chenarului tabelului
BORDERCOLORLIGHT = culoare	Cea mai deschisa culoare din cele doua culori specificate
BORDERCOLORDARK = culoare	Cea mai inchisa culoare din cele doua culori specificate
ALIGN=left	Aliniaza tabelul la marginea din stanga a paginii, iar textul curge in partea dreapta
ALIGN=right	Aliniaza tabelul la marginea din dreapta a paginii, iar textul curge in partea stanga
HSPACE=x	Spatiu suplimetar pe orizontala in jurul tabelului
VSPACE=x	Spatiu suplimetar pe verticala in jurul tabelului
COLS=x	Specifica numarul de coloane ale unui tabel
<COLGROUP> </COLGROUP>	Defineste un set de definitii de coloane cu ajutorul marcajului <col>
<COL WIDTH=x>	Defineste latimea unei coloane exprimata in pixeli
<THEAD> </THEAD>	Defineste titlul tabelului
<BODY> </TBODY>	Defineste corpul tabelului
<TR </TR>	Linie de tabel
BGCOLOR=culoare	Specifica culoarea de fond pentru intreaga linie
ALIGN=aliniere	Alinierea celulelor de pe linia curenta (left, center, right)
<TD </TD>	Celula de date a tabelului
BGCOLOR=culoare	Specifica culoarea de fond pentru celula de date
COLSPAN=x	Numarul de coloane pe care se intinde celula curenta de date
ROWSPAN=x	Numarul de linii pe care se intinde celula curenta de date
ALIGN=aliniere	Alinierea materialului din cadrul celulei de date.Valori posibile: (left, right, center)
VALIGN=aliniere	Alinierea pe verticala a materialului din cadrul celulei de date.Valori posibile: (top, bottom, middle)
BACKGROUND=url	Specifica imaginea de fond pentru celula tabelului
NOWRAP	Nu permite despartirea textului pe linii in cadrul unei celule
ALIGN=baseline	Aliniaza celule de date cu linia de baza a textului adiacent
ALIGN=caracter	Aliniaza o coloana fata de un anumit carcater (caracterul prestabilit este ".")
ALIGN=justify	Aliniaza atat marginea din stanga cat si marginea din dreapta a unui text

Adaugarea imaginilor

<IMG	Marcajul de introducere a imaginilor
SRC=url	Sursa fisierului grafic
ALT=text	Textul alternativ de afisat, daca este necesar
ALIGN=aliniere	Alinierea imaginii in pagina. Valori posibile: top (sus), middle(in mijloc), bottom (jos), left (in stanga), right (la dreapta)
HEIGHT=x	Inaltimea imaginii (in pixeli)
WIDTH=x	Latimea imaginii
BORDER=x	Chenarul din jurul imaginii, atunci cand aceasta este utilizata ca hiperlegatura
HSPACE=x	Spatiul suplimentar pe orizontala din jurul imaginii (in pixeli)
VSPACE=x	Spatiul suplimentar pe verticala din jurul imaginii (in pixeli)

Marcaje pentru formulare

<FORM> </FORM>	Formular HTML activ
ACTION=url	Programul CGI de pe serverul care receptioneaza datele
METHOD=metoda	Modul in care datele sunt transmise serverului(GET sau POST)
<INPUT	Camp de text sau alte date de intrare
TYPE=optiune	Tipul campului de intrare <INPUT>. Valori posibile: text,password,checkbox,hidden,file, radio,submit,reset,image.
NAME=nume	Numele simbolic al valorii campului
VALUE=valoare	Continutul prestabilit al campului de text
CHECKED= optiune	Buton/caseta marcata in mod prestabilit
SIZE=x	Numarul de caractere al unui camp de text
SIZE=x	Numarul maxim de caractere acceptate
<SELECT> </SELECT>	Grup de casete de validare
NAME=nume	Numele simbolic al valorii campului
SIZE=x	Numarul de articole de meniu care se afiseaza odata (prestabilit=1)
MULTIPLE=x	Permite selectia unor articole de meniu multiple
<OPTION	Alegerea particulara intr-un domeniu <SELECT>
VALUE=valoare	Valoarea rezultanta a acestei selectii din meniu
<TEXTAREA> </TEXTAREA>	Camp de intare de tip text pe linii multiple
NAME=nume	Numele simbolic al valorii campului
ROWS=x	Numarul de linii al casetei de text
COLS=x	Numarul de coloane (caractere) pe linie al casetei de text
<FIELDSET> </FIELDSET>	Imparte formularul in parti logice
<LEGEND> </LEGEND>	Numele asociat setului de campuri (fieldset)
ALIGN=s	Specifica alinierea legendei (explicatiei) afisate (top,bottom,left,right)
TABINDEX=x	Specifica ordinea elementelor atunci cand utilizatorul apasa tasta Tab
ACCESKEY=c	Specifica tasta care asigura comanda rapida de la tastatura asociata unui anumit element
DISABLED	Elementul este inactiv, dar este afisat pe ecran
READONLY	Elementul este afisat pe ecran dar nu poate fi editat

Carcatere speciale

&	& ampersand
˜	tilda
<	mai mic (less than)
>	mai mare (greater than)
©	simbolul de copyright
®	simbolul pentru marca inregistrata
á	a mic cu accent ascutit (acute)
&acirc	a mic cu accent circiumflex
&ntilde	n mic cu tilda
&oslash	o mic barat (slash)

HTML avansat

<STYLE> </STYLE>	Specifica informatii referitoare modelul de stiluri
TYPE=val	Tipul modelului de stiluri. De regula "text/css"
<SCRIPT> </SCRIPT>	Include un script de regula Javascript, in pagina Web
LANGUAGE=limbaj	Limbajul utilizat
EVENT=eveniment	Eveniment care declanseaza executia unor scripturi specifice
FOR=numeobiect	Numele obiectului din pagina asupra caruia actioneaza scriptul

TEXT

Sem.II:20-24.05.2013

Aplicatii Practice

1. Sa se scrie un curriculul vitae cu urmatoarele cerinte:

a) Pagina de lucru sa fie A4, orientata vertical;

b) Marginile: Top=1 cm, Bottom=2 cm, Left=2,5 cm, Right=1 cm;

c) Titlul sa fie centrat, scris cu fontul Arial, de marime 14, ingrosat;

d) Sa contina cel putin doua paragrafe;

e) Textul dintre paragrafe sa aiba urmatoarele indentari: left=1,27 cm; right=1 cm;

f) Subsolul paginii va contine numele elevului si data intocmirii documentului

2. Realizati un document Word, pe o pagina A4, tip Curriculum Vitae minimal. C.V.-ul trebuie sa contina:

a) titlul care sa contina centrat .CURRICULUM VITAE.;

b) in subsolul paginii inserati data si semnatura;

c) inserati un mic tabel cu mediile obtinute la materiile preferate.

3. Realizati un document de tip coperta unui volum de poezii care sa contina:

a) in partea dreapta sus sa se afiseze numele autorului

b) in centru numele volumului

c) in centru jos editura si anul aparitiei

d) realizati o imagine simpla de fundal adecvata continutului cartii

e) salvati ca fisier cu numele coperta.doc si realizati doua variante de document,in doua fisiere, folosind doua palete diferite de culori.

4. Într-un document de câteva zeci de pagini începeţi numerotarea de la pagina 4.

Numãrul paginilor va fi în antet, la extremitãţile paginilor (în stânga pentru paginile pare, în dreapta pentru cele impare).

Paginile vor avea subsolul de 0.5. Sub numärul paginii va fi trasatã o linie de separare distanţatã egal faţã de text pe fiecare paginã.

Pagini

miercuri, 5 iunie 2013

Sem. II: 10-14.06.2013

Sem.II: 3-7.06.2013