1 / 17

Curs HTML

Curs HTML. Introducere

nira
Download Presentation

Curs HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Curs HTML

  2. Introducere • HTML (HyperTextMarkupLanguage) este un limbaj utilizat pentru crearea paginilor web ce pot fi afisate intr-un browser (sau navigator).HTML este folosit pentru prezentarea unui continut (text, imagine) intr-o pagina web, furnizeaza mijloacele prin care continutul unui document poate fi structurat si adnotat cu diverse tipuri de metadate si indicatii de redare si afisare. Aceste indicatiile pot varia de la decoratiuni minore ale textului, cum ar fi culoarea sau sublinierea unui cuvant ori introducerea unei imagini, pana la adaugarea de elemente sofisticate, tabele, harti de imagini, formulare si cod CSS sau scripturi JavaScript.

  3. Principalele elemente HTML •  Ce este HTML? (HypertextMarkupLanguage) • - Este un set de coduri logice. • Codurile sunt scrise intre "<" (paranteza deschisa) si ">" (paranteza inchisa), cu toate ca nu sunt chiar paranteze, aşa se numesc si arata aşa: < >. • Exemplu: <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 "<".Exemplu:<FONT> ... </FONT>

  4. Structura documentului HTML • <html>  <head>    <title>TitluDocumentului</title>  </head>  <body>Continutulpaginii  </body></html> •  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 adaugacontinutul documentului care va fi afisat in pagina web.

  5. 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>

  6. Elementul BODY • Culoarea fondului paginii • se adauga in eticheta <BODY> cu atributulBGCOLOR. • <body bgcolor=“blue"></body> • Culoarea textului • AtributulTEXTcontroleaza culoarea textului normal din document. Exemplu:<body bgcolor=“blue"text=“red"></body>

  7. Folosirea unei imagini ca fond pentru pagina (background) • fondului paginiipoatefiinlocuitcu o imagine (Background image).  Ex: <body background="imagine.gif" bgcolor="#ffffff"></body>  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.

  8.  Titluri <Hx> ... </Hx> • Etichete -<Hx>, (headings) unde 'x' este un numar intre 1 si 6. • Cod HTMLCumapare in pagina<html> <head><title>Titludocumentului</title></head><body><h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6></body></html>

  9. Paragraf <p> ... </p> - Defineste o diviziune a documentului

  10. Aliniereaparagrafelor • Definire: • <p align =“left”|”right”|”center” |”justify”> • Text • ……. • </p>

  11. Linieorizontala • <HR size =“n” color=“culoare” width= “n”> • </HR>

  12. Stilurifizice de marcarepentru text • <b> Scrisingrosat</b> • <i> scris italic</i> • <u> scrissubliniat</u> • <sub> scris subscript sauindice inferior</sub> • <sup> superscript sauscris la exponent</sup> • Combinatii • <i><b> text…… </i></b>

  13. Listeneordonate • <ul> • <li> Primul element • <li> Al doilea element • <li> Al treilea element • </ul> • Atributepentruelementelelistei • circleafiseaza un cerc in fataelementului • discafiseaza un disc • squareafiseaza un patrat • <li type =“valoare” > primul element</li>

  14. Listeordonate • <ol> • <li> Primul element • <li> Al doilea element • <li> Al treilea element • </ol> • Atributepentruelementelelistei • i , I numerotare cu I, ii…. • a, Anumerotare cu a, b…. • 1numerotare cu 1, 2… • <li type =“valoare” > primul element</li>

  15. Mai jos puteti vedea exemplu.<html><head><title>titlu documentului</title></head><body><ul><li>List item 1 ...</li><li>List item 2 ...</li><li>List item 3 ...</li></ul></body></html>

  16. Link-uri • Pot fi: • Interne - catreacelasi document • Locale – la altedocumente din calculator, folder • Indepartate- la pagini din internet • <a href=“calecatrefisier”>nume text • </a> • <a href="url" title="Titlu link">Nume • </a>

  17. linkuri • <a >

More Related