html structura unei pagini
DESCRIPTION
HTML Structura Unei PaginiTRANSCRIPT
PROIECT DIDACTIC
Unitatea de învăţământ LICEUL Ion Heliade Rădulescu
Disciplina Informatica
Clasa a X a A
Profesor Ion Alexandru
Unitatea de învăţare Primii paşi in construcţia unui site
Tema Structura de baza a unei pagini
Data 11 martie 2013
Tipul lectiei: - dobândirea de noi cunoştinte Locul de desfasurare: sala de clasa
Durata lectiei: 50 min.
Competente generale:- utilizarea corectă limbajului specific si invatarea elementelor de baza legate de
realizarea unei pagini ;
Competente specifice: - crearea unei pagini simple HTML si afişarea ei cu Internet Explorer
Strategii didactice: Principii didactice:
- principiul participarii si invatarii active;- principiul asigurarii progresului gradat al performantei;- principiul conexiunii inverse;
Metode de invatamant:- metode de comunicare orala: expunere, conversatie;- metode de actiune: exercitiul, invatare prin descoperire;
Procedee de instruire:- explicatia in etapa de invatare;- invatarea prin descoperire, prin rezolvare de probleme ;- conversatia de consolidare in etapa de fixare a cunostintelor;
1
Forme de organizare: frontala;
Forme de dirijare a invatarii: dirijata de profesor;
Resurse materiale:
Metode de evaluare:- evaluare initiala: intrebari orale;
- set de explicatii;
Desfasurarea lectiei:
1. Moment organizatoric (2 min.). 2. Reactualizarea cunostintelor ( 5 min.):
Care este semnificatia FPT? Care este rolul FTP in realizarea paginilor de internet? Dati exemple de programe FTP.
4. Comunicarea noilor cunoştinte ( 35 min..):
Cum scriem un fisier HTML:Presupunem ca avem un site si stim sa transferam fisiere de la calculatorul nostru catre el
si invers. Stim ca pentru a scrie o pagina web trebuie sa cunoastem limbajul HTML. Problema la care raspundem in acest moment este urmatoarea: cum se scrie codul
HTML?Browser-ul poate afisa un fisier HTML aflat pe calculatorul nostru. Un astfel de fisier are
una din extensiile: .htm, .html. Puteti cauta cu Find un astfel de fisier si executati click pe icon-ul sau. Imediat va fi apelat browser-ul, iar acesta va afisa fisierul.
Mai stim ca, atunci cand browser-ul afiseaza un astfel de fisier, putem vedea codului sau (view si Source din meniu). Automat, se va lansa programul NOTEPAD++ care realizeaza aceasta.
De aici rezulta si modul in care vom scrie astfel de fisiere:a) Vizualizam cu My Computer folder-ul unde dorim sa se gaseasca fisierul.b) Apelam la meniul flotant (dick cu butonul drept al mouse-ului) si alegem New si Text Document. Programul NOTEPAD++ va crea un fisier cu extensia .txt..e) Modificam numele si extensia fisierului. La fel, atunci cand cursorul grafic se gaseste deasupra icon-ului sau, apasam butonul drept al mouse-ului si alegem Rename. Vom scrie un primul html nume dorit de noi, iar extensia va fi .html. Fie numele sau primul.html. Intrucat extensia .html este asociata browser-ului (Explorer, la noi) fisierul va avea de aceasta data icon-ul browser-ului.d) Executarea unui dublu click asupra icon-ului are ca efect lansarea browser-ului care va afisa fisierul. Evident, in aceasta faza continutul sau este vid.e) Apelati view si source. NOTEPAD++-ul va incarca codul HTML alfisiemlui (evident, continutul este vidf) Scrieti un text la alegerea dv. Exemplu: "Acesta este primul text". Salvati-l. ;g) In fereastra browser-ului apasati butonul Refresh. Prin aceasta operatie comandam browser-ului sa reincarce fisierul, pentru ca i-am schimbat continutul. Textul va fi afisat de browser.
Structura de baza a unei paginiMai jos puteti observa o pagina asa cum este scrisa in Notepad++ si asa cum este afisata de Explorer.
2
Din analiza exemplului observam ca: - O pagina incepe cu tag-ul <html> si se termina" cu tag-ul </html>; - O pagina" contine un antet (head) si corpul propriu-zis (body); - Antetul este cuprins intre directivele <head> si </head>; - Corpul este continut intre directivele <body> si </body>. Optional, antetul poate contine titlul paginii cuprins intre tag-urile <title> si </title>. Titlul apare pe bara de titul a ferestrei afisata de Explorer ( pentru noi acesta este "Prima mea pagina web"). Corpul poate contine texte si/sau imagini. In exemplu, pagina contine textul " Am reusit sa creez prima mea pagina web!".
4. Fixarea cunostintelor ( 3 min.) Cum se creaza o pagina cu ajutorul NOTEPAD++? Ce instructiuni de baza folosim pentru a scrie o pagina? Ce instructiune folosim pentru a scrie textul paginii noastre?
5. Operationalizarea cunostintelor (asigurarea conexiunii inverse) (5 min.) se evidentiaza rezultatele obtinute ; se semnaleaza si se corecteaza eventualele erori aparute; se evidentiaza si se noteaza elevii ce au raspuns;
3