Slike u HTML-u. Slike u HTML alternativnom tekstu

Dva glavna formata koji se koriste za umetanje slika u HTML su GIF i JPEG. GIF format može pohraniti jednostavnu animaciju (dinamički banneri), JPEG je odličan za slike s puno boja, poput fotografija. Treći format za web grafiku je PNG format, ali se ne koristi široko u web dizajnu. Bilo koja slika u GIF ili JPEG formatu umeće se na web stranicu pomoću oznake< img >, nema završne oznake.

Atribut src navodi adresu (URL) slikovne datoteke, tj. preglednik pronalazi željenu sliku u direktoriju web mjesta koristeći stazu (URL) navedenu u ovom atributu. Radi praktičnosti, sve slike web mjesta nalaze se u zasebnoj mapi, obično pod nazivom slika. Na primjer, uzmite bilo koju sliku, po mogućnosti malog formata, i spremite je u stvorenu mapu sa slikama pod nazivom primer.jpg. Zatim ćemo ga koristiti za obuku.

Pa, pokušajmo ubaciti sliku na stranicu? Pišemo kod (put - URL, napisan ovisno o lokaciji mape sa slikama):

< img src="image/primer.jpg">

Zašto je naveden alternativni tekst? Idemo redom. Svaki preglednik ima funkciju onemogućavanja slika, tako da korisnik koji koristi ovu funkciju može vidjeti opis naveden u oznaci alt, koji predstavlja sliku. Ovo danas možda nije relevantno, jer se prednost daje neograničene tarife, ali ipak se to smatra pravilom lijepog ponašanja. Pogledajmo primjer koda:

To možete vidjeti samo isključivanjem prikaza slika u pregledniku.

Odmah da napomenem da su širina i visina vrlo važni parametri, pa ih nema potrebe ignorirati. Prosudite sami, s neodređenim veličinama slika i sa slikama onemogućenim u pregledniku, kada se slike ne učitavaju, mali prazni kvadratići mogu se nalaziti na potpuno drugom mjestu od mjesta na kojem ste ih planirali postaviti. Ovo neće dodati ljepotu stranici. Stoga nemojte biti lijeni i uvijek zapišite dimenzije u HTML kod.

Veličine slika postavljaju se pomoću oznaka širina- širina i visina— visina, vrijednosti su postavljene u pikselima i kao postotak širine zaslona (s postocima, budite vrlo oprezni). Pogledajmo kod:

Slike privlače posjetitelje stranice, nose puno vizualnih informacija, jednostavne su za korištenje, ali ipak morate slijediti neke preporuke ako želite stvoriti dobru, popularnu stranicu.

Ne biste trebali koristiti prevelike slikovne datoteke jer će to utjecati na brzinu učitavanja stranice. Vjerujte mi, ovo je daleko od posljednjeg pokazatelja.

Atribut ALT ima vrlo važno, morate ga dodati za svaku IMG oznaku. Sadržaj tekstualna poruka mora opisati sliku vrlo točno i kratko.

Slike na web stranici moraju odgovarati sadržaju teksta.

Nakon proučavanja ovog odjeljka, već se možete isprobati kao webmaster i stvoriti potpunu HTML stranicu. A onda prijeđimo na umetanje multimedije.

Pozdrav dragi čitatelji bloga! U ovom ćete članku naučiti sve o tome kako umetnuti sliku html stranica. Imate li nekoliko slika koje želite staviti na svoju stranicu ili želite staviti logo na svoju stranicu? Sve je ovo jednostavno. Nakon što pročitate ovaj članak, moći ćete bez ikakvih poteškoća umetati slike u svoje html stranice. Da bismo to učinili, detaljno ćemo govoriti o img oznaci i njenim atributima, ukratko ćemo se osvrnuti na formate grafičkih datoteka kao što su gif, jpeg i png, a također ćemo pogledati nove značajke HTML5 koje olakšavaju umetanje videa i zvuka na mjesto.

Zbog činjenice da grafički podaci i html tekst ne mogu se kombinirati u jednoj datoteci; za njihov prikaz na web-mjestu koristi se drugačiji pristup od ostalih elemenata html stranica. prije svega, grafičke slike, a ostali multimedijski podaci pohranjuju se u zasebne datoteke. A kako bi ih ugradili u web stranicu, koriste se posebne oznake koje sadrže poveznice na te pojedinačne datoteke. Konkretno, takva oznaka je img oznaka. Nakon što naiđe na takvu oznaku s adresom, preglednik prvo od web poslužitelja zatraži odgovarajuću datoteku sa slikom, audio ili video zapisom, a tek potom je prikaže na web stranici.

Sve grafičke slike i, općenito, svi podaci koji su pohranjeni u datotekama odvojenim od web stranice nazivaju se ugrađenim elementima stranice.

Prije nego što umetnete slike i detaljno pogledate oznaku "img", vrijedi malo naučiti o grafičkim formatima.

Postoji mnogo različitih grafičkih formata, ali preglednici podržavaju samo nekoliko. Pogledajmo tri od njih.

1. JPEG format ( Zajednička skupina stručnjaka za fotografiju). Prilično popularan format koji se koristi za pohranu slika. Podržava 24-bitnu boju i zadržava sve polutonove na fotografijama nepromijenjenima. Ali jpeg ne podržava prozirnost i iskrivljuje sitne detalje i tekst na slikama. JPEG se prvenstveno koristi za pohranjivanje fotografija. Datoteke u ovom formatu imaju ekstenzije jpg, jpe, jpeg.

2. GIF format ( Format grafičke razmjene). Glavna prednost ovog formata je mogućnost pohranjivanja nekoliko slika odjednom u jednu datoteku. To vam omogućuje stvaranje cijelih animiranih videozapisa. Drugo, podržava transparentnost. Glavni nedostatak Podržava samo 256 boja, što nije dobro za pohranu fotografija. GIF se uglavnom koristi za pohranu logotipa, bannera, slika s prozirnim područjima i sadrže tekst. Datoteke u ovom formatu imaju nastavak gif.

3. PNG format ( Prijenosna mrežna grafika). Ovaj je format razvijen kao zamjena za naslijeđeni GIF i, u određenoj mjeri, JPEG. Podržava transparentnost, ali ne dopušta animaciju. Ovaj format ima png ekstenziju.

Prilikom izrade web stranica obično se koriste slike JPEG format ili GIF, ali ponekad se koristi PNG. Glavna stvar je razumjeti u kojim je slučajevima koji format bolje koristiti. Ukratko:

JPEG se najbolje koristi za pohranjivanje fotografija ili slika u sivim tonovima koje ne sadrže tekst;

• GIF se prvenstveno koristi za animaciju;
• PNG je format za sve ostalo (ikone, gumbe itd.).

Dakle, kako umetnuti sliku na web stranicu? Jedna img oznaka omogućuje umetanje slike. Preglednik postavlja sliku na mjesto na web stranici gdje nailazi na oznaku img.

Kod za umetanje slike u html stranicu izgleda ovako:

Ovaj html kod postavit će na web stranicu sliku pohranjenu u datoteci image.jpg koja se nalazi u istoj mapi kao i web stranica. Kao što ste možda primijetili, adresa slike je navedena u atributu src. Već sam ti rekao što je to. Dakle, atribut src je obavezan atribut koji služi za označavanje adrese datoteke sa slikom. Bez atributa src oznaka img nema nikakvo značenje.

Evo još nekoliko primjera navođenja adrese datoteke sa slikom:

Ovaj html kod će umetnuti sliku na stranicu pod nazivom image.jpg, koja je pohranjena u mapi sa slikama koja se nalazi u korijenu web stranice.

Atribut src može sadržavati više od relativnih poveznica na slike. Budući da se slike pohranjuju na mreži zajedno s html stranicama, svaka slikovna datoteka ima svoj vlastiti URL. Stoga možete umetnuti URL slike u atribut src. Na primjer:

Ovaj kod će umetnuti sliku sa stranice mysite.ru na stranicu. URL se obično koristi kada pokazujete na sliku na drugom mjestu. Za slike pohranjene na vašoj stranici bolje je koristiti relativne veze.

Oznaka img je ugrađeni element, pa ju je bolje smjestiti unutar blok elementa, na primjer unutar oznake "P" - paragraf:

Vježbajmo i ubacimo sliku iz prethodnih članaka o html-u na našu stranicu. Napravit ću mapu “images” pored html datoteke svoje stranice i tamo postaviti slikovnu datoteku “bmw.jpg”, koja izgleda ovako:

Tada će html kod stranice s umetnutom slikom biti ovakav:

I pogledajte rezultat prikaza u pregledniku:

Kao što vidimo, nema ništa komplicirano u postavljanju slika na web stranice. Zatim, pogledajmo još nekoliko važnih atributa oznake "img".

Budući da se slikovne datoteke pohranjuju odvojeno od web stranica, preglednik mora postavljati zasebne zahtjeve za njihovo preuzimanje. Ali što ako na stranici ima puno slika, a brzina mrežne veze je mala, tada će trebati dosta vremena za preuzimanje dodatnih datoteka. A još je gore ako je slika izbrisana sa servera bez vašeg znanja.

U tim slučajevima, sama web stranica će se uspješno učitati, samo će se umjesto slika prikazati bijeli pravokutnici. Stoga, kako bismo korisniku rekli što je slika, . Pomoću ovog atributa određujete takozvani zamjenski tekst, koji će biti prikazan u praznom pravokutniku dok se slika ne učita:

A ovako to otprilike izgleda:

Još uvijek postoji nekoliko atributa oznake img o kojima biste trebali znati. Ovo je par atributa širine i visine. Možete ih koristiti za određivanje dimenzija slike:

Oba atributa određuju veličinu u pikselima. Atribut širine govori pregledniku koliko bi slika trebala biti široka, a atribut visine koliko bi trebala biti visoka. Ova dva atributa mogu se koristiti zajedno ili odvojeno. Na primjer, ako navedete samo atribut širine, preglednik će automatski odabrati visinu proporcionalno navedenoj širini, a također i u slučaju korištenja samo atributa visine. Ako te atribute uopće ne navedete, preglednik će automatski odrediti veličinu slike prije nego što je prikaže na zaslonu. Samo je vrijedno napomenuti da će određivanje veličina slike malo ubrzati preglednik prilikom prikaza stranice.

To je sve o umetanju slika na stranice za sada, a zatim ćemo pogledati kako umetnuti audio ili video na web stranicu...

Nova html5 specifikacija uvodi nekoliko novih oznaka koje olakšavaju umetanje medijskih datoteka. To se prvenstveno odnosi na video i audio.

Za umetanje zvuka HTML5 pruža uparena oznaka AUDIO. Adresa datoteke u kojoj je pohranjen audio isječak naznačena je pomoću atributa src koji nam je već poznat:

Oznaka "audio" stvara blok element na stranici. Prema zadanim postavkama preglednik neće reproducirati audio zapis. Da biste to učinili, trebate navesti poseban atribut automatske reprodukcije u audio oznaci. Posebno jer nije bitno. Sama prisutnost ovog atributa u oznaci dovoljna je da stupi na snagu.

Audio isječak prema zadanim postavkama nije prikazan na web stranici. Ali ako stavite atribut u oznaku "audio" bez vrijednosti kontrole, preglednik će prikazati kontrole reprodukcije zvuka na mjestu na web stranici gdje je postavljena audio oznaka. Uključuju gumb za reprodukciju/pauzu, traku za reprodukciju i kontrolu glasnoće.

HTML oznake su osnova HTML jezika. Oznake se koriste za omeđivanje početka i kraja elemenata u označavanju.

Svaki HTML dokument sastoji se od stabla HTML elemenata i teksta. Svaki HTML element identificiran je početnom (otvornom) i završnom (zatvarajućom) oznakom. Početne i završne oznake sadrže naziv oznake.

Svi HTML elementi podijeljeni su u pet vrsta:

• prazni elementi - , ,
  , , , , , , , , , , , , ;
• elementi s neformatiranim tekstom - , ;
• elementi koji izlaze neformatirani tekst — , ;
• elementi iz drugog imenskog prostora - MathML i SVG;
• obični elementi – svi ostali elementi.

Tablica pruža potpuni popis elemenata koje podržavaju HTML4 i HTML5. Eksperimentalne i naslijeđene oznake su isključene. Elementi dodani HTML5 specifikaciji istaknuti su plavozelenom bojom.

	Koristi se za dodavanje komentara.
	Deklariše vrstu dokumenta i pruža osnovne informacije pregledniku - njegov jezik i verziju.
	Stvara hipertekstualne veze.
	Identificira tekst kao kraticu ili akronim. Tekst objašnjenja naveden je pomoću atributa naslova.
	Određuje kontakt podatke autora/vlasnika dokumenta ili članka. Prikazano kurzivom u pregledniku.
	To je hiperveza s tekstom koji odgovara određenom području na slikovnoj karti ili aktivnom području unutar slikovne karte. Uvijek ugniježđen unutar oznake.
	Odjeljak sadržaja koji čini neovisni dio dokumenta ili web stranice, kao što je članak u časopisu, post na blogu, komentar.
	Predstavlja sadržaj stranice koji je neizravno povezan s glavnim sadržajem stranice/mjesta.
	Učitava audio sadržaj na web stranicu.
	Postavlja odlomak teksta podebljanim bez dodavanja naglaska ili važnosti označenom tekstu.
	Određuje osnovnu adresu (URL) iz koje se izračunavaju sve relativne adrese. To će pomoći u izbjegavanju problema prilikom premještanja stranice na drugo mjesto, jer će sve veze raditi kao i prije.
	Izolira odlomak teksta napisan na jeziku na kojem se tekst čita s desna na lijevo od ostatka teksta.
	Prikazuje tekst u smjeru navedenom atributom dir, nadjačavajući trenutni smjer teksta.
	Ističe tekst kao citat, koji se koristi za opisivanje velikih citata.
	Predstavlja tijelo dokumenta (sadržaj koji nije dio metapodataka dokumenta).
	Prelamanje teksta u novi redak.
	Stvara interaktivni gumb. Unutar oznake možete postaviti sadržaj – tekst ili sliku.
	Canvas spremnik za dinamički prikaz slika kao što su jednostavne slike, grafikoni, grafikoni itd. Za crtanje se koristi JavaScript skriptni jezik.
	Dodaje natpis u tablicu. Umetnuto odmah nakon oznake . stvara novu liniju. Dalje u ugniježđeno Koristi se za označavanje izvora citata. Prikazano kurzivom. Predstavlja dio programskog koda, prikazan u obitelji monospace fontova. Odabire jedan ili više stupaca tablice za oblikovanje koji ne sadrže istu vrstu informacija. Stvara strukturnu grupu stupaca koja identificira mnoge logički homogene ćelije. Element se koristi za povezivanje vrijednosti atributa vrijednosti, koji je u strojno čitljivom formatu i može se obraditi računalom, sa sadržajem oznake. Element spremnika za element padajućeg popisa. Vrijednosti varijante smještene su u elemente. Koristi se za opisivanje pojma iz oznake. Označava tekst kao izbrisan precrtavanjem. Stvara interaktivni widget koji korisnik može otvoriti ili zatvoriti. Predstavlja spremnik za sadržaj, vidljiv naslov widgeta nalazi se u oznaci. Identificira riječ kao pojam stavljajući je u kurziv. Tekst koji slijedi trebao bi sadržavati definiciju ovog pojma. Interaktivni element s kojim korisnik komunicira kako bi dovršio zadatak, kao što je dijaloški okvir, inspektor ili prozor. Bez atributa open nije vidljiv korisniku. Oznaka spremnika za dijelove HTML dokumenta. Koristi se za grupiranje blok elemenata za oblikovanje sa stilovima. Oznaka spremnika koja sadrži pojam i njegov opis. Koristi se za određivanje pojma. Ističe važne odlomke teksta prikazujući ih kurzivom. Oznaka spremnika za ugrađivanje vanjskog interaktivnog sadržaja ili dodatka. Grupira povezane elemente u obrazac crtanjem okvira oko njih. Naslov/naslov za element. Oznaka samostalnog spremnika za sadržaj kao što su ilustracije, dijagrami, fotografije, primjeri kodova, obično s naslovom. Definira završno područje (podnožje) dokumenta ili odjeljka. Obrazac za prikupljanje i slanje informacija od korisnika na poslužitelj. Ne radi bez atributa akcije. Stvorite šest razina naslova za povezane odjeljke. Element spremnika za metapodatke HTML dokumenta, kao što su , , , , . Odjeljak za uvodne informacije o stranici ili grupi navigacijskih veza. Može sadržavati jedan ili više naslova, logotip, podatke o autoru. Vodoravna crta za tematsku podjelu odlomaka. Korijenski element HTML dokumenta. Kaže pregledniku da je ovo HTML dokument. To je spremnik za sve ostale html elemente. Kurziv odlomka teksta bez dodatnog naglašavanja. Stvara umetnuti okvir učitavanjem drugog dokumenta u trenutni HTML dokument. Ugrađuje slike u HTML dokument pomoću atributa src, čija je vrijednost adresa ugrađene slike. Stvara bogata polja obrasca u koja korisnik može unositi podatke. Označava tekst podcrtavanjem. Koristi se za označavanje promjena napravljenih na dokumentu. Odabire tekst koji će korisnik unijeti pomoću tipkovnice u monospace fontu. Koristi se za pohranu dodatnih informacija o stranici. Ove informacije preglednici koriste za obradu stranice, a tražilice za indeksiranje. U bloku može postojati nekoliko oznaka, jer ovisno o korištenim atributima nose različite informacije. Indikator mjerenja u zadanom rasponu. Odjeljak dokumenta koji sadrži navigacijske veze za web mjesto. Definira odjeljak koji ne podržava skriptiranje. Spremnik za ugradnju multimedije (npr. audio, video, Java appleti, ActiveX, PDF i Flash). Također možete umetnuti drugu web stranicu u trenutni HTML dokument. Oznaka se koristi za prosljeđivanje parametara dodatka. Uređena numerirana lista. Numeriranje može biti numeričko ili abecedno. Spremnik s naslovom za grupu elemenata. Određuje opciju/opciju za odabir s padajućeg popisa , ili . Polje za prikaz rezultata izračuna izračunatog pomoću skripte. Odlomci u tekstu. Definira parametre za dodatke izgrađene pomoću elementa. Element spremnika koji sadrži jedan element i nula ili više elemenata. Sam po sebi ne prikazuje ništa. Omogućuje pregledniku odabir najprikladnije slike. Ispisuje tekst bez oblikovanja, čuvajući razmake i prijelome teksta. Može se koristiti za prikaz računalnog koda, poruka e-pošte itd. Pokazatelj dovršetka zadatka bilo koje vrste. Definira kratki citat. Spremnik za istočnoazijske simbole i njihovo dekodiranje. Definira svoj ugniježđeni tekst kao osnovnu komponentu napomene. Dodaje kratak opis iznad ili ispod znakova sadržanih u elementu, prikazanih manjim fontom. Označava ugrađeni tekst kao dodatnu napomenu. Prikazuje alternativni tekst ako preglednik ne podržava element. Prikazuje tekst koji nije trenutačno precrtan. Koristi se za prikaz teksta koji predstavlja rezultat izvršavanja programskog koda ili skripte, kao i sistemskih poruka. Prikazuje se monospace fontom. Koristi se za definiranje skripte na strani klijenta (obično JavaScript). Sadrži ili tekst skripte ili upućuje na vanjsku datoteku skripte pomoću atributa src. Definira logično područje (odjeljak) stranice, obično sa zaglavljem. Kontrolni element koji vam omogućuje odabir vrijednosti iz predloženog skupa. Vrijednosti varijante smještene su u . Prikazuje tekst manjim fontom. Određuje lokaciju i vrstu alternativnih medijskih izvora za , , . Spremnik za inline elemente. Može se koristiti za oblikovanje odlomaka teksta, kao što je isticanje pojedinačnih riječi. Stavlja naglasak u tekst, naglašavajući ga podebljanim slovima. Uključuje stilske listove koji se mogu ugraditi. Određuje pisanje indeksa simbola, na primjer, indeks elementa u kemijskim formulama. Stvara vidljiv naslov za oznaku. Prikazan s ispunjenim trokutom, klikom na njega možete vidjeti detalje naslova. Određuje pravopis nadskripta znakova. Oznaka za izradu tablice. Definira tijelo tablice. Stvara ćeliju tablice. Koristi se za deklariranje fragmenata HTML koda koji se mogu klonirati i umetnuti u dokument pomoću skripte. Sadržaj oznake nije njezin potomak. Stvara velika polja za unos teksta. Definira podnožje tablice. Stvara naslov ćelije tablice. Definira naslov tablice. Definira datum/vrijeme. Naslov HTML dokumenta koji se pojavljuje na vrhu naslovne trake preglednika. Može se također pojaviti u rezultatima pretraživanja, pa to treba uzeti u obzir prilikom davanja naslova. Stvara red tablice. Dodaje podnaslove za elemente i . Ističe odlomak teksta podvlačenjem, bez dodatnog naglašavanja. Stvara popis s grafičkim oznakama. Ističe varijable iz programa prikazujući ih kurzivom. Dodaje video datoteke na stranicu. Podržava 3 video formata: MP4, WebM, Ogg. Označava pregledniku gdje bi dugi red mogao prekinuti. Varalica s oznakama Radi lakšeg korištenja, grupirao sam oznake u tematske odjeljke, dodajući vrijednosti svojstava prikaza za svaku oznaku. Za prelazak na stol kliknite na sliku. U životu svakog copywritera dolazi faza upoznavanja s html oznakama. Obično se to događa spontano i izgleda kao zahtjev kupca da se “pripremi tekst za objavu”. To znači da u članku morate istaknuti naslove, odlomke, značajna mjesta i popise, ali ne pomoću mogućnosti Worda, već posebnim kodom html jezika. Oznake za copywritera pomoći će u tome. Popis potreban za rad obično je mali, ali je dovoljan za formatiranje teksta sa standardnim zahtjevima. Što je uključeno u html oznake potrebne za copywritera? (Ako ste previše lijeni za čitanje, pomaknite se prema dolje - postoji jednostavna i jasna tematska infografika o html oznakama!) Tekstopisac postavlja tradicionalna pitanja. I svi počinju riječima "koja se oznaka koristi za specificiranje...": titula; paragraf; podebljani tekst; kurziv; popis s grafičkim oznakama/neoznačen/ Sve to dodatno začinjava tehnički zadatak i potiče stjecanje novih znanja. Situacija se pogoršava kada je zadatak koristiti podebljanu tekstualnu oznaku za povećanje atraktivnosti ključa u PS-u. Ali sve se to može riješiti vrlo jednostavno, čime ćemo se sada pozabaviti. Oznake za kreiranje naslova Oznake za kreiranje naslova predstavljene su elementima h1-h6. Dobili su svoje pismo iz engleskog Header (naslov). Kako biste postavili potrebnu vrstu zaglavlja i naglasili njegovu važnost za PS, koristite sljedeći kod: Naslov h1 Naslov h2 Naslov h3 Naslov h4 Naslov h5 Naslov h6 Na web stranici to će izgledati ovako. Naslov h1 Naslov h2 Naslov h3 Naslov h4 Naslov h5 Naslov h6 H1 naslov ima najveći značaj - i vidljivost -. Koristi se kao naslov posta i koristi se samo jednom. Za podnaslove u tekstu preporučuju se h2 i h3. Oni pomažu naglasiti važnost razmatranog materijala i dijele članak na razine informacija. Zaglavlja h4-h6 praktički se ne koriste, ali su tražena za isticanje logičkih blokova i važnih fragmenata. Za velike članke najbolje je koristiti naslove h1-h3, za male - h1 i h2. Popisi: s grafičkim oznakama i bez oznaka Strukturirani dobar tekst uvijek ima jedan ili čak nekoliko popisa. Prema izgledu liste su: označeni - imaju numeraciju; neoznačeno – elementi su označeni simbolima. Ali sav dizajn Worda nije prikladan za publikacije na web mjestu, pa je vrijedno naučiti kako pravilno oblikovati popise u HTML oznakama. Oznaka popisa s grafičkim oznakama izgleda ovako: Označite neoznačeni popis ovako: Štoviše, svaki element popisa ima vlastiti HTML okvir: Ispada da ćete za označavanje popisa s grafičkim oznakama u tekstu pomoću html koda morati kombinirati obje vrste korištenih elemenata. Izgledat će ovako: Stavka popisa Stavka popisa Stavka popisa Stavka popisa Za neoznačeni popis, slično: Stavka popisa Stavka popisa Stavka popisa Stavka popisa Sredili smo liste. Možemo dalje. Oznake za naglašavanje teksta: podebljano i kurzivno Kada shvatite koja vam oznaka omogućuje ispravno oblikovanje teksta, gotovo odmah naiđete na dvije opcije koda za svaki slučaj. To izaziva zabunu među ne-programerima i pitanje: koji tag točno treba kupcu. Vrlo je jednostavno! Oznake nude mogućnosti fizičkog i logičkog oblikovanja. Prvi su potrebni za korisnike, drugi - za tražilice. "Tražilice", vidjevši html kod prikladan za sebe, uzimaju u obzir odabrano područje i koriste dobivene informacije prilikom rangiranja, tako da označavanje teksta pomoću logičkog oblikovanja neće biti pogreška. Korištenje html oznaka omogućuje ugađanje tražilicama i vizualno isticanje teksta za korisnika. Što je prioritetnije, odlučite sami: Označavanje izraza podebljanim za PS i korisnike Označavanje izraza podebljanim za korisnike Izrazi u kurzivu za PS i korisnike Istaknite frazu kurzivom za korisnike Imam veliki i vrlo kontroverzan članak na temu podebljanih oznaka, koji se zove. Ako iznenada netko od programera pogleda temu, žuri još jednom napomenuti da je pregled za copywritere: kako staviti oznake, što su i što je važno uzeti u obzir pri odabiru. I na kraju, još jedan popularan html kod potreban za označavanje paragrafa. Ovaj Oznaka za otvaranje nalazi se prije početka odlomka, a oznaka za zatvaranje na kraju. Ako odlomak završava popisom, tada postavlja se iza svih oznaka korištenih za popis. Pa, nekoliko jednostavnih tematskih infografika na kraju: Kada je počela rasprava o temi u komentarima, Klub uspješnih tekstopisaca dao je zanimljive povratne informacije o infografikama i članku. Ovdje je screenshot mišljenja autoritativnog sudionika rasprave. Pročitano: 6.687 nalazi se tijelo stola. Tijelo se sastoji od redaka i stupaca. Tablica se popunjava red po red. Svaka oznaka stvaraju se stupci. Možete stvoriti više stupaca. U tom slučaju morate pratiti broj stupaca u svakom retku. Na primjer, ako je prvi redak imao 5 stupaca, tada bi sljedeći redci također trebali imati 5 stupaca. Inače će stol plutati. Moguće je spajanje ćelija. Kako napraviti tablicu u html-u Evo primjera, html koda: Primjer tablice Stupac 1 Stupac 2 Obratite pozornost na ćeliju . Koristimo poseban atribut colspan za vodoravni raspon ćelija. Njegova brojčana vrijednost označava broj stupaca koji će se spojiti. Postoji i analog ovog atributa: oznaka (naslov tablice), gdje također morate navesti colspan. Rezultat će biti isti. Ali često koriste obične td. Sada pogledajmo pobliže sve atribute oznake . Atributi i svojstva oznake Na početnu oznaku Možete odrediti različite atribute. 1. Svojstvo align="parameter" - postavlja poravnanje tablice. Može uzeti sljedeće vrijednosti: U gornjem primjeru, poravnali smo tablicu prema sredini align="center" . Ovaj se atribut može primijeniti ne samo na tablicu, već i na pojedinačne ćelije tablice . Stoga će poravnanje biti različito u različitim ćelijama. Na primjer 12. Svojstvo width="number" - postavlja širinu tablice: ili u pikselima ili u postocima. 13. Svojstvo class="class_name" - možete navesti naziv klase kojoj tablica pripada. 14. Svojstvo style="styles" - stilovi se mogu postaviti zasebno za svaku tablicu. Sada je vrijeme da zaronimo u tablicu i pogledamo atribute ćelija tablice. Ove atribute treba napisati u početnoj oznaci I Dostupne su iste opcije kao i za će se hijerarhijski primjenjivati ​​na sve ili linije ... ... ... 2. Svojstvo background="URL" - postavlja pozadinsku sliku. Umjesto URL-a treba napisati adresu pozadinske slike. Primjer Primjer tablice Stupac 1 Stupac 2 Pretvara se u sljedeće na stranici: U gornjem primjeru, naša pozadinska slika nalazi se u mapi img (koja je u istom direktoriju kao i html stranica), a slika se zove fon.gif. Napominjemo da smo u oznaku dodali style="color:white;" . Budući da je pozadina gotovo crna, kako bismo spriječili stapanje teksta s pozadinom, tekst smo pobijelili. 3. Svojstvo bgcolor="color" - postavlja boju pozadine tablice. Možete odabrati bilo koju boju iz cijele palete (pogledajte kodove i nazive html boja) 4. Property border="number" - postavlja debljinu obruba tablice. U prethodnim primjerima naveli smo border="1" , što znači da je debljina obruba 1 piksel. 5. Svojstvo bordercolor="color" - postavlja boju obruba. Ako border="0" tada neće biti obruba i boja obruba neće imati nikakvo značenje. 6. Svojstvo cellpadding="number" - uvlaka od okvira do sadržaja ćelije u pikselima. 7. Svojstvo cellspacing="number" - udaljenost između ćelija u pikselima. 8. Svojstvo cols="number" - broj stupaca. Ako ga ne postavite, preglednik će sam odrediti broj stupaca. Jedina je razlika u tome što će navođenje ovog parametra najvjerojatnije ubrzati učitavanje tablice. 9. Property frame="parameter" - kako prikazati granice oko tablice. Može uzeti sljedeće vrijednosti: praznina - ne crtajte granice granica - granica oko stola iznad - obrub uz gornji rub tablice ispod - granica na dnu tablice hsides - dodajte samo vodoravne granice (gornji i donji dio tablice) vsides - crtati samo okomite granice (lijevo i desno od stola) ls - rub samo na desnoj strani stola lhs - rub samo na lijevoj strani stola 10. Svojstvo height="number" - postavlja visinu tablice: ili u pikselima ili u postocima. 11. Property rules="parameter" - gdje prikazati granice između ćelija. Može uzeti sljedeće vrijednosti: sve - crta je nacrtana oko svake ćelije tablice grupe - prikazuje se linija između grupa koje čine oznake , , ili cols - linija se prikazuje između stupaca nijedan - sve granice su skrivene redaka - crta se granica između redaka tablice kreiranih kroz tag . Atributi i svojstva 1. Svojstvo align="parameter" - postavlja poravnanje pojedine ćelije tablice. Može uzeti sljedeće vrijednosti: lijevo - lijevo poravnanje centar - središnje poravnanje desno - desno poravnanje 2. Svojstvo background="URL" - postavlja pozadinsku sliku ćelije. Umjesto URL-a treba napisati adresu pozadinske slike. 3. Svojstvo bgcolor="color" - postavlja boju pozadine ćelije. 4. Svojstvo bordercolor="color" - postavlja boju granice ćelije. 5. Svojstvo char="letter" - specificira slovo od kojeg treba napraviti poravnanje. Vrijednost atributa align mora biti postavljena na char. 6. Svojstvo colspan="number" - postavlja broj horizontalnih ćelija koje se spajaju. 7. Svojstvo height="number" - postavlja visinu tablice: ili u pikselima ili kao postotak. 8. Svojstvo width="number" - postavlja širinu tablice: ili u pikselima ili kao postotak. 9. Svojstvo rowspan="number" - postavlja broj okomitih ćelija koje se spajaju. 10. Svojstvo valign="parameter" - okomito poravnanje sadržaja ćelije. vrh - poravnajte sadržaj ćelije na gornji rub retka sredina - središnje poravnanje dno - poravnanje do donjeg ruba osnovna linija - poravnanje prema osnovnoj liniji Napomena 1 Za oznaku . Parametri za jednu oznaku unutar njega Kako spriječiti lijepljenje obruba ćelija u tablici Ako koristite obrub (obrub ćelije) i nultu podlogu između ćelija, one su i dalje zalijepljene i dobit ćete dvostruki obrub. Da biste to izbjegli, trebate navesti border-collapse: collapse u stilovima tablice: ... Dragi čitatelju, sada ste naučili mnogo više o html oznaka stol. Sada vam savjetujem da prijeđete na sljedeću lekciju. Povezane publikacije: Kako podesiti kanale na TV-u Ubrzanje hardvera softverom Kako otključati Nokia telefon ako ste zaboravili sigurnosnu karticu Najbolji programi za defragmentaciju tvrdog diska na Windows OS Optimizacija i defragmentacija diska  kategorije