 |  |
|
CREAREA PAGINILOR WEB -HTML - NOTEPAD - FISA DE LUCRU
Deschide un Notepad si incepe cu acestea
<HTML>
</HTML>
Fiecare dintre acestea sunt numite tag-uri. Exista un tag pentru inceput si un tag pentru final(incheiere). Pentru a face un tag final doar adauga / la tagul de inceput. Majoritatea, dar nu toate tagurile au un tag final.
Fiecare document HTML are nevoie de o pereche de tag-uri de tip : HEAD.
<HTML>
<HEAD>
</HEAD>
</HTML>
Fiecare pereche de tag-uri de tip HEAD are nevoie de o pereche de tag-uri de tip TITLE ( reprezinta titlu sub care va aparea pagina denumita).
<HTML>
<HEAD>
<TITLE>...</TITLE>
</HEAD>
</HTML>
La fel ca si tag-urile de tip HEAD fiecare document HTML are nevoie de o pereche de tag-uri de tip BODY ( textul in pagina sub forma de titlu).
<HTML>
<HEAD>
<TITLE>.</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Dati-i documentului dumneavoastra un titlu si puneti ceva in body.
<HTML>
<HEAD>
<TITLE>Prima mea pagina!</TITLE>
</HEAD>
<BODY>
Salut Bojo!
</BODY>
</HTML>
Acum salveaza-l, nu ca si un fisier text, ci ca si un fisier html. Salveaza-l ca si pagina1.html intr-un director nou undeva. Daca esti putin derutat cum sa faci asta atunci urmeaza instructiunile In Notepad-ul tau da click File apoi Save As.
Denumeste-l cum vrei. Apoi dublu click pe el pentru a-l deschide. Unde scrie File name scrie: page1.html . Unde scrie Save as type: fii sigur ca scrie All Files(*.*).
Observatii: . 1) Ceea ce ai realizat se numeste scheletul unui document HTML; orice document HTML are nevoie de aceste tag-uri de baza.
2) Ceea ce ai scris intre tag-urile <TITLE></TITLE> va aparea in extremitatea de sus a ferestrei browserului.
De fiecare data cand faceti o schimbare in documentul dumneavoastra salvati-l, apoi apasati butonul Refresh in browser. In unele cazuri doar apasand Refresh nu se intampla nimic in acest caz apasati Refresh in timp ce tineti apasata tasta Shift.
Primul lucru pe care al trebui sa-l invatam este cum sa schimbam culoarea background-ului.
<BODY BGCOLOR='#CCFFCC'>
Ceva foarte frumos.
</BODY>
Culori ce pot fi apelate prin nume (in engleza), prin comparatie puteti afla echivalentul lor RGB.
|
|
|
|
|
|
albastru marin |
negru |
albastru |
violet deschis |
|
|
|
|
|
|
gri |
verde |
verde citron |
maro |
|
|
|
|
|
|
bleumarin |
oliv |
violet |
rosu |
|
|
|
|
|
|
argintiu |
verde inchis |
alb |
galben |
Poti sa folosesti o poza pentru BACKGROUND. (Tine minte!: poza trebuie sa fie in acelasi director cu fisierul HTML.)
<BODY BACKGROUND='fotogragie.gif'>
Ceva foarte frumos.
</BODY>
Cum putem face ca background-ul este fixat si pagina se deruleaza peste el ?
Simplu adauga BGPROPERTIES=FIXED la tag-ul BODY
<BODY
BACKGROUND='background-ulmeu.gif' BGPROPERTIES=FIXED>
Aceasta comanda este specifica pentru Internet Explorer. Doar cei ce folosesc Internet Explorer sau un browser bazat pe IE vor putea vedea aceasta.
Putem face lucrurile bold.
<BODY>
Ceva foarte <B>frumos.</B>
</BODY>
Ceea ce ii spunem browser-ului (mai mult sau mai putin) este: de la <B> incepe sa faci lucrurile bold, pana la</B>. (de aici nu mai face lucrurile bold)
Acelasi principiu se aplica si pentru italics
<BODY>
Ceva <I>foarte</I> <B>frumos.</B>
</BODY
si pentru underline.
<BODY>
<U>Ceva</U> <I>foarte</I> <B>frumos.</B>
</BODY>
Putem sa combinam aceste tag-uri.
<BODY>
Ceva foarte <I><B>frumos.</B></I>
Putem modifica font size (marimea caracterelor) Este foarte usor!
Prima data adauga tagurile de tip <FONT>
<BODY>
Ceva foarte <FONT>frumos.</FONT>
</BODY>
Apoi specifica marimea: SIZE
<BODY>
Ceva foarte <FONT SIZE=6>frumos.</FONT>
</BODY>
Caracterele pot avea 7 marimi diferite:
|
foarte mic |
mic |
normal |
mediu |
mare |
foarte mare & |
imens! |
|
1 |
2 |
3 |
4 |
5 |
6 |
7 |
Acum cred ca este momentul potrivit sa vorbim putin despre sintaxe. De
fiecare data cand aveti o sintaxa de genul ATRIBUT='valoare', valoarea
trebuie neaparat sa fie intre ghilimele. Este foarte important.
Puteti modifica culoarea fontului daca doriti. (font color)
<BODY>
Ceva foarte <FONT COLOR='#FF0000'>frumos.</FONT>
</BODY>
Putem folosi mai multe ATRIBUTE intr-un <FONT> tag
<BODY>
Ceva foarte <FONT COLOR='#FF0000' FACE='ARIAL' SIZE='7'>frumos</FONT>
</BODY>
Alt tag care merita precizat este section heading. Se folosesc intre valorile 1-6. Fiecare valoare reprezinta o marime a caracterelor.
<H1>Ceva foarte frumos.<H1>
<H2>Ceva foarte frumos.<H2>
<H3>Ceva foarte frumos.<H3>
<H4>Ceva foarte frumos.<H4>
<H5>Ceva foarte frumos.<H5>
<H6>Ceva foarte frumos.<H6>
Un atribut folositor al headingurilor este ALINIEREA. observati singuri :
<H2 ALIGN='left'>Ceva foarte frumos.<H2>
<H2 ALIGN='center'>Ceva foarte frumos.<H2>
<H2 ALIGN='right'>Ceva foarte frumos.<H2>
|
Ceva foarte frumos. Ceva foarte frumos. Ceva foarte frumos. |
Se poate centra un cuvant sau toata pagina. Tot ce se gaseste intre tag-urile <CENTER> se centreaza automat.
<BODY>
<CENTER>Ceva foarte frumos.</CENTER>
</BODY>
Poti vedea codul HTML al oricarei pagini doresti alegand View/Source (Document Source) in browser-ul tau. Asa ca daca vezi o pagina si te intrebi, Cum a facut asta? raspunsul este la doar cateva clickuri inainte.
Browser-ul nu recunoaste formatul in care ati scris. Pana ce nu i se specifica el afiseaza caracterele liniar. Daca vreti sa incepeti o linie noua trebuie sa folositi break.
<BODY>
Hei!
<BR>Ce
<BR>se
<BR>intampla
<BR>aici.??
</BODY>
<BR> spune browser-ului - incepe o linie noua.
Se poate folosi tag-ul <BR> si pentru a sari peste o linie, pentru a lasa un spatiu de un rand sau mai multe randuri.
Caracterul & inseamna inceputul unui caracter specia si caracterul inseamna sfarsitul unui caracter special. Caracterele dintre ele reprezinta abreviere pentru caracterul special. Aici sunt cateva caractere speciale - cele mai folosite - si ceea ce inseamna fiecare.
non-breaking space
< < less-than symbol
> > greater-than symbol
& & ampersand
" ' quotation mark
­ soft hyphen
Acest document nu se poate descarca
| E posibil sa te intereseze alte documente despre:
|
| Copyright © 2024 - Toate drepturile rezervate QReferat.com | Folositi documentele afisate ca sursa de inspiratie. Va recomandam sa nu copiati textul, ci sa compuneti propriul document pe baza informatiilor de pe site. { Home } { Contact } { Termeni si conditii } |
Documente similare:
|
Cauta document |