Crearea Şi Programarea Paginilor WEB

Crearea i
programarea paginilor
WEB
Terminologie
Internet- reeaua mondial unic de computere interconectate prin

protocoalele (regulile) de comunicare
World Wide Web (abreviat WWW, sau pur i simplu Web-ul)
definete un spaiu informaional, desfurat cu ajutorul Internetului
Provider- firm specializat ce distribuie servicii Internet
Server - aplicaie pe computer, uneori chiar un computer ntreg,
care opereaz continuu n reeaua sa i ateapt solicitri din partea
altor calculatoare din reea, numite client
Browser- soft, ansamblu de programe pentru manevrarea
informaiilor bazate pe grafic i text (Internet Explorer, Mozilla
Firefox)
URL (Uniform Resourse Locator)- adresa unic a unei pagini WEBalctuit din: identificator de coninut (http:// Hyper Text Transfer
Protocol sau ftp:// File Transfer Protocol) i localizare (format din
numele domeniului i numele unei anumite resurse).
Exemple:
http://www.google.ro ,
http://www.w3schools.com
Site- ansamblul: spaiu pe hard+fiierele pe care le conine+adresa.
HTML
HyperText Markup Language
Un
fiier HTML este un fiier text

care conine markup tags
Aceste markup tags spun browserului cum s afieze pagina
Un fiier HTML trebuie s aib
extensia htm sau html
Un fiier HTML poate fi creat utiliznd
un simplu text editor: Notepad
Introducei urmtorul text:

<html>
<head>
<title>Title of page</title>
</head>
<body> This is my first
homepage. <b>This text is
bold</b> </body>
</html>
Salvai fiierul cu numele
pagina1.htm
Atenie la extensia htm sau
html
Executai
Textul dintre tag-urile

<head> i </head>
reprezint informaia headerului. Aceasta nu este afiat
n fereastra browser-ului.
<title>este titlul
documentului i este afiat
n bara de titlu.
<body> este textul care se
va afia n fereastra browserului.
Textul dintre tag-urile <b> i
</b> tags va afia textul cu
litere ngroate (Bold)
Observaie
Putem
edita un fiier HTML cu

uurin, folosind un editor WYSIWYG
(what you see is what you get) cum
ar fi FrontPage sau Dreamweaver.
Dac
dorim, totui, s devenim
adevrai programatori de pagini Web,
este recomandabil s utilizm un
editor de text
pentru a nva
abecedarul HTML.
Atributele Tag-urilor
Tag-urile pot avea atribute.

Atributele ofer informaii
suplimentare unui element HTML. Urmtorul tag definete
un tabel: <table>. Acestuia i putem aduga un chenar
adugnd un atribul <table border="0">. Fr acesta,
tabelul nu are chenar.
Atributele apar ntotdeauna n perechi name/value de
forma: name="value".
Atributele sunt ntotdeauna specificate n tag-ul de start al
elementului HTML.
Atributele sunt de cele mai multe ori case-insensitive.
Valorile atributelor trebuie cuprinse ntre ghilimele (duble
sau simple)
n rare situaii, ca n cazul n care valoarea atribului n sine
conine ghilimele, este necesar folosirea apostrofurilor, ca
n exemplu: name='John "ShotGun" Nelson'
Titluri, paragrafe, comentarii

Headings (Titluri)
Headings sunt definite cu tag-uri
<h1> <h6>. <h1> definete
cel mai mare heading iar <h6>
definete heading-ul cel mai mic.
<h1>This is a heading</h1>
HTML adaug automat linii goale
nainte i dup heading.
Comments in HTML
Un comentariu va fi ignorat
browser.

de
Paragrafuri
Paragrafurile sunt definite cu tagul <p>
<p>This
is a paragraph</p>
<p>This
is
another
paragraph</p>
HTML adaug automat linii goale
nainte i dup paragraf.
Sfrit de linie
Tag-ul <br> este folosit cnd se
dorete salt la linia urmtoare
(enter)
<p>This
<br>
is
a
para<br>graph
with
line
breaks</p>
Tag-ul <br> este folosit singur, nu
trebuie nchis.
Formatarea textului n HTML
<html>
<body>
<b>This text is bold</b><br>
<strong>
This text is strong
</strong><br>
<big>
This text is big
</big><br>
<em>
This text is emphasized
</em><br>
<i>
This text is italic
</i><br>
<small>
This text is small
</small><br>
This text contains
<sub>
subscript
</sub><br>
This text contains
<sup>
superscript
</sup>
</body>
</html>
<html>
<body>
<pre>
This is
preformatted text.
It preserves
both spaces
and line breaks.
</pre>
<p>The pre tag is good for displaying
computer code:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
Tag-uri Computer output

<html>
<body>
<code>Computer code</code>
<br>
<kbd>Keyboard input</kbd>
<br>
<tt>Teletype text</tt>
<br>
<samp>Sample text</samp>
<br>
<var>Computer variable</var>
<br>
<p>
<b>Note:</b> These tags are often used
to display computer/programming code.
</p>
</body>
</html>
Computer code
Keyboard input
Teletype text
Sample text
Computer variable
Not: Aceste
tag-uri sunt folosite
pentru a afia linii
de program.
Basic HTML Tags

<html>Defines an HTML
document
<body>Defines the
document's body
<h1> to <h6>Defines header
1 to header 6
<p>Defines a paragraph
<br>Inserts a single line
break
<hr>Defines a horizontal rule
<!-->Defines a comment
Text Formatting Tags

<b>Defines bold text
<big>Defines big text
<em>Defines emphasized text
<i>Defines italic text
<small>Defines small text
<strong>Defines strong text
<sub>Defines subscripted text
<sup>Defines superscripted text
<ins>Defines inserted text
<del>Defines deleted text
<s>Deprecated. Use <del>
instead
<strike>Deprecated. Use <del>
instead
<u>Deprecated. Use styles
instead
"Computer Output" Tags

<code>Defines computer
code text
<kbd>Defines keyboard text
<samp>Defines sample
computer code
<tt>Defines teletype text
<var>Defines a variable
<pre>Defines preformatted
text<listing>Deprecated.
Use <pre> instead
<plaintext>Deprecated.
Use <pre>
instead<xmp>Deprecated.
Use <pre> instead
Citations, Quotations,
and Definition Tags
<abbr>Defines an
abbreviation
<acronym>Defines an
acronym
<address>Defines an
address element
<bdo>Defines the text
direction
<blockquote>Defines a
long quotation
<q>Defines a short
quotation
<cite>Defines a citation
<dfn>Defines a definition
term
Caractere speciale n HTML
Unele caractere au o semnificaie aparte n HTML, cum ar fi semnul (<)

care definete nceputul unui tag. Dac vrei s afiai un astfel de
caracter, trebuie s inserai o entitate caracter n sursa HTML.
O entitate caracter are trei pri: un ampersand (&), un nume de entitate
sau semnul # i un numr al entitii, construcie terminat prin (;).
Pentru a afia semnul de mai mic trebuie s scriei: < or <
Avantajul folosirii unui nume n locul unui numr este faptul c poate fi
mai uor de amintit i identificat. Dezavantajul este c nu orice browser
recunoate cele mai noi nume de entiti, n timp ce entitile numere
sunt foarte bine suportate de orice browser.
Numele entitilor sunt case sensitive.
Crearea link-urilor n HTML

Tag-ul ancor i atributul Href
HTML folosete tag-ul <a> (anchor) pentru a crea un link spre
un alt document.
O ancor poate direciona spre un alt produs: o pagin HTML, o
imagine, un fiier sunet, un film, etc.
Sintaxa:
<a href="url">Text to be displayed</a>
Atributul href este utilizat pentru a specifica adresa documentului
spre care se face link-ul, i cuvintele care vor aprea ntre tag-ul de
nceput si cel de sfrit vor fi afiate ca hyperlink.
Aceast ancor definete un link spre W3Schools:
<a href="http://www.w3schools.com/">Visit W3Schools!
</a>
Afiarea se va face de ctre browser n felul urmtor: Visit W3Schools!
Atributul Target
Cu acest atribut poi defini locul n care fiierul spre care se face link va fi deschis. Exemplul de
mai jos va deschide un document ntr-o fereastr nou a browser-ului
<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!

</a>
Tag-ul Anchor i atributul Name
Atributul name este utilizat pentru a se identifica o ancor. Cnd foloseti numele
ancorei poi crea un link cu salt direct la o seciune specificat din pagin, m loc s
foloseti bara de scroll pentru a defila pn la seciunea cutat.
Sintaxa pentru denumirea unei ancore:
<a name="label">Text to be displayed</a>
Atributul name denumete ancora. Acesta poate fi orice text, ca de exemplu:
<a name="tips">Useful Tips Section</a>
Se poate sesiza c numele ancorei nu este afiat ntr-un mod special.
Pentru a crea link direct la seciunea tips adugai caracterul # i numele ancorei la
sfritul URL-ului, ca n exemplu:
<a href="http://www.w3schools.com/html_links.asp#tips"> Jump to the Useful Tips
Section</a>
Un hyperlink spre Seciunea Useful Tips fr a mai folosi fiierul "html_links.asp" va
arta aa:
<a href="#tips">Jump to the Useful Tips Section</a>
Exemplu
<html>
<body>
<p>
<a href="#C4">See also Chapter 4.</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<h2>Chapter 3</h2>
<h2><a name="C4">Chapter
4</a></h2>
</body>
</html>
See also Chapter 4.

Chapter 1
This chapter explains ba
bla
Chapter 2
bla
Chapter 3
bla
Chapter 4
bla
bla
bla
bla
bla
Chenare HTML
Folosind cadre (chenare) se pot
afia mai multe documente
HTML n aceeai fereastr a
browser-ului.
Fiecare
document HTML se numete
cadru i fiecare cadru este
independent unul fa de
cellalt.
Dezavantaje:
- Realizatorul paginii
web
trebuie s in cont de mai
multe documente HTML
Este mai dificil s listezi la
imprimant ntreaga pagin.
Tag-ul Frameset
Definete modul n care se divide
fereastra n chenare.
Fiecare frameset definete un numr
de rnduri i un numr de
coloane.
Aceste valori indic cantitatea de
spaiu de pe ecran ocupat de
fiecare rnd i coloan.
Tag-ul Frame
Definete ce document HTML se pune
n fiecare chenar.
Exemplu:
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
Not: Limea unui chenar poate fi
exprimat i n pixeli:
(cols="200,500").
Exemplu
<html>
<frameset
cols="25%,50%,25%"
>
<frame
src="frame_a.htm">
<frame
src="frame_b.htm">
<frame
src="frame_c.htm">
</frameset>
</html>
Acest exemplu demonstreaz cum s mpari pagina n trei

chenare structurate pe linii i coloane.
<html>
<frameset
rows="50%,50%">
<frame src="frame_a.htm">
<frameset
cols="25%,75%">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</frameset>
</html>
Navigarea ntre chenare

Acest exemplu arat cum s navigai printre chenare. Chenarul de navigare conine o
list de link-uri cu al doilea chenar ca tint. Fiierul cu numele tryhtml_contents.htm"
conine trei link-uri. Codul surs al acestor link-uri este:
<a href ="frame_a.htm" target ="showframe">Frame a</a><br>
<a href ="frame_b.htm" target ="showframe">Frame b</a><br>
<a href ="frame_c.htm" target ="showframe">Frame c</a>
Al
doilea chenar va arta documentul spre care se face link.
<html>
<frameset cols="120,*">
<frame
src="tryhtml_contents.htm">
<frame src="frame_a.htm"
name="showframe">
</frameset>
</html>
Tabele HTML
Tabele
Tabelele sunt definite cu
tag-ul
<table>.
Un
tabel este mprit n
rnduri (cu tag-ul <tr>
)i fiecare rnd n
celule ce conin date(cu
tag-ul <td>). O astfel
de celul poate conine
text,
imagini,
liste,
paragrafe,
form-uri,
tabele, rigle orizontale,
etc.
<table border="1">
<tr>
<td>row 1, cell 1</td>
</tr> <tr> <td>row 2,
cell 1</td> <td>row 2,
cell 2</td>
</tr>
</table>
Un astfel de tabel va arta:
Atributul Border
Dac nu este specificat atributul
border, tabelul va fi afiat fr
margine. Cteodat acest lucru este
util dar uneori vrem ca marginile s
fie vizibile.
Pentru a afia un tabel cu bordur,
se poate folosi atributul border :
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
Capete de tabel
Sunt definite cu tag-ul <th>.
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
Liste HTML
HTML permite definirea
listelor
ordonate
sau
neordonate.
Exemple
List neordonat folosete
tag-ul <ul>
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
List ordonat folosete
tag/ul <ol>
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
Definirea Listelor
Definirea unei liste nu este o

list de itemi. Este o list de
termeni i explicaii ale
acestora.
Definiia listet ncepe cu tagul <dl>. Fiecare termen
definit ncepe cu tag-ul <dt>.
Fiecare explicaie a termenilor
ncepe cu tag-ul <dd>.
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Aa apare n browser:
Coffee
Black hot drink
Milk
White cold drink
n interiorul tag-ului <dd>

se pot defini paragrafe, linii
de la capt, imagini, linkuri, alte liste, etc.
Forme i intrri n HTML

Forme
O form este o zon care
conine elemente form.
Elementele form permit
utilizatorului s introduc
informaii (cum ar fi texte,
meniuri, butoane radio,
casue de verificare
(checkboxes), etc.) ntr-o
form.
O form este definit cu
tag-ul <form>.
<form>
<input>
<input>
</form>
Intrri
Cea mai utilizat tag-form este
tag-ul
<input>.
Tipul datei
introduse este specificat de tipul
atributului. Vom explica cele mai
utilizate tipuri de date.
Cmpuri Text
Sunt utilizate pentru a introduce
texte, numere ntr-o form.
<form>
First name: <input type="text"
name="firstname"> <br>
Last name: <input type="text"
name="lastname">
</form>
Lungimea implicit a unui cmp text este de 20 caractere
Butoane Radio
Sunt folosite cnd doreti
ca utilizatorul s selecteze
o opiune dintr-un numr
limitat de opiuni.
<form>
<input type="radio"
name="sex"
value="male">Male <br>
<input type="radio"
name="sex"
value="female"> Female
</form>
Csue de verificare (checkboxes)

Sunt utilizate cnd doreti ca utilizatorul
s selecteze una sau mai multe opiuni
dintr-un numr limitat de opiuni.
<form>
I have a bike: <input type="checkbox"
name="vehicle" value="Bike" /> <br />
I have a car: <input type="checkbox"
name="vehicle" value="Car" /> <br />
I have an airplane: <input
type="checkbox" name="vehicle"
value="Airplane" />
</form>
Cmpuri Password
<html>
<body>
<form action="">
Username:
<input type="text"
name="user">
<br>
Password:
<input type="password"
name="password">
</form>
</body>
</html>
Efect la browser:
De reinut c atunci
cnd scriei caractere
n cmpul password,
browser-ul
afieaz
asteriscuri sau bullets
n loc de caractere.
Liste ascunse
<html>
<body>
<form action="">
<select name="cars">
<option
value="volvo">Volvo</option>
<option
value="saab">Saab</option>
<option value="fiat"
selected="selected">Fiat</option
>
<option
value="audi">Audi</option>
</select>
</form>
</body>
</html>
Acest form trimite un e-mail la W3Schools

<html>
<body>
<form action="MAILTO:someone@w3schools.com"
method="post" enctype="text/plain">
<h3>This form sends an e-mail to
W3Schools.</h3>
Name:<br>
<input type="text" name="name"
value="yourname" size="20">
<br>
Mail:<br>
<input type="text" name="mail"
value="yourmail" size="20">
<br>
Comment:<br>
<input type="text" name="comment"
value="yourcomment" size="40">
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
Inserarea imaginilor n HTML

Tag-ul img i atributul Src
n HTML, imaginile sunt definite cu
tag-ul <img>, care nu se nchide.
Pentru a afia o imagine n pagin,
trebuie s utiizai atributul src
(source). Valoarea atributului src
este URL-ul imaginii pe care dorii
s-o afiai n pagin.
Sinaxa pentru definirea imaginii:
<img
src="url">. URL-ul arat
locaia
unde
imaginea
este
stocat.
O
imagine
numit
"boat.gif" localizat n directorul
"images"
din
"www.w3schools.com" are URL-ul:
http://www.w3schools.com/image
s/boat.gif. Daca imaginea este
stocat pe disk, trebuie specificat
calea spre aceasta.
Atributul Alt
Atriburul alt este utilizat pentru a
defini un text alternativ unei
imagini. Valoarea atributului alt
este un text definit de autorul
paginii:
<img
src="boat.gif"
alt="Big
Boat">
Atributul "alt" spune cititorului ce
lipsete din pagin dac browserul nu poate ncrca imaginea.
Browser-ul va afia n acest caz
textul n locul imaginii. Este o
bun
practic
s
includei
atributul
alt
pentru
fiecare
imagine din pagin, astfel nct
cei ce folosesc doar un browser
text-only s poat folosi pagina
creat de voi.
Imagine ca link
<html>
<body>
<p>
You can also use an image
as a link:
<a href="lastpage.htm">
<img border="0"
src="buttonnext.gif"
width="65" height="38">
</a>
</p>
</body>
</html>
Imagine folosit ca background
<html>
<body
background="background.jpg">
<h3>Look: A background image!

</h3>
<p>Both gif and jpg files can be

used as HTML backgrounds.</p>
<p>If the image is smaller than

the page, the image will repeat
itself.</p>
</body>
</html>
Background- Fundal
Fundal
Tag-ul <body> are dou
atribute prin care se poate
specifica fundalul unei pagini.
Acesta poate fi color sau o
imagine.
Bgcolor
Atributul bgcolor atribuie o
culoare specificat pentru
fundalul paginii. Valoarea
acestui atribut poate fi un
numr hexazecimal, o valoare
RGB, sau un nume de
culoare:
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
Background
Atributul background specific
o imagine pentru fundalul
unei pagini HTML. Valoarea
acestui atribut este URL-ul
imaginii pe care daoreti s-o
utilizezi. Dac imaginea este
prea mic ea se va repeta
pn cnd se umple ntreaga
fereastr a browser-ului.
<body
background="clouds.gif">
<body
background="http://www.w3s
chools.com/clouds.gif">
URL-ul poate fi relativ (ca n
prima linie de mai sus) sau
absolut (ca n a doua linie din
exemplul de mai sus).
Atenie: Dac doreti s foloseti o imagine

ca background, ar trebui s te gndeti la
urmtoarele:
Background-ul imagine va mri timpul de
ncrcare prea mult?
Background-ul imagine va arta bine cu
alte imagini n pagin?
Background-ul imagine va arta bine cu un
text colorat pe pagin?
Background-ul imagine va arta bine cnd
imaginea se repet pe pagin?
Background-ul imagine nu va distrage
atenia de la text?
Culori HTML
Numele culorilor standard:

HTML valideaz 16 nume pentru culori: aqua, black, blue, fuchsia,
gray, green, lime, maroon, navy, olive, purple, red, silver, teal,
white, and yellow.
Derularea textului n controale

marquee
Controlul marquee este un marcaj de efect ce determin animarea
unui text ntr-o pagin Web.
Exemplu:
<marquee> <h1> Text la plimbare</h1> </marquee>
Pentru a controla direcia de deplasare se folosete atributul direction
care poate lua urmtoarele valori: left (implicit- de la stnga la
dreapa), right, down, up.
Atributul behavior are trei valori:
Scroll (implicit- textul se plimb pe ecran, se pierde la stnga i
reapare n dreapta)
Slide- textul se oprete la marginea opus apariiei
Alternate- se deplaseaz alternativ, stnga, dreapta, fr a prsi
ecranul
Exemplu:
<marquee behavior=slide direction=right> <h1> text plimbaret
</h1> </marquee>
CSS
Cascading Style Sheets
CSS - limbaj prin care se poate realiza

formatarea textului, aplicarea unui stil asupra
unor elemente de acelai tip (paragraf, imagine,
tabel, etc.)
Stilurile definesc how to display elementele
HTML
Stilurile sunt n mod normal stocate n Style
Sheets
Stilurile sunt adugate n HTML pentru a
rezolva o problem
External Style Sheets te poate salva de la o
grmad de munc
External Style Sheets sunt stocate n fiiere CSS
Sintaxa CSS
Sintaxa CSS este format din trei pri: un selector, o
proprietate i o valoare:
selector {property: value}
Selectorul este n mod normal elementul/tag-ul HTML pe care
doreti s-l defineti, proprietatea este atributul oe care
doreti s-l schimbi, i fiecare proprietate poate lua o
valoare. Proprietatea i valoarea sunt separate prin (;) i
cuprinse ntre acolade:
body {color: black}
Note: Dac valoarea este format din mai multe cuvinte,
atunci aceasta trebuie cuprins ntre ghilimele:
p {font-family: "sans serif"}
Dac doreti s specifici mai mult dect o proprietate, trebuie
s separi fiecare proprietate prin (;). Exemplul urmtor un
paragraf cu text centrat i colorat rou:
p {text-align:center;color:red}
EXEMPLUL 1 (fiier extern .css):
Rezultatul este un chenar de forma de

mai jos
EXEMPLUL 2 (fiier extern .css)

Fiierul pagina.html
<html>
<head>
<link rel="stylesheet"
type="text/css"
href="ex2.css" />
</head>
<body>
<h1>This is a header 1</h1>
<hr />
<p>You can see that the style
sheet formats the text</p>
<p><a
href="http://www.w3schools.com
"
target="_blank">This is a
link</a></p>
</body>
</html>
Fiierul ex2.css
body {background-color: tan}
h1 {color:maroon; font-size:20pt}
hr {color:navy}
p {font-size:11pt; margin-left: 15px}
a:link
{color:green}
a:visited {color:yellow}
a:hover {color:black}
a:active {color:blue}
Rezultatul
EXEMPLUL 3: (foaie intern)

<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>
</head>
<body>
<h1>This is header 1</h1>
<p>This is a paragraph</p>
</body>
</html>
Legtura dintre HTML i CSS se face prin

elementul STYLE care utilizeaz tag-urile
<style> i </style>. Cele dou tag-uri vor
fi aezate ntre <head> i </head>
EXEMPLUL 4: (foaie intern)

<html>
<head>
h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>
EXEMPLUL 5 - Liste
<html>
<head>
ol.decimal {list-style-type: decimal}
ol.lroman {list-style-type: lower-roman}
ol.uroman {list-style-type: upper-roman}
ol.lalpha {list-style-type: lower-alpha}
ol.ualpha {list-style-type: upper-alpha}
</style>
</head>
<body>
<ol class="decimal">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="lroman">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="uroman">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="lalpha">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="ualpha">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
Exemplul 6 - Tabele
<html>
<head>
table.one
{
table-layout: automatic
}
table.two
{
table-layout: fixed
}
</style>
</head>
<body>
<table class="one" border="1" width="100%">
<tr>
<td
width="20%">100000000000000000000000
0000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>
<table class="two" border="1" width="100%">

<tr>
<td
width="20%">100000000000000000000000
0000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>
</body>
</html>

Crearea Şi Programarea Paginilor WEB

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Crearea Şi Programarea Paginilor WEB

Încărcat de

Drepturi de autor:

Formate disponibile

Crearea i

Internet- reeaua mondial unic de computere interconectate prin

fiier HTML este un fiier text

Introducei urmtorul text:

Textul dintre tag-urile

edita un fiier HTML cu

Tag-urile pot avea atribute.

Titluri, paragrafe, comentarii

Formatarea textului n HTML

Tag-uri Computer output

Basic HTML Tags

Text Formatting Tags

"Computer Output" Tags

Caractere speciale n HTML

Unele caractere au o semnificaie aparte n HTML, cum ar fi semnul (<)

Crearea link-urilor n HTML

Afiarea se va face de ctre browser n felul urmtor: Visit W3Schools!

<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!

See also Chapter 4.

Acest exemplu demonstreaz cum s mpari pagina n trei

Navigarea ntre chenare

Definirea unei liste nu este o

Black hot drink

White cold drink

n interiorul tag-ului <dd>

Forme i intrri n HTML

Lungimea implicit a unui cmp text este de 20 caractere

Csue de verificare (checkboxes)

Acest form trimite un e-mail la W3Schools

Inserarea imaginilor n HTML

Imagine folosit ca background

<h3>Look: A background image!

<p>Both gif and jpg files can be

<p>If the image is smaller than

Atenie: Dac doreti s foloseti o imagine

Numele culorilor standard:

Derularea textului n controale

Cascading Style Sheets

CSS - limbaj prin care se poate realiza

EXEMPLUL 1 (fiier extern .css):

Rezultatul este un chenar de forma de

EXEMPLUL 2 (fiier extern .css)

EXEMPLUL 3: (foaie intern)

Legtura dintre HTML i CSS se face prin

EXEMPLUL 4: (foaie intern)

<table class="two" border="1" width="100%">

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