Administrarea paginilor HTML

Vezi subiectul anterior Vezi subiectul urmator In jos

Administrarea paginilor HTML

Mesaj Scris de ezlidor la data de Lun 13 Apr - 17:38

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.

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



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 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ă).


Î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>
  1. trandafir
  2. lalea
  3. 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 1Titlu 2Titlu 3
Casuta ACasuta BCasuta C
Casuta DCasuta ECasuta 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.
avatar
ezlidor
Membru onorific
Membru onorific

masculin

Mesaje : 4140
Varsta : 28
Localizare : Iasi
Data înscrierii : 07/02/2008
Multumiri : 9
Niciun avertisment

http://help.forumgratuit.ro

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus


Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum