Introducere in HTML

Laborator 1
Introducere n HTML
Arhitecturi de calculatoare i sisteme de operare L1-Introducere n HTML
Acest laborator prezint elementele de baz ale

limbajului HTML i modul de lucru cu acesta, v ajut s
nvaai cum s creai o pagin web folosind aceasta
tehnologie.
Introducere
Pentru realizarea lucrrii este necesar un editor simplu

cum ar fi Notepad sau Notepad ++, i un navigator gratuit ca
de exemplu: Internet Explore, Google Crome, Mozilla Firefox.
Timpul alocat : 2 ore.
Timp de lucru
Dup parcurgerea laboratorului cursantul va putea:
S dezvolte o pagin web pe o tem dat;
Obiective
HTML (HyperText Markup Language) este un limbaj utilizat pentru crearea paginilor web
ce pot fi afiate ntr-un browser/navigator.
HTML este folosit pentru prezentarea unui coninut (text, imagine) ntr-o pagin web,
furnizeaz mijloacele prin care coninutul unui document poate fi structurat i adnotat cu
diverse tipuri de metadate i indicaii de redare i afiare. Indicaiile pot varia de la
decoraiuni minore ale textului, cum ar fi culoarea sau sublinierea unui cuvnt ori
introducerea unei imagini, pna la adaugarea de elemente sofisticate, tabele, hrti de
imagini, formulare i cod CSS, etc.
Metadatele pot include informaii despre titlul i autorul documentului, informaii
structurale despre cum este mprit documentul n diferite segmente, paragrafe, etc. i
informaii eseniale care permit ca documentul s poat fi legat de alte documente pentru a
forma astfel hiperlink-uri.
Pagina 1
HTML este un format text proiectat pentru a putea fi citit i editat utiliznd un editor de
text simplu, editarea i ntelegerea paginilor n acest fel necesit cunotine de HTML, pe
care le putei obine studiind lucrarea de laborator.
Chestiuni Speciale de Inginerie Biomedical Biostatistic_S1
Definiie:
HTML este este un limbaj de marcare (n englez: markup language) utilizat

pentru crearea paginilor web ce pot fi afiate ntr-un browser/
navigator. Limbajul de marcare este metoda de formatare a unui text de pe
o pagin web, care combin textul cu informaiile suplimentare despre acel
text.
HTML este un format text proiectat pentru a putea fi citit i editat de oameni utiliznd un
editor de text simplu. Totui scrierea i modificarea paginilor n acest fel solicit cunotine
solide de HTML i este consumatoare de timp. Editoarele grafice de tip WYSIWYG What
You See Is What You Get, cum ar fi: Macromedia Dreamweaver, Adobe GoLive sau Microsoft
FrontPage permit ca paginile web s fie tratate asemntor cu documetele Word, dar cu
observaia c aceste programe genereaz un cod HTML care este de multe ori de proast
calitate.
HTML se poate genera direct utiliznd tehnologii de codare din partea serverului cum ar
fi PHP, JSP sau ASP. Numeroare aplicaii ca sistemele de gestionare a coninutului, wikiuri i forumuri web genereaz pagini HTML.
HTML este de asemenea utilizat n e-mail. Majoritatea aplicaiilor de e-mail folosesc un
editor HTML ncorporat pentru compunerea e-mail-urilor i un motor de prezentare a email-urilor de acest tip. Folosirea e-mail-urilor HTML este un subiect controversat i
multe liste de mail le blocheaz intenionat
Pagina 2
22.02.2015).
(http://ro.wikipedia.org/wiki/HyperText_Markup_Language la
Noiuni de baz
Structura documentului HTML
Un
fiier
HTML
este
alctuit
din
mai
multe
elemente
atributele
lor.
La nceput un element HTML conine datele documentului editate n dou sub-elemente

principale: HEAD i BODY. n HEAD se poate adauga titlul paginii web i alte elemente
numite metatag-uri, precum i stil-uri CSS. n BODY se adaug coninutul documentului
care va fi afisat n pagina web.
Exemplu:
<html>
<head>
<title>Titlu Documentului</title>
</head>
<body>
Continutul paginii web
</body>
</html>
Crearea si editarea paginii HTML

Editoarele de text sunt programele de baz pentru editarea paginii web. Avantajul folosirii
lor este simplitatea. Dintre editoarele de text cunoscute cel mai folosit este NotePad, care
este folosit i n acest caz, dar poate fi utilizat orice editor de text. Pentru nceptori i
pentru usurina cu care se lucreaz, este recomand folosirea aplicaiei Notepad++.
Crearea bazei de nceput a unui document
Deschidei aplicaia NotePad i scriei structura de baz a unei pagini web. Aceasta este:
<html>
<head>
<title>Titlu Documentului</title>
</head>
<body>
Continutul paginii web
</body>
</html>
Acum pagina dv. are HEAD si BODY n interiorul bazei <HTML>. n interiorul elementului
HEAD are elementul TITLE care se completeaz cu titlul documentului dvs. i n BODY un
text "Continutul paginii web". Ceea ce scriei la TITLE va apare n linia cea mai de sus a
browseru-lui (deasupra meniurilor). La TITLE putei pune orice text, dar este bine s
scrieti ceva care s descrie ct mai bine obiectul i coninutul paginii deoarece este ceea ce
caut i indexeaz multe portaluri de cutare de pe internet, i indicat, s nu depeasc 70
caractere. Ceea ce adaugai ntre tag-urile <body> </body> reprezint coninutul paginii,
Pagina 3
care va fi afiat n browser.
Exemplu:
<html>
<head>
<title> ACSO - Laborator </title>
</head>
<body>
<h1>Pagina HTML</h1>
Lectii, exemple si explicatii
</body>
</html>
<h1> </h1> este o etichet HTML pentru afiare de text mare (Heading 1) n pagina.
Pentru a vizualiza rezultatul, copiati acest cod ntr-o pagin nou deschis cu Notepad i
apoi salvai fiierul cu extensia .html. Pentru a-l salva, alegeti la "Save as type" - All Files,
apoi la "File name" i scriei numele i extensia (ex.: "ACSO.html"). Dupa ce a fost salvat
fiierul, deschidei-l cu un browser.
Setarea proprietilor documentului
Proprietile documentului (culorile pentru: fundalul paginii, pentru text i diferite faze ale
link-urilor)
pot
fi
controlate
de
atributele
elementului
BODY.
Culorile sunt setate folosind culorile de baz RGB: rosu, verde si albastru; acestea sunt
reprezentate ca valori hexadecimale i sunt scrise ntre ghilimele (" "), la nceput trebuie
adaugat caracterul '#'. Fiecare 2 uniti ale codului reprezint una din culorile RGB. De
exemplu: #00aa11 reprezint o culoare care nu are Rosu (00), are Verde (aa) si Albastru
mai putin (11), etc.
Daca elementul BODY nu este completat cu alte atribute atunci browser-ul va prezenta
culorile standard, de obicei fondul este alb. Pentru a seta culoarea fondului paginii adaugai
n eticheta <BODY> atributul BGCOLOR (background color).
Exemplu:
<body bgcolor="#0000ff"></body>
Culoarea textului - Atributul TEXT controleaza culoarea textului normal din document.
Acesta va afecta tot textul din document care nu este colorat de alte elemente, cum ar fi
link-ul. Culoarea standard pentru text este Negru.
Exemplu:
culoarea fondului va fi albastru si culoarea textului va fi rosu, atributul TEXT

va fi adaugat astfel:
Pagina 4
<body bgcolor="#0000ff" text="#ff0000"></body>
Link-uri (LINK, VLINK si ALINK) - Aceste atribute controleaz culoarea link-ului n

diferite stri
1. LINK - culoarea initiala a link-ului. Standard este albastru
2. VLINK - culoarea unui link vizitat. Standard este purpuriu.
3. ALINK - culoarea link-ului in momentul activarii. Standard este rosu.
Exemplu:
o pagina cu fondul alb, textul rosu, link-urile albastre, link-urile vizitate vor
avea culoarea roz iar culoarea link-urilor in momentul activarii va fi galben.
<body bgcolor="#ffffff" text="#ff0000" link="#0000ff" vlink="#ff00ff"
alink="#ffff00"></body>
Folosirea unei imagini ca fond pentru pagina (background)

Elementul body ofer posibilitatea nlocuiri fondului paginii cu o imagine (Background
image). Daca imaginea este mai mic dect dimensiunile paginii atunci imaginea va fi
multiplicat pn va acoperi ntreg cadru documentului. Este indicat ca imaginea s fie n
format *.gif sau *.jpg. Folosirea unei imagini va da un aspect plcut documentului.
Exemplu:
fondul pagini va fi dat de imaginea fisierului "imagine.gif" i de asemenea

am setat BGCOLOR astfel nct n timpul procesului de ncrcare a imaginii
culoarea fondului va fi alb
<body background="imagine.gif" bgcolor="#ffffff"></body>
<html>
- marcajul HTML de deschidere - indic faptul c informaia care

urmeaz este scris n limbaj HTML
<head>
-marcajul HEAD de deschidere - de aici ncepe antetul paginii
<title>Titlul paginii</title>
- marcajele TITLE - aici se scriu cteva cuvinte despre coninutul

paginii - aceste cuvinte apar pe bara de titlu a browserului; dac
pagina este adaugat ntr-o list favorit, ele apar ca nume al paginii.
<meta name = "keywords"

content = "... o lista de cuvinte ...">
<meta name = "description"
content ="... o fraz sugestiv ...">
... alte instructiuni: JavaScript,
CSS, etc. ...
- metatag-uri, ajuta motoarele de cutare la indexarea paginii.

- valorile unor atribute, de exemplu "keywords", trebuie ncadrate
cu ghilimele duble, drepte ( " ), cuvintele cheie din atributul content
se scriu separate prin virgul, exemplu: content="cursuri, lecii,
jocuri".
</head>
- marcajul HEAD de nchidere - aici se termin antetul paginii; cea ce

este n antet nu apare n fereastra browserului
<body>
- marcajul BODY de deschidere - ncepe corpul documentului, de aici

este adaugat coninutul care apare n pagina web
... Continut, etichete HTML ...
- tot ceea ce apare aici va fi afiat n fereastra browserului
</body>
- marcajul BODY de nchidere - indic sfrsitul corpului

documentului
</html>
- marcajul HTML de nchidere

Pagina 5
Forma generala a unei pagini Web
Reinei!
Instructiunile HTML (numite i controale, marcaje sau tag-uri) ncep cu o

parantez unghiular deschis < urmat imediat de numele instruciunii,
unul sau mai multe atribute ale instruciunii (opional), apoi de o parantez
unghiular nchis >.
Majoritatea instruciunilor sunt perechi; cea de nceput se numete marcaj
de deschidere si este de forma:
<nume_instruciune atribut="valoare_atribut">
iar cea de sfrsit marcaj de nchidere i nu conine atribute sau spaii; este
de forma:
</nume_instructiune>
NU sunt permise spaii dect ntre nume de instruciune i atribute. Tot ce
se gsete ntre marcajul de deschidere i cel de nchidere va avea
caracteristicile elementului respectiv.
Browserul ignor elementele pe care nu le nelege i pe cele scrise gresit.
GRESIT
REZULTAT
BINE
REZULTAT
<_h2>text</h2>
< h2>text
<h2> text </h2>
text
<_font_size = 6 _ color_=_red> text

<_/_font_>
< font size = 6 color = red>

text < / font >
<font_size = 6 _ color = red>

text </font>
text
Titluri, Paragrafe, Un nou rnd, Linie orizontala

1. Titluri <Hx> ... </Hx>
Pentru titlurile din coninutul documentului HTML este indicat folosirea etichetelor <Hx>,
(headings) unde 'x' este un numr ntre 1 i 6.
n cadrul elementului BODY, elementele Headings sunt folosite ca titluri sau pentru o mai
buna mprire a coninutului paginii.
Mrimea textului nconjurat de elementul Heading variaz de la foarte mare, n <H1> pn
la foarte mic n<H6>.
Pagina 6
Exemplu:
Cod HTML
Cum apare n pagin
<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
Heading 1
Heading 2
Heading 3

<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Heading 4
Heading 5
Heading 6
2. Paragraf <p> ... </p>

Paragrafele permit adugarea textului n document astfel nct lungimea de afisare a
textului va fi ajustat de mrimea deschiderii browser-ului i fiecare paragraf va ncepe un
nou rnd. Distanta dintre doua paragrafe succesive este mare deoarece browser-ul le
afieaz cu un rnd gol ntre ele.
Exemplu:
Cod HTML
<html>
<head>
</head>
<body>
<p>Paragraf 1</p>
<p>Paragraf 2</p>
<p>Paragraf 3</p>
<p>Paragraf 4</p>
</body>
</html>
Cum apare in pagina
Paragraf 1
Paragraf 2
Paragraf 3
Paragraf 4
3. Un nou rnd <br>
Tag-ul <br> permite s decizi unde textul va ncepe un nou rnd, astfel se foreaz
nceperea unui nou rnd. <br> este un Element Gol dar poate s conin atribut. <br> nu
are i nu cere element de nchidere, nu se foloseste </br>
Exemplu:
<html>
<head>
</head>
<body>
<h1>Heading 1</h1>
<p>Paragraf 1<br>
Linie 2<br>
Linie 3<br>
... </p>
<p>Paragraf 2</p>
</body>
</html>
Cum apare n pagin
Heading 1
Paragraf 1
Linie 2
Linie 3
...
Paragraf 2
Pagina 7
Cod HTML
4. Linie orizontala <hr>

Acest element afieaz o linie orizontal n document. <hr> nu folosete element de
nchidere [</hr>]
Elementul <hr> foloseste urmatoarele atribute:
SIZE = limea liniei, n pixeli (standard este 2)
WIDTH = lungimea liniei, n pixeli sau procente din lungimea afirii paginii
(standard 100%)
NOSHADE = afieaz linia fr a avea un aspect 3D
ALIGN = aliniaz linia (Left, Center, Right), ( Standard centru)
COLOR = seteaz culoarea liniei
Exemplu:
Cod HTML
<html>
<head>
</head>
<body>
<h1>Heading 1</h1>
<p>Paragraf 1<br>
Linie 2<br>
Linie 3<br>
... </p>
<hr>
<hr color="#1111fe" size="4" width="50%">
<p>Paragraf 2</p>
</body>
</html>
Cum apare n pagin
Heading 1
Paragraf 1
Linie 2
Linie 3
...
Paragraf 2
Formatul textului
HTML conine mai multe elemente, tag-uri i atribute, pentru afiarea textului n mai multe
formate cu aspecte grafice diferite.
1. Tag-ul <FONT> ... </FONT>
Cu acest element, <FONT>, putei modifica aspectul textului, cum sunt tipul fontului folosit,
mrimea i culoarea textului.
Mrimea textului poate fi modificat cu elementul FONT i atributul SIZE. Atributul SIZE
poate lua valorile numerice de la 1 la 7 i pe lng acestea poate folosi, ca valoare relativ,
Pagina 8
semnele "+" sau "-". Textul normal (daca nu este specificat acest atribut) are valoarea 3.
Exemplu:
<font size="+2">
Doua mrimi mai mare</font>
Tipul fontului poate fi modificat cu elementul FONT i atributul FACE.
Exemplu:
<font face="Arial Black">Acesta este tipul de font Arial Black</font>
Culoarea textului poate fi modificat cu elementul FONT i atributul COLOR.
Exemplu:
<font color="#00dd00">Acest text are culoarea verde</font>
2. Bold, Italic, Underline si alte elemente

Elemente des folosite pentru formatul textului sunt:
Bold (ngroat) <b> ... </b>
Italic (nclinat) <i> ... </i>
Underline (subliniat) <u> ... </u>
Exemplu:
<b> Bold </b>

<i> Italic </i>
<u> Underline </u>
3. Alinierea
Cteva elemente pot avea atributul (ALIGN) pentru aliniere, cum ar fi Titlurile <Hx> ,
Paragraful <p></p> si Linia orizontal <hr> . Cele trei valori ale atributului ALIGN sunt:
LEFT, RIGHT i CENTER.
Aliniamentul celor mai multe elemente se face cu ajutorul altor elemente:
<div align="valoare"> ... </div> Poate conine cele mai multe elemente. Tot ce este
poziionat cu elementul DIV poate fi aliniat oriunde-n pagin, indiferent dac n acel loc se
afla i altceva (Imagine, Text, ).
<center> ... </center> Va centra elementele
4. Alte etichete HTML pentru formatul textului
<strike> Text tiat </strike>
<big> Prezint textul ntr-un font mare </big>
<small> Prezint textul ntr-un font mic </small>
<sub> Afieaz textul n poziia subscript </sub>
Pagina 9
<sup> Aeaz textul n poziia superscript </sup>
Exemplu:
<html>
<head>
</head>
<body>
<p>
<strike> Text taiat </strike><br>
<big> Prezinta textul intr-un font mare </big><br>
<small> Prezinta textul intr-un font mic </small><br>
<sub> Aseaza textul in pozitia subscript </sub> normal
<sup> Aseaza textul in pozitia superscript </sup><br>
</p>
</body>
</html>
n browser va
arta astfel:
Text taiat
Prezinta textul intr-un font mare

Prezinta textul intr-un font mic
Aseaza textul in pozitia subscript normal
Aseaza textul in pozitia superscript
Marcatori si numerotare
HTML conine cteva tag-uri utile pentru aezarea coninutului n pagin. Prin acestea
textul este mai uor de citit i evideniat.
1. Elementele pentru marcatori i numerotare
Un element des folosit n formarea listelor (neordonate) este <ul>. <ul> este elementul de
nceput i dup scrierea listei se ncheie cu </ul>. Majoritatea elementelor pentru
marcatori i numerotare sunt compuse din unu sau mai multe elemente <li> ... </li> (list
element). Fr atributul "type" specificat n "<ul>" acestea prezint un marcaj ca un bullet.
Pagina 10
Exemplu:
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<ul>
<li>List item 1 ...</li>
</ul>
</body>
</html>
n browser va arta astfel:

List item 1 ...
List item 2 ...
List item 3 ...
Sunt 3 tipuri de marcaje: disc, circle (cerc) i square (ptrat). Tipul de marcaj care se
doreste folosit se introduce prin atributul type n eticheta <ul>
Exemplu:
<html>
<head>
</head>
<body>
<ul type="square">
</ul>
</body>
</html>

List item 1 ...
List item 2 ...
List item 3 ...
Un alt element folosit pentru formarea listelor (ordonate) este <ol>.

- <ol> ... </ol> este un element de numerotare. Elementele din list sunt numerotate
automat. mpreun cu <ol> se foloseste <li> ... </li> Sunt mai multe tipuri de numerotare
care pot fi folosite.
Acestea sunt controlate de atributul "type care este adugat n
elementul <ol>, le puteti vedea mai jos:

- type="1" - stil: 1, 2, 3, ...
- type="a" - stil: a, b, c, ...
- type="i" - stil: i, ii, iii, ...
- type="I" - stil: I, II, III, ...
De asemenea se poate specifica numrul de nceput al numerotrii printr-o valoare dat
atributului start.
<html>
<head>
</head>
<body>
<ol type="a">
</ol>
- Alta lista:
<ol type="I" start="3">
</ol>
</body>
</html>

a List item 1 ...
b List item 2 ...
c List item 3 ...
Alta lista:
1 List item 1 ...
2 List item 2 ...
3 List item 3 ...
Pagina 11
Exemplu:
Adaugare de Imagini
HTML conine i elemente pentru adugarea de imagini n pagina web.
1. Formatul imaginilor care pot fi folosite
Cele
mai
folosite
formate
pentru
imaginile
adaugate
ntr-o
pagin
HTML
sun GIF i JPEG (JPG; JPE), avantajul acestora este ca imaginile care au aceste extensii au o
mrime
mic
(n
bytes),
avnd
maximum
256
de
culori.
Alte tipuri de formate sunt: PNG, BMP, TIFF, PCX.

2. Adugarea unei imagini ntr-o pagina web
Pentru a introduce o imagine ntr-un format HTML se folosete elementul <img> ...
</img> mpreun cu urmatoarele atribute :
src - Valoarea acestui atribut determin locaia fisierului care conine imaginea.
alt - La acest atribut se scrie textul care va apare dac imaginea nu e afiat (de
unele browsere) sau cnd utilizatorul va poziiona, n browser, mouse-ul peste imagine.
align - Acest atribut permite aezarea imaginii n locuri diferite pe pagin. Pot fi
folosite urmtoarele opiuni: Bottom , Middle , Top , Left , Right , TextTop , ABSMiddle ,
Baseline , ABSBottom
width - Valoarea acestui atribut reprezint lungimea imaginii, n pixeli. Dac nu
este scris imaginea va fi prezentat cu lungimea original.
height - Valoarea acestui atribut reprezint nlimea (limea) imaginii, n pixeli.
Daca nu este scris, imaginea va fi prezentat cu nlimea original.
border - Prin adaugarea acestui atribut imaginea va aparea nconjurata de un
chenar, valoarea acestui atribut reprezinta grosimea chenarului, in pixeli.
hspace - Acest atribut este pentru spaiu orizontal pe ambele pri ale imaginii,
specificat in pixeli. De exemplu o valoare de 5 va pune un spaiu invizibil, de 5 pixeli, n
prile orizontale ale imaginii.
vspace - Acest atribut este pentru spaiu vertical pe ambele pri ale imaginii,
specificat in pixeli. De exemplu o valoare de 5 va pune un spaiu invizibil, de 5 pixel, n
Pagina 12
prile verticale ale imaginii.
Exemplu:

<html>
<head>
</head>
<body>
<img src="imagine.jpg" alt="puteti adauga orice
text" align="top" width="100" height="120"
border="4" hspace="10" vspace="7"></img>
</body>
</html>
Crearea de link-uri
Link-urile (links) sunt elemente HTML cu ajutorul crora putem deschide alte pagini, sri
de la un document la altul sau la alt site. Sunt foarte importante n crearea de pagini web.
Forma general pentru crearea unui link este urmtoarea:
<a href="url" title="Titlu link">Nume</a>
a este elementul specific pentru crearea link-urilor
href este atributul care marcheaz indicarea adresei link-ului
url este adresa
(http://www.utcluj.ro)
link-ului
(a paginii
care
va
fi
deschisa).
De exemplu
title este atributul prin care se d un titlu link-ului (un text ascuns, care apare numai
cnd este poziionat mouse-ul deasupra link-ului)
Titlu link este textul ascuns care apare cnd este poziionat mouse-ul deasupra
linkului
Nume este textul care va aparea n browser i pe care trebuie dat click cu mouse-ul.
n loc de acest text se poate folosi i o imagine, astfel "Nume" va fi nlocuit cu <img
src="nume_imagine.extensie">
Cnd documentul este alctuit din mai multe cadre se foloseste i atributul target.
Culoarea link-urilor poate fi schimbat de urmtoarele atribute, care trebuie scrise n

interiorul elementului <BODY>.
link="#0000ff - reprezinta culoarea link-ului in browser.
vlink="#00ffff - reprezinta culoarea link-ului cnd pagina respectiva a fost / este
vizitata.
alink="#ff0000 - reprezinta culoarea link-ului cnd acesta este activat.
<body bgcolor="#00ffff" link="#000000" vlink="#ff0000" alink="#00ff00">
Pagina 13
Exemplu:
Link-urile sunt de dou feluri:

1. Link-uri externe - (sunt cele mai utilizate), care sunt i ele de dou feluri:
a) Link-uri externe ctre pagini ale aceluiai site. Pentru acestea URL-ul poate s nu
includ i domeniul site-ului, cum ar fi "http://www.nume.com", ci poate folosi doar cale n
directoare, numele i extensia documentului la care se face saltul.
De exemplu:
- daca documentul int se afl n acelai director cu fisierul n care se scrie link-ul, codul
va fi scris aa: <a href="nume_fisier.extensie" title="Titlu link">Nume</a>
- daca documentul int se afl ntr-un director anterior celui n care se afl fiierul n care
se scrie link-ul, codul va fi scris aa: <a href="../nume_fisier.extensie" title="Titlu
link">Nume</a>
- daca documentul int se afl ntr-un director din cel care se afl fisierul n care se scrie
link-ul, codul va fi scris aa:
<a href="director/nume_fisier.extensie" title="Titlu link">Nume</a>
b) Link-uri externe ctre alte site-uri. Aici, adresa URL din link trebuie s conin i
domeniul (numele site-ului) paginii int, codul HTML se va scrie, de exemplu, aa:
<a href="http://nume_site/pagina" title="Titlu link">Nume</a>
2. Link-uri interne - sunt link-uri ctre alte texte din aceeai pagin. Se folosesc cnd
pagina respectiv este lung i e nevoie s se sar spre anumite texte din pagin.
- Pentru creare de link-uri interne trebuie urmai urmatorii pai:
1. Se scrie urmtorul cod la textul int, care marcheaz locaia unde se va face saltul i se
afl n aceeai pagin cu linkul
<a name="cuvant">Textul tinta</a>
- atributul "name" indic inta pentru link, e un fel de semn care indic locaia.
- "cuvant" poate fi orice cuvnt, trebuie sa fie unic pentru fiecare link.
- "Textul tinta" este textul unde se face saltul.
2. n locul unde vrem s fie link-ul (acolo unde o s dm click pentru a face saltul ctre
Pagina 14
textul ales), se scrie urmatorul cod:
<a href="#cuvant">Nume</a>
-aici "cuvant" este acelai text scris la pasul 1.
Link-urile interne i externe pot fi combinate. Astfel putem face saltul ctre un anumit text
aflat ntr-o alt pagin. n pagina respectiv se scrie codul de la pasul 1, la textul ales pentru
inta link-ului, iar n pagina n care va fi link-ul se scrie:
Pagina 15
<a href="adresa_pagina#cuvant">Nume</a>

Introducere in HTML

Încărcat de

Informații document

Descriere:

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?

Descriere:

Drepturi de autor:

Formate disponibile

Introducere in HTML

Încărcat de

Descriere:

Drepturi de autor:

Formate disponibile

Laborator 1

Arhitecturi de calculatoare i sisteme de operare L1-Introducere n HTML

Acest laborator prezint elementele de baz ale

Pentru realizarea lucrrii este necesar un editor simplu

Timpul alocat : 2 ore.

S dezvolte o pagin web pe o tem dat;

Chestiuni Speciale de Inginerie Biomedical Biostatistic_S1

HTML este este un limbaj de marcare (n englez: markup language) utilizat

Arhitecturi de calculatoare i sisteme de operare L1-Introducere n HTML

La nceput un element HTML conine datele documentului editate n dou sub-elemente

Crearea si editarea paginii HTML

care va fi afiat n browser.

Chestiuni Speciale de Inginerie Biomedical Biostatistic_S1

culoarea fondului va fi albastru si culoarea textului va fi rosu, atributul TEXT

<body bgcolor="#0000ff" text="#ff0000"></body>

Arhitecturi de calculatoare i sisteme de operare L1-Introducere n HTML

Link-uri (LINK, VLINK si ALINK) - Aceste atribute controleaz culoarea link-ului n

Folosirea unei imagini ca fond pentru pagina (background)

fondul pagini va fi dat de imaginea fisierului "imagine.gif" i de asemenea

- marcajul HTML de deschidere - indic faptul c informaia care

-marcajul HEAD de deschidere - de aici ncepe antetul paginii

- marcajele TITLE - aici se scriu cteva cuvinte despre coninutul

<meta name = "keywords"

- metatag-uri, ajuta motoarele de cutare la indexarea paginii.

- marcajul HEAD de nchidere - aici se termin antetul paginii; cea ce

- marcajul BODY de deschidere - ncepe corpul documentului, de aici

... Continut, etichete HTML ...

- tot ceea ce apare aici va fi afiat n fereastra browserului

- marcajul BODY de nchidere - indic sfrsitul corpului

- marcajul HTML de nchidere

Forma generala a unei pagini Web

Chestiuni Speciale de Inginerie Biomedical Biostatistic_S1

Instructiunile HTML (numite i controale, marcaje sau tag-uri) ncep cu o

<h2> text </h2>

<_font_size = 6 _ color_=_red> text

< font size = 6 color = red>

<font_size = 6 _ color = red>

Titluri, Paragrafe, Un nou rnd, Linie orizontala

Cum apare n pagin

Arhitecturi de calculatoare i sisteme de operare L1-Introducere n HTML

2. Paragraf <p> ... </p>

Cum apare in pagina

3. Un nou rnd <br>

Cum apare n pagin

Chestiuni Speciale de Inginerie Biomedical Biostatistic_S1

4. Linie orizontala <hr>

Cum apare n pagin

Arhitecturi de calculatoare i sisteme de operare L1-Introducere n HTML

Doua mrimi mai mare</font>

Tipul fontului poate fi modificat cu elementul FONT i atributul FACE.

<font face="Arial Black">Acesta este tipul de font Arial Black</font>

Culoarea textului poate fi modificat cu elementul FONT i atributul COLOR.

<font color="#00dd00">Acest text are culoarea verde</font>

2. Bold, Italic, Underline si alte elemente

<b> Bold </b>

<sup> Aeaz textul n poziia superscript </sup>

Chestiuni Speciale de Inginerie Biomedical Biostatistic_S1

Prezinta textul intr-un font mare

Aseaza textul in pozitia superscript

n browser va arta astfel:

Arhitecturi de calculatoare i sisteme de operare L1-Introducere n HTML