cyber_cobra Posted October 10, 2012 Report Posted October 10, 2012 Lectia11: HTML , HTML este un intreg de coduri logice care constituie aparitia unui document web si a informatiilor pe care le detine. Codurile sunt scrise intre "<" (paranteza deschisa) si ">" (paranteza inchisa), cu toate ca nu sunt chiar paranteze, a?a se numesc si arata a?a: < >.EX:<BODY> sau <FONT>Cele mai multe elemente (numite si tag-uri) au un element (tag) de deschidere si un element de închidere distins prin "/" in interiorul parantezei deschise "<".EX:<FONT> ... </FONT>Primul cuvant care apare inauntru "<" se numeste element sau eticheta HTML si spune browser-ului sa faca ceva, precum <FONT>Cuvintele care urmeaza dup? element in interiorul "< >"se numesc atribute care descriu propriet??ile elementului. Cum ar fi : culoarea, m?rimea, etc.Atributele sunt separate prin spatiu si urmate de semnul egal "=", dupa care sunt scrise, intre ghilimele (" ") valorile atributelor.Astfel, o eticheta HTML poate contine elementul de identificare, atribute si valori.EX de FONT atributul COLOR si valoarea BLUE: <FONT COLOR="BLUE">acest text va fi albastru</FONT>2: Structura documentului HTMLUn document (fisier) HTML este alcatuit din mai multe elemente si atributele lor.- La început un element HTML cuprinde datele documentului. Acest element contine doua sub-elemente principale: HEAD si BODY. In HEAD se poate adauga titlul paginii web si alte elemente numite metatag-uri, precum si scripturi JavaScript si stil-uri CSS. In BODY se adauga continutul documentului care va fi afisat in pagina web.EX:<html> <head> <title>Titlu Documentului-Cyber_Cobra</title> </head> <body> Continutul paginii </body></html> 3: Structura generala a unui document HTML<HTML> <HEAD> Acesta are si el mai multe sub-elemente: <TITLE> Aici se scrie titlul documentului, cat mai sugestiv, si se încheie cu </TITLE> <BASE> Poate fi folosit pentru a înregistra loca?ia documentului in forma URL. (Necesar daca documentul nu este accesat in loca?ia lui originala). Se încheie cu </BASE> <LINK> Indica o rela?ie dintre document si alte obiecte de pe WEB. Se încheie cu </LINK> <META> Aici sunt scrise informa?ii cum ar fi tastatura (limbaj) folosita, descrierea si cuvinte cheie care pot fi g?site de motoarele de c?utare. Se încheie cu </META> <SCRIPT> Con?ine oricare din JavaScript sau VB Script. Se încheie cu </SCRIPT> <STYLE> Con?ine informa?ii privind stilul, grafica informa?iilor care vor ap?rea pe pagina. Se încheie cu </STYLE> Aici se încheie elementele adaugate in HEAD </HEAD> <BODY> Etichetele HTML si continutul documentului care va fi afisat in pagina web sunt incluse in acest element. Aici pot fi puse si elemente cum ar fi: <SCRIPT> </SCRIPT>Se încheie cu </BODY> </HTML>Lectia21: Creearea si editarea paginilor - Crearea bazei de început a unui documentCum ai vazut in Lectia 1, sunt elemente sigure, generale, care sunt necesare pentru crearea unui document HTML.Pentru început deschide aplicatia NotePad si scrie structura de baza a unei pagini web. Aceasta este: <html> <head> <title> Titlul </title> </head> <body> Continut </body></html> Acum pagina ta are HEAD si BODY in interiorul bazei <HTML>.In interiorul elementului HEAD are elementul TITLE, pe care ar trebui sa-l completezi cu un text reprezentativ ca titlu al documentului dv.; si in BODY un text "Continut".Ceea ce scrii la TITLE va apare in linia cea mai de sus a browseru-lui (deasupra meniurilor). La TITLE poti pune orice text, indicat sa nu depaseasca 70 caractereCeea ce adaugi intre tag-urile <body> </body> reprezinta continutul paginii, care va fi afisat in browser.EX cum ar putea fi completat tag-ul TITLE si un mic continut in pagina: <html> <head> <title>Cyber_Cobra</title> </head> <body> <h1>Pagina HTML</h1> WTF you whant </body></html> <h1> </h1> este o eticheta HTML pentru afisare de text mare (ca un titlu) in pagina.- Ca sa vezi rezultatul, copie acest cod intr-o pagina noua deschisa cu Notepad si apoi salveaza fisierul cu extensia .html. Daca nu stii deja, pentru a-l salva alege la "Save as type" - All Files, apoi la "File name" si scriei numele si extensia (ex.: "pagina.html"). Dupa ce a fost salvat fisierul, deschide-l cu un browser (doar cu dublu-click pe el).2: Setarea proprietarilor documentuluiProprietatile documentului pot fi controlate de atributele elementului BODY, de exemplu cum ar fi culorile pentru fondul paginii, pentru text si diferite faze ale link-urilor.Culorile sunt setate folosind culorile de baza: rosu, verde si albastru; expresia folosita RGB (Red, Green, Blue), acestea sunt reprezentate ca valori hexadecimale si sunt scrise intre ghilimele (" "), la inceput trebuie adaugat caracterul '#'. Fiecare 2 unitati ale codului reprezinta una din culorile RGB.De exemplu: #00aa11 reprezinta o culoare care nu are Rosu (00), are Verde (aa) si Albastru mai putin (11).3: Elementul BODYAcestui element ii poti adauga informatii care sa defineasca culoarea sau imaginea din fondul paginii, textul si culoarea link-urilor.Daca elementul BODY nu este completat cu alte atribute atunci browser-ul va prezenta culorile standard, de obicei fondul este alb.Pentru a seta culoare fondului paginii adaugati in eticheta <BODY> atributul BGCOLOR.Urmatorul exemplu va prezenta un document a carui fond este de culoare albastra: <body bgcolor="#0000ff"></body>3.1: Culoarea textuluiAtributul TEXT controleaza culoarea textului normal din document.Acesta va afecta tot textul din document care nu este colorat de alte elemente, cum ar fi link-ul.Culoarea standard pentru text este Negru.Iata un exemplu in care culoarea fondului va fi albastru si culoarea textului va fi rosu, atributul TEXT va fi adaugat astfel: <body bgcolor="#0000ff" text="#ff0000"></body>3.2: Link-uri (LINK, VLINK si ALINK) Aceste atribute controleaza culoarea link-ului in diferite stari 1. LINK - culoarea initiala a link-ului. Standard este albastru 2. VLINK - culoarea unui link vizitat. Standard este purpuriu. 3. ALINK - culoarea link-ului in momentul activarii. Standard este rosu.Modul de setare al acestor atribute este urmatorul: <body bgcolor="#ffffff" text="#ff0000" link="#0000ff" vlink="#ff00ff" alink="#ffff00"></body>Rezultatul va fi o pagina cu fondul alb, textul rosu, link-urile albastre, link-urile vizitate vor avea culoarea roz iar culoarea link-urilor in momentul activarii va fi galben.3.3: Folosirea unei imagini ca fond pentru pagina (background)Elementul body ofera posibilitatea înlocuiri fondului paginii cu o imagine (Background image). Daca imaginea este mai mica decat dimensiunile paginii atunci imaginea va fi multiplicata pana va acoperi întreg cadru documentului. Este indicat ca imaginea sa fie in format *.gif sau *.jpg. Folosirea unei imagini va da un aspect placut documentului. EX de cod HTML cu imagine pentru background este urmatorul:<body background="imagine.gif" bgcolor="#ffffff"></body>In acest exemplu fondul pagini va fi dat de imaginea fisierului "imagine.gif" si de asemenea am setat BGCOLOR astfel incat in timpul procesului de încarcare a imaginii culoarea fondului va fi alba.Dupa ce ai creat baza de început a unui document si a-ti setat proprietatile, trebuie sa salvati fisierul. Salvarea trebuie facuta intr-un format pe care browser-ul îl poate recunoaste. Extensia standard pentru un fisier care reprezinta o pagina web este ".htm" sau ".html". Pentru a salva documentul ca sa arate ca o pagina web, in NotePad alege din meniul File comanda Save si salvati fisierul cu orice nume doriti dar cu extensia html (sau "htm") - (La File name: scrieti si numele si extensia ".html", exemplu: index.html). Daca nu scrieti extensia, NotePad va salva documentul in format "txt".Pentru a vedea documentul ca o pagina web, duceti-va in directorul in care a-ti salvat fisierul si deschideti-l pur si simplu (cu Enter sau dublu-click la mouse), acesta va fi deschis automat de browser-ul pe care-l folositi (Mozilla Firefox, Internet Explorer, Opera, Google Chrome). Sau deschide browser-ul si din comanda Open deschide documentul pe care l-ati salvat.Pentru a continua munca, a face modificari paginii sau pentru a adauga altceva in documentul HTML, deschideti documentul cu NotePad. Una din metode este sa deschideti aplicatia NotePad si din meniul File alegeti Open apoi gasiti fisierul pe care vreti sa-l modificati si dati clic pe butonul Open. Dupa ce terminati modificarile salvati, astfel daca redeschideti documentul ca o pagina web acesta va fi deschis cu noul format.Daca va place voi continua . Quote
Vally Posted October 10, 2012 Report Posted October 10, 2012 Ne place, dar precizeaza sursa, de unde ai copiat articolul. Quote
cyber_cobra Posted October 10, 2012 Author Report Posted October 10, 2012 Ne place, dar precizeaza sursa, de unde ai copiat articolul.Dai un search pe google sau pe orice alt ceva , vezi gasesti ? Quote
malsploit Posted October 10, 2012 Report Posted October 10, 2012 http://www.marplo.net/html/crearea_pagini.htmlOricum era bine sa vorbesti despre standarde, versiuni, diferente intre html4 si html5, si poate te lua lumea in serios. Oricat de jos cred unii ca a ajuns nivelul de cunostinte al comunitatii totusi, pentru multi, html(4) e banal.Nu o lua personal Quote
cyber_cobra Posted October 10, 2012 Author Report Posted October 10, 2012 (edited) http://www.marplo.net/html/crearea_pagini.htmlOricum era bine sa vorbesti despre standarde, versiuni, diferente intre html4 si html5, si poate te lua lumea in serios. Oricat de jos cred unii ca a ajuns nivelul de cunostinte al comunitatii totusi, pentru multi, html(4) e banal.Nu o lua personal Nu o iau personal , de asta i'am si zis sa dea un search , eram sigur ca gaseste sursa Daca este vreo problema ca nu am pus sursa ok , data viitoare o voi pune .EDIT : Ai spus bine " pentru multi " , nu pentru toti , deci este bun un tutorial ca acesta .In search on forum nu am gasit nimic asemanator , deci am decis sa il pun . Edited October 10, 2012 by cyber_cobra Quote
nedo Posted October 10, 2012 Report Posted October 10, 2012 Apreciem tutorialele totusi una din regulile forumului este ca atunci cand copiezi/traduci/adaptezi/te inspiri din alt tutorial sa postezi sursa/sursele.In cazul in care nu le-ai citit deja, iti sugerez sa treci pe aici si sa iei aminte la ele deoarece nerespectarea lor va aduce sanctiuni. Quote
