1 / 19

Creare a paginilor Web No ţ iuni introductive

Creare a paginilor Web No ţ iuni introductive. Pagina Web. Limbajul H.T.M.L. Cod sursă. Colegiul “Emil Negrutiu” Turda Prof. Monica Simon. Cuprins. Limbajul H.T.M.L. Editarea unui document H.T.M.L. Operaţii de bază. Structura unui document H.T.M.L. Parametrii marcajului <BODY>…</BODY>.

dareh
Download Presentation

Creare a paginilor Web No ţ iuni introductive

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. Crearea paginilor WebNoţiuni introductive Pagina Web Limbajul H.T.M.L. Cod sursă Colegiul “Emil Negrutiu” Turda Prof. Monica Simon

  2. Cuprins Limbajul H.T.M.L. Editarea unui document H.T.M.L. Operaţii de bază Structura unui document H.T.M.L. Parametriimarcajului <BODY>…</BODY> Formatarea textului într-o pagină Web Formatarea paragrafelor Test de evaluare Bibliografie

  3. Limbajul H.T.M.L. • HYPER TEXT MARKUP LANGUAGE (limbaj de marcare a hipertextului) - este un limbaj pentru descrierea unui document Web, în care fiecare element este marcat prin semne speciale ale limbajului numite Taguri. • H.T.M.L. a fost conceput în anul1989 de Tim Berners-Lee, licenţiat la Oxford, pe atunci fizician. Fiind şi expert în software, Berners-Lee e acum director al World Wide Web Consortium ( pe scurt, W3C ), adică al organizaţiei care coordonează dezvoltarea web-ului. • Sintaxa oricarui tag este: <TAG atribut1="val" atribut2="val">Text</TAG> • Hipertext este un text îmbogăţit. El conţine: - text obişnuit; - etichete pentru formatarea textului şi încapsularea altor tipuri de informaţii (salturi rapide către alte resurse de informaţii, sunete, imagini, filme, etc). • Hipertextul este stocat în fişiere având o extensie specială: .htm sau html.

  4. Noţiunea de Hipertext Hipertextul nu face decât să creeze legături între mai multe pagini Web pe o porţiune de tip text. Hipermedia este un termen ce a apărut ca urmare a dezvoltării noilor tehnologii şi a posibilităţii de a crea legături prin fişiere ce conţin: animaţie, sunet, film, imagine. Hipertextul şi hipermedia permite stocarea unei cantităţi mari de informaţie, iar utilizatorului îi oferă posibilitatea parcurgerii documentului respectiv în ce ordine doreşte, dându-i senzaţia de navigare într-un spaţiu virtual. De aici vine şi sintagma: “a naviga pe Internet”. Paginile Web au fost construite iniţial cu ajutorul unui limbaj de marcare a hipertextelor, numit HTML (HyperText Markup Language). Acesta conţine comenzi care-i transmit browser-ului să afişeze text, imagini, fişiere multimedia şi legături cu alte pagini Web. Mai multe pagini Web conectate între ele prin hiper-legături ce au un subiect comun, formează un site Web.

  5. Editarea unui document HTML Pentru editarea unui document Html putem folosi editorul de text Notepadsau un editor specializat în crearea paginilor Web. Se lansează în execuţie editorul Notepad, se scrie codul sursă şi se salvează cu extensia .html

  6. Operaţii de bază Deschiderea unui document Html se poate face astfel: • Se deschide editorul de texte Notepad şi se alege din meniul File (Fişier) opţiunea Open (Deschide); va apărea o casetă de dialog cu ajutorul căruia utilizatorul caută documentul ce urmează a fi deschis; • Se execută clic dreapta pe iconiţa fişierului şi se alege opţiunea Open With…(Deschide cu…) Notepad; • Se deschide pagina html si se alege opţiunea Source (Sursă) din meniul View (Vizualizare);

  7. Structura unui document H.T.M.L. Un document H.T.M.L. conţine marcajele <Html>…</Html>, marcajce defineştedocumentul ca fiind de tip Html şi cuprinde două părţi: • Antetul paginii – Secţiunea Head (cuprinsăîntre <Head> şi </Head>)conţineantetulpaginii. Ea furnizeazătitlul paginii, cuprinsîntremarcajele <Title> şi </Title>. • Corpul paginii – Secţiunea Body (cuprinsăîntre <Body> şi </Body>). În această secţiune se defineşte practic pagina Web.

  8. Parametriimarcajului <BODY>…</BODY> Marcajul <BODY>…</BODY> încadrează conţinutul propriu-zis al paginii, având următoarele atribute: bgcolor, background, text, link, vlink, alink; Atributele bgcolor / background încadrează o culoare de fond sau o imagine ca fundal pentru pagina Web. Sintaxa este: <body bgcolor=”pink”> sau <body background=”didactic.jpg”>

  9. Exemplu

  10. Formatarea textului într-o pagină Web • Stabilirea stilului fonturilor se face cu ajutorul tag-ului <Font>…</Font> cu atributele: - Face – pentru stabilirea fonturilor, având sintaxa <font face=”Tahoma” Utilizăm fontul Tahoma></font>; - Size – pentru stabilirea dimensiunii fonturilor, având sintaxa<font size=”2” Acest text are mărimea1></font>; - Color – pentru stabilirea culorii fonturilor, având sintaxa <font color=”red” Acest text este roşu></font>; • Stabilirea elementelor de stil se face cu ajutorul tag-urilor <I>…</I>, <B>…</B>, <U>…</U>, <S>…</S>, având ca efect înclinarea, îngroşarea, sublinierea şi tăierea textului cu o linie.

  11. Alte elemente de stil Tag-ul em(emphasized) <p><em> Acest text este evidenţiat italic></em></p> Tag-ul strong <p><strong> Acest text este evidenţiat îngroşat></strong></p> Tag-urile small,big <p> Ultimul cuvânt este mai<small> mic</small>></p> <p> Ultimul cuvânt este mai<big> mare</big>></p> Tag-urile sub,sup <p> Ultimul cuvânt este un<sub> indice</sub>></p> <p> Ultimul cuvânt este o<sup>putere</sup>></p>

  12. Exemplu

  13. Formatarea paragrafelor În Notepad, wordPad, Microsoft Word paragrafele se separă prin tastarea unui Enter, în schimb, în HTML, Enter-ul nu are nici un efect. Fără o altă comandă, un rând al unui paragraf are lăţimea ferestrei afişată de browser. De exemplu, dacă micşorăm fereastra browser-ului acelaşi paragraf va ocupa mai multe rânduri. Dacă două cuvinte ale unui paragraf sunt separate prin mai multe spaţii, browser-ul afişează doar un singur spaţiu. În HTML delimitarea paragrafelor se realizează utilizând tag-ul <p> conţinut paragraf </p> având următoarele atribute: Align - controlează alinierea paragrafului. Poate lua una din valorile: • Center - paragraful este aliniat în centru. • Left - paragraful este aliniat la stânga. • Right - paragraful este aliniat la dreapta. • Justify - paragraful este aliniat la ambele margini.

  14. Test de evaluare 1.Care este marcajul care defineşte corpul documentului de tip HTML? 2.Care este extensia unui document HTML? 3. Care sunt marcajele obligatorii într-un document HTML? 4.Care este marcajul folosit pentru trecerea la o linie nouă? <HEAD> </HEAD> <BODY> </BODY> <HTML> </HTML> .exe .xlp .html HEAD, TITLE, BODY HTML, TITLE, TABLE HTML, HEAD, BODY <B> <S> <P>

  15. 5. Care este marcajul care trebuie folosit pentru a sublinia un text? 7. Atributul ALIGN se poate utiliza în marcajele: 8. Atributele controlului "Font" sunt: 9. Elementul BODY admite următoarele atribute: <B> <I> <U> <BODY> <P> <S> Face, color, width Face, BG Face, size, color TITLE BGCOLOR BIG

  16. În loc de concluzii: Paginile Web au următoarele caracteristici: • sunt multimedia, adică ele conţin informaţii sub formă de text, imagini, sunete, filme etc; • sunt interactive, adică răspund la cererile utilizatorului; • sunt independente de platforma hardware şi software, adică se văd la fel pe orice calculator, având instalat orice sistem de operare şi utilizând orice browser.

  17. Bibliografie • http://www.didactic.ro/files/12/notiunidelimbajhtml1.doc • http://www.didactic.ro/lectii-informatica-12-elementele-unei-pagini-web-editarea-html-p37063-t0 • http://www.didactic.ro/lectii-informatica-12-formatarea-documentelor-html-p37060-t0 • http://www.didactic.ro/files/12/html_structura_unei_pagini.doc • http://www.didactic.ro/files/12/0formatarea_textului_dintr_o_pagina_web.pps#2 • http://www.didactic.ro/files/12/0html_introducere.pps#4 • http://www.didactic.ro/files/12/cum_functioneaza_paginile_web.pdf • http://www.didactic.ro/lectii-informatica-12-notiuni-de-html-p2690-t0 • http://www.ecursuri.ro/cursuri/html-introducere.php • http://www.htmlcodetutorial.com • http://grafica.lufo.ro/ • http://www.etutoriale.ro/articles/112/1/Tutorial-complet-HTML/

  18. CORECT Mergi mai departe!

  19. GREŞIT Mai încearcă!

More Related