Administrarea paginilor HTML

Scris de ezlidor Lun Apr 13, 2009 5:38 pm

Administrarea paginilor HTML

Cu ajutorul acestui tutorial veţi putea creea propria pagină web în limbaj HTML.

Crearea unei noi pagini HTML

Pentru a creea pagina intrati în:

Panoul administratorului => Module => HTML & JavaScript => Administrare pagini HTML

Click pe Creeaza o pagina HTML si veti deschide fereastra de creare/editare a noii pagini.
In rubrica "Cod HTML" puteti copia un cod HTML creat de dumneavoastra intr-un program de editare specializat, sau puteti activa editorul HTML pentru a putea crea pagina direct din panoul dumneavoastra de administrare.
Administrarea paginilor HTML 25890010

Puteti de asemenea folosi sabloane (template) HTML pe care le gasiti gratuit pe internet, in care completati doar textul, linkurile, imaginile si alte date specifice forumului dumneavoastra.

Dupa ce ati finalizat editarea, aveti posibilitatea sa previzualizati aspectul paginii, pentru a face corectii de ultim moment.

Structura unei pagini HTML

O pagină html contine două (2) părţi: o parte head şi o parte body.
HEAD-ul conţine titlul afisat in fereastra browserului şi o descriere scurtă a documentului.
BODY-ul conţine întregul cod al paginii.
Daca ati ales "Da" la optiunea "Doriti sa utilizati partea de sus si de jos a paginii forumului dvs.?", nu mai este nevoie sa respectati aceasta structura, pur si simplu copiati doar continutul paginii (ce aveti intre tagurile <body> si </body>) in rubrica din panou "Cod HTML"

Mai jos veti vedea un cod html simplu şi cum se afişează:

Cod:: <html> <head><title>Titlul pagină</title></head> <body>Conţinut pagină</body> </html>

Tagul de deschidere pentru heading este <hn> şi cel de închidere fiind </hn> unde "n" reprezintă mărimea heading-ului; acesta variând de la 1 la 6 (1 fiind cel mai mare iar 6 cel mai mic).

Exclamare

Daca introduceti un cod HTML complet, cu HEAD si BODY, titlul afisat cu ajutorul balizelor <head> poate fi diferit de titlul completat in rubrica "Titlu" a formularului de creare a paginii.

Gestiunea paginilor HTML

Panoul administratorului => Module => HTML & JavaScript => Administrare pagini HTML

Dupa crearea primei pagini HTML, aici veti regasi tabelul cu toate paginile HTML existente. Link-ul la care este disponibila fiecare pagina se gaseste in coloana URL Link

Administrarea paginilor HTML 54248210

Implicit, paginile sint afisate dupa ID. Puteti schimba ordinea de sortare dupa titlu sau data de creatie. Alegeti ordinea de afisare - ascendent sau descendent si cu un click pe "Sorteaza" tabelul va fi afisat conform criteriului ales.

Puteti sa adaugati noi pagini, sa le modificati Modificare

pe cele existente, sa vizualizati Administrarea paginilor HTML Voir

o anumita pagina direct din tabel, sau sa stergeti una sau mai multe pagini simultan.

Exclamare

Sortarea dupa titlu se realizeaza dupa titlul completat de dumneavoastra in rubrica "Titlu" de la crearea/editarea paginii si nu dupa titlul definit prin balizele <head>

Coduri HTML de baza

Pentru început trebuie să ştiţi urmăroarele coduri de bază:

Cod	Vizualizare
<b>îngroşat</b> <i>înclinat</i> <u>subliniat<u> <font size=-2>text mic</font> <font size=+2>text mare</font>	îngroşat înclinat subliniat text mic text mare

Liniile orizontale le puteţi adăuga cu ajutorul tagului <hr>, de reţinut că această comandă nu conţine şi un tag de închidere (vezi exemplele de mai sus). Puteţi adăuga diferite atribute:
width=n (pentru lungimea liniei)
width=n% (pentru lungimea liniei raportate la toată lungimea ecranului)
size=n (pentru linie îngroşată dar transparentă)
noshade (pentru linie îngroştă plină).
Administrarea paginilor HTML 0002

În modelul de mai sus am folosit următoarele atribute:

Cod:: <hr width=88> <hr width=10%> <hr size=8> <hr noshade>

Un tag <hr> fară atribute va fi interpretat ca linia să aibă toată lungimea paginei. Se pot folosi mai multe atribute într-un tag.

Tagul pentru un paragraf este <p>, iar cel de închidere este </p>

Alinierea în cadrul unei pagini html:
Aliniere la stânga:

Cod:: <h2 align=left>Aliniere stanga</h2>

Aliniere centrală:

Cod:: <h2 align=center>Aliniere centru</h2>

Aliniere la dreapta:

Cod:: <h2 align=right>Aliniere dreapta</h2>

Pentru a trece la un alt rând tastaţi tagul: <br>. Acest tag nu are cod de închidere. Pentru a lăsa un rând liber tastaţi <br><br>.

Pentru a adăuga un link folosiţi codul:

Cod:: <a href="LINK PAGINĂ"> NUME PAGINĂ </a>

Pentru a trimite un e-mail la o adresă folosiţi codul:

Cod:: <a href="ADRESĂ E-MAIL">TRIMITE UN E-MAIL</a>

Pentru a deschide o pagină nouă adăugaţi atributul target="_blank"

Cod:: <a href="LINK PAGINĂ" target="_blank"> NUME PAGINĂ </a>

Pentru a adăuga o imagine folosiţi codul:

Cod:: <img src="LINK IMAGINE">

Pentru a seta o lungime şi o lăţime folosiţi: height şi width, pentru a seta un titlu imaginii care se va afişa la poziţionarea cursorului peste imagine adăugaţi atributul alt="TITLU".

Cod:: <img src="masina.jpg" width=200 height=100 alt="ferrari">

background="LINK IMAGINE" = Pune o imagine ca fundal al unei pagini web.
bgcolor="#cod hexadecimal" = Pune o culoare ca fundal.
link="#cod hexadecimal" = Pune o culoare pentru link.
vlink="#cod hexadecimal" = Pune o culoare pentru linkurile deja vizitate.
text="#cod hexadecimal" = Pune o culoare pentru text.

Cod hexadecimal:
Există 16.7 milioane de culori diferite în sistemul de culori hexadecimal, începând de la #FFFFFF care este alb, până la #000000 care este negru.
Fiecare cod hexadecimal este împărţit in 3 grupe:
- #XXxxxx - Tentă de roşu
- #xxXXxx - Tentă de verde
- #xxxxXX - Tentă de albastru
Fiecare unitate(x) este o valoare între 0 şi F în sistemul de culori hexadecimal. Sistemul de culori hexadecimal constă în unităţile 0 1 2 3 4 5 6 7 8 9 A B C D E F, 0 fiind valoare nulă, iar F valoarea cea mai mare.

Pentru a adăuga o listă neordonată:

Cod html	Afişare
<ul> <li>trandafir <li>lalea <li>ghiocel </ul>	trandafir lalea ghiocel

Pentru a adăuga o listă ordonată:

Cod html	Afişare
<ol> <li>trandafir <li>lalea <li>ghiocel </ol>	trandafir lalea ghiocel

Dacă doriţi ca textul să se afişeze lateral de o imagine, folosiţi codul:

Cod:: <img src="LINK IMAGINE" align=left> TEXT-UL DORI <br clear=all>

Creearea unui tabel:

Cod:: <table border=1> <tr> <th>Titlu 1</th><th>Titlu 2</th><th>Titlu 3</th> </tr> <tr> <td>Casuta A</td><td>Casuta B</td><td>Casuta C</td> </tr> <tr> <td>Casuta D</td><td>Casuta E</td><td>Casuta F</td> </tr> </table>

Titlu 1	Titlu 2	Titlu 3
Casuta A	Casuta B	Casuta C
Casuta D	Casuta E	Casuta F

Pentru a forma o singură căsuţă din casuţele A şi D folosiţi codul:

Cod:: <td rowspan=2>Casuta A & D</td><td>Casuta B</td><td>Casuta C</td> </tr> <tr> <td>Casuta E</td><td>Casuta F</td> </tr>

Alte link-uri utile

Idee

Coduri HTML utile puteti gasi si in acest tutorial
Idee

Informatii suplimentare privind limbajul HTML, coduri CSS pentru personalizarea paginilor HTML, sabloane, etc obtineti vizitind adresele recomandate in Lista de link-uri utile.
Idee

Pentru a putea redacta pagina dumneavoastra direct din Panoul de administrare, aflati mai multe despre Editorul HTML

Tutorial scris de ezlidor
Actualizat si completat: 19.03.2013 ~ Ina
Ultima actualizare: 10.04.2013 ~ Ina

Copyright Forumgratuit.ro Nici o parte a acestui tutorial nu poate fi reprodusa, transmisa sau stocata in orice forma fara acordul scris al detinatorului dreptului de autor, in conformitate cu articolul L122-1 apartinand ICC.