Supporting the community
Supporting the community
Dincolo de elementele de baza HTML
Configurarea unei pagini principale de baza este o sarcina relativ usoara. Este chiar destul de usor sa puneti pe pagina grafica simple. Mai devreme sau mai tarziu, totusi, veti dori sa mergeti dincolo de elementele de baza.
Cele trei browsere web predominante sunt Internet Explorer, Firefox si Netscape Navigator. In timp ce fiecare recunoaste etichetele HTML standard, fiecare browser a dezvoltat extensii la HTML care sunt recunoscute numai atunci cand utilizeaza browserul respectiv. Informatiile continute in aceasta brosura sunt in general recunoscute de fiecare dintre browsere.
NOTA: Daca decideti sa incercati cateva dintre aceste tehnici HTML, NU trebuie sa plasati linii de rupere asa cum se poate indica in aceste exemple de codare HTML; exemplele din aceasta brosura pot afisa pauze de linii numai din cauza formatarii in fisa in sine.
Toate culorile afisate pe computer sunt alcatuite din combinatii rosu-verde-albastru (rgb). Acest lucru permite fundaluri colorate pentru acele pagini in care doriti o culoare simpla si solida pe pagina dvs. de pornire. Aceleasi valori rgb specifica si culoarea textului, link-urilor si link-urilor "urmate" (link-urile pe care le-ai dat click si apoi s-au intors).
Cand setati culorile, ele sunt setate pentru intregul fisier de pagina de pornire. In general, nu puteti "amesteca si potrivi."
Vedeti exemple de culori care pot fi utilizate de toate browserele Web.
Culorile calde (rosii, galben, portocale) par sa "se apropie" de cititor, in timp ce culorile reci (blues si verde) par sa "se retraga de la" cititor. In general, veti dori sa alegeti culori reci pentru fundaluri, astfel incat fondul sa nu concureze cu prim-planul si sa faca mai dificil de citit.
Culorile "Sigure in browser" sunt cele care raman valabile pentru toate platformele de calcul si daca sunt vizualizate in 256 de culori, cu 16 sau 24 biti de culoare. Alte culori pot pixeliza (apare puncte) sau banda (panglici de culoare, mai degraba decat amestecate, de culoare). Culorile pentru browser sunt intotdeauna combinatii de 00, 33, 66, 99, cc, ff. Toate culorile identificate in diagramele de nuante si valori de mai sus sunt culori in siguranta pentru browser.
In loc sa utilizati numai eticheta
, puteti adauga orice combinatie de optiuni pentru fundal, text, link-uri si culori vizitate (urmate).NOTA: Aceste optiuni pot fi plasate in orice ordine dupa "corpul" din eticheta.
Eticheta, cu optiuni, ar urma acest format: unde "xxxxxx" este valoarea rgb. =
Orice imagine care poate fi vizualizata intr-o pagina de pornire poate fi utilizata si ca "tapet". Aceasta este o alta optiune care poate fi utilizata impreuna cu eticheta corporala. Eticheta cu aceasta optiune ar citi:
unde "name.gif" este numele fisierului dvs. imagine. Ar trebui sa alegeti un fundal subtil cu cateva culori care sa nu interfereze cu prezentarea informatiilor dvs.Multi designeri web aleg sa utilizeze atat o imagine de fundal cat si o culoare de fundal care se potriveste cu o culoare dominanta in tapet. Acest lucru face ca browserul sa stabileasca imediat culoarea in timp ce se incarca imaginea de fundal "deasupra" culorii. In acest fel, cititorul dvs. va vedea o culoare care se leaga vizual de pagina dvs., fara a trebui sa asteptati ca imaginea sa se incarce.
Imaginea de fundal poate fi imbunatatita prin cresterea luminozitatii si scaderea contrastului pentru a inmuia imaginea. Retineti ca multi oameni pot intampina dificultati in a vizualiza o pagina de pornire cu un fond ocupat sau luminos din cauza unor deficiente fizice sau incompatibilitati hardware.
Imaginea de fundal se va potrivi automat in latimea si inaltimea paginii dvs. de pornire. De exemplu, aceasta imagine va umple spatiul din spatele paginii dvs. de pornire. Tigla va permite sa utilizati o grafica mult mai mica decat este necesara pentru a umple pagina; Astfel, pagina dvs. se incarca mai repede. Cele mai multe imagini de fundal sunt de aproximativ 100x100 pixeli; o dimensiune minima pentru cea mai eficienta prelucrare este de 64 x 32 (w x h).
SECRETUL SECRET: Accesati comorile mele si va simtiti liber sa va pastrati pe cei care va plac: tapet, fotografii, grafica sau grafica animata.
Daca creati un fundal cu o imagine sau un design pe fundal (spre deosebire de un model sau o textura), va trebui sa experimentati plasarea designului intr-un pachet grafic. In general, veti descoperi ca proiectul care depaseste trebuie sa fie compensat spre dreapta mai jos a fundalului, mai degraba decat centrat, pentru a obtine efectul unui design centrat in spatele textului paginii. De asemenea, atunci cand creati imagini de fundal, asigurati-va ca nu va lasati neintentionat o "cusatura" care va da o aparitie de sah pe pagina dvs. de pornire.
Puteti influenta atat culoarea, cat si dimensiunea textului utilizand eticheta . Cele doua optiuni pe care le puteti utiliza cu fontul sunt culoarea si dimensiunea. Ca in cazul oricarei optiuni, le puteti utiliza in mod individual sau impreuna, in functie de efectul dorit.
Pentru a schimba culoarea unui cuvant sau a unei fraze, puteti folosi optiunea de font "culoare". De exemplu,
HOT! HOT! HOT!
Unde "xxx" este inlocuit cu una dintre culorile recunoscute. (Retineti ca puteti consulta sectiunea privind culorile in siguranta pentru browser pentru a determina care dintre culorile numite vor fi afisate corect.)
Desi exista numeroase culori care pot fi denumite in mod curent prin nume si recunoscute in general de catre Internet Explorer si Netscape, exista doar saisprezece culori care sunt standard HTML si recunoscute de W3C (afisate in urmatorul paragraf).
Culorile recunoscute in standardul HTML sunt: Negru (#000000), Verde (#008000), Argintiu (#C0C0C0), Lime (#00FF00), Grii (#808080), Oliv (#808000), Alb (#FFFFFF), Galben (#FFFF00), Maro (#800000), Navy (#000080), Rosu (#FF0000), Albastru (#0000FF), Purpuriu (#800080), Teal (#008080), Fucsia (#FF00FF), and Apa (#00FFFF).
NOTA: Fiti putin precauti cand utilizati culoarea albastra, deoarece multi cititori din primele zile ale lui Netscape presupun ca culoarea albastra indica o legatura pe care ei o pot face clic.
Pentru caracterele superscript: 1. Un exemplu "superscript":
Vezi Dante2
Pentru caracterele subscript: 2. Un exemplu "subscript":
H2O
Dupa cum stiti, codul HTML nu recunoaste functii de procesare a textului, cum ar fi mai multe spatii, file si caruri returnate. Textul continut in eticheta
... isi pastreaza spatiul. Prin urmare, aceasta eticheta este utila atunci cand aveti coloane simple in tab-uri sau spatii unice. Dezavantajul folosirii acestei etichete pentru spatiere este ca va schimba fontul intr-un stil de curierat.De exemplu, pentru a crea urmatorul efect, ati plasa spatiile corespunzatoare care preced fiecare linie in documentul dvs. HTML, insa inchideti intreaga poema din containerul "pre":
Mary avea un mic miel
Lina lui era alba ca zapada
Si peste tot Maria a mers
Mielul avea siguranta sa mearga.
Text in format Monospatiu / Masina de Scris
Textul continut in etichetele ... va fi monospatiat. De exemplu:
Introduceti acest text.
Alinierea textului
Pentru a centra textul de aliniere:
Scoala de Bone din Universitatea Indiana De exemplu:
Universitatea Indiana Scoala de Bone
De asemenea, puteti sa aliniati paragrafele de text ale paragrafului, asa cum am facut-o cu acesta:
Sublinierea Textului
Aveti grija atunci cand alegeti sa utilizati textul subliniat, deoarece unii cititori il asociaza cu link-uri de tip hypertext. Cu toate acestea, atunci cand decideti ca trebuie sa utilizati sublinierea, codul HTML este:
important!
De exemplu: Asta este important!
Listeaza Stilurile de Obiecte
Puteti schimba stilul numeric al elementului lista intr-o lista numerotata, precum si stilul simbolului elementului lista dintr-o lista neordonata. De asemenea, puteti specifica valoarea numarului de inceput al unei liste ordonate. Stilurile de numere utilizate pentru lista ordonata sunt A (superior alfa), a (inferior alfa), I (roman superior), i (roman inferior) si 1 (numere arabe). Alegerile utilizate cu lista neordonata sunt disc, cerc si patrat. Observati in exemple ca plasati stilul sau valoarea de tip in eticheta
"Numar" tipuri:
| Ar rezulta in:
|
"Numar" tipuri:
| Ar rezulta in:
|
Tipuri de glont :
| Ar rezulta in:
|
Blocheaza linkurile din marginea din stanga si din dreapta si se utilizeaza atunci cand citeaza lungi fragmente de informatii. De exemplu:
Patru scoruri si sapte ani in urma, parintii nostri au adus pe acest continent o noua natiune, conceputa in libertate si dedicata propunerii ca toti oamenii sunt creati egali.
de la adresa Gettysburg
A. Lincoln
Ar rezulta:
Patru scoruri si sapte ani in urma, parintii nostri au adus pe acest continent o noua natiune, conceputa in libertate si dedicata propunerii ca toti oamenii sunt creati egali.
De la adresa Gettysburg
A. Lincoln
Ati invatat deja sa creati un link utilizand eticheta de ancorare, de exemplu Pagina de pornire IUPUI. Si stiti ca ceea ce apare in interiorul etichetei de ancorare este "capabil de clic". Un tip de grafic denumit in mod obisnuit o imagine "clicabila" este pur si simplu doua grafica, una mica si una mare, utilizate in combinatie cu eticheta de ancorare. Cand faceti clic pe imaginea mai mica, aceasta "pare sa creasca" intr-o imagine mai mare.
De exemplu, aceasta linie de cod:
Pentru o vizualizare de dimensiuni medii, faceti clic pe imagine:
Va rezulta (presupunand ca aveti cele doua fisiere din directorul dvs.) in urmatoarele:
Pentru o vizualizare de dimensiune completa, faceti clic pe imagine:
Observati ca codul include optiunea "BORDER = 0". Puteti utiliza optiunea de frontiera in orice eticheta pentru a controla latimea (sau prezenta) unei margini. Este deosebit de eficient sa setati marginea egala cu zero cand creati o imagine "clicabila", astfel incat marginea sa nu deterioreze imaginea dvs. (altfel imaginea dvs. "clicabila" va avea o margine colorata in jurul acesteia).
O pagina de pornire prietenoasa cititorilor directioneaza cititorii catre punctul de plecare (si in cazul paginilor de start ale sistemelor noastre universitare, de asemenea, inapoi la pagina de pornire principala IUPUI). De exemplu, pentru a crea un link inapoi la pagina de pornire IUPUI, in care atat sigla IUPUI, cat si cuvintele "Inapoi la pagina de pornire IUPUI" pot fi accesibile prin clic, acest lucru (Observati ca sunam imaginea de la locatia sa la adresa web):
Ar rezulta imaginea de mai jos. Observati marginea din jurul imaginii; Daca as fi setat BORDER = "0", nu s-ar fi afisat nici o margine:
Inapoi la pagina principala IUPUI
Pentru a utiliza un grafic propriu numit "back.gif", codul dvs. HTML ar fi citit:
Ar fi afisat:
Inapoi
NOTA: Singurul lucru pe care trebuie sa-l aveti in vedere este distanta intre imagine si textul urmator; Este adesea dificila separarea structurii de codare de afisajul real din browser. In exemplul anterior, de exemplu, imaginea "back.gif" si cuvantul "Inapoi" sunt impletite unul impotriva celuilalt.
Un alt exemplu al aceleiasi structuri HTML este de a crea un link care sa permita cititorului sa trimita cu usurinta un mesaj catre dvs. prin e-mail. NOTA: Fiind capabil sa trimiteti posta electronica dintr-un link de acest tip depinde de cititorul care a setat preferintele de e-mail ale browserului.
Aceasta referinta hipertext ancorata invoca posta:
Si are ca rezultat:
Trimite-mi un email!
Prin crearea unei ancore care indica un fisier de sunet, cititorii dvs. pot asculta un clip audio - presupunand ca au placa de sunet si difuzoarele corespunzatoare:
Acum puteti incerca !:
Canta niste jazz!
Imaginea de pe cascada ISMAPS sunt imagini care fac legaturi hipertext diferite destinatii, depinzand de locatia indicatorului mouse-ului cand este facut clic. Un ISMAP este o singura imagine cu zone definite (puteti vedea acest efect miscand cursorul mouse-ului peste imaginea din stanga si priviti la bara de stare din partea de jos a ferestrei browserului). Locatiile acelor zone sunt inregistrate intr-o harta, astfel incat sistemul sa poata identifica atat locatia in grafic, cat si destinatia.
Un ismap de pe partea clientului, plaseaza "munca" de a obtine instructiunile din ismap pe statia de lucru client (cea care face cererea - cititorul). Deoarece serverul nu este implicat, actiunea se intampla mai rapid si mai rapid, reducand timpul de asteptare pentru cititor. Mai degraba decat avand un fisier de harta separat, ca in ismap-ul unui server, informatia despre harta se afla in documentul HTML.
La locatia din documentul HTML unde doriti sa fie afisata imaginea, tastati instructiunea de eticheta a imaginii asa cum ati proceda in mod normal pentru o imagine. Asigurati-va ca includeti o margine cu latime zero, astfel incat sa nu aveti linia albastra in jurul imaginii - ca cea pe care o avem pe aceasta imagine! Retineti ca exista o componenta suplimentara: referinta la harta.
Harta defineste forma zonei care trebuie sa fie apasata, coordonatele colturilor din stanga sus si colturile din dreapta jos ale fiecarei zone si destinatia la care cititorul ar trebui sa fie luat cand se face clic pe aceasta zona. Definitia hartii poate fi localizata oriunde in documentul dvs. HTML. Multi dintre dvs. ar putea dori sa o plaseze la sfarsitul dosarului, astfel incat sa fie "in afara drumului". Mai jos este definitia hartii esantionului pentru ismap de mai sus.
Server-urile ismaps se bazeaza pe configuratia serverului web pentru a crea definitia si directiile ismap. Pentru informatii suplimentare despre crearea unui ismap din partea serverului, consultati Tutorialul ISMAP.
Listele de definire creeaza o definitie indentata, simplu spatiata, sub cuvantul sau fraza care este definita. Acest tip de lista este, de asemenea, foarte util atunci cand creati liste de nume si informatii. Retineti ca puteti utiliza, de asemenea, coduri HTML standard intr-o lista de definitii pentru accentuarea si formatarea in plus. De exemplu:
- Farmer Brown
- Addresa: 123 Outpost Lane, Farmtown, U.S.A. 12345
- Susie Candle
- Addresa: 897 Pickwick Strada, Smalltown, U.S.A. 98765
Ar rezulta:
Mai multe entitati (inclusiv punctuatie, simboluri speciale si notatie matematica) necesita coduri de caractere pentru a fi afisate corespunzator intr-o pagina de pornire. Iata cateva dintre cele mai des solicitate coduri. Primul rand din fiecare celula arata codul de caractere care trebuie introdus in documentul HTML si a doua linie din fiecare celula contine entitatea.
Pentru o lista completa a codurilor de caractere, consultati tabelul entitatilor. Codurile exista atat ca entitati denumite, cat si ca entitati zecimale.
| < < | > > | & & | ™ ™ |
| © © | ¼ ¼ | ½ ½ | – – (en dash) |
| â * â | ä* ä | ã* ã | ® ® |
| á* á | " " | — — (em dash) | … … (ellipse) |
*Inlocuiti litera "a" cu litera pentru a primi circumflexul
*Inlocuiti litera "a" cu litera pentru a primi umlaut
*Inlocuiti "a" cu litera pentru a primi tilda
*Inlocuiti litera "a" cu litera pentru a primi semnul acut
unde" xx "este numarul de pixeli de tamponare. "Hspace" va da tamponarea margini stanga si dreapta si "vspace" va da bufferul de margine de sus si de jos. "Hspace" si "vspace" pot fi utilizate independent una de cealalta. |  |
Imagine transparenta | Imagine normala |
Tabelele pot fi folosite pentru o varietate de lucruri. Fii creativa in folosirea tabelelor de pe paginile de pornire: calendare, diagrame, liste cu "tab-uri" si "bare de butoane". Tabelele trebuie sa contina aceste trei etichete principale:
…
… …
Aceste etichete de baza (tabelul
) pot fi marite cu optiuni. Optiunile pentru utilizarea cu eticheta
| ||||||||||||||||||||||||||||||||||
Back to IUPUI Home Page
Back![](http://server.iupui.edu/staff0/jsmith/graphics/bl_ball.gif")
