HTML Div: primjeri uporabe

12. 3. 2019.

Formalizacija informacija važan je aspekt objektivne izjave i ispravno rješenje zadatka stvaranja učinkovite web stranice. Rezultat formalizacije je sustavna reprezentacija predmetnog područja, struktura odnosa između podataka i konstrukcija tematskih blokova. HTML tag je blok informacija, dio općeg sustava, rezultat procesa obrade informacija o kompetentnosti i funkcionalnosti web-resursa.

Opća struktura i logika web stranice

Formalno, tražilice se razlikuju od internetskih trgovina, a posjetnice su izgrađene potpuno drugačije od korporativnih portala. Obično nije teško razumjeti logiku razvojnog inženjera, ali ideje kupca mogu se prikazati samo tijekom vremena iu dinamici razvoja stranice. Opći obrasci stvaranja visokokvalitetnih resursa dobili su oblik i smatraju se temeljnim. Moderni posjetitelj web-lokacije uvijek je “kompetentan” i na bilo kojem web-resursu “zna” što treba učiniti.

Struktura HTML stranice

Svaki od popularnih sustava za upravljanje web stranicama nudi vlastiti pogled na temeljne pozicije u dizajnu i važne subjekte u strukturi i sadržaju stranica stranica. Na stari način svi su označeni s divom na HTML stranici:

  • šešir;
  • Izbornik "Tijelo" + (okomito ili vodoravno);
  • lijevi i / ili desni stupovi kao dijelovi tijela ili njegov komplement;
  • u podrumu.

U trenutnoj upotrebi razvojnog programera, sve to zvuči više prozaično: zaglavlje, tijelo, podnožje ili "zaglavlje", "sadržaj" i "podnožje". Da biste dodali ili ne lijevi i desni stupac, to jest, podijelili sadržaj web-lokacije u središnji tok podataka, lijeva i desna strana su kompetentnost razvojnog programera i pojedinosti problema koje treba riješiti.

Koristite tablice (tablica HTML) ili div (HTML div) - nema posebne razlike. Čak možete "objasniti" cijelu stranicu s jednim popisom (ul i li): ovo je svježe i ekstravagantno, ali će raditi. Izbor rasporeda za developera, ali prema ustaljenoj tradiciji, svatko bira raspored u blokovima. Koristite HTML div i CSS u stilu - jednostavna, čitljiva i produktivna.

Suština informacijskog bloka

Pojam "informacija" u internetskom programiranju ima svoje značenje. Ovi podaci su definitivno strukturirani i prezentirani. Informacije su mnogo širi pojam. программировании веб-ресурсов programiranje web resursa Ovaj pojam nosi minimalno moguće značenje i opseg.

Semantika bloka HTML div

Veličina i položaj HTML oznake div: width / height i left / top mogu biti apsolutni i relativni. Stavljanjem međusobnih oznaka možete manipulirati položajem i veličinom. Promjena pravila CSS pozicija od apsolutnog do relativnog, možete kontrolirati položaj oznaka međusobno unutar prozora preglednika.

Preglednik kao aplikacija nosi naslijeđe lokalnog programiranja: to je program koji ima prozor u kojem se prikazuje hipertekstualni jezik, dopunjen CSS stilovima i animiran radom JavaScript koda.

Možemo se prisjetiti podjele razvoja na frontend i backend, koju vole sve tvrtke (internetski studiji), ali to ne mijenja bit. Nije važno kako se blok pojavio na HTML stranici: napisan je u "olovkama" ili je nastao kao rezultat PHP skripte koja se izvodi na poslužitelju. Važno je da svaka div oznaka kao HTML / CSS sastav bude položaj, veličina, boja (znak / pozadina), transparentnost, transformacija, kretanje, granice itd.

Atributi i značajke za opis bloka informacija CSS pravila pružaju veliku raznolikost, a HTML logika omogućuje korištenje diva i za njihovu namjenu i za logiku i iskustvo developera.

Na primjer, HTML div je:

  • omot, tj. postavljanje sustava oznaka;
  • prostor za postavljanje točaka za rukovatelje JavaScriptom;
  • "Niz" oznaka za obradu.

Prva opcija je prikladna kada vam je potrebna vitka kompozicija oznaka, koja se lako može pomaknuti na pravo mjesto, navodeći samo koordinate omota: sve unutar će se kretati kako je, automatski.

Druga mogućnost, kao što je karta područja ili zgrade, u kojoj je svakoj točki na karti dodijeljen vlastiti vodič, te klikanje na stan ili prozor zgrade, treba pružiti potrebne informacije.

Karta mjesta

Treća opcija uvelike pojednostavljuje rukovanje zbirkama oznaka: umjesto da prolazi kroz cijelu zbirku HTML div (body) oznaka, programer može obaviti pretraživanje unutar jedne oznake koja je nevidljiva i ne čuje, ali uključuje sve relevantne pozicije.

Primjer opisa i upotreba podjele

Dosljednost u svim tijekovima informacija. Protok informacija između preglednika i poslužitelja uvijek ima važne vremenske i tehničke parametre, ali to uopće ne znači izlaz HTML koda kao što je to u prozoru preglednika.

Primjer razgradnje

U primjeru su opisana samo dva bloka, pri čemu drugi blok razbija sadržaj prvog na dva dijela. Ova okolnost ne utječe na rezultat. Drugi blok je pola transparentan i pokriva prvi blok. Što se tiče miješanja boja, nema problema i postoji učinak koji se može koristiti.

Preklapanje jednog teksta na drugi je sumnjivo tražen rezultat, ali opcija Loop je zanimljivo rješenje. Možete imati blok teksta u kojem će se nalaziti plutajući div s detaljima o riječima ili izrazima. Moguće je i drugo praktično rješenje.

Klase i identifikatori blokova

HTML je skup elemenata. CSS stilovi omogućuju vam da kreirate svoje klase. Jedinstvene stavke identificiraju se pomoću identifikatora. I početnici i iskusni programeri mogu koristiti identifikatore poput klasa, kada nema potrebe tražiti elemente kroz JavaScript rukovatelje.

Klase i ID-ovi

Rasporedi gurmani preferiraju klase uvijek iu svemu. Razumijevanje koda stranice opisane klasama često je teško. Slikati sve divove i druge elemente preko identifikatora je vrlo težak zadatak, ali uvijek čitljiv rezultat.

Programer je prisiljen koristiti klase kada je stranica razvijena na temelju sustava za upravljanje web stranicama ili koristi popularni predložak. Praksa pokazuje da znanje i vještine developera uvijek sugeriraju ispravan izlaz iz svake situacije.

Važno je da svaka sintaktički ispravna upotreba DIV-a u HTML-u funkcionira kako je propisano pravilima.

Zaglavlja i jednostavni blokovi

HTML-stranica u klasičnom smislu otkriva temu. U biti, naslov određuje kontekst stranice. Blokovi informacija se nazivaju identifikatori - to je naziv za programera. Naziv klase uopće nije ime, već veza na skup pravila. Jedna diva može biti dodijeljena nekoliko klasa, ali samo jedan identifikator.

Zaglavlja i jednostavni blokovi

U praksi, za posjetitelja, naslov je važan ne samo za stranicu u cjelini, nego i za predmet određenog bloka informacija. Korištenje oznake div kao naslova u HTML kodu prikladno je. To je posebno praktično kada se naslov koristi za obradu i ima određeno značenje.

Mogućnost međusobnog ugrađivanja blokova, ispravno prekrivanje blokova i njihovo sjecište omogućuju razvoj produktivnih stranica i stvaranje tematski dovršenih stranica.

Prekrasan raspored

Usmjerenost na dinamičan i razvijen rezultat je sistematizirana informacija, odnosno sustav blokova međusobno povezanih značenjskim odnosima. Nije bitno što uzeti kao osnovu: tablicu, popis ili samo blok.

Praksa pokazuje: morate koristiti sve HTML elemente u skladu s njihovom osnovnom svrhom i kombinirati željeno rješenje.

Formalizacija opsega i problema koji treba riješiti glavni je cilj pri stvaranju bilo kojeg web-resursa. Stvarni rezultat ovisi o tome koliko je ispravan i sveobuhvatan analitički rad.