Cum se face o pagină în html. Un exemplu de creare a unei pagini html în notepad
INSTITUTUL DE EDUCAȚIE DESCHISĂ DE LA MOSCOVA
DEPARTAMENTUL DE MATERIALE ŞI TEHNOLOGII INFORMAŢIEI
Materiale de curs la distanta
„Tehnologii informaționale și educație”
Polilova Tatyana Alekseevna
[email protected]
Cum se creează o pagină web
Cel mai simplu mod de a crea o pagină web este să folosești instrumentele Microsoft Office. Cele mai recente versiuni ale acestui pachet oferă posibilitatea de a converti un document obișnuit în format HTML cu o calitate bună a codului.
Caracteristici Word
Un document pregătit în editorul de text Word poate fi ușor convertit într-o pagină web. Cu toate acestea, nu va arăta atât de atractiv pe cât v-ați dori dacă nu sunt luați pași suplimentari. Să ne uităm la câteva exemple.
Să luăm niște text.
Convertim documentul într-o pagină web folosind operația Salvare ca pagină web... (numită din meniul principal - element Fișier). Apoi, reprezentarea html a documentului va arăta astfel:
Primul lucru care vă atrage atenția este că textul ocupă întregul spațiu pe ecran. Lungimea șirului este prea mare. Pentru o citire confortabilă pe ecran, numărul de caractere pe linie ar trebui să fie în intervalul 50-65.
Folosind o masă
În acest caz, o puteți face destul de simplu: creați un tabel în documentul sursă și plasați textul dorit în el. Puteți seta un cadru în tabel. Apoi aspectul paginii web va fi mult îmbunătățit, iar pagina va arăta mai atractiv în browser.
Fundal și stil
Este recomandabil să alegeți un fundal care să nu fie prea luminos, astfel încât textul să poată fi citit clar pe el. Un astfel de fundal în lista propusă este, de exemplu, hârtie de orez. Afișarea paginii s-a schimbat semnificativ:
Inserarea unei imagini
Puteți adăuga o fotografie la un document, luând-o, de exemplu, dintr-o colecție de clipuri.
Trebuie să faceți clic dreapta pe imagine, să efectuați o operație de copiere, apoi să specificați în document locația pentru imagine și să efectuați operația de lipire a obiectului copiat.
Dacă inserați o imagine în interiorul unui paragraf, atunci este mai bine să modificați proprietățile imaginii setând textul pentru a se înfășura în jurul imaginii (trebuie să selectați elementul din meniul principal Format și apoi Imagine):
Acest lucru nu va crea niciun spațiu gol suplimentar în document.
În cele din urmă, puteți adăuga un cadru și o umbră imaginii folosind butoanele din panoul Desen - Tip de linie și Stil de umbră. Astfel de nuanțe adaugă în mod semnificativ expresivitate paginii.
Dacă panoul Desen nu este pe pagină, trebuie să îl instalați selectând elementul din meniul principal Vizualizare și apoi Bare de instrumente și desen.
Ticker
Word vă permite să adăugați alte elemente de design la o pagină web, cum ar fi o „linie târâtoare”. Pentru a utiliza această caracteristică, trebuie să deschideți panoul componente web de pe ecran (din meniul principal - Vizualizare, apoi Bare de instrumente și componente web). Făcând clic pe butonul de operare Ticking Line, se deschide o fereastră suplimentară pentru specificarea textului parametrilor liniei rampe.
Ca de obicei, puteți schimba fontul și atributele unei linii: dimensiunea fontului și culoarea caracterului. Pagina web va arăta astfel pe ecranul dvs.:
Am dat un exemplu de doar un set foarte modest de tehnici de proiectare cu ajutorul cărora puteți proiecta o pagină web pe baza unui document existent în format Word.
Utilizarea șabloanelor de design
Dacă începeți să creați o pagină de la zero, puteți utiliza Expertul paginii web, care vă va ajuta să creați un document într-un dialog. Sau puteți folosi un șablon de design de pagină gata făcut, alegându-l dintr-un set destul de reprezentativ. Pentru a face acest lucru, în operațiunea Creare, selectați modul Creare folosind un șablon și apoi Șabloane generale. Pe ecran va apărea un formular în care trebuie să selectați fila Pagini Web:
Utilizatorul poate alege culoarea și stilul în mod independent, de exemplu, folosind setările Format - Temă.
Crearea de hyperlinkuri și marcaje
Ultima problemă pe care intenționăm să o luăm în considerare în această secțiune este crearea de hyperlinkuri într-un document.
Dacă vrem să ne referim într-un document la un alt document sau un alt site de pe Internet, atunci un astfel de hyperlink se poate face astfel: selectați o bucată de text (un cuvânt) în document și efectuați operația Insert - Hyperlink... Pe ecran va apărea un formular în care specificați adresa hyperlink. Adresa poate fi introdusă explicit sau fișierul poate fi selectat în fereastră.
Aici ar trebui să rețineți că adresa fișierului selectat de pe computerul dvs. se poate schimba atunci când vă creați site-ul. Prin urmare, metoda implicită de specificare a unei adrese este potrivită doar dacă structura folderului dvs. de pe computer și de pe site-ul de Internet este aceeași.
Dacă un hyperlink ar trebui să se refere la o altă parte a aceluiași document, atunci trebuie mai întâi să inserați un marcaj la începutul fragmentului dorit. Trebuie să efectuați operația Inserare - Marcaj și să introduceți numele marcajului în formularul care apare pe ecran.
Prezentare Web în PowerPoint
PowerPoint este un program conceput pentru a crea prezentări pe un computer. Cu toate acestea, are funcția de a converti o prezentare pregătită într-un format web.
Puteți deschide prezentarea pregătită și efectuați operațiunile (din meniul principal) Fișier - Salvare ca pagină web. Ca de obicei, trebuie să specificați numele prezentării web în fereastra care se deschide. Ca urmare a conversiei prezentării, va fi creat un fișier cu numele și extensia specificate .htm și un folder cu același nume cu materiale suplimentare.
Dacă apelați acum prezentarea web din browser, puteți vedea rezultatul conversiei pe ecran.
În partea de jos a ecranului este creată o linie specială, unde se află butoanele pentru trecerea la diapozitive și butoanele pentru setarea diferiților parametri pentru vizualizarea prezentărilor.
Prezentarea poate fi vizualizată cu structura de diapozitive afișată. Însă dacă această informație nu prezintă interes, atunci câmpul de pe ecran rezervat pentru afișarea structurii poate fi eliminat (operația extinde/restrânge structura în linia de jos).
Folosind butonul Afișare magazine, puteți vizualiza diapozitivele pe ecran complet.
Crearea de hyperlinkuri
Într-o prezentare, puteți crea hyperlinkuri care leagă obiectele dintr-un diapozitiv, de exemplu, cu alte diapozitive. În acest fel, este posibilă crearea unei structuri hipermedia care să corespundă în mod firesc ideologiei Internetului. Să explicăm această tehnică cu un exemplu.
Să avem mai multe diapozitive pregătite pe tema florei lacului Baikal, compilate dintr-o colecție de fotografii. Să creăm un nou diapozitiv - un cuprins pentru colecție.
Dacă noul diapozitiv nu este primul din secvență, atunci trebuie să mergeți la modul de sortare diapozitive (din meniul principal folosind operațiunile Vizualizare - Sortare diapozitive) și să trageți noul diapozitiv la începutul colecției.
Plasați copii mici ale tuturor fotografiilor pe un nou diapozitiv. Cel mai simplu mod de a face acest lucru este cel mai simplu: copiați secvențial toate fotografiile din colecție pe un diapozitiv gol, reduceți dimensiunea lor și plasați-le, de exemplu, în două rânduri. Pozele pot fi decorate în continuare cu rame cu umbre. Puteți adăuga titlul prezentării dvs. în diapozitivul cuprins. Vizualizarea prezentării în modul Slide Sorter este prezentată mai jos:
Să trecem la modul normal de vizualizare a diapozitivelor (comenzi Vizualizare și apoi Normal). Pe slide-ul cuprins, selectați fotografia și executați comanda Insert - Hyperlink. În fereastra care se deschide, setați tranziția prin hyperlink - numărul diapozitivului cu o fotografie mare din care a fost copiat eșantionul mai mic pentru cuprins.
În mod similar, vom lega alte imagini din diapozitivul cuprins cu diapozitivele corespunzătoare cu fotografiile originale.
Dacă ne rulăm acum prezentarea, aceasta va funcționa ca o structură hipermedia: când faceți clic pe o fotografie mică, aceasta va merge la un diapozitiv cu o fotografie mai mare.
Rămâne să ne îmbunătățim puțin structura. Să adăugăm o săgeată la fiecare diapozitiv cu o fotografie în partea din stânga sus (AutoShape pe bara de instrumente Desen) și să facem un hyperlink din această săgeată care va merge la diapozitivul cuprins. Acum, mișcarea prin structura hipermedia pe care am creat-o va deveni „bidirecțională”: din cuprins puteți merge la diapozitive cu fotografii, iar din orice diapozitiv puteți reveni la cuprins.
După convertirea prezentării în format web, prima noastră pagină va arăta astfel:
Făcând clic pe o imagine din meniu, veți ajunge la un diapozitiv cu o fotografie mare, iar făcând clic pe săgeata (din partea stângă sus a diapozitivului) veți ajunge la pagina de cuprins a colecției.
După cum știți, totul măreț începe întotdeauna de la mic. Dacă sunteți interesat de răspunsul la întrebarea cum să creați un site web folosind un notepad, atunci probabil ați auzit undeva despre această posibilitate. Acest lucru este într-adevăr posibil. Dar merită menționat imediat că, cel mai probabil, nimeni nu va crea în prezent un site web interactiv modern și dinamic folosind un bloc de note, deoarece există programe speciale pentru aceasta care accelerează și simplifică foarte mult procesul de dezvoltare. Dar crearea unei pagini web cu drepturi depline este foarte posibilă.
Cum se creează un site web în notepadPentru început, aveți nevoie de puțină familiaritate cu teoria și termenii generali. Marea majoritate a paginilor site-ului web sunt documente text obișnuite care sunt concepute într-un mod special - limbaj de marcare hipertext, abreviat HTML. Unii oameni clasifică marcajul HTML ca un limbaj de programare, dar acest lucru nu este adevărat.
HTML este pur și simplu o modalitate de a standardiza marcarea documentelor, care este interpretată în mod unic de către browsere pentru a fi afișată pe ecranele computerului într-o formă ușor de utilizat. Instrumentul principal al limbajului HTML sunt elementele structurale speciale cu ajutorul cărora este întocmit documentul. Aceștia se numesc descriptori sau etichete.
În general, o etichetă este o construcție a formei
