…

,

,

,
, ,

Eroare

Eroare

Privilno

Conform standardului

Folosirea greșită a listelor

Etichetele OL și UL pot fi folosite pentru a afișa elementele din listă într-o varietate de moduri. Veți primi, de asemenea, o mulțime de beneficii suplimentare. Etichetele de listă sunt foarte utile în formatarea informațiilor, astfel încât acestea să fie afișate corect. Vă recomand să evitați să folosiți ghilimele atunci când creați liste. Motoarele de căutare favorizează și utilizarea listelor, deoarece ajută la structurarea informațiilor din pagină. Folosiți etichete standard în loc de hack-uri.

Utilizarea stilurilor în cod

Probabil ați auzit deja că folosirea stilurilor în cod este proastă. Te-ai întrebat vreodată de ce este așa? Motivul este că CSS și HTML semantic sunt concepute special pentru a separa conținutul de designul său. Acest model oferă o flexibilitate mult mai mare și ușurință în lucrul cu documentele.

Eroare

Textul tău minunat

Ignorarea etichetelor de titlu

Etichetele de titlu sunt concepute pentru a separa titlurile într-o secțiune separată pe o pagină. Standardul presupune utilizarea etichetelor de la

la

. Designul și aranjarea textului în ele pot fi orice, dar lăsați documentul să fie structurat corect!

Eroare Minunatul tău titlu

Textul articolului dvs.

Privilno

Minunatul tău titlu

Textul articolului dvs.

Utilizarea incorectă a etichetei FORM

Cu toții facem adesea greșeli când creăm formulare și tabele în HTML. Amintiți-vă că tabelul trebuie creat în interiorul formularului!

Eroare

...

Privilno
...

Nu se utilizează atributul ALT

Când lucrați cu imagini, trebuie să utilizați atributul ALT. Acest lucru este necesar pentru ca utilizatorii să poată determina ce ar trebui să fie în locul imaginii, chiar dacă folosesc o conexiune foarte lentă. Această valoare ar trebui să descrie esența imaginii utilizate. Nu utilizați niciodată alt="image". Dacă imaginea îndeplinește funcții pur decorative, atunci utilizați alt="**".

Eroare Privilno

Etichete incorecte pentru aldine sau cursive

În ciuda faptului că Şi În cele mai multe cazuri, își fac bine treaba folosind stiluri pentru a formata textul permite o flexibilitate mult mai mare de proiectare. Dacă eticheta ar trebui să sublinieze pur și simplu sensul unei anumite părți a textului, atunci folosiți etichete Şi .

Utilizarea inutilă a întreruperilor de linie

Etichetă
poate fi folosit o dată pe rând pentru a face următoarea propoziție să înceapă pe următoarea linie. Mulți oameni folosesc această etichetă pentru a crea spațiu între elemente. Această utilizare nu respectă standardele.

Eroare Primul paragraf.


Continuarea textului. Privilno

Primul paragraf.

Continuarea textului.

Etichete: HTML, erori

AGENȚIA FEDERALĂ PENTRU EDUCAȚIE Universitatea Tehnologică de Stat din Belgorod numită după. V. G. Şuhova

S.P. Gavrilovskaya, R.A. Myasoedov, A.I. Rybakova

TEHNOLOGIA INTERNET

Instrucțiuni pentru efectuarea sarcinilor de calcul și grafice

pentru studenții economici

Belgorod

Lucrare de laborator Nr. 1 Structura unui document HTML.
Formatarea unui document HTML............................................................. ..................... ......
Lucrări de laborator nr. 2 Listele sunt simple și imbricate.
Crearea tabelelor HTML.................................................. ..........................................
Lucrare de laborator Nr. 3 Crearea de hyperlinkuri.
Lucrul cu grafica în documente HTML.................................................. ........
Lucrări de laborator Nr. 4 Tehnologia CSS.
Design site web .................................................................. ....................
Lucrări de laborator Nr. 5 Crearea interactivă
Documente HTML............................................................. ... ...............................

LUCRARE DE LABORATOR Nr.1 ​​STRUCTURA UNUI DOCUMENT HTML.

FORMATAREA UNUI DOCUMENT HTML

Scopul muncii: crearea și testarea unui fișier HTML. Conceptul de containere, etichete și elemente pereche și nepereche.

HyperText Markup Language (HTML) este un limbaj standard

conceput pentru crearea de documente hipertext în mediul WEB. Documentele HTML pot fi vizualizate de diferite tipuri de browsere WEB. Când un document este creat folosind HTML, un browser WEB poate interpreta HTML pentru a evidenția diferitele elemente ale documentului și pentru a le procesa mai întâi. Utilizarea HTML permite formatarea documentelor astfel încât să poată fi prezentate folosind fonturi, linii și alte elemente grafice pe orice sistem care le vizualizează.

Documentele HTML pot fi create folosind orice editor de text sau editori și convertoare HTML specializate. Documentele HTML sunt postate pe site-urile Web.

Un site web este un folder special care conține fișiere care conțin informații text despre un subiect în format HTML, precum și informații sub formă de desene, grafice, fotografii, imagini animate și efecte sonore. Există două tipuri de site-uri web:

Creat pe serverul web al furnizorului de servicii de internet. Creat pe un intranet ca site-uri Web de grup.

Secvența creării proiectului

Procesul de creare a unui proiect constă din mai multe etape.

În prima etapă, înainte de a începe să creați un proiect, ar trebui să vă decideți asupra scopului său funcțional și asupra focalizării tematice a materialului informativ.

În a doua etapă, subiectul general este de obicei descompus în subsecțiuni tematice și articole individuale cu identificarea conexiunilor dintre ele. Rezultatul acestei descompunere este crearea unei structuri de proiect.

Structura documentului HTML

Documentele HTML pot avea structuri diferite care conțin elemente diferite, dar toate trebuie să conțină două elemente obligatorii:

Secțiunea antetului paginii este cap.

Corpul documentului este body .

Secțiunea antet servește pentru a descrie proprietățile generale ale paginii, cum ar fi titlul (numele) paginii, care va fi afișat în bara de nume a ferestrei browserului, meta instrucțiuni și descrieri ale foilor de stil. meta – instrucțiunile sunt folosite pentru a seta parametrii care sunt necesari pentru motoarele de căutare.

În HTML există un singur concept - acesta este TAG (din eticheta engleză). O etichetă este o combinație de caractere între caractere asimetrice "<" и ">".

Există două tipuri principale de etichete:

Etichete pereche – necesită o etichetă de închidere. Etichetele de deschidere și de închidere formează un container care conține informații.

Exemple:< b >…, < p >…

Etichete nepereche – nu au o etichetă de închidere.

Exemple:< img />, < hr/ >, < br/ >.

Parametrii etichetelor sunt specificați numai pentru etichetele împerecheate și neîmperecheate de deschidere. Sunt situate în interiorul corpului etichetei și sunt înconjurate de spații. Fiecare etichetă are propriul set de parametri. Ordinea de listare a mai multor parametri într-o etichetă poate fi arbitrară. Este necesară prezența ghilimelelor atunci când se specifică o valoare a parametrului.

Comentariile au scopul de a explica scopul fragmentelor de cod HTML și sunt formatate după cum urmează:și poate cuprinde mai multe linii.

Etichetele pot fi imbricate unele în altele. În acest caz, este important să urmați secvența de deschidere și închidere:<тэг1><тэг2><тэг3>text

Structura documentului HTML arată astfel:

Titlul documentului

Corpul documentului

Etichetă este o indicație că fișierul conține un document HTML. Toate documentele web încep cu el și, după ce au descoperit

Etichete limitați secțiunea antet a documentului. Această secțiune nu include documentul în sine. Include doar etichete (destinate în mod special pentru această secțiune) care se referă la documentul în ansamblu. Această secțiune include și titlul documentului, care este specificat cu ajutorul etichetei , este afișat în bara de titlu a programului browser. Etichete situate în interiorul secțiunii cap (cu excepția titlului documentului, care este descris folosind eticheta

BUNA ZIUA! Aceasta este pagina mea personală de pornire! Numele meu este
(Indicați numele de familie, prenumele și patronimul).

---

Orașul meu

eu locuiesc in Belgorod

Grupul meu

studiez in......

Hobby-urile mele

Hobby-urile mele muzică, sport

Prietenii mei

Prietenii meiîn tot ce este despre mine Ajutor.

5. Deschideți fișierul într-o fereastră de browser și, dacă există defecte, remediați-l

6. Finalizați sarcina.

Creați un document HTML și plasați text în el, păstrând formatarea acestuia. Evidențiați titlurile cu roșu, centrați-le și separați-le cu o linie orizontală. Cuvintele tipărite cu caractere cursive sunt evidențiate cu albastru. Salvați fișierul tastat cu extensia *.html. Priviți documentul într-o fereastră de browser și, dacă există deficiențe, eliminați-le.

Întrebări de securitate

1. Ce tipuri cunoașteți? Etichete HTML?

2. Listați etichetele cel mai frecvent utilizate în antetul unei pagini Web.

3. Cum se schimbă stilul de aliniere în eticheta de paragraf de deschidere?

4. Ce etichetă poate fi folosită pentru a seta titluri pentru toate cele șase niveluri?

5. Ce poți crea cu eticheta title?

6. Ce etichete ar trebui aplicate pentru a obține textul cu baraj aldine?

7. Explicați următorul fragment de cod HTML vesel

8. Ce se întâmplă dacă eticheta nu va fi inchis?

LUCRARE DE LABORATOR Nr 2 LISTE SIMPLE SI IMPRIMATE. CREAREA TABELELOR HTML

Scopul muncii: crearea și testarea unui fișier HTML. Crearea listelor. Inserarea tabelelor și structura acestora. Aspectați pagini folosind tabele.

Informații teoretice scurte

Există trei tipuri principale de liste într-un document HTML: listă numerotată cu marcatori de definiții

Putem crea liste imbricate folosind diferite etichete de listă sau repetând una în alta. Pentru a face acest lucru, trebuie doar să plasați o pereche de etichete (început și sfârșit)

altul înăuntru. Dacă elementele din listă imbricate vor avea aceiași marcatori care indică elementul din listă, depinde de browser. Pentru mai multe detalii, consultați secțiunea „Liste imbricate”.

Liste numerotate

Într-o listă numerotată, browserul introduce automat numerele articolului în ordine. Aceasta înseamnă că dacă ștergeți unul sau mai multe articole dintr-o listă numerotată, numerele rămase vor fi recalculate automat.

O listă numerotată începe cu o etichetă de început

și se termină cu eticheta
1. . De exemplu:

2. Programare
3. Algoritmizare
4. Proiecta

1. Programare

2. Algoritmizare

3. Design

Etichetă

poate avea parametri:

unde: tip – Tip contor:

A – litere mari latine (A,B,C...) a – litere mici latine (a,b,c...) I – cifre romane mari (I,II,III...) i – cifre romane mici (i,ii,iii...) 1 – numere regulate (1,2,3...)

start="n" – Numărul de la care începe numărătoarea inversă.

15. Programare
16. Algoritmizare
17. Proiecta

XV. Programare

XVI. Algoritmizare

XVII. Proiecta

Liste cu marcatori.

Pentru listele cu marcatori, browserul folosește de obicei marcatori pentru a marca elementul din listă. Tipul de marcator este de obicei configurat de utilizatorul browserului.

O listă cu marcatori începe cu o etichetă de început

și se termină cu eticheta
. Fiecare element de listă începe cu o etichetă
1. . De exemplu:

2. Programare
3. Algoritmizare
4. Proiecta

Programare

Algoritmizare

Proiecta

Etichetă

poate avea un parametru:

Tipul etichetei

definește aspectul markerului ca implicit (disc), circular (cerc) sau pătrat (pătrat). De exemplu:

• Programare
• Algoritmizare
• Proiecta

 Programare

 Algoritmizare

 Proiectare

Liste de definiții.

< dl>…- tag paired – afișează liste de definiții.

Proiecta:

Termen

Definiția termenului

Cu etichetă

Puteți folosi atributul compact pentru a seta elementele din listă să fie plasate mai compact.

Proiecta:

Termen

Definiția termenului

Tabelele în HTML sunt organizate ca o serie de coloane și rânduri. Celulele tabelului pot conține orice elemente HTML, cum ar fi titluri, liste, paragrafe, forme, grafice și elemente de formular.

Tabelele principale ale tabelului Tabel:

...

Acestea sunt etichetele principale care descriu tabelul. Toate elementele tabelului trebuie să fie conținute în aceste două etichete. În mod implicit, tabelul nu are chenar sau separatori. Chenarul este adăugat cu atributul border.

Rând tabel: ...

Numărul de rânduri de tabel este determinat de numărul de perechi de etichete care apar ... Rândurile pot avea atribute align și valign, care descriu poziția vizuală a conținutului rândului în tabel.

Celula tabelului: ...

Descrie o celulă standard de tabel. O celulă de tabel poate fi descrisă numai într-un rând de tabel. Fiecare celulă trebuie numerotată cu numărul coloanei pentru care este descrisă. Dacă unui rând lipsește una sau mai multe celule pentru unele coloane, browserul afișează o celulă goală. Locația implicită a datelor într-o celulă este determinată de atributele align="left" și valign="middle". Această aranjare poate fi corectată atât la nivel de descriere a liniei, cât și la nivel de descriere a celulei.

Orice celulă de tabel poate fi definită fără etichete

…, și cu etichete …- Antet tabel (titlul tabelului). th

este o celulă normală, dar textul din interiorul acestor etichete va fi aldine și centrat.

Semnătura: ...

Această etichetă descrie numele tabelului (semnătura). Etichetă trebuie să fie prezent în interior

..., dar în afara descrierii oricărui rând sau al celulei. Implicit are un atribut align="top", dar poate fi setat în mod explicit la align="bottom". alinia

determină locul unde va fi plasată semnătura în partea de sus sau de jos a tabelului. Legenda este întotdeauna centrată în lățimea tabelului.

Atributele de bază ale marginii tabelului

Acest atribut este utilizat în eticheta tabelului. Dacă acest atribut este prezent, chenarul tabelului este desenat pentru toate celulele și pentru tabelul ca întreg. border poate lua o valoare numerică care specifică lățimea chenarului, de exemplu border="3".

Întrebări pentru test

Ce este HTML? Câte perechi de etichete necesare cunoașteți? Între ce etichete se află titlul documentului? Ce pereche de etichete definește un paragraf dintr-un document? Titlul de al doilea nivel, aliniat la dreapta, este specificat de eticheta: Cum să corectați în engleză. În limbaj, etichetele de aliniere sunt scrise la dreapta, la stânga, la centru, lățimea: absența parametrului de aliniere în etichetele de titlu sau de paragraf are ca rezultat alinierea textului prin: Ce etichete nepereche cunoașteți O linie orizontală 50%? lat, 2 pixeli grosime, non-relief, culoarea albastră este setată etichetă Pentru ce sunt acestea?in html? Ce 2 tipuri (metode) de formatare a textului într-un document HTML cunoașteți? Ce etichete ar trebui aplicate pentru a obține textul cu baraj aldine? Cum arată o bucată de cod care produce text italic și subliniat: Ce etichete deplasează textul în raport cu nivelul liniei principale (superscript și indice)? Cărei etichete de formatare aparțin parametrii față, culoare și dimensiune? Ce se întâmplă dacă fontul specificat în parametrul față nu este instalat pe computer? Ce etichete afișează text în același mod (în cursive) în scopuri diferite? Ce se va întâmpla dacă eticheta nu va fi inchis? Dacă trebuie să afișați text monospațiu pe o pagină, veți face acest lucru folosind etichete: Interpretați următorul fragment de cod:
HTML vesel Ce este hipertextul? Specificați componentele oricărui link? Pentru a organiza un link din indexul documentului. htm la cartea de documente. htm situat în același director, trebuie să scrieți linia: Cum arată un hyperlink obișnuit (fără stiluri suprapuse pe el)? Ce se întâmplă dacă fișierul la care vă conectați lipsește? Cum să conectați corect de la index. htm situat în rădăcina la risunki. htm situat în folderul de imagini, care este imbricat în folderul shedevr? Când este potrivit să folosiți link-uri interne? Pentru a realiza o legătură internă din secțiunea „Tipărire” la secțiunea „Publicații” (anchor-izdan) trebuie să: Explicați semnificația următorului fragment: Concluzie Cum se face o legătură către o cutie poștală *****@***ru Ce determină parametrul bgcolor? Ce sisteme numerice sunt folosite pentru a reprezenta culorile în HTML? Ce culoare este reprezentată de intrarea albastru? Cum arată o pagină HTML fără parametrii etichetei corpului? Verificați cele trei atribute corecte ale parametrilor etichetei body? Ce parametru setează culoarea link-ului vizualizat? Câți parametri ai etichetei body cunoașteți care specifică limitele câmpurilor unui document HTML. Care parametru al etichetei body vă permite să setați o imagine ca fundal al documentului? Ce etichetă definește o listă numerotată și marcată? Cum schimb tipul de marcator într-un pătrat umplut? Cum să îmbinați celulele tabelului pe verticală? Orizontal?

Formatarea textului în HTML - metode și exemple - 4,0 din 5 bazat pe 1 vot

Ne-am uitat la cum să-l împărțim în paragrafe și în lecțiile anterioare.

În această lecție ne vom uita la modul în care puteți formata textul în HTML și ce etichete există pentru aceasta.

Mai întâi, să vedem cum puteți schimba aspectul textului folosind eticheta si o pereche inchizand-o. La etichetă sunt mai multe atribute. Folosind atributul face="", puteți seta fontul textului. Pentru a face acest lucru, între ghilimele din atributul face="" trebuie să scrieți numele fontului.

De exemplu: Textul dvs

În acest exemplu, fontul a fost setat la Arial și tot textul plasat între etichete va fi afișat în acest font. Puteți specifica nu unul, ci mai multe fonturi separate prin virgule, în acest caz, va fi selectat primul font potrivit din listă. Adică dacă, de exemplu, utilizatorul care vă vizitează pagina nu are primul font în sistem, atunci va fi selectat al doilea font.

Este scris astfel: Textul dvs

Trebuie să fii atent când alegi un font. Nu este nevoie să specificați diferite fonturi exotice. Pentru că pur și simplu s-ar putea să nu fie pe computerul vizitatorului tău. Cel mai bine este să utilizați fonturi standard, cum ar fi Arial, Times Roman, Vernada, Tahoma.

Următorul atribut al etichetei aceasta este dimensiunea="". Folosind acest atribut, puteți seta dimensiunea fontului. Pentru a face acest lucru, trebuie să specificați un număr de la 1 la 7 între ghilimele.

De exemplu: Textul dvs

În plus, există un alt grup de etichete HTML folosite pentru a formata textul cu ajutorul lor, textul poate fi evidențiat cu caractere aldine, cursive, subliniate sau barat.

Puteți face textul aldine folosind o etichetă si o pereche inchizand-o. Textul plasat între aceste etichete va fi aldine. În plus, textul poate fi aldin folosind eticheta si o pereche inchizand-o. Pentru a evidenția cuvintele cheie pe pagină, este mai bine să utilizați a doua etichetă.

De exemplu: Text îngroșat

Puteți face textul italic folosind eticheta textul plasat între aceste două etichete va fi înclinat spre dreapta.

De exemplu: Text cu caractere cursive

Puteți face text subliniat folosind o etichetă și eticheta de închidere asociată. Va exista o linie sub text plasată între aceste etichete.

De exemplu: Text subliniat

Textul barat poate fi creat folosind eticheta și eticheta de închidere asociată textul cuprins între aceste etichete va fi centrat, cu o linie prin el.

De exemplu: Text tăiat

Următoarea etichetă HTML folosită pentru formatarea textului este si o pereche inchizand-o. Textul dintre aceste etichete va fi mai mare decât cel principal.

De exemplu: Text mare

Etichetă si o pereche inchizand-o direct opusul etichetei discutate mai sus. Textul cuprins între aceste etichete va avea o dimensiune mai mică în raport cu textul principal.

De exemplu: Text mic

Și, în sfârșit, mai avem două etichete de luat în considerare: etichete , care definesc indicele, adică textul situat între aceste etichete va avea dimensiuni mai mici și va fi afișat în partea de sus față de fontul principal.

De exemplu: ^Superscript

Și etichete definiți indicele. Testul inclus între aceste etichete va fi situat sub textul principal.

De exemplu: _Indice

De fapt, folosind aceste etichete, puteți defini un anumit stil de font și puteți forma textul în html.

Material pregătit de portal: