În general, voi estima timpul pentru studiul de bază html ca 2-8 ore, restul este optional. Și, desigur, timpul de studiu depinde de interes. Recomand împărțirea lui în mai multe zile a câte 20-30 de minute fiecare.
Sunteți gata? Atunci să mergem!
NU avem nevoie de o conexiune la internet pentru a crea o pagină în html.
Vom avea nevoie
1) Alege editor de text. suficient pentru prima dată Blocnotes(în el avem nevoie doar de comanda Salvează ca)| Dacă doriți să începeți imediat programarea în editoare de text specializate, atunci acordați atenție: 1) pentru Windows NotePad++(descărcare sau ) intype(Descarca) 2) pentru MacȘi linux Diferența lor față de editorii de text obișnuiți este, în principal, că fac indentare automată, ! faceți posibilă resalvarea fișierului într-o codificare diferită (rețineți că îl veți întâlni în viitor), pictați etichete în culori diferite, cum ar fi codul din partea de jos a lecției. Într-un editor obișnuit, va fi o singură culoare. |
2) Orice browser de internet, cum ar fi Internet Explorer pentru Windows sau safari pentru Mac OS X și iOS. Da, poți și tu Mozilla, Google Chrome, Operă, YandexȘi Poștă browsere etc.
Să începem să creăm o pagină HTML
1) creați un folder pe desktop html. Vom face acest lucru astfel încât lecțiile să fie structurate și cuprinse într-un singur loc.2) Crea fișierul nostru într-un editor de text, cum ar fi Notepad. Mai departe Salvează ca.
Codificarea este mai bine să alegeți UTF-8, apoi să alegeți toate tipurile de fișiereși alegeți un nume de fișier cu .html la sfârșit, de exemplu index.html
Alegem ca director (dosar) unde să ne salvam html
Clic salva. Gata!
Întrebarea este adesea pusă despre ce extensia de fișier nu este vizibilă. Să o luăm în ordine
Posibilitatea de a vedea extensiile de fișiere poate ajuta la identificarea tipului unui fișier și vă permite să faceți manual (cu comanda redenumiți) modificați nu numai extensia, ci și tipul fișierului (de exemplu, de la txt la html)
| NU ar trebui să arate așa: fotografie, document text, joc asa ar trebui sa arate: foto.jpg; text document.txt; joc.exe Dar dacă numele fișierelor arată în continuare ca în prima opțiune (Fără, de exemplu, .txt ; jpg ; .exe la sfârșitul numelui fișierului), procedați în felul următor: Ne uităm la setările fișierelor și folderelor: Pentru Windows XP Deschideți orice folder - Instrumente (în partea de sus a panoului) - Opțiuni folder - Vizualizare - Ascundeți extensiile pentru fișierele înregistrate (debifați) - Aplicați Pentru Windows 7 Deschideți orice folder - Organizare - Opțiuni pentru fișiere și căutare - Vizualizare - Ascundeți extensiile pentru tipurile de fișiere înregistrate (debifați) - Aplicați Pentru MacOS Facem clic pe desktop - Finder - Preferințe (Setări) - Avansat (Avansat) - bifați caseta din Afișați toate extensiile de fișiere (Afișați extensiile tuturor fișierelor) - Aplicați |
3) lipiți în el întregul cod (împreună cu comentariile) de mai jos:
Titlul paginii mele
4) deschide fișierul. Puteți alege alt browser pentru a deschide acest fișier, pentru aceasta apăsăm butonul drept al mouse-ului pe fișierul nostru index.html - Pentru a deschide cuși selectați un browser din listă, de exemplu, Internet Explorer, Google Chrome, Mozilla, Yandex Browser etc.
Ca rezultat, prin deschiderea browserului de Internet, rezultatul index.html, Ar trebui să vedeți o pagină ca aceasta:
Poza 1.
Pe figura 1 vedem cum browser-ul a afișat pagina dvs. ca rezultat. Textul următoarelor elemente este evidențiat cu roșu:
Titlul paginii mele
Aceasta este prima mea pagină web!
În codul de mai jos puteți vedea minimul de bază al unui document html. Trebuie învățat și nu confundat pe alocuri prin deschiderea și închiderea etichetelor.
Etichetă cap selectează capul documentului. Conține elemente legate în principal de ajutorul Browser-ului în prelucrarea elementelor paginii dumneavoastră (titlu, cuvinte cheie, autor etc.) Mai exact, despre conținutul acestuia vom vorbi mai târziu.
Etichetă titlu reprezintă titlul paginii. Aceasta este singura etichetă conținută în cap Cea care este afișată pe pagină. Ceea ce introduceți după deschidere și înainte de eticheta de închidere va fi Titlul paginii dvs. de pe Internet
Etichetă corp reprezintă corpul paginii. Ce să scrieți după etichetele de deschidere și de închidere corpși va fi conținutul paginii dvs
Orice titlu
Doar text
Text într-un paragraf. Va începe pe o linie nouă și se va termina cu o etichetă de închidere.
Alt text
Aproape toate etichetele în HTML deschidere si inchidere(o excepție este, de exemplu, eticheta img, care înseamnă inserarea unei imagini).
Încă o dată, vă reamintesc că este important să nu uitați să scrieți etichete de închidere pentru toate celelalte tipuri de etichete, altfel Browserul nu va înțelege exact unde ați vrut să încheiați cutare sau cutare element. Ca mai jos:
Vreau să evidențiez textul îndrăzneț, și acesta cu caractere inclinate
Am uitat în mod intenționat eticheta de închidere b după cuvântul îngroșat. Drept urmare, browserul a afișat următoarele
Vreau să evidențiez textul îndrăzneț, și acesta cu caractere inclinate
După cum puteți vedea, textul până la sfârșit va fi aldin, iar cel care a fost menit să fie italic va fi atât aldin, cât și italic. Asa ca fii atent!
5) Dacă doriți să editați ceva în fișierul dvs index.html(iar acum este deschis implicit doar de browser), apoi apăsăm butonul drept al mouse-ului pe fișierul nostru index.html- alege Pentru a deschide cu iar din listă selectăm deja un editor de text, acesta va fi fie Blocnotes, sau alt editor de text pe care l-ați instalat.
În principiu, a explicat elementele de bază. Până acum, pagina html pare destul de simplă, dar în lecțiile următoare vă voi spune în detaliu despre acestea și despre alte elemente și despre scopul lor - vom insera imagini, vom face link-uri și multe altele)
Felicitări!
Este usor?)
Lectia 2
Creăm prima pagină html.
În această lecție, veți crea prima pagină web urmând instrucțiunile mele. Până acum, nu trebuie să te aprofundezi în ce fel de personaje de neînțeles va trebui să folosești. În acest tutorial creăm o pagină, iar în următoarele două tutoriale vom înțelege pe deplin fiecare personaj scris.
Primul lucru pe care îl facem este să creăm un folder pe desktop și să-i denumim Site. Toată creația noastră ulterioară va avea loc în acest folder.
Acum să lansăm Notepad++ pe care l-am instalat. (Dacă nu ați făcut deja acest lucru, atunci instrucțiunile de instalare). În mod implicit, programul ar trebui să fie în directorul /Program Files/Notepad++/ sau îl puteți rula prin Start. Deschideți programul și inserați următorul text în el:
<html>
<head>
<title>Primul meu site </title>
</head>
<body>
Salut! Aceasta este prima mea pagină web!
</body>
</html>
Majoritatea site-urilor Runet constau din pagini html scrise în codificare UTF-8. Pentru ca paginile noastre să fie afișate corect în browser, vom folosi și această codificare.
Acum trebuie să ne salvăm fișierul în format html.
Nu uitați că Notepad ++ este un editor de text, ceea ce înseamnă că în acest moment avem un fișier text obișnuit cu un set de caractere. Pentru ca browserul nostru să afișeze pagina de text pe care am creat-o ca pagină web, trebuie să o convertim într-un fișier html.
Pentru a face acest lucru, apăsați butonul „Fișier” din meniul de sus, apoi „Salvare ca”, selectați directorul (calea) în care va fi salvat fișierul, salvați-l în folderul pe care l-am creat: Desktop / Site /, apoi cel mai important , selectați tipul de fișier dorit, în cazul nostru este Hyper Text Markup Language (html).
Felicitări! Tocmai ați creat prima pagină web! Acum puteți merge la folderul „Site” și puteți rula fișierul creat. Pagina se va deschide cu un browser și veți vedea că în locul caracterelor de neînțeles pe care le-am introdus, browserul afișează informații destul de ușor de înțeles pe ecran.
Ori, sau mai bine zis, toate cele patru, pentru că multe elemente HTML apar diferit în diferite vizualizatoare și cel mai bine este să păstrați aceste diferențe sub control.
Pe lângă browser, vom avea nevoie de orice editor de text, de exemplu, Notepad de la Windows sau Notepad, dar Dreamweaver este ideal. Programul este necesar pentru a pregăti fișiere HTML, iar browserul este necesar pentru a vizualiza și controla rezultatul. Cu ajutorul acestor instrumente vom realiza un site WEB pe propriul calculator local, dupa care il vom plasa pe unul dintre serverele WWW de pe Internet, punand astfel paginile tale WEB disponibile intregii lumi.
Pregătirea pentru crearea unui site WEB
De exemplu, să pregătim pagini WEB ale unei anumite companii. Să-i spunem „Company SD”, să spunem că funcționează în domeniul sistemelor de control automat. Scopul site-ului WEB este de a spune lumii despre companie, domeniul său de activitate, pentru a găsi parteneri și clienți.
Fișierele site-ului nostru WEB au nevoie de un folder separat.
Creați un folder numit WEB pe orice hard disk al computerului dvs. Acum să lansăm programul Notepad și să ne apucăm de treabă.
Deschideți un program, de exemplu Notepad, făcând clic pe butonul Start din bara de activități și selectând Programs - General - Notepad din meniul care apare.
Puteți folosi orice alt editor de text. Dar în acest caz, ar trebui să salvați fișierul ca text simplu pentru a evita includerea semnelor de formatare de la terți în documentul WEB.
Mai întâi, să introducem principalele etichete care definesc structura oricărui document HTML. Amintiți-vă că în codul HTML este permisă utilizarea oricărui caz de caractere - superioare sau inferioare.
Primele etichete
Introduceți următoarele etichete principale de la tastatură, plasând oricare dintre ele, fără a număra eticheta de închidere, în cea mai nouă linie.
Pentru a introduce etichete asociate, puteți utiliza operațiuni de copiere și inserare prin clipboard-ul Windows cu următoarea adăugare a unei bare oblice /.
Amintiți-vă că primul Și în ultimul rând etichetele înseamnă începutul și, respectiv, sfârșitul documentului, element
… definește titlul paginii WEB, element … este corpul documentului, iar în elementÎntre deschidere
Amintiți-vă că titlul paginii WEB ar trebui să fie mic și să-și arate conținutul în cea mai mare măsură.
Următoarea noastră sarcină este să lipim în corpul documentului între etichete
… un mic text-bun venit pentru oaspeții paginii WEB.Introduceți o linie goală între etichete
Șiși introduceți următorul text în el:Bun venit pe pagina companiei SD! Aici veți afla despre activitățile noastre, despre produsele software ale companiei noastre și despre echipamentele pe care le producem.
Pentru fiecare pagină WEB puteți găsi culoarea de fundal și culoarea textului. Acest lucru se face folosind atributele bgcolor și text ale etichetei de deschidere.
. Există două opțiuni pentru a specifica o culoare ca valoare de atribut:- indicarea verbală a numelui culorii, de exemplu, alb (albă ca zăpada). Există șaisprezece astfel de nume în HTML;
- un număr în notație hexazecimală, de exemplu, „#ffffff” - alb pur, care arată cum se formează culoarea din culorile primare - roșiatic, verzui și albastru.
Colorarea primei pagini web
Desigur, indicarea verbală a culorii este mai confortabilă și mai ușor de înțeles. Pe de altă parte, desemnările numerice sunt mai puternice, deoarece vă permit să specificați de fapt oricare dintre cele 16.777.215 de culori, în timp ce desemnările verbale sunt limitate la doar șaisprezece culori.
Să enumerăm câteva nume de culori: negru (întunecat), gri (cenușiu), roșu (roșcat), verde (verzui), aqua (albastru).
Să folosim ca exemplu pentru fundalul paginii noastre WEB culoarea albastru (albastru), iar pentru text - gălbui (galben).
Lipiți în eticheta de deschidere
atributele bgcolor="blue" și text="yellow". Această etichetă ar trebui să arate astfel:
Pe lângă specificarea culorii, puteți folosi și o schiță pre-preparată pentru fundalul paginii WEB. Dar despre asta vom vorbi în viitor.
În fereastra programului Notepad, selectați comanda de meniu Fișier - Salvare (Fișier - Salvare). Pe ecran va apărea dialogul Salvare ca.
Deschideți folderul WEB creat anterior, în care trebuie salvate toate fișierele site-ului WEB.
În câmpul de introducere a numelui fișierului, introduceți other.html - așa vom denumi acest fișier.
Vă rugăm să rețineți: trebuie să specificați extensia numelui fișierului HTML pentru ca browserul să îl poată deschide. Puteți scrie și htm, dar acesta este deja un format învechit și nu este recomandat să îl utilizați.
Vezi rezultatul lucrării
Acum puteți vedea rezultatele muncii noastre.
Fără a închide, minimizați fereastra Notepad.
Deschideți folderul WEB în care ați salvat fișierul other.html folosind programul Windows Explorer și faceți dublu clic pe pictograma acestuia. Browserul implicit se va lansa, iar documentul other.html se va deschide în fereastra acestuia.
Vedeți, titlul ferestrei browser indică titlul documentului pe care l-am introdus în element
Poate că în browser dimensiunea fontului textului va fi mai mare sau mai mică decât în imagine. În acest caz, selectați comanda de meniu Vizualizare - Dimensiune font - Mediu (Vizualizare - Dimensiune text - Mediu) în browserul Internet Explorer pentru a seta dimensiunea medie a fontului.
Trebuie înțeles că diferite browsere pot afișa în mod diferit conținutul aceluiași fișier HTML. Prin urmare, atunci când dezvoltați pagini WEB, este mai bine să vizualizați întotdeauna rezultatul în toate browserele mai populare - Internet Explorer, Opera, Mozilla. În acest caz, vei fi convins că oaspetele site-ului tău WEB va vedea exact ce vrei să-i arăți.
Vizualizați fișierul generat într-un alt browser. În această etapă a lucrării, diferențele nu vor fi sesizabile.
Fără a închide, minimizați ferestrele browserului.
Pentru că în element
Dacă am introdus textul fără a-l împărți în paragrafe, atunci în browser este afișat ca primul paragraf și aliniat la stânga. Acum trebuie să dăm textului un aspect mai frumos.: HTML - Hypertext Markup Language (sau Hypertext Markup Language).
Deci haideți să-l cunoaștem mai bine.
Pentru a începe, creați un fișier pe computer cu orice nume și extensie.html (titlul trebuie să fie în engleză)- de exemplu index.html). Pentru a crea un astfel de fișier - creați un document text simplu ("Start" - "Toate programele" - "Accesorii" - "Notepad")și salvează ("Fișier" - "Salvare ca") oriunde introducând numele și extensia (Se întâmplă ca atunci când introduceți extensia, Notepad-o salvează în continuare ca fișier text, dar avem nevoie de un fișier web. Pentru a face acest lucru, înainte de a salva, selectați tipul de fișier - „Toate fișierele (*.*)”).
Aceasta nu este o condiție prealabilă (deoarece puteți schimba numele primei pagini în setările serverului), ci o regulă a bunului gust. Numele primei pagini este de preferință index (index.html), întrucât serverul, la accesarea acesteia, emite un fișier cu același nume - index.
Dacă este salvat corect, pictograma fișierului ar trebui să se schimbe în pictograma browserului (Internet Explorer în mod implicit).
Acum deschideți acest fișier cu notepad și copiați următorul cod acolo.
Aceasta este prima pagină web!
Salvați și deschideți prin browser.
Felicitări, tocmai ați creat prima pagină web.
Text „Aceasta este prima pagină web!” îl puteți schimba cu oricare altul, astfel - „Aceasta este prima mea pagină web!!!”. salvați, actualizați browserul, admirați rezultatul.
Dar pagina noastră nu are antet.
Trebuie să remediem acest lucru - vom modifica puțin codul sau, mai degrabă, îi vom adăuga „Șeful site-ului” folosind etichete
ȘiSalvați, actualizați, bucurați-vă. Acum pagina noastră are un antet.
Descrierea etichetelor.
Prima etichetă este (Această etichetă este asociată, adică eticheta de închidere necesar) - este folosit ca un container în interiorul căruia se află tot conținutul paginii (text, imagini etc.). Deși această etichetă ( Și) este opțională, dar utilizarea lui indică bunele maniere. Prin urmare, vă sfătuiesc să îl utilizați.
Următoarea etichetă - . Aceasta este, de asemenea, o etichetă de pereche (
Și). Această etichetă nu este afișată pe pagină (cu excepția titlului), dar este necesară pentru a specifica parametri suplimentari ai paginii - descrierea paginii (utilizată de motoarele de căutare), cuvinte cheie (utilizate de motoarele de căutare), stiluri, scripturi, titlu și multe altele .Etichetă
Și ultimul, în codul nostru, etichetați - . De asemenea, o etichetă de pereche (
Și), în interiorul căruia se află întreaga parte vizibilă a sitului, adică. texte, poze, link-uri, in general, informatii pe care doriti sa le plasati pe site.În lecția următoare, vom vorbi despre tipurile de etichete și despre regulile de scriere a acestora.
Fiecare webmaster începător ar trebui să știe cum se creează o pagină html, și se face foarte ușor și simplu. Pot să-ți spun cu încredere că după ce ai citit acest articol, vei face asta creați pagini html fara nicio dificultate.
Puteți scrie cod html în orice editor de text (chiar și în notepad), dar vă recomand să utilizați mai întâi un editor atât de minunat precum notepad++. Este foarte convenabil și ușor de utilizat. Îl puteți descărca de pe site-ul oficial https://notepad-plus-plus.org .
Principalul avantaj al acestui editor este că are evidențierea codului. Crede-mă, acest lucru este foarte convenabil, pentru că. se observă imediat unde se deschide eticheta și unde se închide.
Deschidem programul și după cum ați observat un nou fișier numit nou 1, a fost creat automat.
Etapele creării unei pagini html
Acum, dintr-un fișier nou, creăm document html in felul urmator:
1. Accesați meniul fișier și selectați elementul Salvează ca… sau apăsați tastele rapide ( Ctrl+Alt+S)
2. În fereastra care apare, selectați locația în care dorim să salvăm fișierul.
3. În câmp Nume de fișier scrie indexși alegeți tip fișier Fișier Hyper Text Markup Language (*html; *htm; *shtml; *shtm; *xhtml;*hta).
După ce a fost selectat tip fișier, la sfârșitul numelui fișierului este inserat automat
Închideți Notepad++ și mergeți la folderul specificat în care am salvat fișierul. Există un fișier creat index, cu extensia html și cu pictograma browser pe care ați instalat-o implicit. Când faceți dublu clic, fișierul se deschide în browser. Browserul meu implicit este opera, deci fișierul salvat arată astfel:
După ce am deschis fișierul în browser, nu vedem nimic deoarece fișierul nostru este gol, nu există o singură linie de cod html în el. Să remediem situația, să scriem câteva rânduri de cod în fișier. Pentru a face acest lucru, accesați folderul cu fișierul nostru, faceți clic dreapta pe el și selectați elementul din meniul care apare. .
Fișierul se va deschide în Notepad++. Acum să scriem următorul cod în fișier:
Salut Lume
Există și o altă modalitate de a salva un fișier, trebuie să faceți clic pe pictograma dischetă situată în bara de instrumente.
