CATEGORII DOCUMENTE |
DOCUMENTE SIMILARE |
|||||
|
|||||
Editarea unei pagini HTML
Vreti sa creati o pagina de Internet gata de publicat? Nu aveti nici cea mai mica idee despre html? Sunteti incepator, si aveti multe idei?
Va prezentam cel mai usor mod de a edita si a publica pe web un sit, fara sa stiti prea multe lucruri. Pentru aceasta aveti nevoie de un editor html. Noi am ales sa va prezentam editorul 'FrontPage Express' care se gaseste in toate pachetele de Internet Explorer incepand cu versiunea 4.0. Programul este gratuit si foarte usor de utilizat.
FrontPage Express este un editor de pagini web care va ofera acces nelimitat la puterea HTML (Hypertext Markup Language). Puteti folosi programul pentru a realiza si formata paginile web in HTML, lucrand intr-o maniera WYSIWYG ('what you see is what you get') astfel incat modificarile de formatare ale paginii se fac instantaneu si apar in modul grafic.
Cu tehnica avansata FrontPage Express, puteti obtine foarte usor pagini de web puternice si sofisticate.
De exemplu puteti:
Aplica tag-uri HTML din meniu, fara sa fiti nevoiti sa le editati in mod text;
Formata paragrafele, alinierea si textul cu o singura apasare a butoanelor din meniuri;
Insera direct imaginile sau filmele pe care le-ati creat sau clip-art-urile voastre preferate;
Puteti deschide paginile web direct de pe Internet (daca aveti instalat 'Web Publishing Wizard') sau dintr-un director aflat in calculatorul dumneavoastra sau din retea;
Salva paginile direct pe Internet (folosind 'Web Publishing Wizard') sau le puteti salva local;
Adauga elemente speciale FrontPage: scrolling marquee, text boxes, active X, etc.
Front Page Express ofera multe dintre caracteristicile editorului Front Page Professional, intr-un pachet mai mic. Realizarea unei pagini web se doreste a fi extrem de usoara, echivalentul unei simple sedinte de editare in Word. Toate acestea fiind spuse, trebuie sa incepem cu prezentarea
Bibliografie selectiva:
-Html by example - Todd Stauffer;
-Web Programming 6 in 1 - Michael Afergan;
-Web Publishing - William Stanek;
-WWW Development - John December;
-Sizzling Html Jalfrezi;
-Netscape JavaScript;
-JavaScript in a week;
-JavaScript Manual of style - Marc Johnson;
-Crearea paginilor Web cu Html 4 - Dave Taylor;
-Gazeta de informatica;
-Editorul FrontPage Express se distribuie gratuit impreuna cu navigatorul Internet Explorer, in care este si inclus, incepand cu versiunea 4.0; Microsoft FrontPage Express este marca inregistrata a Microsoft.
Documentatia HTML/JAVA realizata de Profesor Alin Burta
https://www.hasdeu.bz.edu.ro/~alinb
- Cum editam o pagina HTML -
Pentru a incepe selectati optiunea 'New' (nou) din meniul 'File' (fisier) sau apasati simultan tastele Ctrl+N. La selectarea acestei optiuni, ca efect vizual, va apare o fereastra cu diferite modele de pagini (Templates), pe care le puteti selecta pentru pagina dumneavoastra de web. In partea de jos a acestei ferestre apare o scurta descriere a modelului de pagina care urmeaza sa fie realizata. Noi va recomandam sa selectati optiunea 'Normal Page'. Ca urmare a acestei optiuni, programul va crea o pagina goala (blank page), fara nici un element.
Daca ati facut acest prim pas, inseamna ca sunteti pe calea cea buna, si e momentul sa continuati. Unul dintre lucrurile la care trebuie sa va ganditi de la inceput este designul paginii dumneavoastra, care, fara indoiala, trebuie ales foarte atent pentru a nu mari timpul de incarcare a unei pagini la o conexiune standard de 28.8 dial-up. De aceea trebuie sa remarcati in partea dreapat, jos, a ferestrei editorului FrontPage o bara utilitara care va indica timpul de incarcare la conexiunea standard de mai sus.
Un alt lucru important si foarte util pentru dumneavoastra, este faptul ca aveti posibilitatea de a lucra direct cu codul html, unde puteti face modificarile necesare si puteti adauga diferite script-uri. De asemenea, aceasta facilitate este foarte utila la compilarea sitului dumneavoastra. Pentru a lucra direct cu codul html, selectati optiunea 'HTML' din meniul 'View'. La selectarea acestei comenzi, ca efect vizual, va apare o fereastra in care se poate edita direct codul. Un ajutor important este dat de faptul ca acest cod este colorat standart, pentru a deosebi cel mai bine elementele.
- Ce reguli trebuie respectate -
Inainte de a incepe lucrul, si in timpul lucrului, trebuie sa cunoasteti cateva reguli elementare care va vor fi de folos. Unele reguli de editare sunt obligatorii, si de aceea va recomandam sa nu le neglijati.
Prima regula elementara este aceea ca pagina dumneavoastra de start (prima pagina a sitului) sa se numeasca 'index'. Numele acesta este util in cazul browserelor care folosesc 'auto complete' si este un nume standard. Daca numiti altfel aceasta prima pagina, pot apare unele inconveniente pe server dar care pot fi usor remediate daca apelati la administrator.
Un alt lucru util si care trebuie stiut de la inceput, este acela ca paginile ar trebui salvate cu extensia *.html si nu *.htm deoarece sunt servere mai vechi care nu suporta acest format, si de asemenea pot apare probleme cu unele browsere.
Evitati sa incarcati pagina cu imagini si grafica inutila. Va recomandam sa realizati imaginile in format *.gif sau *.jpeg cu o compresie mare si la dimiensiuni mici. Daca respectati aceasta regula, veti obtine un timp de incarcare relativ scurt, chiar la o conexiune standard de 28.8 pe dial-up.
Selectati optiunea 'Page Proprieties' din meniul File. Ca urmare a acestei comenzi, ca efect vizual, va apare o fereastra cu patru liste: 'General', 'Background', 'Margins' si 'Custom'. In sectiunea 'General' aveti posibilitatea de a configura titlul paginii dumneavoastra, titlu care va fi afisat in fereastra browserului. Apoi aveti posibilitatea de a specifica felul in care utilizatorul este directionat in pagina, puteti insera un fundal sonor si puteti configura setul de caractere folosit la codarea ei in html si la decodarea ei in browser. Daca aveti de gand sa inserati un fundal sonor, noi va recomandam un fisier de marimi mici (preferabil *.mid sau *.asf). In general fundalul sonor este inutil si va puteti lipsi de el. Despre setul de caractere cu care ar trebui salvata pagina, va recomandam setul Central European ISO 8859-2 mai ales daca aveti si unele caractere regionale.
In sectiunea 'Background' (figura de mai sus) se pot configura fundalul si culorile care apar in pagina dumneavoastra. Puteti sa puneti in fundal o imagine (ex: imagine.gif), cu conditia ca imaginea sa fie de dimensiuni foarte mici. Daca renuntati la imagine in fundal, puteti alege o culoare simpla. Dupa cum se vede mai sus, se poate configura culoarea fundalului ('Background'), culoarea textului normal ('Text'), si culoarea legaturilor spre alte eventuale pagini, in diferite momente: ('Hyperlink'= pagina care nu a fost accesata'; 'Visited Hyperlink'= pagina care a mai fost accesata din pagina dumneavoastra; 'Active Hyperlink'= pagina care este incarcata in momentul imediat accesarii ei).
In sectiunea 'Margins' se pot configura marginile paginii html. Problema cu care se confrunta foarte multi este aceea ca exista browsere care nu recunosc aceste margini (ex: Netscape), fapt care ar determina un alt aspect al paginii cu acest navigator. Daca doriti sa folositi aceasta optiune, va trebui sa recomandati ca browser, Internet Explorer. Calea cea mai buna, este sa evitati sa setati marginile paginii, astfel ele vor fi vazute la fel in toate navigatoarele.
In sectiunea 'Custom' pe care o vedeti reprezentata in figura de mai sus, se pot configura variabilele din pagina, variabile care necesitau mai demult interventia in codul sursa. De aici nu trebuie sa lipseasca variabilele 'keywords' si 'robots', deoarece multe motoare de cautare se folosesc de ele. Ca un pont, va sfatuim sa folositi in variabila 'keywords' cat mai multe cuvinte cheie, dar in legatura cu continutul paginii, pentru a avea mai multe sanse de a fi gasiti pe web.
O alta posibilitate de a configura variabilele, este aceea a editarii directe a codului sursa. La final, inceputul codului dumneavostra html ar trebui sa arate in felul urmator:
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-2'>
<meta name='Date' content='10/11/96'>
<meta name='GENERATOR' content='Microsoft FrontPage Express
2.0'>
<meta name='Keywords' content='internet,
exemplu,lectie'>
<meta name='Language' content='romanian'>
<meta name='Robots' content='All'>
<meta name='Version' content='8.0.3410'>
<title>Exemplul meu de pagina HTML</title>
</head>
<body background='imagine.gif' bgcolor='#FFFFFF'
text='#000000'
link='#0000FF' vlink='#800080'
alink='#FF0000'>
Unele variabile cum ar fi 'Date', 'Generator' sau 'Version' pot lipsi din codul dumneavoastra.
- Ce culori sunt acceptate in format literal sau hexazecimal -
Nume culoare |
Valoare hexazecimala |
ALICEBLUE |
#A0CE00 |
ANTIQUEWHITE |
#FAEBD7 |
AQUA |
#00FFFF |
AQUAMARINE |
#7FFFD4 |
AZURE |
#F0FFFF |
BEIGE |
#f5f5DC |
BISQUE |
#FFE4C4 |
BLACK | |
BLAncHEDALMOND |
#FFEBCD |
BLUE |
#0000FF |
BLUEVIOLET |
#8A2BE2 |
BROWN |
#A52A2A |
BURLYWOOD |
#DEB887 |
CADETBLUE |
#5f9EA0 |
chARTREUSE |
#7FFF00 |
chOCOLATE |
#D2691E |
CORAL |
#Ff7f50 |
CORNFLOWERBLUE |
#6495ED |
CORNSILK |
#FFf8DC |
CRIMSON |
#DC143C |
CYAN |
#00FFFF |
DARKBLUE |
#00008B |
DARKCYAN |
#008B8B |
DARKGOLDENROD |
#B8860B |
DARKGRAY |
#A9A9A9 |
DARKGREEN | |
DARKKHAKI |
#BDB76B |
DARKMAGENTA |
#8B008B |
DARKOLIVEGREEN |
#556B2F |
DARKORANGE |
#Ff8C00 |
DARKORchID |
#9932cc |
DARKRED |
#8B0000 |
DARKSALMON |
#E9967A |
DARKSEAGREEN |
#8FBC8F |
DARKSLATEBLUE |
#483D8B |
DARKSLATEGRAY |
#2f4f4F |
DARKTURQUOISE |
#00CED1 |
DARKVIOLET |
#9400D3 |
DEEPPINK |
#Ff1493 |
DEEPSKYBLUE |
#00BFFF |
DIMGRAY | |
DODGERBLUE |
#1E90FF |
FIREBRICK |
#B22222 |
FLORALWHITE |
#FFFAF0 |
FORESTGREEN |
#228B22 |
FUchSIA |
#FF00FF |
GAINSBORO |
#DCDCDC |
GHOSTWHITE |
#f8f8FF |
GOLD |
#FFD700 |
GOLDENROD |
#DAA520 |
GRAY | |
GREEN | |
GREENYELLOW |
#ADFf2F |
HONEYDEW |
#F0FFF0 |
HOTPINK |
#Ff69B4 |
INDIANRED |
#CD5C5C |
INDIGO |
#4B0082 |
IVORY |
#FFFFF0 |
KHAKI |
#F0E68C |
LAVENDER |
#E6E6FA |
LAVENDERBLUSH |
#FFF0f5 |
LEMOncHIFFON |
#FFFACD |
LIGHTBLUE |
#ADD8E6 |
LIGHTCORAL |
#F08080 |
LIGHTCYAN |
#E0FFFF |
LIGHTGOLDENRODYELLOW |
#FAFAD2 |
LIGHTGREEN |
#90EE90 |
LIGHTGREY |
#D3D3D3 |
LIGHTPINK |
#FFB6C1 |
LIGHTSALMON |
#FFA07A |
LIGHTSEAGREEN |
#20B2AA |
LIGHTSKYBLUE |
#87CEFA |
LIGHTSLATEGRAY | |
LIGHTSTEELBLUE |
#B0C4DE |
LIGHTYELLOW |
#FFFFE0 |
LIME |
#00FF00 |
LIMEGREEN |
#32CD32 |
LINEN |
#FAF0E6 |
MAGENTA |
#FF00FF |
MAROON | |
MEDIUMAQUAMARINE |
#66CDAA |
MEDIUMBLUE |
#0000CD |
MEDIUMORchID |
#BA55D3 |
MEDIUMPURPLE |
#9370DB |
MEDIUMSEAGREEN |
#3CB371 |
MEDIUMSLATEBLUE |
#7B68EE |
MEDIUMSPRINGGREEN |
#00FA9A |
MEDIUMTURQUOISE |
#48D1cc |
MEDIUMVIOLETRED |
#C71585 |
MIDNIGHTBLUE | |
MINTCREAM |
#f5FFFA |
MISTYROSE |
#FFE4E1 |
NAVAJOWHITE |
#FFDEAD |
NAVY | |
OLDLACE |
#FDf5E6 |
OLIVE | |
OLIVEDRAB |
#6B8E23 |
ORANGE |
#FFA500 |
ORANGERED |
#Ff4500 |
ORchID |
#DA70D6 |
PALEGOLDENROD |
#EEE8AA |
PALEGREEN |
#98FB98 |
PALETURQUOISE |
#AFEEEE |
PALEVIOLETRED |
#DB7093 |
PAPAYAWHIP |
#FFEFD5 |
PEAchPUFF |
#FFDAB9 |
PERU |
#CD853F |
PINK |
#FFC0CB |
PLUM |
#DDA0DD |
POWDERBLUE |
#B0E0E6 |
PURPLE | |
RED |
#FF0000 |
ROSYBROWN |
#BC8f8F |
ROYALBLUE |
#4169E1 |
SADDLEBROWN |
#8B4513 |
SALMON |
#FA8072 |
SANDYBROWN |
#f4A460 |
SEAGREEN |
#2E8B57 |
SEASHELL |
#FFf5EE |
SIENNA |
#A0522D |
SILVER |
#C0C0C0 |
SKYBLUE |
#87CEEB |
SLATEBLUE |
#6A5ACD |
SLATEGRAY | |
SNOW |
#FFFAFA |
SPRINGGREEN |
#00Ff7F |
STEELBLUE |
#4682B4 |
TAN |
#D2B48C |
TEAL | |
THISTLE |
#D8BFD8 |
TOMATO |
#Ff6347 |
TURQUOISE |
#40E0D0 |
VIOLET |
#EE82EE |
WHEAT |
#f5DEB3 |
WHITE |
#FFFFFF |
WHITESMOKE |
#f5f5f5 |
YELLOW |
#FFFF00 |
YELLOWGREEN |
#9ACD32 |
- Ce caractere sunt acceptate in format literal sau hexazecimal -
Caracter |
Entitate numerica |
Valoare Hex |
Entitate caracter |
Descriere |
�- |
Nefolosit |
|||
	 |
Tab orizontal |
|||
|
0A |
Line feed |
||
- |
0B-1F |
Nefolosit |
||
  |
Spatiu |
|||
! |
Semul exclamarii |
|||
" |
" |
Ghinimele |
||
# |
Diez |
|||
$ |
Semn dolar |
|||
% |
Semn procent |
|||
& |
& |
& |
Si |
|
' |
Apostrof |
|||
( |
Paranteza stanga |
|||
) |
Paranteza dreapta |
|||
* |
2A |
|
Asterisc |
|
+ |
2B |
Semnul plus |
||
, |
2C |
Virgula |
||
- |
2D |
Minus |
||
. |
2E |
Punct (stop) |
||
/ |
2F |
Solidus (slash) |
||
0-9 |
Digiti 0-9 |
|||
: |
3A |
Doua puncte |
||
; |
3B |
Punct si virgula |
||
< |
< |
3C |
< |
Mai mic |
= |
3D |
Egal |
||
> |
> |
3E |
> |
Mai mare |
? |
3F |
Semnul intrebarii |
||
@ |
A rond |
|||
A-Z |
A-Z |
41-5A |
Litere A-Z |
|
[ |
5B |
Paranteza patrata spre stanga |
||
\ |
5C |
Solidus intors (backslash) |
||
] |
5D |
Paranteza patrata spre dreapta |
||
^ |
5E |
Caret |
||
_ |
5F |
Bara orizontala |
||
` |
Accent grav |
|||
a-z |
a-z |
61-7A |
Litere a-z |
|
} |
7D |
Acolada stanga |
||
~ |
7E |
Tilda |
||
-  |
7F-A0 |
Nefolosit |
||
t |
¡ |
A1 |
Semnul exclamarii inversat |
|
¢ |
A2 |
Simbol cent |
||
£ |
A3 |
Lira sterlina |
||
¤ |
A4 |
Semn moneda |
||
¥ |
A5 |
Yen Japonez |
||
¦ |
A6 |
Bara verticala taiata |
||
§ |
A7 |
Semn sectiune |
||
¨ |
A8 |
Umlaut (dieresis) |
||
© |
A9 |
© (NHTML) |
Copyright |
|
S |
ª |
AA |
Ordinal feminin |
|
« |
AB |
Ghinimele unghi stanga, guillemot |
||
¬ |
AC |
Nul |
||
­ |
AD |
Liniuta |
||
® |
AE |
® (HHTM) |
Marca inregistrata |
|
¯ |
AF |
Accent macron |
||
<TD< font /> |
Politica de confidentialitate | Termeni si conditii de utilizare |
Vizualizari: 1451
Importanta:
Termeni si conditii de utilizare | Contact
© SCRIGROUP 2024 . All rights reserved