Sunteți pe pagina 1din 9

Conf.Univ.Dr.

Élthes Zoltán – Informatică economică – Laborator 12 – 14

Comenzi HTML - TAG-uri - < - semnul de început, şi - > - font color="ff00ff" Culoarea caracterelor
semnul de sfârşit. TAG-urile pot fi scrise cu litere mici sau mari,
dar în general se utilizează litere mari. Primul TAG într-un Schimbarea tipului
font face ="Arial"
document HTML este: <HTML>. Cele mai multe TAG-uri caracterelor
dispun de perechea de închidere, care semnifică sfârşitul a href="....." Crearea unui link
comenzii. Pentru exemplul nostrum tagul devine : </HTML>.
Acest tag cuprinde două elemente: HEAD şi BODY . Unde să plaseze link-ul
Pentru încercare să încărcăm într-un editor de text, să-l salvăm (_top = deasupra
fişierul sub numele de "test.html" , apoi să-l vizualizăm cu a target="unul" blocului, _blank = într-o
Internet Explorer. Dacă extensia fişierului este ".html" sau nouă pagină, _self = ,
".htm", el va interpreta ca pe un document HTML. Titlul va _parent =)
apare în fereastra browserului.
ul Listă bullets
Şi în HTML există posibilitatea întroducerii de comentarii, care
evident nu vor fi luate în considerare de browser, ele servind ol Listă numbering
doar programatorul. Acestea încep cu <! şi se termină cu >.
dl Listă de definiţii
comandă Comandă internă Funcţionare
hr (x) Linii orizontale
Începutul programului
Html hr Noshade Linii fără umbre
html
Head Antetul programului Lăţimea liniei în pixeli
Hr width=30%
sau procente
Corpul programului,
aici vor apare comenzile Hr size=5 Grosimea liniei
Body
de formatare a paginii Aşezarea orizontală a
web Hr align=left
liniei (right, left, center)
Body bgcolor="#000000" Culoarea de fundal br (x) Sem de sfârşit de linie
Body text="#000000" Culoarea textului Semn de început de
P
Culoarea de text a paragraph
Body link="#000000"
linkului Table Tabele
Culoarea de text a Grosimea conturului
Body vlink="#000000" Table border=1
linkului deja accesat tabelului
Culoarea de text a Culoare ade fundal a
Body alink="#000000" Table bgcolor="#000000"
linkului accesat tabelului
Body background="back.gif" Imaginea de fundal Distanţa textului de
Table cellpadding=5
Title Titlul paginii web marginea celulei

Dimensiunea literelor, Table cellspacing=7 Distanţa dintre celule


h1 ... h6 h1 cel mai mare, h6 cel Lăţimea tabelului în %-
mai mic Table width=80% te sau pixeli (dacă apare
fără %)
Pre Pentru o lini nouă
Tr Linia tabelului
center Centrare Th Capul de table
b Caractere îngroşate Celulele liniilor
Td
i Caractere italice tabelului

u Caractere subliniate aliniere orizontală(right,


Td align=right
left, center)
Instrucţiune de
font Aliniere verticală (top,
formatare a caracterelor Td valign=top
center, bottom)
Schimbarea dimensiunii
font size=+2 caracterului faţă de Culoarea de fundal a
Td bgcolor="000000"
precedentul celulei

1
Conf.Univ.Dr.Élthes Zoltán – Informatică economică – Laborator 12 – 14

Numărul de celule pe Numele câmpului


Td colspan=2
orizontală (recipient=destinatarul
scrisorii,
Numărul de celule pe
td rowspan=3 name="nev" subject=subiectul
verticală
scrisorii, required=date
Lăţimea celulei în %, obligatorii,
td width=80%
sau pixeli redirect=redirecţionare
caption Titlul tabelului size="20" Mărimea câmpului
caption align=right Aliniere (right, left) Tipul câmpului
type=password
(password, hidden, text)
Textul nu este
nobr
defragmentat Valoarea variabilei din
value="realname"
“ name”
img src="kep.gif" Aşezarea imaginii
Aliniere verticală (top, Textarea Camp de date multiplu
img align=top
middle, bottom)
rows=5 cols="20" Liniii, coloane
Apariţia textului în locul
img alt="szöveg"
imaginii Select Camp de date variabil
img width=100 Lăţimea imaginii multiple Posibilităţi multiple
img height=200 Înălţimea imaginii size=2 Atâtea posibilităţi
Lăţimea chenarului Option Câmp de date opţional
img border=3
imaginii
value=x Valoarea programului
Crearea de ream-uri. care gestionează
frameset rows="50%,50%" Rezoluţie orizontală. În formularul
%-te sau pixeli.
selected Va fi prima valoare
frameset cols="100,50,*" Rezoluţie verticală
frame src="index1.htm" Conţinutul unui bloc Semne speciale
frame noresize Contur nemodificabil
Semnele speciale încep cu & şi se termină cu ;
Interzice saltul de De exemplu A=&Aacute;
frame scrolling=no
pagină
acute diacritice (â, é, í, ó, ú)
frame name="egyik" Numele blocului
uml Diacritice cu 2 puncte (ö, ü)
Lăţimea liniilor de
frame border=0 tilde Diacritice cu 2 linii (ő)
bordură
În cazul în care lt <
noframe browserul nu poate citi gt >
structuri de bloc
amp &
Tt Tipul Courier
quot "
Address Tipul Courier înclinat
Form Formular
Alte semen
Gestionarea
method="post"
formularului
META tag
Numele programului
action="formmail.pl" care gestionează META tag-urile apar de obicei în partea de head, şi furnizează
formularul informaţii pentru motorul de căutare.
Camp de introducere
Input <META name="Author" Numele autorului
date

2
Conf.Univ.Dr.Élthes Zoltán – Informatică economică – Laborator 12 – 14

content="XYZ"> A treia linie


</pre>
<META name="keywords"  lang="hu" Password - lang </body>
content="egy,ketto,harom"> semnifică limba. </html>
Accesarea automată a
<META HTTP-EQUIV="Refresh" Al patrulea.html
unui document peste x
CONTENT="x; URL=dok.htm"> <HTML>
secunde
<HEAD>
<META http-equiv="Expires" <title>
Expirarea
content="Tue, 2 Nov 1998 14:25:27 Acest web are culoarea de fundal gri !!!
documentului.
GMT"> </title>
</head>
<meta HTTP-EQUIV="Content-Type" Documentul va susţine
<Body bgcolor=gray >
CONTENT="text/html; charset=iso- caracterele Europei
Aceasta este pagina WEB cu fundal GRI !!!!
8859-2"> Centrale
</body>
</html>

Primul.html Al cincelea.htm
<HTML> <HTML>
<HEAD> <HEAD>
<title> <title>
Aceasta este prima mea pagină web !!! Culoarea textului !!!
</title> </title>
</head> </head>
<Body> <Body text=red >
Sunt Élthes Zoltán - Vă salut pe prima mea pagină web !!! Text cu caractere ROŞII pe pagina WEB !!!!
</body> </body>
</html> </html>

Al şaselea.htm
<HTML>
Al doilea.html <HEAD>
<HTML> <title>
<HEAD> Fundal albastru – text galben !!!
<title> </title>
Utilizarea semnului sfârşitului de linie <br> !!! </head>
</title> <Body bgcolor=blue text=yellow >
</head> Aceasta este pagina WEB cu fundal albastru şi caractere
<Body> galbene!!!!
Aceasta este prima linie !!!<br> </body>
Aceasta este a doua linie !!! </html>
</body>
</html> Al şaptelea.html
<HTML>
<HEAD>
Al treilea.htm <title>
<HTML> Configurarea textului şi bordare !!!
<HEAD> </title>
<title> </head>
Masive performante !!! <Body leftmargin=100 topmargin=50>
</title> Setarea textului este următorul : narginea stângă 1000 cea
</head> superioară 50.<br>
<Body> <basefont size=”6” color=”blue” style=”Arial” >
<pre> În text : font “Arial”, culoare albastru şi dimensiune 6 este
Prima linie setat. Modificaţi şi jucaţivă cu el !!!
A doua linie </body>
3
Conf.Univ.Dr.Élthes Zoltán – Informatică economică – Laborator 12 – 14

</html> <H3> Aceasta este un subtitlu </H3>


<!-- H1, H2, H3 nivele de adrese -->
Al optălea.htm <P>Aceasta este un început de linie normal<BR>
<HTML> <!-- HREF crează o relaţie cu un alt document, de exemplu cu
<HEAD> documentul adresa.htm. Creaţi acest document -->
<title> <A HREF="adresa1.htm">Adresa mea proprie :</A>
Stiluri în text!!! </HTML>
</title>
</head> Adresa.htm
<Body > <HTML>
<b>textul este scris cu caractere îngroşate </b> <BODY>
<br><big>Am mărit caracterul cu 1 unitate <big>mai <B><font size=10 face=arial color=red> Sfântu
mare<big>şi mai mare<big> şi mai Gheorghe</font></B><BR>
mare</big></big></big></big> <B><font size=10 face=arial color=red>Bisericii </font>street
<br><small>Reduc caracterul cu 1 unitate <small>mai 11 </B><BR>
mic<small>şi mai mic<small> şi mai <B><font size=10 face=arial color=red>Telefon </font>317575
mic></small></small></small> </B><BR>
</br><i> Caractere înclinate</i> </BODY>
<br>În acest rand <sup>sus</sup>un superscript, respectiv </HTML>
<sub>jos</sub> un subscript.
<br><strike>Acest rând este tăiat cu o linie.</strike>
<br>În acest rând următorul cuvânt este <u> subliniat </u>, Al zecelea.htm
respective următorul cuvânt este <s> tăiat </s> <HTML>
</body> <HEAD>
</html> <!-- Cea ce ste în title va apare în rândul albastrul -->
<TITLE>Élthes Zoltán</TITLE>
Hiperreferinţă.htm </HEAD>
<HTML> <BODY>
<HEAD> <!—afişează orice text care apare între cele două tag-uri -->
<title> <!-- B – stil îngroşat, sauI italic,... -->
Hiperreferinţă <!-- BR sfârşit de linie -->
</title> <B><font size=10 face=arial color=red>Élthes Zoltán </font>
</head> pagina web !!!</B><BR>
<Body > Aici putem texte, ce dorim
<a href=http://www.ubbcluj.ro> Universitatea Babes-Bolyai <H1>Aceasta este un subtitlu </H1>
Cluj-Napoca <H2> Aceasta este un subtitlu </H2>
</a> <H3> Aceasta este un subtitlu </H3>
</body> <!-- H1, H2, H3 nivele de titluri -->
</html> <P>Aceasta este un început de linie normal<BR>
<!-- HREF crează o relaţie cu un alt document, de exemplu cu
Al nouălea.htm documentul adresa.htm. Creaţi acest document -->
<HTML> <A HREF="adresa1.htm">Adresa mea proprie :</A>
<HEAD> </HTML>
<!-- Cea ce ste în title va apare în rândul albastrul -->
<TITLE>TABELUL lui Élthes Zoltán </TITLE>
<!-- head conţine elementele de cap de tabel --> Inserare-imagine.html
</HEAD> <HTML>
<BODY> <HEAD>
<TABLE BORDER=10,20> <title>
<CAPTION TABEL EXAMEN> Inserare imagine <br> !!!
<TR> </title>
<TD> RÂND 1, CELL 1</TD> </head>
<TD> RÂND 2, CELLA 2</TD> <Body>
</TR> <img scr=car.gif” align=right alt=”Automobil”
</TABLE> border=4 width=84 height=75>
<H1>Aceasta este un subtitlu</H1> <img scr=glamour.gif align=left alt=”Automobil”
<H2> Aceasta este un subtitlu </H2> border=2 width=84 height=75>
4
Conf.Univ.Dr.Élthes Zoltán – Informatică economică – Laborator 12 – 14

</body> <frameset cols =30%, 50%, *>


</html> <frame>
<frame>
Tabel.htm <frame>
<HTML> </frameset>
<HEAD> </html>
<title>Tabel </title>
</head>
<Body> Meniu-derulant.html
<table width=80% border=10 cellpaddiing=3 cellspacing=5 <HTML>
align=center> <HEAD>
<caption> <title> Date personale <br>
<center><b>Tabel HTML </b></center> </title>
</caption> </head>
<tr> <form>Alegeţi sortimentul de peşte : <br>
<td width=50>Liniile tabelului cu elemente <b> TR</b> l- <select>
am creat.</td> <option>Crap </option>
<td width=50>Celulele tabelului cu elemente <b> TD</b> <option>Ştiucă </option>
l-am creat.</td> <option>Păstrăv </option>
</tr> <option>Merlucios </option>
</tr> </select>
<td width=50>Tabelul HTM cu elemente <b>TABLE</b> </from>
l-am creat.</td> </html>
<td width=50>Celulele pot conţine text, imagini, sau chiar
tabele. </td> Date-personale.html
</tr> <HTML>
</tr> <HEAD>
<td width=50>Cu elementul <b>CAPTION</b> <title> Meniu-derulant <br>
Putem da un titlu tabelului, care va apare deasupra </title>
tabelului.</td> </head>
<td width=50>Cu ajutorul atributului <b>COLSPAN</b> <form action=Prelucrare>
Putem restrânge coloane într-un tabel.</td> <fieldset>
</tr> <legend>Date personale </legend>
</table> <label for=vez>Numele </label>
</body> <input type=text name=nev1 size=20 ID=vez> <br>
</html> <label for=nev>Prenumele </label>
<input type=text name=nev2 size=20 ID=nev> <br>
<label for=ev>Data naşterii </label>
Bordare-orizontală.html <input type=text name=dat size=20 ID=ev> <br>
<HTML> </fieldset>
<HEAD> </from>
<title>Bordare orizontală <br> </html>
</title>
</head>
<frameset rows =30%, 70%> Finisare.html
<frame> <html>
<frame> <head>
</frameset> </head>
</html> <body>
<h1>Exemple simple despre programarea HTML </h1>
<h2>Finisarea</h2>
Bordare-verticală.html <p align=center>acest text este centrat </p>
<HTML> <p align=left>Aceasta este în partea stângă</p>
<HEAD> <font size=1>Acest character este de dimensiunea 1 <br>
<title>Bordare verticală <br> </body>
</title> </html>
</head>
5
Conf.Univ.Dr.Élthes Zoltán – Informatică economică – Laborator 12 – 14

</TABLE>
Butoane-radio.html <BR>
<HTML> <A HREF="stud-adr.htm">Adresa studenţilor :</A>
<HEAD> </BODY>
<TITLE>Butoane radio</TITLE> </HTML>
</HEAD>
<BODY>
<FONT size=6> Butoane radio </FONT> Stud-adr.htm
<form> <HTML>
<input type="Radio" name=" termen" value="3 luni"> <HEAD>
3 luni <p> <TITLE>Adresa de e-mail a studenţilor </TITLE>
<input type="Radio" name=" termen" value="6 luni"> </HEAD>
6 luni <p> <BODY>
<input type="Radio" name=" termen" value="12 luni"> <FONT size=6> Adresa de e-mail a studenţilor </FONT>
12 luni <p> <TABLE BORDER=10,20>
</form> <TR ALIGN=CENTER>
</body> <Td>Név</Td>
</html> <Td>Email</Td>
</TR>
<TR>
Studenţi.html <Td>Elthes</Td>
<HEAD> <Td>eltheszoltan@yahoo.com</Td>
<TITLE>Studenţii Extensiei Universitare din Sfântu </TR>
Gheorghe </TITLE> <TR>
</HEAD> <Td>Kristály</Td>
<BODY> <Td>kristaly@yahoo.com</Td>
<FONT size=6> Studenţii Facultăţii de Ştiinţe Economice din </TR>
Sfântu Gheorghe </FONT> <TR>
<TABLE WIDTH=60% BORDER=30,20> <Td>Domokos</Td>
<TR ALIGN=LEFT> <Td>domokos@yahoo.com</Td>
<Td><B><font size=10 face=arial </TR>
color=red>Numele</B></Td> </TABLE>
<Td><B><font size=10 face=arial </BODY>
color=red>Prenumele</B></Td> </HTML>
<Td><B><font size=10 face=arial
color=red>Anul</B></Td>
<Td><B><font size=10 face=arial
color=red>Grupa</B></Td> Orar.html
</TR> <HTML>
<TR ALIGN=LEFT> <HEAD>
<Td>Elthes</Td> <title>
<Td>Zoltan</Td> Crearea unui orar !!!
<Td>Unu</Td> </title>
<Td>Grupa 2</Td> </head>
</TR> <Body bgcolor=gray >
<TR ALIGN=LEFT> Aceasta este o pagină WEB de creare a orarului !!!!
<Td>Kristály</Td> <table>
<Td>Sándor</Td> <tr>
<Td>Doi</Td> <th>Orar</th>
<Td>Grupa 3</Td> <th>Luni</th>
</TR> <th>Marţi/th>
<TR ALIGN=LEFT> <th>Miercuri</th>
<Td>Domokos</Td> <th>Joi</th>
<Td>Ernő</Td> <th>Vineri</th>
<Td>Trei</Td> </tr>
<Td>Grupa 2</Td> <tr>
</TR> <th>8:00 - 9:00</th>
6
Conf.Univ.Dr.Élthes Zoltán – Informatică economică – Laborator 12 – 14

<td>Engleză</td> </td>
<td>Matematică</td> <td align="center" width="165">
<td>Biologie</td> <strong>Imagini Labor</strong>
<td>Educaţie Fizică</td> </td>
<td>Muzică</td> <td width="165">
</tr> <img src="glamour.gif" align="left" hspace="0" width="165"
<tr> height="65">
<th>9:00- 10:00</th> </td>
<td>Istorie</td> </tr>
<td>Fizică</td> <tr>
<td>Geografie</td> <td width="165">
<td>Informatică</td> <strong>Imagini Labor</strong>
<td>Matematică</td> </td>
</tr> <td width="165">
</table> <img src="glamour.gif" align="left" hspace="0" width="165"
</body> height="65">
</html> </td>
<td align="right" width="165">
Tabel2.html <strong>Imagini Labor</strong>
<HTML> </td>
<HEAD> </tr>
<title> <tr>
Crearea tabelului !!! <td align="center" valign="bottom" width="165">
</title> <img src="glamour.gif" width="124" height="49">
</head> <img src="glamour.gif" width="124" height="49">
<Body bgcolor=gray > </td>
Aceasta este un tabel !!!! <td align="center" valign="bottom" width="165">
<table border=3 cellpadding=5> <strong>Imagini Labor</strong>
<tr> </td>
<td>1. rând 1. elem</td> <td align="center" width="165">
<td>1. rând 2. elem</td> <img src="glamour.gif" align="middle" width="140"
<td>1. rând 3. elem</td> height="100">
</tr> </td>
<tr> </tr>
<td>2. rând 1. elem</td> </table>
<td>2. rând 2. elem</td> </body>
<td>2. rând 3. elem</td> </html>
</tr>
</table>
</body> Test-engleză.html
</html> <html>
<head>
Efecte.html <title>Test de engleză</title>
<HTML> </head>
<HEAD> <form action="mailto:eltheszoltan@yahoo.com"
<title> enctype="text/plain" method="post">
Crearea de efecte !!! <hr>
</title> <b> Test de engleză </b></p>
</head> <p>arcaţi răspunsul corect!</p>
<Body bgcolor=gray > <p>1. "Can I speak to Mr. Doster, please?" "Just a moment, I'll
Aceasta este un efect !!!! put you ... as soon as he is
<table border="0" cellpadding="0" cellspacing="0"
width="495"> free."</p>
<tr> <p><input type=radio Name=kerd1 Value=greşit>A.over </p>
<td width="165"> <p><input type=radio Name=kerd1 Value=greşit>B.off </p>
<img src="glamour.gif" align="left" hspace="0" width="165" <p><input type=radio Name=kerd1 Value=greşit>C.across </p>
height="65">
7
Conf.Univ.Dr.Élthes Zoltán – Informatică economică – Laborator 12 – 14

<p><input type=radio Name=kerd1


Value=Corect>D.through</p> Stiluri2.html
<p>2. "When I was in that town, a new bridge was being built ... <HEAD>
the river."</p> <TITLE>Stíluri exemple</TITLE>
<p><input type=radio Name=kerd2 Value=greşit>A.along </p> <STYLE TYPE="text/css">
<p><input type=radio Name=kerd2 Value=greşit>B.about </p> <!--.câmp {color: green}
<p><input type=radio Name=kerd2 Value=Corect>C.across SPAN.roşu {color: red}-->
</p> </STYLE>
<p><input type=radio Name=kerd2 </HEAD>
Value=rossz>D.through</p> <BODY>
<input value="Trimiteţi răspunsul corect " type=submit> <H1 CLASS=câmp>Verde, ca şi câmpul</H1>
<input value="Ştergere" type=reset> <H1>Aceasta nu este verde căci nu aparţine clasei </H1>
<hr> <P CLASS=câmp>Verde, ca şi câmpul <SPAN
</form> class="roşu">câteva caractere </SPAN > cu excepţie.
</html> </P>
<P> Aceasta nu este verde căci nu aparţine clasei </P>
Lista.html </BODY>
<HTML> </HTML>
<HEAD>
<TITLE>Pagini de stiluri</TITLE> Tabel cu multe linii.html
<STYLE TYPE="text/css"> <HTML>
<!-- <HEAD>
UL LI { font-size: small; color: green } <title>
UL UL LI { font-size: x-small; color: blue } Crearea tabelului cu multe linii şi coloane !!!
--> </title>
</STYLE> </head>
</HEAD> <Body bgcolor=gray >
<BODY> Aceasta este un table cu multe linii şi coloane !!!!
<ul> <table border="1" cellpadding="10" width="80%">
<li>elemlista1(să fie de culoare verde)</li> <tr align="center"><th rowspan="2">An</th><th
<li>elemlista2(să fie de culoare verde)</li> colspan="3">Vânzări</th></tr>
<li>Lista Al (să fie de culoare verde)<ul> <tr
<li>elemlista3(să fie de culoare albastră)</li> align="center"><th>Nord</th><th>Dél</th><th>Total</th></tr
<li>elemlista4(să fie de culoare albastră)</li> >
</ul></li> <tr align="center"><td>2000</td><td>10M Lei</td><td>8M
</ul> Lei</td><td>18M Lei</td>
</BODY> </tr>
</HTML> <tr align="center"><td>2001</td><td>14M Lei</td><td>11M
Lei</td><td>25M Lei</td>
</tr>
Stiluri.html </table>
<HTML> </body>
<HEAD> </html>
<TITLE>Stíluri </TITLE>
<STYLE TYPE="text/css">
<!--
#z98y {letter-spacing: 3,3px}
H1#z98y {letter-spacing: 6,5px}
-->
</STYLE>
</HEAD>
<BODY>
<P ID=z98y>Text lat </P>
<H1 ID=z98y>Titlu lat </H1>
<H1>Titlu normal</H1>
</BODY>
</HTML>
8
Conf.Univ.Dr.Élthes Zoltán – Informatică economică – Laborator 12 – 14

S-ar putea să vă placă și