Crearea unei pagini html în notepad: clarificare pentru manechin. Antet aliniere la centru

Sarcina 1: Crearea fișierelor HTML de bază

Pentru a crea fișierul HTML, procedați în felul următor:

    Creați un folder HTML, în care vom salva paginile Web create.

    Lansați programul standard Notepad.

    Introduceți în fereastra editorului cel mai simplu text al fișierului HTML:

Fișier HTML de antrenament

Programul cursurilor de marți

    Salvați fișierul ca RASP.HTM.

    Pentru a vizualiza pagina Web creată, descărcați browserul Microsoft Internet Explorer.

    Deschideți în meniul browserului Fişier(Fişier), Deschis(deschis), Vizualizare(Prezentare generală- Naviga) și găsiți fișierul RASP.HTM în folderul KURS și încărcați-l. Asigurați-vă că numele paginii Web (tutorial HTML) este afișat în bara de stare de sus a browserului.

Sarcina 2.Controlarea aspectului textului pe ecran

Informație.

Când se afișează documente HTML, browserele așează automat textul pe ecran, fără a lua luați în considerare rupturile de rând și spațiile consecutive care apar în fișier.

    Dacă este necesar, urmați p.p. 5-6 sarcini 1.

    Deschideți sursa originală a paginii Web - în meniul browserului Vedere(Vedere), Sursa (asHTML) se va deschide o fereastră cu programul standard Notepad, în care pagina dvs. Web este prezentată în comenzi HTML.

    Modificați textul din fișierul HTML plasând cuvintele „Program”, „cursuri”, „Marți” pe rânduri diferite:

Fișier HTML de antrenament

Programa

clase

marti

    Salvați modificările în fișierul RASP.HTM folosind comenzile Fişier(Fişier), Salva(Salva). Închide Notepad.

    Utilizați Microsoft Internet Explorer pentru a vizualiza pagina web recent preluată folosind tasta F5 sau folosind comenzile Vedere(Vedere), Actualizează (reîmprospăta). S-a schimbat imaginea textului de pe ecran?

Notă

În viitor, după ce ați făcut modificări în pagina Web, urmați întotdeauna pașii 4-5.

Sarcina 3. Etichete de întrerupere de rând și paragraf

Informație.

Există comenzi speciale care efectuează o întrerupere de linie și setează începutul unui nou paragraf. În plus, există o comandă care împiedică programul browser să modifice formatarea textului în orice fel și vă permite să reproduceți cu exactitate fragmentul specificat dintr-un fișier text pe ecran.

Etichetă de flux de rând
separă o linie de textul sau graficele ulterioare. eticheta de paragraf

De asemenea, separă linia, dar adaugă și o linie goală, care evidențiază vizual paragraful. Ambele etichete sunt singleton.

    Efectuați modificări textului fișierului HTML:

Fișier HTML de antrenament

Programa

clase

marti

    4. Salvați modificările în fișierul RASP.HTM.

    Utilizați Microsoft Internet Explorer pentru a vizualiza pagina Web recent primită. Cum s-a schimbat textul de pe ecran?

Sarcina 4. Selectarea fragmentelor de text

Informație.

Etichetele de selecție de text vă permit să controlați afișarea caracterelor și cuvintelor individuale. Există trei etichete de selecție de text:

… pentru a evidenția îndrăzneţ,

… pentru a evidenția cu caractere inclinate

… pentru a evidenția subliniere.

Fișier HTML de antrenament

Programa clase marti

2. Vizualizaţi pagina Web recent primită.

Este posibil să utilizați fonturi combinate:

Programa clase marti

Dar, în același timp, trebuie să vă amintiți următoarea regulă pentru scrierea etichetelor combinate:

<Тэг-1> <Тэг-2> … Eticheta-2>

intrare eronată

Sarcina 5: Utilizarea stilurilor de titlu

Informație.

Există două moduri de a controla dimensiunea textului afișat de browser:

    folosind stiluri de titlu,

    setarea dimensiunii documentului principal sau a mărimii fontului curent.

Există șase etichete de antet (H1 până la H6). Fiecare etichetă are un stil specific specificat în setările browserului. Stilul H1 este cel mai mare.

    Efectuați modificări în fișierul RASP.HTM:

Fișier HTML de antrenament

Programa

clase marti

    Vizualizați pagina web recent primită.

Sarcina 5. Setarea dimensiunii fontului curent.

Informație.

eticheta fontului vă permite să setați dimensiunea fontului curent în locuri individuale ale textului. Intervalul actual de setare a fontului este de la 1 la 7.

    Efectuați modificări în fișierul RASP.HTM:

Fișier HTML de antrenament

Programa

cursuri de marți

    Schimbați singur dimensiunea fontului pentru textul „clasa de marți” folosind eticheta .

    Modificați textul unui document HTML utilizând etichete de selecție de text și etichete de întrerupere de linie și paragraf.

Sarcina 6. Font și culoarea fontului

Informație.

Etichetă Oferă control asupra dimensiunii, stilului și culorii textului. Schimbarea fontului se face prin simpla adăugare la etichetă Atributul FACE. De exemplu, pentru a afișa text în font Arial, ați scrie .

Pentru a schimba culoarea fontului unei etichete atributul poate fi folosit COLOR="X".

În loc de X, trebuie să înlocuiți fie numele culorii (între ghilimele), fie valoarea sa hexazecimală. Când specificați o culoare cu un număr hexazecimal, puteți reprezenta această culoare descompusă în trei componente:

roșu (R), verde (G), albastru (B), fiecare având o valoare de la 0 la FF.

Exemple de înregistrare a culorilor în format RGB sunt prezentate în tabel:

tabelul 1

Culoare

Culoare

violet

Maro

portocale

turcoaz

    Efectuați modificări în fișierul RASP.HTM:

Fișier HTML de antrenament

Programa >

cursuri de marți

    Schimbați singur dimensiunea, culoarea, tipul, stilul de text al documentului.

Sarcina 7. Alinierea textului pe orizontală

Informație.

Etichetele HTML controlează alinierea orizontală a textului. Dacă nu specificați o metodă de aliniere, toate elementele din document vor fi aliniate la stânga și vor avea o margine din dreapta zimțată (vezi Figura 2).

Browserele moderne folosesc atributul de aliniere a textului ALIGN=, care este încorporat în etichetele de paragraf sau de titlu.

    Efectuați modificări în fișierul RASP.HTM:

Fișier HTML de antrenament

Programa>

cursuri de marți

Sarcina 8. Setarea culorilor de fundal și text

Informație.

Când afișează fundalul, textul, browserele folosesc culorile setate în mod implicit - acestea sunt setate de setările browserului. Aceste culori sunt setate la începutul fișierului HTML din etichetă . Introducerea culorii este similară cu culoarea fontului (a se vedea Tabelul 1, paragraful 12). Atributul BGCOLOR= specifică culoarea de fundal a paginii, TEXT= specifică culoarea textului pentru întreaga pagină, LINK= și VLINK= definesc culorile linkurilor nevizitate și respectiv vizualizate (ultimii doi parametri vor fi discutați mai târziu).

    Efectuați modificări în fișierul RASP.HTM:

Fișier HTML de antrenament

BGCOLOR="#FFFFCC" TEXT="#330066">

Programa>

cursuri de marți

Sarcina 9.

    Experimentați cu documentul creat. Pe măsură ce redimensionați fereastra, vedeți cum redă browserul textul cu întreruperi de linie forțate. Ce se întâmplă când fereastra se micșorează atât de mult încât nici măcar un singur cuvânt nu poate încăpea în ea?

    Creați-vă propriul document HTML. Să fie o scurtă poveste despre tine și despre hobby-urile tale.

Salutare dragi cititori ai blogului! Continuăm secțiunea „Crearea unui site de la zero”, și în special subiectul etichetelor ... Și astăzi vom lua în considerare etichetele care sunt prezente în orice pagină web - , și . Mai există o etichetă care ar trebui să fie în fiecare document HTML și despre care am scris deja într-unul dintre articolele anterioare - așa că nu o vom atinge.

În articolele anterioare ale rubricii, am scris despre crearea unui fișier gol în format html. De fapt, a fost folosit în articolul pro (acolo au fost aplicate etichetele de titlu). Acum vom edita direct acest fișier cu descrieri complete.

Și să începem articolul cu editarea fișierului creat. Personal, l-am numit index.html, dar numele poate fi orice. Deschide-l cu orice editor de text (este mai bine să folosești Notepad++, deoarece are evidențierea codului și alte gadget-uri utile). Și adăugați imediat etichete , și exact în ordinea în care sunt scrise. Nu uitați să le închideți așa cum se arată în captură de ecran. Documentul va arăta astfel:

Acum luați în considerare sensul fiecărei etichete separat. Nu e de mirare că sunt în toată lumea. document HTML.

Funcții de etichetă

Deci eticheta este o recipient(). În interiorul acestuia se află tot conținutul vizibil și invizibil al paginii web (inclusiv etichetele și ). Etichetă de deschidere vine imediat după declarația Doctype și închiderea se află la sfârșitul documentului. Astfel, îi explică browserului unde să înceapă procesarea documentului și unde să-l termine.

Teoretic, el însuși poate înțelege ce și cum. Dupa toate acestea ? Acesta este un traducător în limbaj HTML și este puțin probabil ca acesta să înceapă procesarea de la mijlocul documentului și să-l termine înainte de a ajunge la sfârșit. Întrebarea, desigur, este discutabilă, dar mereu m-am gândit (și acum nu renunț la părerea mea) că scrierea acestei etichete este obligatorie.

Chiar și având în vedere că funcția acestei etichete este doar în delimitarea conţinutului, are propriile atribute (care acum fie nu sunt folosite deloc, fie sunt folosite extrem de rar). Surse diferite indică atribute care sunt diferite unele de altele, așa că nu îndrăznesc să propun versiunea corectă.

Singurul lucru pe care îl pot spune cu siguranță este că majoritatea atributelor nu sunt acceptate de HTML 4.01 sau sunt nedorite. Îți dau totuși un exemplu. - tooltip oriunde în document. De exemplu, când treceți mouse-ul peste o imagine, este posibil să vedeți un text pop-up. De asemenea, în cazul acestei etichete:

Și iată ce veți vedea când treceți cu mouse-ul peste un document cu acest conținut:

Este de preferat să folosiți atributul title nu în etichetă , dar în orice alte zone specifice ale paginii. În primul rând, este convenabil, iar în al doilea rând, motoarele de căutare vă vor trata mai bine site-ul. Această etichetă nu afectează direct optimizarea resurselor. Mergem mai departe.

Funcția de etichetă

Și următorul în rând este etichetă . Conține toate informațiile tehnice despre pagină, care servesc pentru a ajuta browserul și motoarele de căutare. Eticheta este o etichetă de container și urmează imediat după , doar ca spre deosebire de ultimul, eticheta de inchidere nu apare la sfârșitul documentului, ci înaintea etichetei de deschidere .

În ce informații pot fi găsite ? Dar nici unul. Totul din această etichetă este accesibil doar ochiului uman prin vizualizarea codului sursă al paginii. Tot conținutul din această etichetă este pentru motoare de căutare și browsere. Singurul lucru pe care îl puteți vedea cumva este eticheta , care este responsabil pentru titlul ferestrei paginii web. Iată un exemplu:</p> <p><img src='https://i1.wp.com/monetavinternete.ru/wp-content/uploads/2013/01/Title-v-tege-head.png' align="center" width="100%" loading=lazy loading=lazy></p> <p>Textul de după pictogramă este conținutul etichetei <title>. Acum să ne uităm la conținut. <head>, pe care nu o putem vedea, dar care este o parte foarte importantă <b>crearea si promovarea site-ului.</b>În primul rând, aceasta este linia</p><p> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </p><p>Aceasta este metaeticheta pentru <b>tipul de conținut al paginii</b>(Tipul de conținut). În acest caz, acesta este codul html în codificare UTF-8 (content="text/html; charset=UTF-8"). Urmează eticheta de titlu descrisă mai sus. Apoi vin rândurile care încep cu eticheta <link>. Indică o legătură către un document extern. De exemplu, linia</p><p> <link href="http://сайт/.../style.css" rel="stylesheet" media="screen" type="text/css" /> </p><p>indică faptul că este conectat fișierul (rel="stylesheet") cu (type="text/css"), care se află la o astfel de adresă (pentru a reduce lungimea liniei, am înlocuit jumătate din adresă cu puncte) . După procesarea acestui șir de către browser, acesta va determina de unde să obțineți <b>foi de stil în cascadă</b>.</p> <p>În general, în eticheta head se află o mulțime de informații despre care se poate vorbi la nesfârșit. Ultimul lucru care merită remarcat (în special în cazul ) este prezența etichetelor de descriere, a cuvintelor cheie și a etichetelor canonice. eu folosesc <b>plugin All in One SEO Pack</b>, deci sunt prezente în interior <head>.</p> <p>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 printr-un bloc de note, atunci trebuie să fi 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 interactiv modern și dinamic printr-un bloc de note, deoarece există programe speciale pentru aceasta care accelerează și simplifică foarte mult procesul de dezvoltare. Dar este foarte posibil să creați o pagină web cu drepturi depline.</p><b>Cum se creează un site web în notepad</b><br>Pentru început, este necesară 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 - limbajul de marcare hipertext, prescurtat ca HTML. Unii clasifică marcajul HTML ca limbaj de programare, dar acest lucru nu este adevărat. <p>HTML este doar 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. Se numesc descriptori sau etichete.</p><p>În general, o etichetă este o construcție a formei <table>Deci eticheta începe cu< после которого следует название тега table и вся конструкция завершается знаком >. Etichetele vin în perechi, cum ar fi textul îngroșat <b>și</b>și neîmperecheat ca o linie nouă <br>. În cazul utilizării etichetelor împerecheate, acesta trebuie utilizat ca etichetă de deschidere <b>, și închidere</b>. Eticheta de închidere este un descriptor cu o oblică /.</p><p>Luați în considerare principalele tipuri de etichete și scopul lor.</p><ul><li><span><i>Element <b><!DOCTYPE html> </b>. </i> Setat chiar la începutul paginii și servește pentru a spune browserului cum să interpreteze acest document. Este opțional, dar foarte de dorit pe pagină pentru a evita eventualele probleme cu afișarea acesteia. <br></span></li><li><span><i>Etichetă <b><html> </b>. </i> Este o etichetă de pereche și constă din două părți <html>și</html>. Fiecare pagină de pe site începe cu această etichetă și se termină cu ea. <br></span></li><li><span><i>Etichetă <b><head> </b>. </i> Este, de asemenea, o etichetă de pereche și constă din două părți <head>și</head>. Această etichetă conține diverse informații importante despre pagină: titlul acesteia, link-uri către stilurile de design utilizate, scripturi incluse, metadate speciale. <br></span></li><li><span><i>Etichetă <b><title> </b>. </i> <title>șiși situat în interiorul etichetei . Această etichetă definește titlul paginii cu care va fi vizibilă în browser.

  • Etichetă . Este o etichetă de pereche, constă din două părți șiși urmează eticheta Pe pagina. Este în eticheta <body> care conține toate informațiile care sunt afișate pe pagina din browser.
  • Etichetă . Este singur. Folosit pentru a indica o întrerupere de linie într-un document.
  • Etichetă . Se referă la etichete pereche, este scris într-o formă ușor diferită de alte etichete și este folosit pentru a crea link-uri. Este un element esențial al întregului concept al limbajului HTML, precum și al Internetului în ansamblu.
  • Etichetă

    . Se referă la etichete pereche și constă din două părți. Cu ajutorul lui, se întocmește un paragraf text.

  • Etichete

    ,

    ,

    ,

    ,
    ,
    . Acestea aparțin etichetelor pereche, deoarece sunt formate din două etichete, de exemplu

    și

    . Aceste etichete servesc la crearea a șase nivele de subtitluri și, în același timp, arată importanța textului conținut în ele în raport cu întregul document.

  • Etichetă . Este, de asemenea, o etichetă pereche, constând din două părți șiși setează stilul fontului la aldine.
    • În total, sunt aproximativ o sută de etichete, dar cele zece luate în considerare sunt deja suficiente pentru a proiecta cea mai simplă pagină a site-ului într-un caiet. Etichete de bază pentru documente , , , <body>distribuite într-o ordine strictă. În interiorul etichetei <body>restul descriptorilor pot fi în ordine diferite în cadrul standardelor limbajului HTML. Cel mai simplu mod de a înțelege acest lucru este prin crearea unei pagini web simple. <ol><li><span>Lansați Notepad și în prima linie a acestuia setați elementul<!DOCTYPE html>, care spune browserului cum să interpreteze documentul. <p> <!DOCTYPE html></p></span></li><li><span>Faceți o nouă linie și adăugați o etichetă de pereche <html>. Traduceți eticheta de închidere</html> două linii mai jos. <p> <!DOCTYPE html><br><html></p></span></li><li><span>Adăugați o etichetă de pereche <head>în linie între etichete <html>și traduceți eticheta de închidere</head> două linii mai jos. <p> <!DOCTYPE html><br><html><br><head></p><p></head><br></html></p></span></li><li><span>On line între etichete <head>și</head> scrie o etichetă pereche <title>într-o singură linie.






  • Introduceți titlul paginii dvs. web între etichete și. De exemplu, așa.




    Prima mea pagină de site

  • Poziționați cursorul pe linia de după eticheta de închidereși faceți un avans de linie. Introduceți o etichetă de pereche în linia goală care apare .




    Prima mea pagină de site


  • Faceți o traducere dublă între etichetele din interior și. În rândul care apare, introduceți eticheta de titlu asociată

    . Tastați în interiorul etichetei

    subtitrarea paginii.




    Prima mea pagină de site


    Despre mine



  • După eticheta de închidere a titluluifaceți o întrerupere de linie și setați etichetele de paragraf asociate pe noua linie. Introduceți text între ele. De exemplu, da.




    Prima mea pagină de site


    Despre mine


    Numele meu este Ivanov Ivan. Îmi creez site-ul.



  • Includeți numele și prenumele într-o etichetă pereche pentru a le face îndrăznețe.




    Prima mea pagină de site


    Despre mine


    Numele meu este Ivanov Ivan. Îmi creez site-ul.



  • După închiderea etichetei de paragraf

    efectuați un avans de linie și introduceți eticheta de pereche pe noua linie

    . Introduceți ceva text între etichete.




    Prima mea pagină de site


    Despre mine


    Numele meu este Ivanov Ivan. Îmi creez site-ul.


    Progresul meu



  • După eticheta de subtitrare de închiderefaceți din nou o întrerupere de linie, introduceți eticheta de paragraf asociată și scrieți text arbitrar între aceste etichete.




    Prima mea pagină de site


    Despre mine


    Numele meu este Ivanov Ivan. Îmi creez site-ul.


    Progresul meu




  • Dintre etichetele enumerate în articol, două au rămas neexplorate - line feed
    și cea mai importantă etichetă de construire a linkurilor     . Să le aplicăm. Înainte de ultima etichetă de închidere, introduceți un descriptor
    , și între
    și

    tip construcție. Ar trebui să obțineți următoarele.




    Prima mea pagină de site


    Despre mine


    Numele meu este Ivanov Ivan. Îmi creez site-ul.


    Progresul meu


    Sintaxa de bază a HTML a fost stăpânită și prima pagină a viitorului site a fost creată.
    În procesul de instruire au fost utilizate materialele site-ului



  • Între ghilimele dintr-o etichetă introduceți adresa paginii la care veți trimite linkul. Înainte de etichetare puteți introduce cuvântul Link și între etichete și introduceți textul care va fi afișat pe pagină.




    Prima mea pagină de site


    Despre mine


    Numele meu este Ivanov Ivan. Îmi creez site-ul.


    Progresul meu


    Sintaxa de bază a HTML a fost stăpânită și prima pagină a viitorului site a fost creată.
    În procesul de instruire au fost utilizate materialele site-ului

    Legătură: site-ul



  • Pe aceasta se poate finaliza crearea celei mai simple pagini pentru site. În principiu, ar fi putut fi finalizat și în pasul 9, dar dacă ești serios să înveți limbajul HTML, atunci practica suplimentară nu va fi de prisos. Salvați pagina cu extensia *.html și o puteți deschide în orice browser pentru a vedea rezultatele muncii dvs. Dacă totul este făcut corect, atunci ar trebui să vedeți ceva de genul următor.
    • Dacă, după ce ați citit acest articol, hotărârea dvs. de a crea un site web nu s-a epuizat, atunci asigurați-vă că vă familiarizați cu sintaxa completă a limbajului HTML și, de asemenea, învățați cum să utilizați stilurile în cascadă CSS pentru designul paginii.

    Dezvoltarea de site-uri web folosind limbajul de marcare hipertext HTML

    clasa a 8-a

    Lectia 1 Structura paginii web.

    Conceptul site-ului web

    Informații pe World Wide Web
    stocate sub formă de site-uri web.
    Site-ul web este similar ca structură cu
    o revistă pe o temă sau
    problemă. Cum este alcătuită o revistă
    pagini tipărite, iar site-ul Web constă
    din paginile web ale computerului.
    Paginile web sunt legate prin hyperlinkuri.

    Tipuri de site-uri web

    oficial (guvern,
    Duma, școală...)
    Comercial
    Personal

    Avantajele paginilor web:

    Volum mic de informații
    ("plamani")
    Potrivit pentru vizionare în diferite
    OS.
    Dinamic.
    Interactiv.

    Pași de creare a site-ului web:

    1.
    2.
    3.
    Creați site-ul local
    calculator.
    test (verificare
    funcționare corectă).
    Postează online -
    alegeți un server de găzduire
    (plătit sau gratuit).

    Programe pentru crearea unui site:

    1) cel mai simplu editor de text (fără
    formatarea textului):
    Caiet
    2) browser pentru a vizualiza pagini:
    Internet Explorer
    3) Program de procesare a imaginii:
    photoshop

    Editori vizuali web

    Construirea unui site web în HTML este foarte
    laborios, deosebit
    cunoştinţe.
    Există editori web vizuali
    (programe) pentru crearea de site-uri web.
    Lucrați pe principiul WYSIWYG
    (ceea ce vezi este ceea ce primești).

    Structura paginii web

    10. Etichete

    Aspectul paginii Web este stabilit de administratori
    comenzi - etichete, care sunt
    paranteze unghiulare< >
    Etichetele pot fi simple (nerepetate) sau
    pereche (containere): înainte de închidere
    eticheta containerului este scrisă cu o bară oblică (/)

    Etichetele sunt scrise cu litere engleze (majuscule,
    litere mici).

    11. Structura paginii web

    Întregul cod HTML al paginii
    plasat în interiorul principal
    container:
    .
    Pagina web este împărțită în
    2 părți logice:
    titlu (HEAD)
    continut (corpul).

    12. Titlul paginii web

    Titlul paginii web este împachetat într-un container.
    Conține titlul documentului și informații de ajutor despre pagină
    (de exemplu, tipul de codificare) pe care browser-ul îl folosește pentru acesta
    afișare corectă.
    Titlul paginii web este conținut în container<ТITLE> și
    afișat în linia de sus a ferestrei browserului când este vizualizat
    pagini.

    <ТITLЕ>Calculator

    13. Scrierea unui șablon de pagină web



    <ТITLЕ>Calculator

    14. Conținutul principal al paginii web

    Conținutul principal al paginii este plasat în
    recipient .
    Poate conține: text, tabele, rulare
    șiruri, imagini, link-uri, fișiere de sunet...
    Să punem textul „Totul despre computer” pe pagină:
    Totul despre computer

    15. Șablon de pagină web



    <ТITLЕ>Calculator


    Totul despre computer

    16.

    17. Cum să salvați o pagină web

    1. Creați un folder special pentru site și
    salvați toate fișierele site-ului în acest folder.
    2. Salvați pagina web ca fișier cu
    numită index.html este pagina de titlu
    site (încărcat prima dată în browser)
    Extensii de fișiere de pagină web - .htm
    sau.html

    18. Ne creăm site-ul web….

    Este necesar să se facă distincția între numele fișierului index.html - sub
    pe care o pagină Web este stocată într-un fișier
    sistem și numele real al paginii Web
    „Computer” - este afișat în linia de sus
    ferestrele browserului și analizate mai întâi
    motoare de căutare.
    Numele paginii Web trebuie să fie la maximum
    gradul de relevanță față de conținutul său.
    1. Introduceți codul HTML pentru pagina Web în Notepad.
    2. Salvați fișierul ca index.html într-un folder
    site-ul. Selectați tipul de fișier - „Toate fișierele”.
    3. Deschideți acest fișier într-un browser pentru vizualizare.

    19.

    20. LECȚIA #2

    21. Lecția 2: Formatarea textului pe o pagină web

    22. Formatarea textului

    Deși pagina nu este prea atractivă: tipărire mici și text negru
    fundal alb. Dar cu ajutorul etichetelor, puteți decora textul.
    1. Titluri: etichete de la<Н1>(cel mai mare) să<Н6>(cel mai mic).
    <Н1>Totul despre computer
    2. Font (FONT). Unele etichete au atribute - nume de proprietate, mai
    ia anumite valori.
    FONT face="Arial" - font face
    dimensiune=4
    - marimea
    color="red" - culoare
    3. Aliniere (ALIGN). Textul este de obicei aliniat la stânga
    pagină, totuși, se obișnuiește să se plaseze titlul în centru.
    ALIGN="stânga",
    ALIGN="dreapta",
    <Н1 ALIGN="center">Totul despre computer
    ALIGN="centru"

    23. Culoarea fontului

    Valoarea atributului COLOR poate fi setată în 2 moduri:
    a) numele culorii (de exemplu, „roșu”, „verde”, „albastru” și așa mai departe),
    b) valoarea sa RGB hexazecimală „#RRGGBB”, unde
    primele două cifre hexazecimale stabilesc intensitatea
    roșu (roșu), următoarele două sunt intensitatea verde (verde) și
    ultimele două sunt intensitatea culorilor albastre (albastre).
    Intensitatea minimă a culorii este specificată în hexazecimal
    numărul 00, iar maximul este FF. Culoare albastră = „#0000FF”.
    Astfel, puteți seta culoarea albastră a titlului cu eticheta FONT cu
    Atribut COLOR:
    <Н1 ALIGN="center">Totul despre computer

    24.

    25. Formatarea textului

    4. Linia orizontală se va separa
    titlu din restul conținutului
    pagini cu o singură etichetă
    .
    5. Paragrafe:<Р>. Când este vizualizat în
    paragrafele sunt separate unele de altele în browser
    alte intervale. Pentru fiecare paragraf
    puteți seta un anumit tip
    aliniere.

    26. Lucrări practice 3.8 Site de instruire „Computer”

    Formatați textul inițial
    pagini:
    1) Creați și aliniați 2 paragrafe (sarcina 3)
    2) Evidențiați titlul paginii cu culoare și
    separați-l cu o bară orizontală
    (sarcina 4)

    27.

    28. LECȚIA 3

    29. Lecția 3: Inserarea imaginilor în pagini web

    30. Inserați imagini

    Paginile web pot conține fișiere grafice de 3 formate -
    GIF, JPG și PNG. Dacă imaginea este salvată într-un format diferit, atunci
    trebuie mai întâi convertit într-una dintre acestea
    formate.
    Eticheta este folosită pentru a insera o imagine. cu atribut
    SRC, care indică unde este stocat fișierul
    computer local sau pe Internet.
    1) poza pe computerul local în folderul cu site-ul:

    2) imaginea se află într-un alt folder de pe computerul local:

    3) imaginea se află pe un server la distanță de pe Internet:

    31. Text explicativ. Locația figurii în text.

    Ilustrațiile de pe paginile Web au devenit esențiale
    element de design. Cu toate acestea, utilizatorii pentru a
    economisiți timp, uneori, dezactivați descărcările din browser
    imagini grafice și texte numai pentru citire.
    Prin urmare, pentru a nu pierde sensul paginii, în loc să desenăm
    textul explicativ ar trebui să fie afișat cu atributul ALT

    Poziția figurii în text - definește atributul ALIGN
    etichetă : THOR, MIJLOC, JOS, STÂNGA, DREAPTA.
    ALIGN="dreapta">

    32. Vedere a șantierului finalizat

    33. Codul paginii site-ului web


    Calculator


    Totul despre computer




    Pe acest site puteți obține diverse informații despre
    computer, software-ul acestuia și prețurile pentru computer
    accesorii.


    Dicționarul terminologic vă va introduce în calculator
    termeni și puteți completa și un chestionar.



    34. Lecția 4

    35. Lucrare de testare nr. 3

    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    Ce este un site web?
    Tipuri de site.
    Cum sunt combinate paginile web în site-uri web?
    Ce sunt etichetele? container de etichete? Scrieți recipientul principal
    pagini web.
    Care este structura logică a unei pagini web?
    Listați 5 etichete de formatare a paginii.
    Ce este un atribut de etichetă?
    Care sunt modalitățile de a seta culorile pe o pagină web?
    Ce etichete sunt folosite pentru a introduce un titlu? Formatare
    font? Introduceți un paragraf?
    Ce etichetă și atributele sale sunt folosite pentru a insera imagini?

    36. Lecția 4. Hyperlink-uri pe pagini Web

    37.

    Hyperlink-urile vă permit să descărcați
    browser alte pagini web legate
    de la precedenta.
    Un hyperlink este format din 2 părți: adresa
    și un indicator de referință.
    Hyperlink este setat la universal
    etichetă cu atributul HREF (he
    specifică ce fișier este stocat
    pagina web dorită):
    indicator de legătură

    38. Tipuri de hyperlinkuri

    1) intern:
    Indicator
    link-uri
    2) extern:
    filename.html"> Link Pointer

    39. Indicatori de hyperlink

    Indicator - parte vizibilă
    hyperlinkuri: text sau imagine

    40. Adresă o parte din hyperlinkuri

    Accesați alte pagini web:
    indicator de legătură
    Deschide imaginea în browser:
    Imagine
    Ascultați sunetul (lansând browserul încorporat
    jucător):
    Sunet
    Salvați fișierul (lansează browserul încorporat
    manager de descărcare a fișierelor):
    Descărcare fișier

    41. Hyperlink prin e-mail

    Acest tip de hyperlink este
    recipient special


    ”>E-mailul nostru

    42. Vedere a paginii site-ului finalizat

    43. Codul paginii site-ului web


    Calculator


    Totul despre computer




    Pe acest site puteți obține diverse informații despre computer, software-ul acestuia
    furnizare și prețuri pentru componente de calculator.


    Dicționarul terminologic vă va face cunoștință cu termenii informatici, la fel ca și dvs
    puteti completa formularul.


    [Programe]  
    [Dicționar]  
    [Accesorii] 
    [Chestionar]



    ">E-mail:


    44. Lecția 5

    45. Lecția 5: Liste pe pagini Web

    46. ​​​​Tipuri de liste

    Numerotat
    Etichetat
    Liste de termeni (ca într-un dicționar)
    Liste imbricate

    47. Lista numerotata

    Lista - într-un container
    Element din listă - etichetă

  • Atributul TYPE este tipul de numerotare (araba
    numere; I - Roman; a - latină
    litere mici)

    1. Programe de sistem
    2. Programe de aplicație
    3. Sisteme de programare

    48. Lista cu marcatori

    Lista - într-un container
    Element din listă - etichetă

  • Atributul TYPE este tipul de marcatori („discul” este un disc,
    „pătrat” - pătrat, „cerc” - cerc)

    • Editori de text
    • Editor grafic
    • Foi de calcul
    • Sisteme de management al bazelor de date

    49. Lista termenilor

    Lista - într-un container

    Element din listă - etichetă

    Termenul se scrie mai întâi, apoi
    definiția sa (ca într-un dicționar)

    50. Lecția 6

    51. Lecția 6: Formulare interactive pe pagini web

    52. Conceptul de formă interactivă

    Pentru a comunica cu vizitatorii site-ului
    creatorii pe pagina web
    forme interactive.
    Formele conțin diverse elemente
    controale:
    câmpuri de text
    liste derulante
    steaguri
    comutatoare...

    53. Câmp text

    recipientul principal

    Câmp text - pentru introducerea textului de la tastatură: etichetă
    cu atribute:
    TYPE="text" – tip de conținut (text)
    NAME="____" – numele câmpului
    SIZE="40" – lungimea câmpului de introducere (în caractere)

    - separator de linii (mutați cursorul la un nou
    şir)

    54. Comutatoare (butoane radio)

    Buton rotund pentru a selecta unul dintre mai multe
    variante de raspuns:
    TYPE="radio"
    Toți membrii acestui grup trebuie să aibă
    același nume: NAME="grup"
    Atributele VALUE conțin opțiuni
    răspunsuri: VALUE="student"

    55. Steaguri

    Casetă pătrată pentru selectarea mai multor răspunsuri din
    optiuni sugerate:
    TYPE="caseta de selectare"
    Fiecare element al acestui grup trebuie să aibă propriul nume:
    NAME="box1", NAME="box2",
    …..
    Atributele VALUE conțin opțiuni pentru alegerea răspunsurilor:
    VALUE=„WWW”, VALOARE=„e-mail”, ….
    Fiecare VALOARE are propriul răspuns.
    www

    56. Casete cu listă

    Pentru a crea o listă derulantă
    utilizați recipient

    În ea, fiecare element al listei
    dat prin etichetă

    • ARTICOLE SIMILARE