Model HTML

download Model HTML

of 26

Transcript of Model HTML

  • 8/6/2019 Model HTML

    1/26

    Liceul Economic Administrativ

    ROIORII DE VEDE

    PROIECT PENTRU OBTINEREA

    ATESTATULUI PROFESIONAL

    MATEMATICA-INFORMATICA

    PROF.INDRUMATOR

    Badauta Camelia ELEV

    CANDIDAT

    BOBOCEL MARIUS COSMIN

    Clasa a XII-a A

    ANUL SCOLAR

    2009-2010

    1

  • 8/6/2019 Model HTML

    2/26

    TEMA:

    CREARE PAGINI WEB,MARI METROPOLE

    2

  • 8/6/2019 Model HTML

    3/26

  • 8/6/2019 Model HTML

    4/26

    Cuprins

    Capitolul 1:Limbajul HTML

    Capitolul 2:Pagini WebCapitolul 3:Specificarea mediului de programare utilizat

    Capitolul 4:Prezentarea site-ului: -Codul sursa

    -Descrierea paginii principale

    -Continutul site-ului

    4

  • 8/6/2019 Model HTML

    5/26

    Capitolul 1

    Limajul HTML

    Unul din primele elemente fundamentale ale WWW ( World Wide Web )este HTML ( Hypertext Markup Language ), care descrie formatul primar incare documentele sint distribuite si vazute pe Web. Multe din trasaturile lui,cum ar fi independenta fata de platforma, structurarea formatarii si legaturilehipertext, fac din el un foarte bun format pentru documentele Internet si Web.

    HTML a fost dezvoltat initial de Tim Berners-Lee la CERN in 1989. HTMLa fost vazut ca o posibilitate pentru fizicienii care utilizeaza computere diferitesi schimbe intre ei informatie utilizind Internetul Primele specificatiile de baza

    ale Web-ului au fost HTML, HTTP si URL.Erau prin urmare necesare citeva trasaturi : independenta de platforma,posibilitati hypertext si structurarea documentelor.Independenta de platformainseamna ca un document poate fi afisat in mod asemanator de computerediferite ( deci cu fonte, grafica si culori diferite ), lucru vital pentru o audientaatit de variata.

    Hipertext inseamna ca orice cuvint, fraza, imagine sau alt element aldocumentului vazut de un utilizator ( client ) poate face referinta la un altdocument, ceea ce usureaza mult navigarea intre multiple documente sauchiar in interiorul unui aceluiasi document. sStructurarea riguroasa adocumentelor permite convertirea acestora dintr-un format in altul precum siinterogarea unor baze de date formate din aceste documente.SGML si HTML.

    Standardul oficial HTML este World Wide Web Consortium (W3C), careeste afiliat la Internet Engineering Task Force (IETF). W3C a enuntat catevaversiuni ale specificatiei HTML, printre care si HTML 2.0, HTML 3.0,HTML 3.2,HTML 4.0 si, cel mai recent, HTML 4.01. In acelasi timp, autorii de browsere,cum ar fi Netscape si Microsoft, au dezvoltat adesea propriile "extensii" HTMLin afara procesului standard si le-au incorporat in browserele lor. In unele

    cazuri, cum ar fi tagul Netscape , aceste extensii au devenit standarde defacto adoptate de autorii de browsere.

    HTML 2.0, elaborat in Iunie 1994, este standardul pe care ar trebui sa-lsuporte toate browserele curente -- inclusiv cele mod text. HTML 2.0 reflectaconceptia originala a HTML ca un limbaj de marcare independent de obiecteleexistente pentru asezarea lor in pagina, in loc de a specfica exact cum artrebui sa arate acestea. Daca doriti sa fiti siguri ca toti vizitatorii vor vedea

    5

  • 8/6/2019 Model HTML

    6/26

    paginile asa cum trebuie, folositi tagurile HTML 2.0.Specificatia HTML 3.0, Enuntata in 1995, a incercat sa dezvolte HTML

    2.0 prin adaugarea unor facilitati precum tabelele si un mai mare controlasupra textului din jurul imaginilor. Desi unele din noutatile HTML 3.0 eraudeja folosite de autorii de browsere, multe nu erau inca. In unele cazuri, taguriasemanatoare implementate de autorii de browsere au devenit mai raspanditedecat tagurile "oficiale". Specificatia HTML 3.0 acum a expirat, deci nu maieste un standard oficial.

    Documentele HTML sint documente in format ASCII si prin urmare pot ficreate cu orice editor de texte. Au fost insa dezvoltate editoare specializatecare permit editarea intr-un fel de WYSIWYG desi nu se poate vorbi deWYSIWYG atita vreme cit navigatoarele afiseaza acelasi document oarecumdiferit, in functie de platforma pe care ruleaza. Au fost de asemeneadezvoltate convertoare care permit formatarea HTML a documentelor

    generate ( si formatate ) cu alte editoare. Evident conversiile nu pot patra decitpartial formatarile anterioare deoarece limbajul HTML este inca incomplet.

    6

  • 8/6/2019 Model HTML

    7/26

    Capitolul 2Pagini Web

    Paginile de Web sunt scrise intr-un limbaj numitHTML (Hypertext Markup Language limbaj de marcarehipertext). HTML permite utilizatorilor sa produca, paginicare includ texte, grafica si indicatori la alte pagini de Web.Vom incepe sa studiem HTML eu acesti indicatori, pentruca ei reprezinta tocmai mecanismul care tine Web-ulconectat

    URL- Uniform Resource Locators

    O pagina de Web poate sa contina referinte la altepagini. Sa explicam cum sunt implementate acestereferinte. Inca de la crearea Web-ului a fost clar ca pentrua avea o pagina care sa indice spre alta pagina estenecesar un mecanism care sa permita numirea siregasirea paginilor. In particular sunt trei intrebari la caretrebuie sa se raspunda inainte de a se putea afisa o

    pagina:l. Cum se numeste pagina ?

    2. Cum este localizata pagina ?

    3. Cum se face accesul la pagina ?

    Daca fiecare pagina ar avea un nume unic, atunci nu

    ar exista nici o ambiguitate in identificarea paginilor. Totusi,problema nu este inca rezolvata. Sa consideram deexemplu o paralela intre oameni si pagini. In SUA aproapefiecare persoana are un numar de asigurare sociala; careeste un identificator unic, astfel incat nu exista douapersoane cu acelasi numar. Totusi, cunoscand numai

    7

  • 8/6/2019 Model HTML

    8/26

    numarul respectiv nu exista nici o posibilitate de a gasiadresa persoanei respective, si sigur nu se poate afla dacapersoanei respective trebuie sa i se scrie in engleza,spaniola sau chineza. Web-ul are practic acelasi fel de

    probleme.

    Solutia aleasa identifica paginile intr-un mod carerezolva toate trei problemele in acelasi timp. Fiecarepagina are un URL (Uniform Resource Locater - adresauniforma pentru localizarea resurselor) care functioneazaca nume al paginii general valabil. Un URL are treicomponente: protocolul, numele DNS al masinii pe care

    este memorat fisierul si un nume local, care indica in modunic pagina (de obicei numele fisierului care continepagina). De exemplu, URL-ul departamentului din careface parte autorul este:

    http://www.cs.vu.nl/welcome.html

    Acest URL este format din trei componente:protocolul (http), numele DNS al serverului (www.cs.vu.nd)si numele fisierului (welcome.html), cu semnele depunctuatie corespunzatoare.

    Protocolul http este protocolul nativ pentru Web; e1este utilizat de catre serverele de HTTP.

    Protocolul ftp este utilizat pentru accesul la fisiere prinFTP (File Transfer Protocol - protocol pentru transferul de

    fisiere), protocolul Internet de transfer de fisiere. FTP esteutilizat de peste douazeci de ani si este foarte raspandit.Numeroase servere de FTP din toata lumea permit ca deoriunde din Internet sa se faca o conectare si sa se aducaorice fisier plasat pe un server FTP. Web-ul nu aduceschimbari aici, face doar ca obtinerea fisierelor sa se faca

    8

  • 8/6/2019 Model HTML

    9/26

    mai usor, pentru ca FT'P are o interfata mai putinprietenoasa. In viitor probabil ca FTP-ul va dispare,deoarece nu exista nici un avantaj pentru o organizatie saaiba un server de FTP in loc de un server de HTTP, care

    poate sa faca tot ce face un server de FTP, si chiar maimult (desigur mai exista niste argumente legate deeficienta).

    Este posibil sa se faca acces la un fisier local ca la opagina de Web, fie utilizand protocolul file (fisier), sau pursi simplu utilizand numele fisierului. Aceasta abordare estesimilara utilizarii protocolului FTP, dar nu implica existenta

    unui server. Desigur functioneaza numai pentru fisierelocale.

    Protocolul news admite doua formate. Primul formatspecifica un grup de stiri si poate sa fie utilizat pentru aobtine o lista de articole de la un server de stiripreconfigurat. Al doilea format cere identificatorul unuiarticol, de exemplu [email protected].

    Programul de navigare aduce articolul de la serverulcorespunzator utilizand protocolul NNTP.

    Protocolul gopher este utilizat de sistemul Gopher,care a fost proiectat la universitatea Minnesota. Numeleeste cel al echipei atletice a universitatii, the GoldenGopher, de asemenea acest nume este utilizat in argoupentru go for; adica o comanda de aducere Gopher-ul aprecedat Web-ul cu cativa ani. Este o metoda de regasirea informatiei, similar conceptual cu cea utilizata de Web,dar acceptand numai text si imagini. Cand un utilizator seconecteaza la un server de Gopher, va avea la dispozitieun meniu de fisiere si directoare, fiecare intrare putand safie conectata la orice meniu de Gopher oriunde in lume.

    9

  • 8/6/2019 Model HTML

    10/26

    Marele avantaj al Gopher-ului in raport cu Web-uleste ca functioneaza foarte bine cu terminale ASCII careafiseaza 25 x 80 caractere si din care exista inca foartemulte in lume. Pentru ca este bazat pe text, Gopher este

    foarte rapid. De aceea in lume exista multe servere deGopher. Utilizatorii de Web pot sa acceseze un server deGopher si sa vada fiecare meniu Gopher ca o pagina Webcu intrari selectabile. Daca nu ati lucrat cu Gopher-ulutilizati masina favorita de cautare in Web pentru a cautacuvantul gopher.

    Este posibil sa se trimita cerere de cautare completa

    unui server de Gopher utilizand un protocol gopher+. Cese va afisa este rezultatul cererii transmise serverului deGopher.

    10

  • 8/6/2019 Model HTML

    11/26

    Capitolul 3Specificarea nediului de programare utilizat

    Limajul de programare folosit a fost HTML,Web Page Maker.

    Pentru incepatori , acest program este foarte folositor . Dupa cumspune si titlul acestui articol , cu Web Page Maker va puteti crea foartesimplu si fara batai de cap prea mari , un web site , foarte simplu si rapid .

    Trebuie doar sa descarcati si sa instalati Web Page Maker , si in

    cativa pasi puteti avea un site personal , de afaceri sau cu orice altatematica .Pentru incepatori , care nu au habar cu ce se mananca HTML ,sau si daca au , dar nu au chef sa scrie cod , pot folosi acest program .

    Cu Web Page Maker puteti adauga toate elementele pe care le poatecontine o pagina web : imagini , sunete , tabele , linkuri , flash , video ,iframe , javascript , butoane si asa mai departe .Web Page Maker face partedin categoria de programe pentru facut saituri , WYSIWYG(what you see iswhat you get) in traducere , ceea ce vezi e cea ce obii .Web Page Maker

    suporta si functia drag n drop pentru imagini , deci puteti trage cu mausulimaginea direct in program.Pe langa astea programul permite utilizarea defoi de stil cascada ,adica CSS ,pentru modul in care vor fi afisate elementeleintr-o pagina web.Un alt lucru destul de folositor ,este includerea unortemplate-uri predefinite,adica site0uri web gata construite,singurul lucrucare trebuie sa il faceti este sa il adaptati cerintelor dumneavoastra.WebPage Maker nu este freeware si este compatibil cu urmatoarele sisteme deoperare Windows 95/98/ME/NT4/2000/XP/Vista.

    11

  • 8/6/2019 Model HTML

    12/26

    Capitolul 4

    Prezentarea site-ului

    Codul sursa

    Untitled

    /*----------Text Styles----------*/

    .ws6 {font-size: 8px;}

    .ws7 {font-size: 9.3px;}

    .ws8 {font-size: 11px;}

    .ws9 {font-size: 12px;}

    .ws10 {font-size: 13px;}

    .ws11 {font-size: 15px;}

    .ws12 {font-size: 16px;}

    .ws14 {font-size: 19px;}

    .ws16 {font-size: 21px;}

    .ws18 {font-size: 24px;}.ws20 {font-size: 27px;}

    .ws22 {font-size: 29px;}

    .ws24 {font-size: 32px;}

    .ws26 {font-size: 35px;}

    .ws28 {font-size: 37px;}

    12

  • 8/6/2019 Model HTML

    13/26

    .ws36 {font-size: 48px;}

    .ws48 {font-size: 64px;}

    .ws72 {font-size: 96px;}

    .wpmd {font-size: 13px;font-family: 'Arial';font-style: normal;font-weight:

    normal;}/*----------Para Styles----------*/

    DIV,UL,OL /* Left */

    {

    margin-top: 0px;

    margin-bottom: 0px;

    }

  • 8/6/2019 Model HTML

    14/26

    function MM_preloadImages() {

    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0;

    i0&&parent.frames.length) {

    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i

  • 8/6/2019 Model HTML

    15/26

    onMouseOver="MM_swapImage('g_nav10','','images/nav54375460a.gif',1)"

    href="Index.html">

    15

  • 8/6/2019 Model HTML

    16/26

    Metropola este

    un oras de mari dimensiuni,cu cel putin un milion de locuitori si care joacarolul de capitala regionala sau nationala sub aspect economic, cultural,

    administrativ: Tokyo, Milano, New Tork, Rio de

    Janeiro,Calcutta,Londra,Mumbay,Paris,etc.

    Aria

    metropolitana cuprinde un mare oras si o zona de dimensiuni variabile care se

    creeaza in jurul acestuia. In 1900 erau 21 de metropole,iar numarul lor au

    crescut continuu ajungand la 315 la sfarsitul secolului al XX-

    lea.

    Aria metropolitana cuprinde

    un mare oras si o zona de dimensiuni variabile care se creeaza in jurul

    acestuia.In 1900 erau 21 de metropole,iar numarul lor au crescut continuu

    ajungand la 315 la sfarsitul secolului al XX-lea.

    16

  • 8/6/2019 Model HTML

    17/26

    Service offert par bloguez.com

    Ultima pagina

    Untitled

    17

  • 8/6/2019 Model HTML

    18/26

    /*----------Text Styles----------*/

    .ws6 {font-size: 8px;}

    .ws7 {font-size: 9.3px;}

    .ws8 {font-size: 11px;}

    .ws9 {font-size: 12px;}

    .ws10 {font-size: 13px;}

    .ws11 {font-size: 15px;}

    .ws12 {font-size: 16px;}

    .ws14 {font-size: 19px;}

    .ws16 {font-size: 21px;}

    .ws18 {font-size: 24px;}

    .ws20 {font-size: 27px;}

    .ws22 {font-size: 29px;}

    .ws24 {font-size: 32px;}

    .ws26 {font-size: 35px;}

    .ws28 {font-size: 37px;}

    .ws36 {font-size: 48px;}

    .ws48 {font-size: 64px;}

    .ws72 {font-size: 96px;}

    .wpmd {font-size: 13px;font-family: 'Arial';font-style: normal;font-weight:

    normal;}

    /*----------Para Styles----------*/

    DIV,UL,OL /* Left */

    {

    margin-top: 0px;

    margin-bottom: 0px;

    }

  • 8/6/2019 Model HTML

    19/26

    function jsPlay(soundobj) {

    var thissound= eval("document."+soundobj);

    try {

    thissound.Play();

    }catch (e) {

    thissound.DoPlay();

    }

    }

    //-->

  • 8/6/2019 Model HTML

    20/26

    }

    function MM_swapImage() {

    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;

    for(i=0;i

  • 8/6/2019 Model HTML

    21/26

    document.write("");

    } else if (ie||ff) {

    document.write('')

    for (xy=0;xy

  • 8/6/2019 Model HTML

    22/26

    }

    else

    {

    yBase = window.innerHeight/4 ;

    xBase = window.innerWidth/4;}

    if (!ns)

    {

    var

    totaldivs=document.getElementById("starsDiv").getElementsByTagName("di

    v");

    for ( i = 0 ; i < totaldivs.length ; i++ ){

    var tempdiv=totaldivs[i].style;

    tempdiv.top = Ybpos + Math.cos((20*Math.sin(currStep/20))

    +i*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);

    tempdiv.left = Xbpos + Math.sin((20*Math.sin(currStep/20))

    +i*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);

    }

    }

    else if (document.layers)

    {

    for ( j = 0 ; j < 7 ; j++ )

    {

    var templayer="a"+j

    document.layers[templayer].top = Ybpos +

    Math.cos((20*Math.sin(currStep/20))

    +j*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep +

    j*25)/10);document.layers[templayer].left =Xbpos +

    Math.sin((20*Math.sin(currStep/20))

    +j*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep +

    j*25)/10);

    }

    22

  • 8/6/2019 Model HTML

    23/26

    }

    currStep += step;

    setTimeout("animateLogo()", 15);

    }

    animateLogo();// -->

    23

  • 8/6/2019 Model HTML

    24/26

    widgeo.net

    Pentru contact si orice informatii

    legate de site


    e-

    mail:[email protected]

    tel:07268658xx

    24

  • 8/6/2019 Model HTML

    25/26

    Desacrierea paginii princuipale

    Numele paginii principale este Home.html-in acest fel serverul o prezinta in

    mod automat atunci cand cineva acceseaza site-ul,fara a fi nevoie sa scrie si nume

    paginii.

    Fisierul .html incepe cu tag-ul si se termina cu tag-ul,marcand

    continutul care urmeaza a fi citit si interpretat de browser-ul vizitatorilor(Internet

    Explorer,Mozilla)

    Titlul paginii este incadrat in tag-ul,care la randul lui este incadrat in

    tag-ul.

    Corpul paginii,,are culoarea alba,definita prin

    bgcolor=#FFFFFFpentru a respecta standardele.

    In lipsa definirii culorii,pagina este oricum afisata cu fundal alb

    Toate imaginile sunt stocate in folder-ul imagespentru o mai buna organizare.

    Continutul site-ului

    Home

    Scurt Istoric

    Orase

    Galerie

    Contact

    25

  • 8/6/2019 Model HTML

    26/26

    Bibliografie

    1.Ghidul programatorului HTML de Kevin Werbach

    2.Tutoriale HTML:http://www.worklance.com/htmltutorial/ceestehtml/

    3.Limbaj HTML:http://html-tutor.net/