Web Design Tutorial

Citeste si progreseaza

HTML Tutorial

Structura unui site realizat in HTML este:
<html>
<head>
<title>Titlul paginii</title>
</head>
<body>
Aici se introduce corpul siteului folosind Taguri
</body>
</html>
Pagina va arata astfel:

Aceasta strutura de baza a unui site realizat in HTML se poate realiza automat daca folositi editoare de text speciale cum ar fi: Dreamweaver 8 (recomandat), Front Page si multe altele.
Daca folositi un editor de text normal pentru a realiza o pagina web cum ar fi Notepad, fisierul trebuie salvat cu extensia .htm sau .html pentru a putea fi previzualizata in browser si pentru a putea fi pusa ulterior pe un server. Pentru ca majoritatea serverelor sa recunoasca pagina principala, aceasta trebuie denumita “index.html” sau “index.html. In cazul in care “index.html” nu functioneaza ca pagina principala, contactati persoana care administreaza server-ul.

Chiar in structura de baza a siteului ati folosit taguri cum ar fi: <html></html> , <head></head>, <title></title>, <body></body>(Orice tag ce este deschis trebuie dupa ce i se adauga continul sa fie inchis: exemplu: <title>Prima mea pagina web</title>)
Tagul <b></b>:

Exemplu de pagina folosind tagul <b></b>:

<html>
<head>
<title>Tagurile <b></b></title>
</head>
<body>
Aceasta este <b>prima mea pagina web</b>
</body>
</html>

Vizualizati pagina:

Tagurile <b></b> fac textul sa fie scris mai ingrosat (asa zis-ul bold).

Tagurile <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>:

Aplicatie:
<html>
<head>
<title>Titlul paginii</title>
</head>
<body>
<h1>Prima mea pagina web</h1>
<h2>Prima mea pagina web</h2>
<h3>Prima mea pagina web</h3>
<h4>Prima mea pagina web</h4>
<h5>Prima mea pagina web</h5>
<h6>Prima mea pagina web</h6>:
</body>
</html>

Pagina va arata astfel:

Crearea unei legaturi:

Pentru a crea o legatura catre o alta pagina se foloseste tagul<a> si atributele pentru acesta: href, target.

Exemplu
:

<html>
<head>
<title>Crearea unei legaturi</title>
</head>
<body>
<a href=”http://www.google.ro&#8221; mce_href=”http://www.google.ro”>Click pentru a activa legatura</a>
</body>
</html>

Legatura s-a realizat intre propria dumneavoastra pagina si motorul de cautare google prin actionarea cu un click asupra textului.

Pentru a insera o imagine in site se foloseste tagul img. Sectiunea de cod HTML care trebuie sa fie introdusa in tagul <body> este: <img src=”img.jpg” mce_src=”img.jpg” alt=”Descrierea imaginii”></img>


*In loc de img.jpg puneti numele si extensia imaginii care vreti sa fie pusa in site.

Atributul BGCOLOR al tagului BODY permite stabilirea culorii de fundal a paginii. Atributul TEXT din acelasi tag este folosit pentru a defini culoarea textului din cadrul documentului. In exemplul de mai jos se defineste culoarea ros pe fundal si textul alb
<html>
<head>
<title>Background</title>
</head>
<body bgcolor=”#FF0000″ text=”#FFFFFF”>
HTML(Hypertext markup language)
</body>
</html>

Atributele LINK, ALINK, VLINK permit controlul culorii legaturilor in functie de starea acestora:
LINK-stabileste culoarea cu care vor fi afisate initial legaturile
VLINK-stabileste culoarea cu care vor fi afisate legaturile dupa ce au mai fost vizitate
ALINK-stabileste culoarea cu care este afisata legatura deja vizitata

Exemplu:
<html>
<head>
<title>Culori</title>
</head>
<body bgcolor=”#FFFFFF” text=”#FF0000″ link=”#0000FF” vlink=”#FF00FF” alink=”#00FF00″>
<a href=”http://www.google.ro&#8221; mce_href=”http://www.google.ro”>Click pentru a activa legatura</a>
</body>
</html>

In exemplul de mai sus s-a stabilit urmatoarea schema de culori:
-culoarea de fundal este alb
-culoarea textului este rosu
-culoarea legaturilor va fi albastra
-culoarea leagaturilor vizitate va fi mangeta
-culoarea legaturilor active va fi verde

*Pentru a pune o imagine pe background se foloseste atributul background: <body background=”img.jpg”>


Web Design Tutorial

↑ Grab this Headline Animator

toolbar powered by Conduit

13 Comments »

  1. Pentru orice problema pe care o intampinati nu ezitati sa o postati….

    Comment by tutorialweb | February 23, 2008 | Reply

  2. Buna ziua,

    Sunt webmasterul site-ului http://www.lucian0308.com,
    as vrea sa stiu daca doriti schimb de link-uri,bannere 80×31, referitor la partea de tutorial html.

    Comment by lucian0308 | April 27, 2008 | Reply

  3. Un tutorial foarte folositor

    Comment by Salariu_pe _viata | May 22, 2008 | Reply

  4. Pentru tutorial html.Nu stiu cum sa introduc in pagina un video cu vlc player.Astept raspuns.Multumesc

    Comment by ana | June 4, 2008 | Reply

  5. pai…filmul respectiv trebuie trasnformat in format .flv ca sa poata fi pus intr-o pagina web, eu asa stiu

    Comment by tutorialweb | June 6, 2008 | Reply

  6. Nu scrie nici un tutorial cum se scrie un in html un tabel pentru imagini cu previw si next.Multumesc!

    Comment by alexandra | June 7, 2008 | Reply

  7. Cum fac o galerie foto in html?

    Comment by adriana | October 9, 2008 | Reply

  8. merge’ tutorialu’….

    Comment by majestic | November 10, 2008 | Reply

  9. foarte tare

    Comment by Andrey | November 16, 2008 | Reply

  10. as vrea id tau de messenger daq se poate

    Comment by profifa08manager | December 3, 2008 | Reply

  11. si jocuri nu se pot pune?asept raspuns multumesc!

    Comment by Tomi | December 11, 2008 | Reply

  12. lasa`mi id`ul de messenger poate ne combinam la o chestie o sa iti explic atunci despre

    Comment by crudu constantin | February 11, 2009 | Reply

  13. haha! comentariile 10si 12 sunt foarte tari…in html! :))

    Comment by itterapia | January 3, 2010 | Reply


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: