Crearea de documente web folosind HTML.
Documentele Web autonome utilizează limba HTML (limbaj de markup hipertext). Hypertext. adică textul extins, include elemente suplimentare: ilustrații, link-uri, obiecte plug-in. Structurile de control ale limbajului HTML sunt numite etichete și sunt inserate direct în textul documentului. Toate etichetele sunt închise în paranteze unghiulare <…>. Etichetele asociate se termină cu paranteze .
Există două modalități de formare a documentelor Web:
Exercitarea 1. Crearea unei pagini Web simple.
2. Introduceți următorul document:
3. Salvați acest document ca fiind primul.htm.
4. Porniți Internet Explorer (Start - Programe - Internet Explorer).
5. Selectați Fișier - Deschidere. Faceți clic pe butonul Răsfoire și deschideți primul fișier .htm.
6. Uitați-vă la modul în care este afișat acest fișier - cel mai simplu document HTML corect. În cazul în care conținutul elementului TITLE este afișat. Verificați ce se întâmplă atunci când lățimea ferestrei este redusă.
În acest exercițiu, am creat cel mai simplu document HTML. Ne-am familiarizat cu particularitățile formatării documentelor HTML și afișarea acestora utilizând browserul InternetExplorer.
Exercițiul 2. Învățarea modului de formare a paragrafelor.
1. Dacă acest exercițiu nu este efectuat imediat după cel anterior, deschideți documentul first.htm în Notepad.
3. Introduceți antetul primului nivel, cuprind-l între etichete
4. Introduceți antetul al doilea nivel, care îl include între etichete
5. Introduceți un paragraf separat al textului, începând cu eticheta
. Spațiile și caracterele de alimentare cu linie pot fi utilizate pe o perioadă nelimitată într-un paragraf.
6. Introduceți eticheta orificiului orizontal
.
7. Introduceți încă un paragraf din text, pornind-o cu eticheta
.
8. Salvați acest document ca paragraf .htm.
9. Porniți Internet Explorer.
10. Selectați File-Open. Deschideți fișierul .htm al paragrafului.
11. Uitați-vă la modul în care este afișat acest fișier. Potriviți elementele codului HTML și fragmentele documentului afișate pe ecran.
În acest exercițiu am creat un document HTML cu marcaj de paragrafe. Determinăm modul în care etichetele HTML afectează afișarea părților relevante ale documentului
Exercițiul 3. Crearea de hyperlink-uri.
1. Deschideți primul document .htm în Notepad.
2. Ștergeți tot textul între etichete
și . Textul care va fi introdus în următoarele paragrafe ale acestui exercițiu trebuie plasat după etichetă .3. Introduceți fraza: Text înainte de link.
4. Introduceți eticheta. .
6. Introduceți eticheta de închidere .
7. Introduceți fraza: Text după link.
8. Salvați documentul ca link .htm.
9. Porniți Internet Explorer.
10. Selectați Fișier - Deschidere. Deschideți fișierul .htm de legătură.
În acest exercițiu am creat un document HTML care conține hyperlink-uri. Am văzut cum sunt afișate hyperlink-urile în document și au învățat cum să le folosească.
Exercitarea 4. Crearea unei imagini și utilizarea acesteia pe o pagină Web
1. Deschideți programul Paint (Porniți "Programs" Standard "Paint"). Specificați dimensiunile noului desen, de exemplu 50x50 pixeli (Figura> Atribute).
2. Selectați culoarea de fundal roșu și culoarea de fundal verde. Umpleți desenul cu o culoare de fundal.
3. Utilizați instrumentul Pensulă pentru a desena un model roșu arbitrar pe fundalul verde.
4. Salvați imaginea ca pic1.gif (în format GIF).
5. Dați comanda Desenare - Atribute. Selectați caseta de selectare Folosiți culoarea transparentă de fundal. Faceți clic pe butonul Selectare culoare și selectați culoarea verde care a fost deja utilizată în imagine ca culoarea de fundal.
6. Salvați din nou desenul sub numele pic2.gif (în format GIF) și închideți programul Paint.
7. Dacă acest exercițiu nu se execută imediat după cel precedent, deschideți documentul first.htm în Notepad.
8. Ștergeți tot textul între etichete
și . Textul care va fi introdus în următoarele paragrafe ale acestui exercițiu trebuie plasat după etichetă .9. Introduceți orice text (4 - 5 linii lungime) și setați cursorul de text la începutul acestuia.
10. Introduceți eticheta
11. Salvați documentul ca imagine.htm.
12. Porniți Internet Explorer (Start »Programe» Internet Explorer).
13. Selectați Fișier »Deschidere. Faceți clic pe butonul Răsfoiți și deschideți fișierul picture.htm. Uită-te la documentul rezultat, acordând o atenție deosebită imaginii.
14. Întoarceți-vă la Notepad și modificați valoarea atributului: ALIGN = "TOP". Salvați fișierul cu același nume.
15. Reveniți la programul InternetExplorer și faceți clic pe butonul Reîmprospătare din bara de instrumente. Uită-te la schimbarea în aspectul paginii atunci când schimbați atributele.
16. Întoarceți-vă la Notepad și modificați valoarea atributului: ALIGN = "LEFT". Salvați fișierul cu același nume.
17. Reveniți la programul InternetExplorer și faceți clic pe butonul Refresh din bara de instrumente. Uită-te la schimbarea în aspectul paginii atunci când schimbați atributele.
18. Întoarceți-vă la programul Notepad și adăugați-o la etichetă atribute: HSPACE = 40 VSPACE = 20. Salvați fișierul cu același nume.
19. Întoarceți-vă la programul InternetExplorer și faceți clic pe butonul Refresh din bara de instrumente. Uită-te la schimbarea în aspectul paginii atunci când schimbați atributele.
20. Întoarceți-vă la Notepad și schimbați numele imaginii: SRC = "pic2.git". Salvați fișierul cu același nume.
21. Reveniți la programul InternetExplorer și faceți clic pe butonul Actualizare din bara de instrumente. Uită-te la schimbarea în aspectul paginii atunci când schimbați atributele. Care este diferența dintre cele două desene create?
În acest exercițiu, am învățat cum să inserăm imaginile într-un document. Am aflat cum atributele etichetei "IMG" influențează modul în care este afișată imaginea. Am învățat cum să afișăm imagini GIF care au o culoare de fundal transparentă.
Exercițiul 5. Metode de formatare a textului
1. Dacă acest exercițiu nu este efectuat imediat după cel anterior, deschideți documentul first.htm în Notepad.
3. Introduceți eticheta
4. Introduceți un paragraf arbitrar de text care va fi afișat în fontul implicit. Începeți acest paragraf din etichetă
.
5. Introduceți etichetele:
6. Introduceți paragraful următor al textului, terminându-l cu o etichetă .
7. În paragraful următor, utilizați etichetele pereche la discreția dvs.: (Bold) (Italics), (Underscore), (Ștergere), (Subscript) (Superscript).
8. În paragraful următor, utilizați etichetele pereche la discreția dvs.: <ЕМ> (Alocare) (selecție puternică), (textul programului), (intrare tastatură), (ieșire exemplu), (variabilă a calculatorului).
9. Salvați documentul primit ca format.htm.
10. Porniți Internet Explorer (Start> Programe> Internet Explorer).
11. Selectați Fișier> Deschidere. Faceți clic pe butonul Răsfoiți și deschideți fișierul format.htm.
12. Aflați cum elementele HTML utilizate afectează modul în care este redat textul.
13. Întoarceți-vă la Notepad și schimbați documentul astfel încât elementele care specifică formatarea să fie imbricate. Salvați documentul cu același nume.
14. Reveniți la Internet Explorer și faceți clic pe butonul Actualizare din bara de instrumente. Uită-te la modul în care pagina sa schimbat.
Ne-am familiarizat cu unele elemente ale limbajului HTML, care pot fi folosite pentru a formata textul documentului. Am aflat cum aceste elemente afectează afișarea documentului și au aflat că astfel de elemente pot fi puse unul în celălalt.
Exercițiul 6. Metode de creare a listelor
1. Dacă acest exercițiu nu este efectuat imediat după cel anterior, deschideți documentul first.htm în Notepad.
3. Lipiți eticheta în document
- . care începe o listă ordonată (numerotată).
- .
5. Completați lista utilizând eticheta
4. Inserați elementele listei în document, precedate de fiecare dintre acestea cu o etichetă
6. Salvați documentul primit ca list.htm.
7. Porniți Internet Explorer (Start> Programe> Internet Explorer).
8. Selectați Fișier> Deschidere. Faceți clic pe butonul Browse și deschideți fișierul list.htm.
9. Studiați modul în care lista de ordine este afișată în Internet Explorer. acordând o atenție deosebită metodei de numerotare specificată cu atributul TYPE =.
10. Întoarceți-vă la programul Notepad și setați cursorul text după lista introdusă.
11. Lipiți eticheta în document
12. Inserați elementele listă în document, precedate de fiecare dintre ele cu o etichetă
13. Completați lista utilizând eticheta . Salvați documentul cu același nume.
14. Reveniți la Internet Explorer și faceți clic pe butonul Actualizare din bara de instrumente. Vedeți modul în care sa modificat aspectul paginii, acordând atenție metodei de marcare specificată cu atributul TYPE =.
15. Întoarceți-vă la programul Notepad și setați cursorul de text după lista introdusă.
16. Lipiți eticheta în document
- , care începe o listă de definiții.
- .
18. Introduceți definițiile corespunzătoare în listă, precedate de eticheta lor
- .
19. Completați lista utilizând eticheta
17. Introduceți cuvintele definite în listă, precedate de paragrafele corespunzătoare ale etichetei
20. Reveniți la Internet Explorer și faceți clic pe butonul Actualizare din bara de instrumente. Uită-te la lista de definiții la afișarea unei pagini Web.
Am învățat cum să creăm liste utilizând limbajul HTM L și să determinăm modul în care acestea sunt numerotate (etichetate). Am stabilit modul în care arată listele atunci când sunt afișate în Internet Explorer. De asemenea, am învățat cum să creăm o listă de definiții.
Exercițiul 7: Crearea de tabele
1. Dacă acest exercițiu nu este efectuat imediat după cel anterior, deschideți documentul first.htm în Notepad.
3. Introduceți eticheta
5. Primul rând al tabelului trebuie să conțină anteturile coloanelor. Definiți-o după cum urmează:
6. Definiți rândurile ulterioare ale tabelului, precedate de fiecare dintre etichetele lor
7. Setați ultimul rând al tabelului după cum urmează:
8. Completați tabelul cu o etichetă .
9. Salvați documentul ca table.htm.
10. Porniți Internet Explorer (Start> Programe> Internet Explorer).
11. Selectați Fișier> Deschidere. Faceți clic pe butonul Răsfoiți și deschideți tabela table.htm.
12. Studiați cum este afișat tabelul creat în Internet Explorer. acordând o atenție deosebită efectului atributelor specificate.
13. Modificați lățimea ferestrei browserului și setați modul în care se modifică aspectul tabelului.
Ne-am familiarizat cu metodele de creare a tabelelor folosind HTML pentru a reprezenta datele. Am învățat cum să creăm tabele și să le schimbăm aspectul folosind atributele etichetelor HTML.
Exercitarea 8. Crearea unei descrieri a cadrului
- Introduceți următorul document: