Indrumar HTML+CSS Tema de Casa

1

Tutorial CSS incepand cu HTML + CSS

Cuprins

• 1. Introducere in HTML • 2. Adaugarea culorilor • 3. Adaugarea fonturilors • 4. Bara de navigare • 5. Stiluri de link-uri • 6. Linie orizontala • 7. Stilul Extern CSS • 8. Crearea fisierelor separate • 9. Rezultatul final • Lecturi viitoare

Acest tutorial se adreseaza celor care vor sa inceapa sa utilizeze formatul CSS si nu au mai scris niciodata o pagina Web cu acest stil. Astfel vei putea invata baza HTML-ului, pentru a fi capabil sa realizezi propriile tale pagini web.

Nu explica amanuntit formatul CSS, ci doar cum sa creezi un fisier HTML, un fisier CSS si cum pot fi facute aceastea sa lucreze impreuna. Dupa aceea, se pot utiliza multe alte tutoriale pentru adaugarea altor particularitati pentru fisierele HTML si CSS. Sau se pot utiliza programe specializate de editare HTML sau CSS, care ajuta la crearea siturilor complexe.

La sfarsitul tutorialului, veti realiza un fisier HTML, o pagina HTML ordonata si cu culori, totul cu ajutorul limbajului CSS.

Sectiunile ce contin semnul de “atentie!” la inceput indica faptul ca acesta este un material cu notiuni mai avansate fata de cel din restul textului.

Daca deja esti familiarizat cu XML, atunci HTML ti se va parea usor de invatat. Va sfatuim sa nu cititi tot acest tutorial dintr-o data, ci sa petreceti un sfert sau o jumatate de ora parcurgand cateva lectii dupa care sa reflectati asupra informatiei citite si sa apoi sa treceti la lucru.

Pregatire pentru HTML

Crearea documentelor in HTML nu este dificila. Pentru inceput nu vei avea nevoie decat de Notepad++ si putina dedicatie. Daca esti nou in domeniu si nu ai parcurs inca Ghidul incepatorului, este indicat sa petreci cateva minute citindul.

Pagini Web

2

Paginile web au multe intrebuintari. Aici sunt explicate cateva dintre argumente:

• Cea mai simpla cale de a raspandii informatii pe internet • O alta forma de a-ti amplifica afacerea • Poti face cunoscut lumi ca ai ceva de spus intr-o pagina personala

Cuvinte de retinut

• Tag - folosit pentru a specifica regiuni ale documentului HTML, pe care le va interpreta ulterior browser-ul. Tag-urile vor avea aceasta infatisare: <tag>

• Element - este un tag complet, avand un <tag> de deschidere si unul de inchidere </tag>.

• Attribute - este folosit pentru a modifica valoarea unui element in HTML. De obicei un element are mai multe atribute.

Deocamdata trebuie doar sa retii ca un tag este o comanda pe care browser-ul o interpreteaza, ca un element este un tag complet iar un atribut personalizeaza si modifica un element in HTML.

Step 1: Scrierea unui document HTML

Pentru acest tutorial se va utiliza doar un simplu editor de text, si anume, Notepad++. Odata intelese principiile, se pot utiliza alte programe specializate cum ar fi Style Master, Dreamweaver sau GoLive. Dar pentru inceput, la scrierea primei pagini in format CSS, este bine sa nu fie distrasa atentia de prea multe particularitati.

• Deschide Notepad++ si copiaza urmatorul cod:

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<HTML>

<HEAD>

<TITLE> Pagina mea WEB</TITLE>

<STYLE type="text/css">

h1 { color: red }

</STYLE>

</HEAD>

<BODY>

<H1> Pagina mea WEB </H1>

<P>Numele meu este (nume student) si sunt student al Facultatii de

Ingineria Sistemelor Biotehnice.

<P><img SRC="IMG_1420.jpg" WIDTH="300" HEIGHT="254">

</BODY>

</HTML>

Salveaza fisierul cu numele PaginaMea.html si vizualizeaza-l in Browserul de Internet.

Elemente HTML

3

Elementele de HTML au multe ranguri. Tot ceea ce se vede, paragrafurile, bannerele, link-urile de navigare la dreapta si la stanga paginii, sunt toate elemente ale acestei pagini.

Un element are trei parti: un tag de deschidere, continutul elementului si tag-ul de inchidere.

1. <p> - tag-ul pentru deschiderea unui paragraf. 2. Continutul elementului - paragraful propriu-zis. 3. </p> - tag-ul de inchidere.

***Nota: Toate paginile web vor avea cel putin elementele de baza: html, head, title si body.

<html>element...</html>

Un document HTML intotdeauna va incepe si va termina cu un tag <html> si respectiv </html>. Aceasta este structura standard a unui HTML.

Elementul <head>

Elementul <head> este cel care urmeaza. Atata timp cand il pui intre html si body totul ar trebuii sa fie OK. "Head" nu are nici o functie vizibila, asa ca vom discuta despre acest aspect in tutorialele ulterioare. Totusi vreau sa mentionez ca <head> poate oferi browserului informatii foarte utile. Se pot insera aici printre altele coduri Javascript sau CSS.

Daca vei salva documentul si vei incerca sa dai un refresh la pagina intiala din browser nu vei nota nici o diferenta. Ai putina rabdare, in continuare vom studia cateva elemente vizibile.

Elementul <title>

Pentru ca totul sa iasa bine trebuie sa pui tag-ul title inauntrul celui de head. Ceea ce vei scrie intre cele doua tag-uri title (<title> si </title>) va putea fi vizualizat ca si numele browser-ului, de obicei in partea din stanga sus. Vei putea vede titlul dupa cum am mai spus in partea din stanga sus la marea majoritate a browser-elor

Elementul <body>

Elementul body este cel care defineste inceperea continutului pagini propriu-zise (titluri, paragrafuri, fotografii, muzica si orice altceva). Dupa cum poti vedea in meniul de la stanga, vom trata pe rand toate aceste elemnte de continut.

Deocamdata tot ce trebuie sa retii este ca body incapsuleaza tot continutul paginii. Daca ai facut totul bine, vei putea vedea prima ta pagina web. Poti pune orice nume doresti,

4

doar tine minte ca numele descriptive sunt cele mai usor de gasit ulterior. Vizualizeaza acum toata isprava, dupa care te invit sa parcurgi urmatoarea sectiune.

Prima linie a unui fisier HTML ii spune browser-ului ce tip de HTML este (DOCTYPE inseamna DOCument TYPE). In acest caz, acesta este un document HTML versiunea 4.01.

• Step 1. Deschide Notepad++ si copiaza urmatorul cod:

<html>

<head>

<title>Primul meu stil de pagina</title>

</head>

<body>



<ul class="navbar">

<li><a href="index.html">Home page</a>

<li><a href="musings.html">Musings</a>

<li><a href="town.html">My town</a>

<li><a href="links.html">Links</a>

</ul>



<h1> Primul meu stil de pagina </h1>

<p> Bine ati venit pe pagina mea!

<p>Lipsesc imaginile, dar in sfarsit am un stil de pagina.

Si am si link-uri, chiar daca nu duc nicaieri deocamdata;

<p>Aici trebuie sa existe mai multe lucruri, dar deocamdata nu prea stiu

ce.



<address> 25 Aprilie 2009<br>

Realizat de mine.</address>

</body>

</html>

Salveaza fisierul cu numele PrimaPagina1.html si vizualizeaza-l in Browserul de Internet.

Tagul <body> este locul unde se duce textul actual al documenului. In principiu, orice se afla in interiorul acestui tag va fi afisat, exceptand textul din interiorul , care serveste drept comentariu pentru noi insine. Browser-ul il va ignora.

In tag-urile din exemplu, <ul> introduce “Unordered List”, o lista in care itemi sunt nenumerotati. Tag-ul <li> este inceputul listei de itemi“List Item”. Tag-ul <p> este un

5

“Paragraf”, iar <a> reprezinta o ancora “Anchor“, care este folosita pentru crearea unui hyperlink.

HTML pune la dispozitie trei tipuri de liste. <ol> va afisa o lista ordonata in timp ce <ul> una neordonata, iar pentru a realiza o lista de defnitii se foloseste <dl>. Foloseste atributele type si start pentru a realiza lista cea mai potrivita cerintelor tale.

• <ul> - unsorted list, buline • <ol> - ordered list, numere • <dl> - definition list, lista de definitii.

HTML - Liste nenumerotate

O lista nenumerotate se creaza cu ajutorul tagului <ul>. Listele nenumerotate deasemenea sunt de mai multe tipuri si anume, patratele, buline si cerculete.Valoarea standard redata de majoritatea browser-elor sunt bulinele.

Lista ordonata (numerotata)

Se foloseste tag-ul <ol>pentru a incepe o lista ordonata. Prin punerea <li></li> (list item) intre tagurile <ol> si </ol> se semnalizeaza browser-ului elementele listei.

Dupa cum se poate vedea, pagina nu este chiar aratoasa …

6

Step 2: Adaugarea culorilor

Exista trei feluri distincte de a defini o culoare. Cea mai simpla metoda este aceea de a numi culorile (in engleza). De exemplu: black, white, red, green, si blue. Am alaturat mai jos numele de culori care sunt suportate in HTML.

HTML - Sistemul de culori RGB

Acest cod de culori nu este recomandat, deoarece Internet Explorer este singurul Browser care suporta valorile RGB in HTML. RGB este prescurtarea pentru: Red, Green, Blue. Fiecare dintre aceste culori poate lua orice valoare intre 0 (nu coloreaza deloc) si 255 (in totalitate acea culoare). Daca folosesti un browser ca re nu este Internet Explorer nu vei avea nici un rezultat.

HTML - Sistemul de culori hexazecimal

Sistemul hexazecimal este destul de dificil la prima vedere. Cu toate aceste te asigur ca odata cu trecerea timpului, si cu putina practica, il vei intelege pe deplin. Sistemul de culori hexazecimal este sistemul standard pentru toate browser-ele web. Este de incredere si este compatibil nu numai in aplicatiile web.

Sistemul hexazecimal este o reprezentare de 6 caractere de culoare. Primele doua caractere (RR) reprezinta valoarea rosu (red), urmatoarele doua (GG) sunt verde (green), iar ultimele doua (BB) sunt albastru (blue).

Vom incepe cu un stil de pagina incastrat in interiorul fisierului HTML. Mai tarziu, vom realiza fisiere separate HTML si CSS. Separarea fisierelor este benefica, deoarece face mai usoara utilizarea aceluiasi stil de pagina pentru mai multe fisiere HTML: trebuie indicat stilul paginii doar odata. Dar pentru acest pas, vom pastra totul intr-o singura pagina.

Trebuie sa adaugam un element <style>fisierului HTML. Stilul paginii va fi in interiorul acestui element. Asadar, vom merge inapoi in ferestra editorului si adaugam urmatoarele linii in elementul head al fisierului HTML. Liniile ce trebuie adaugate sunt marcate cu rosu (liniile 4 – 8).


<html>

<head>

<title> Primul meu stil de pagina </title>

<style type="text/css">

body {

color: purple;

background-color: #d8da3d }

</style>

</head>

7

<body>


<ul class="navbar">





</ul>







ce.




</body>

</html>


Prima linie introdusa spune ca acesta este un stil de pagina si de aceea este scris in format CSS (“text/css”). A doua linie spune ca stilul este adaugat elementului “body”. Cea de-a treia linie seteaza in rosu culoarea textului iar urmatoarea linie seteaza in galben-verde culoarea fundalului.

Stilul paginilor in format CSS este realizat de reguli. Fiecare regula are trei parti:

1. selectorul (in exemplu: “body”), care spune browser-ului care parte a documentului este afectata de regula;

2. proprietatea (in exemplu, 'color' si 'background-color' sunt ambele proprietati), care specifica ce aspect al traseului este reglat;

3. valoarea ('purple' si '#d8da3d'), care da valoarea proprietatii stilului.

Exemplul arată că regulile pot fi combinate. S-au stabilit două proprietăţi, astfel încât am putut s-au realiza două reguli separate:

body { color: purple }

body { background-color: #d8da3d }

8

dar din moment ce ambele reguli afectează elementul “body”, am scris "corp", doar o dată şi am pus proprietăţile şi valorile împreună. Pentru mai multe informaţii despre Selectoare, a se vedea capitolul 2 din Lie & Bos.

Culoarea de fond a elementului “body”va fi, de asemenea, culoarea de fond a întregului document. Nu am dat nici unuia din celelalte elemente (p, li, adresa ...) un fundal explicit, astfel încât, în mod implicit nu vor avea nici unul (sau: va fi transparent). Proprietatea "culoare" seteaza culoarea textului pentru elementul “corp”, iar toate celelalte elemente din interiorul “corpului”, moştenesc aceasta culoare, cu excepţia cazului în care în mod explicit aceste proprietati sunt suprascrise. (Vom adăuga alte culori mai târziu.)

How one browser shows the page now that some colors have been added.

Culorile pot fi specificate în CSS în mai multe moduri. Acest exemplu arată două dintre ele: prin nume ( "violet") şi prin codul hexazecimal ( "# d8da3d"). Există aproximativ 140 de nume de culori, in timp ce codurile hexazecimale permit peste 16 milioane de culori. Adding a touch of style explică mai multe despre aceste coduri.

Step 3: Adaugarea fonturilor

Tag-ul <font> este folosit pentru a modifica tipul de text, marimea si culoare. Foloseste atributele "size","color", si "face" pentru a personaliza textul. Foloseste tag-ul <basefont> pentru a seta culoarea marimea si stilul intregului tau text. In general tag-urile "font" si

9

"basefont" nu se folosesc prea mult, in general se foloseste css-ul pentru a stabili atributele textului.

Un alt lucru care este uşor de făcut, este de a face distincţie între fonturi pentru diferite elemente ale paginii. Deci, hai sa setam textul cu un font "Georgia", cu excepţia celui din rubrica H1, pe care il vom seta cu font "Helvetica".

Pe Web, nu puteţi fi niciodată sigur ce fonturi au pe computerele lor cititorii dumneavoastră, asa ca vom adăuga unele alternative: dacă Georgia nu este disponibil, Times New Roman sau Times, sunt, de asemenea foarte bune, şi, dacă tot nu sunt, atunci browser-ul mai poate utiliza orice alte font cu serifs. Dacă Helvetica este absent, Geneva, Arial şi SunSans-Regular sunt destul de asemănătoare ca formă, şi dacă nici una dintre aceste nu lucreaza, browser-ul are posibilitatea de a alege orice alt font care este mai mic decat serif.

In editorul de text se adauga urmatoarele linii (liniile 6-7 si 10-12):

• Step 3. Deschide Notepad++ si copiaza urmatorul cod::

<html>

<head>



body {

font-family: Georgia, "Times New Roman",

Times, serif;

color: purple;


h1 {

font-family: Helvetica, Geneva, Arial,

SunSans-Regular, sans-serif }

</style>

</head>

<body>


<ul class="navbar">





</ul>






10


ce.




</body>

</html>


Dacă salvaţi fişierul din nou şi apăsaţi pe "Reîncărcare" în browser nu ar trebui să fie acum fonturi diferite pentru rubrica H1 şi alte texte.

Acum, textul principal are un alt font fata de rubrica H1.

11

Step 4: Adaugarea unui meniu de navigare

Lista din partea de sus a paginii HTML este menita să devină un meniu de navigare. Multe site-uri Web au un fel de meniu pe partea de sus sau pe partea laterală a paginii. Si această pagină trebuie să aibă de asemenea unul. Noi il vom pune pe partea stanga, pentru ca este un pic mai interesant decât cel de la început ...

Meniul este deja în pagina HTML. Acesta este lista <ul> în partea de sus. Legăturile din aceasta lista nu funcţionează, deoarece "site-ul Web" realizat până în prezent constă doar într-o singură pagină, dar asta nu contează acum. La un adevarat site Web, desigur, in meniu nu ar trebui să fie orice legături.

Deci, avem nevoie sa trecem lista mai la stânga şi sa mutam restul de text un pic la dreapta, pentru a face loc pentru meniu. Proprietăţile formatului CSS pe care le folosim pentru aceasta sunt "padding-left" (pentru a muta corpul de text) şi "position", "left" şi "top" (pentru a deplasa meniul). Există şi alte modalităţi de a face acest lucru. Dacă vă uitaţi pe "coloana" sau "schema" de pe pagina Learning CSS, veţi găsi mai multe şabloane gata de executie. Dar acesta e O.K. pentru scopurile noastre.

În fereastra editorului, adăugaţi următoarele linii la fişierul HTML (liniile 6 şi 11-15):


<html>

<head>



body {

padding-left: 11em;


Times, serif;

color: purple;


ul.navbar {

position: absolute;

top: 2em;

left: 1em;

width: 9em }

h1 {



</style>

</head>

<body>


<ul class="navbar">





12

</ul>







ce.



Realizat de mine:</address>

</body>

</html>


Dacă salvaţi fişierul din nou şi il reîncărcaţi în browser, ar trebui să aibă în prezent lista de link-uri in partea stânga a textului principal. Acum deja pare mult mai interesant, nu?

Textul principal a fost mutat mai la dreapta, precum şi lista de link-uri care este în prezent în partea stângă a acestuia, în loc de mai sus.

13

În 'position: absolute' , se spune ca elementul “ul” este poziţionat independent de orice alt text care vine înainte sau după în document iar "left" şi "top" indică faptul că aceea este pozitia. În acest caz, 2em de la început şi 1em din partea stângă a ferestrei.

In cazul în care meniul este afişat cu un font de 12 puncte, atunci "2em" este de 24 de puncte. “Em”este o unitate foarte utila în CSS, deoarece aceasta poate să se adapteze în mod automat fontului pe care cititorul se întâmplă să-l utilizeze. Majoritatea browserelor au un meniu pentru creşterea sau reducerea dimensiunii fonturilor.

Step 5: Stiluri de linkuri

Meniul de navigare încă arată ca o listă, în loc de un meniu. Să adăugam un stil pentru acesta. Vom elimina bulinele bin lista şi vom muta elementele în stânga, în locul în care au fost bulinele. De asemenea, vom da fiecarui element propriul fundal alb şi un pătrat negru. (De ce? Fără nici un motiv, doar pentru că putem.)

Nu am spus ce culori ar trebui să fie pentru link-uri, deci haideţi să adaugam, de asemenea: albastru pentru link-urile pe care utilizatorul nu le-a văzut încă şi violet pentru link-urile deja vizitate (liniile 12-14 şi 22-32):

• Step 5. Deschide Notepad++ si copiaza urmatorul cod::

<html>

<head>



body {

padding-left: 11em;


Times, serif;

color: purple;


ul.navbar {

list-style-type: none;

padding: 0;

margin: 0;

position: absolute;

top: 2em;

left: 1em;

width: 9em }

h1 {



ul.navbar li {

background: white;

margin: 0.5em 0;

14

padding: 0.3em;

border-right: 1em solid black }

ul.navbar a {

text-decoration: none }

a:link {

color: blue }

a:visited {

color: purple }

</style>

</head>

<body>


<ul class="navbar">





</ul>







ce.




</body>

</html>


Tradiţional, browser-ul arata hyperlink-urile subliniate şi cu culori. De obicei, culorile sunt similare cu ceea ce am specificat aici: albastru pentru link-uri către pagini care nu au fost vizitate încă (sau vizitate cu mult timp în urmă), violet pentru pagini pe care le-aţi văzut deja.

În HTML, hiperlegăturile sunt create cu <a> elemente, astfel încât ca să se specifice tipul de culori, avem nevoie sa adăugam o regulă de stil pentru "a". Pentru a face diferenţa între link-urile vizitate şi nevizitate, CSS prevede două "pseudo-clase" (:link şi :visited). Ele sunt denumite "pseudo-clase" pentru a le deosebi de clasa de atribute care apar în HTML direct, de exemplu, de clasa = "navbar" în exemplul nostru.

15

Step 6: Adaugarea unei linii orizontale

In general se foloseste tag-ul <hr/> pentru a crea o linie orizontala. Acest tag este similar celui de linebreak <br/>. Dupa cum se va vedea, tot ceea ce face acest tag este sa deseneze o linie orizontala separand diferite zone ale continutului sau pur si simplu decoreaza pagina. Folosita cu iscusinta poate da rezultate destul de neasteptate.

Rezultatul final, in plus pe stilul de pagina, este o regulă pe orizontală creata pentru a separa textul de semnatura din partea de jos. Vom utiliza "border-top" pentru a adăuga o linie punctată deasupra elementului <address> (liniile 33-36):


<html>

<head>



body {

16

padding-left: 11em;


Times, serif;

color: purple;


ul.navbar {


padding: 0;

margin: 0;

position: absolute;

top: 2em;

left: 1em;

width: 9em }

h1 {



ul.navbar li {

background: white;

margin: 0.5em 0;

padding: 0.3em;


ul.navbar a {


a:link {

color: blue }

a:visited {

color: purple }

address {

margin-top: 1em;

padding-top: 1em;

border-top: thin dotted }

</style>

</head>

<body>


<ul class="navbar">





</ul>







ce.




17

</body>

</html>


Acum stilul nostru de pagina este complet. Apoi, vom vedea cum se salveaza stilul paginii intr-un fisier separat, astfel ca si alte pagini sa foloseasca acest stil de pagina.

Step 7: Salvarea stilului paginii intr-un fisier separat

Stilurile definite în interiorul unui bloc <style>...</style> pot fi transferate într-un fişier extern existând astfel posibilitatea asocierii lor mai multor fişiere HTML.

Pentru a utiliza un stil definit într-un fişier extern se procedează astfel: 1. Se crează un fişier care să conţină numai descrierea stilurilor şi se salvează cu extensia ".css". Conţinutul acestui fişier coincide cu conţinutul unui bloc <style>...</style>, fără ca aceşti delimitatori să fie incluşi. 2. În fişierul HTML care utilizează stilurile definite în fişierul creat la punctul 1, se include în blocul <head>...</head> o etichetă <link>, având trei atribute:

- atributul "rel" cu valoarea "stylesheet"; - atributul "type" cu valoarea "text/css". - atributul "href" având ca valoare adresa URL a fişierului creat la punctul 1;

Stilurile definite din fişierul CSS extern se activează ca şi cum ar fi stiluri definite în fişierul HTML curent într-un bloc <style>...</style>.

În prezent avem un fişier HTML cu un stil de pagina încorporat. Dar, dacă site-ul nostru a crescut, probabil, am dori mai multe pagini cu acelaşi stil de pagina. Nu există o metodă mai bună decât copierea paginii de stil în fiecare fisier: dacă am pune în pagina de stil într-un fişier separat, toate paginile pot puncta aceasta.

Pentru a crea un fişier pagina de stil avem nevoie un alt fişier de text gol. Puteţi alege "New" din meniul File din editor, pentru a crea o fereastra goala. Apoi cut şi paste tot ce este în interiorul elementului <style> din fişierul HTML în noua fereastră. Nu copiaţi şi <style> </ style> înşişi. Acestea aparţin HTML, nu si formatului CSS. Noua fereastra redactata, ar trebui să aibă acum pagina de stil completa.


body {

padding-left: 11em;


Times, serif;

18

color: purple;


ul.navbar {


padding: 0;

margin: 0;

position: absolute;

top: 2em;

left: 1em;

width: 9em }

h1 {



ul.navbar li {

background: white;

margin: 0.5em 0;

padding: 0.3em;


ul.navbar a {


a:link {

color: blue }

a:visited {

color: purple }

address {

margin-top: 1em;

padding-top: 1em;

border-top: thin dotted }

h3 {text-shadow: 0.1em 0.1em #333}

div.figure1 {

float: left;

width: 35%;

border: thin silver solid;

margin: 0.5em;

padding: 0.5em;

}

div.figure p {

text-align: center;

font-style: italic;

font-size: smaller;

text-indent: 0;

}

img.scaled {

width: 100%;

}

div.banner{

margin-top: 10em;

padding-top: 10em;

font-style: italic;

font-size: smaller;

}

Salveaza fisierul cu numele StilulMeu.css.

19

Cand alegeţi "Save As ..." din meniul File, asiguraţi-vă că sunt în acelaşi director / folder ca PrimaPagina.html, de pagina de stil salvata ca "StilulMeu.css".

Acum du-te inapoi la fereastra cu codul HTML. Stergeţi tot de la tag-ul <style> până la </ style> şi inclusiv eticheta şi se realizeaza înlocuirea acestuia cu un element <link>, după cum urmează (linia 4):

Iată un fişier HTML cu un CSS extern:


<html>

<head>


<link rel="stylesheet" href="StilulMeu.css">

</head>

<body>


<ul class="navbar">





</ul>







ce.




</body>

</html>


Aceasta va spune browser-ului ca pagina de stil, se găseşte în fişierul numit "StilulMeu.css" şi deoarece nu este menţionat directorul, browser-ul va cauta în acelaşi director unde a găsit de fişierul HTML.

20

Dacă salvaţi fişierul HTML şi-l reîncărcaţi în browser, nu ar trebui să vedeţi nici o schimbare: pagina este în acelaşi stil, dar acum, stilul provine dintr-un fişier extern.

Step 8: Crearea fisierelor separate de legatura


<html>

<head>

<title> Orasul Meu</title>


</head>

<body>


<ul class="navbar">

<li><a href="PrimulMeuSite.html">Home page</a>

<li><a href="Pasiuni.html">Pasiuni</a>

<li><a href="OrasulMeu.html">Orasul meu</a>

<li><a href="Orar.html">Orar</a>

21

<li><a href="CV.pdf">Curriculum Vitae</a>

<li><a href="http://isb.pub.ro/">Links</a>

</ul>


<h1>Acesta este orasul meu</h1>

<p>Bine ati venit in Orasul Meu!

<div class="figure1">

<p><img class="scaled" src="st-tropez.jpg"

alt="St. Tropez">

<p>Saint Tropez and its fort in the evening sun<p/>

<a href="http://www.ot-saint-tropez.com/">Apasa aici</a>

</div>

</body>

</html>

Salveaza fisierul cu numele OrasulMeu.html si vizualizeaza-l in Browserul de Internet.


<html>

<head>

<title> Pasiuni</title>


</head>

<body>


<ul class="navbar">





<li><a href="CV.html">Curriculum Vitae</a>


</ul>

<div class="figure">

<p><img src="eiffel.jpg" width="116"

height="200" alt="Eiffel tower">

<p>Scale model of the Eiffel tower in Parc Mini-France</p>

<p><img src="Photo.jpg" width="300"

height="200" alt="Photo ">

<p>Scale model of the romanian village </p>

</div>

<div class="banner">

<p>

<a href="../../../"><img alt="W3C" src="../../../Icons/w3c_home"></a>

<a href="../../../Consortium/Activities">Activities</a>

<a href="../../../TR/">Tech. reports</a>

<a href="../../../Help/siteindex">Site index</a>

<a href="../../../Consortium/Translation/">Translations</a>

<a href="../../../Status">Software</a>

<a href="http://search.w3.org/">Search</a>

<em>Nearby:</em>

22

<a href="../../">Style</a>

<a href="../../CSS/">CSS</a>

<a href="./">tips & tricks</a>

</div>

</body>

</html>

Salveaza fisierul cu numele Pasiuni.html si vizualizeaza-l in Browserul de Internet.


<html>

<head>

<title>Orarul meu</title>


</head>

<body>


<ul class="navbar">





<li><a href="CV.html">Curriculum Vitae</a>


</ul>

<h1> Orar grupa 714 </h1>

<p> Acesta este programul meu de scoala!

<table width="100%" border="1">

<col align="center"></col>





<col align="center"></c>

<thead color="green">

<tr>

<th> Ora </th>

<th>Luni</th>

<th>Marti</th>

<th>Miercuri</th>

<th>Joi</th>

<th>Vineri</th>

</tr>

</thead>

<tbody color="blue" height="50px">

<tr align="center">

<td> 08.00-10.00 </td>

<td> </td>

<td> Programare </td>

<td> T. materialelor – curs </td>

<td> T.M./Programare </td>

23

<td> Desen tehnic/Programare </td>

</tr>

<tr align="center">

<td> 10.00-12.00 </td>

<td> Desen tehnic</td>

<td> Fizica </td>

<td> Analiza matematica II – curs </td>

<td> </td>

<td> Mecanica - curs </tdd>

</tr>

<tr align="center">

<td> 12.00-14.00 </td>

<td> Sport</td>

<td> </td>

<td> Fizica I – curs</td>

<td> </td>

<td> T. P. M. – curs </tdd>

</tr>

<tr align="center">

<td> 14.00-16.00 </td>

<td> T.P.M.</td>

<td> </td>

<td> </td>

<td> </td>

<td> </tdd>

</tr>

<tr align="center">

<td> 16.00-18.00 </td>

<td> </td>

<td>Analiza matematica </td>

<td> </td>

<td> Engleza </td>

<td> </tdd>

</tr>

<tr align="center">

<td> 18.00-20.00 </td>

<td> Mecanica </td>

<td> PEDAGOGIE -curs (op) </td>

<td> </td>

<td> </td>

<td> </tdd>

</tr>

</tbody>

<tfoot color="red">

<tr>

<td> </td>

<td> </td>

</tr>

</tfoot>

</table>

</body>

</html>

24

Salveaza fisierul cu numele Orar.html si vizualizeaza-l in Browserul de Internet.

Rezultatul final

Urmatorul pas este de a pune toate fisierele realizate in legatura pe site-ul Web. (Bine, dar este posibil sa fie necesar sa le schimbati un pic mai intai…). Dar cum o veti face, depinde de provider-ul vostru de Internet.

Step 9: Rezultatul Final


<html>

<head>

<title> Primul meu site WEB </title>


</head>

<body>


<ul class="navbar">





<li><a href="CV_meu.pdf">Curriculum Vitae</a>

25


</ul>




<p> Nu mai lipsesc imaginile, in sfarsit am un stil de pagina.

Si am si link-uri;


ce.

<P><img SRC="DSCN2824.jpg" WIDTH="300" HEIGHT="254"> </p>




<font color="WHITE"><marquee direction="left"

style="background:purple">Realizat de Andreea Cristea</marquee></font>

</address>

<form

method="get" action="mailto:[email protected]" >

<p>Nume</p>

<input type="text" name="autor" size="24" class="form" id="input1" />

<p>URL</p>

<input type="text" name="url_autor" value="http://" size="24"

class="form" id="input2" />

<p>Adresa de mail</p>

<input type="text" name="email_autor" size="24" class="form" id="input3"

/>

<p>Comentariu</p>

<textarea name="comentariu" rows="4" cols="40" class="form"

id="input4"></textarea>

<input type="hidden" name="id_site" value="646" />

<input type="submit" value="Trimite email " />

</form>

</body>

</html>

Salveaza fisierul cu numele PrimulMeuSite.html si vizualizeaza in Browser-ul de Internet.

Lecturi viitoare

Pentru introducerea in formatul CSS, vezi chapter 2 din Lie & Bos, sau Dave Raggett's

intro to CSS.

26

BIBLIOGRAFIE SELECTIVA

1) HTML Tutorials; http://www.w3schools.com/

2) Starting with HTML + CSS; http://www.w3.org/Style/CSS/learning

3) Ghidul Incepatorului in HTML; http://www.tutorialehtml.com/ 4) HTML Tutoriale; http://tutorialweb.wordpress.com/html-tutorial/

Indrumar HTML+CSS Tema de Casa

Documents

Transcript of Indrumar HTML+CSS Tema de Casa