HTML Intermediate

Klixova večernja škola - tutoriali, savjeti, praktična rješenja
Post Reply

Da li Vam se sviđaju tutorijali do sada?

Veoma mi se sviđa
4
80%
Sviđa mi se
0
No votes
Onako
1
20%
Može bolje
0
No votes
Nikako mi se nesviđa
0
No votes
 
Total votes: 5

Cookie85
Posts: 1358
Joined: 01/07/2016 20:22

#1 HTML Intermediate

Post by Cookie85 » 22/08/2018 12:01

Da nastavimo sa HTML sada idemo malo dalje :-D

Budući da je cilj HTML Beginner bio je da se nauči neophodne predmete, što ne bi trebalo biti nešto baš teško, ali ćemo dodati malo više našem razumijevanju HTML-a i omogućiti nam da napravimo još nekoliko stvari.
Sadržaj ovog tutorijala

* Span and Div: "Besmisleni" elementi, koji se koriste sa CSS-om.
* Text: Skraćenice, Citati i Kod
* Meta Tags: Uputiti dodatne informacije o web stranici.
* Tables: rowspan and colspan: Proširenje na tabelama HTML početnog tutorijala, gledajući zaglavlje-ćelije i spajanje ćelija.
* Description Lists: Zaboravljene liste.
* Text: Addresses, Definitions, Bi-directional, and Editorial: Adrese, definicije, dvosmjerni i uređivački
* Sectioning: Velike semantičke strukture za dokumente.
Span and Div

HTML se odnosi na primjenu značenja na sadržaj.Dok većina HTML oznaka primjenjuje značenje (p čini paragraf, h1 čini naslov itd.), span i div oznake uopšte ne primenjuju značenje.
Ovo bi moglo da zvuči kao korisno kao papirni čekić, ali se zapravo koristi prilično široko u saradnji sa CSS-om.

Koriste se za grupisanje komada HTML-a i povezivanje nekih informacija na taj dio, najčešće sa atributima class i id.

Razlika između class i id je to da element je in-line i obično se koristi za mali deo HTML-a unutar linije (kao što je unutar pasusa) dok div (division = podjela) element block-line (što je u suštini ekvivalentno preklapanju linije pre i posle nje) i koristi se za grupu većih komada koda.

Code: Select all

<div id="scissors">
    <p>Ovo je <span class="paper">ludo</span></p>
</div>
div i posebno span, ne bi trebalo da se često koriste. Kad god postoji bolja alternativa, trebalo koristiti umjesto toga.
Na primjer, ako želite naglasiti riječ "ludi", a klasa "papir" (paper) dodaje kurzivu za vizuelni naglasak, onda, za bogatiji i sadržajniji sadržaj, kod može izgledati ovako:

Code: Select all

<div id="scissors">
    <p>Ovo je <em class="paper">ludo</em></p>
</div>
Ako još uvek nemate pojam o class i ID-u, ne brinite, sve imate ovdje : CSS Beginner Sve što treba da zapamtite je taj span i div su "besmislene" oznake.
Iako nisu zamjena za div tag, HTML 5 uvodi brojne oznake koji se koriste za grupisanje blokova koda zajedno i dodavanje značenja u isto vrijeme, article, header, footer...
Text: Abbreviations, Quotations, and Code

Osnove definisanja teksta koristeći paragraphs (emphasis i line breaks) (paragrafi kao i naglasak i prekid linija) i headings smo prošli HTML Beginner. I iz istog razloga koristimo p i h1, h2, itd., Postoji i niz drugih oznaka koje treba koristiti i za specifične predstavljanje drugih tekstualnih tipova,kao abbreviations, quotations (skraćenice, citate) i kod.

Abbreviations

abbr koristi se za označavanje skraćenice, skraćeni oblik riječi ili fraze.

Proširena fraza koja predstavlja skraćenicu može se definirati u vrijednosti atributa naslova. Ovo je neobavezno, ali se preporučuje.

Code: Select all

<p>Ovaj dio foruma je za<abbr title="HyperText Markup Language">HTML</abbr> i <abbr title="Cascading Style Sheets">CSS</abbr>.</p>
Quotations

blockquote i q koriste se za citate.blockquote se generalno koristi za samostalne često višestruke citate dok se q koristi za kraće, on-line citate.

Ako se izvor citiranja može naći na Webu, cite atribut se može koristiti za ukazivanje na njegovo porijeklo.

Code: Select all

<p>Zato sam pitao Selima o citatima na Webu i rekao <q>Znam mnogo o citatima koliko i ja o golubovima</q>. Na sreću, našao sam HTML na Klix-u i rekao:</p>

<blockquote cite="https://forum.klix.ba/html-intermediate-t150836.html">
    <p>blockquote i q koriste se za citate. blockquote se generalno koristi za samostalne često multi-linijske citate, a q se koristi za kraće, on-line citate.</p>
</blockquote>
Blockquotes vrlo lijepo radi s HTML5 elementima figure i figcaption, omogućavajući lep, semantičan način da grupišu citat sa citatom:
<figure>
<blockquote>[Veliki stari citati o evoluciji]</blockquote>
<figcaption>Charles Darwin</figcaption>
</figure>
Ali hajde da se ne zajebavamo ovdje sada :D
Citations

Samo da stvari budu lijepe i zbunjujuće, kao i cite atribut, postoji i cite tag.Ovo se može koristiti za definisanje naslova rada, kao što je knjiga.

Code: Select all

<p>Prema <cite>Bibliji</cite>, nakon šest dana Bog je rekao <q>zajebi ovo, odoh da spavam</q>.</p>
Code

Code se koristi da predstavlja bilo koji oblik računarskog koda. Pored toga var može se koristiti za varijable (što bi moglo biti promjenljiva u bilo čemu, ne samo kodu - to bi mogla biti varijabla u jednačini, na primjer), samp za izlaz uzorka (output), kbd (tastatura) za korisnički unos (input).

Code: Select all

<p>Ako dodate liniju <code><var>dajvaderu</var> = true;</code> da <code>unisti_planet</code> potprogram i potom unesite <kbd>javolimjabba</kbd> u konzolu, veliki stari zeleni laser "Death Star" će ugravirati <samp>Ljenčine!</samp> na planeti.</p>

Preformatted text

pre je preformatiran tekst i neobično je u HTML oznakama da primeti obaveštenje o svakom karakteru u njemu, uključujući i bijeli prostor (dok će drugi elementi ignorisati jedan uzastopni prostor ili liniju-pauza, na prijmer). Najčešće se koristi za blokove koda, gdje razmak, kao što je urezivanje, može biti relevantan.

Code: Select all

<pre><code>
<div id="intro">
    <h1>Neki Naslov</h1>
    <p>Neki paragraf paragra nešto nešto.</p>
</div>
</code></pre>
Kao prijmer, pre i code koriste se široko na ovoj lokaciji. Blokovi kodova, kao što je prethodno navedeno, su code elements (elementi koda) unutar pre elements (pre elementi). In-line reference na oznake i osobine su jednostavno kodni elementi, često unutar elementa za povezivanje "References" Reference.



Cookie85
Posts: 1358
Joined: 01/07/2016 20:22

#2 Re: HTML Intermediate

Post by Cookie85 » 23/08/2018 10:31

Meta Tags

Meta tagovi ne čine ništa sadržajima koji su predstavljeni u prozoru pregledača, ali ih koriste kao i pretraživači za katalogiziranje informacija o web stranici.

Postoji jedan meta tag koji se može koristiti toliko puta želite unutar head elementa i mogu sadržati atribute charset, name, http-equiv, i content.

Kada se name ili http-equiv atribut se koristi, content atribut se zatim koristi zajedno sa njima da prijmeni meta podatke.

Names

name atribut može biti sve što vam se sviđa. Najčešće korištena imena su author, description, i keywords. author se koristi za eksplicitno navesti jedan od autorskih stranica HTML stranice, a description često koriste pretraživači (kao što je Google) da bi prikazali opis web stranice u rezultatima pretrage.
Razlog zašto meta tags su toliko važni, zato je se pretraživači oslanjaju na izgradnju profila web stranice. Na primjer keywords meta podaci su bili korišteni (i zloupotrebljeni) na veliko. Međutim, danas, većina pretraživača koristi stvarni sadržaj same stranice.
HTTP Equivalents

http-equiv atribut se može koristiti umjesto atributa name i napravit će HTTP header, što je informacija poslana serveru na kojem se nalazi web stranica. Atribut se retko treba koristiti, ali vrijednost može biti:

* content-type, deklaracija o kodiranju, definišući koji se skup znakova koristi,
* default-style, željeni stil listova iz selekcije linkova ili stilskih elemenata,
* ili refresh, koja definira koliko često (u sekundama) stranica automatski osvežava ili ako se automatski preusmerava na drugu stranicu. Nije sjajno za pristupačnost.
Atribut charset-a se može koristiti kao skraćeni metod za definisanje skupa znakova HTML dokumenta, što je uvijek dobra stvar.
<meta charset="utf-8"> je isti kao <meta http-equiv="content-type" content="text/html; charset=utf-8">.

Code: Select all

<head>
    <title>HTMl Tutorial? YEAH tutorial!</title>
    <meta charset="utf-8">
    <meta http-equiv="refresh" content="3"><!--ne preporučuje se za normalne ljude-->
    <meta name="description" content="Ovo je, stvarno, uzbudljiv HTML tutorial, od Cookie85">
    ...

Cookie85
Posts: 1358
Joined: 01/07/2016 20:22

#3 Re: HTML Intermediate

Post by Cookie85 » 23/08/2018 13:40

Tables: rowspan and colspan

Tabele su možda je izgledale komplikovano u HTML Beginner. Malo je teško vizualizirati dvodimenzionalnu mrežu iz jednodimenzionalnih linija koda. Eh, pa sada postaje zajebanije :-D. Sve zahvaljujući rowspan i colspan atributima.

Code: Select all

<table>
    <tr>
        <th>Naslov kolone 1</th>
        <th>Naslov kolone 2</th>
        <th>Naslov kolone 3</th>
    </tr>
    <tr>
        <td>Red 2, ćelija 1</td>
        <td colspan="2">Red 2, ćelija 2, takođe obuhvata Red 2, ćelija 3</td>
    </tr>
    <tr>
        <td rowspan="2">Red 3, ćelija 1, takođe obuhvata Red 4, ćelija 1</td>
        <td>Red 3, ćelija 2</td>
        <td>Red 3, ćelija 3</td>
    </tr>
    <tr>
        <td>Red 4, ćelija 2</td>
        <td>Red 4, ćelija 3</td>
    </tr>
</table>
Header cells

Prva razlika je u tome što su td oznake prvog reda zamijenjene th oznakama. Dok je td standardna ćelija podataka, th je header ćelija. Kao i kod td elemenata, oni moraju biti zatvoreni unutar tr elementa.

Spanning columns and rows

colspan i rowspan atributi takođe su korišteni u nekim od td tagova. Ako pogledate ovaj kod u browseru, vidjećete da u drugom redu postoje dvije ćelije umjesto tri, druga ćelija koja obuhvata drugu i treću kolonu.
colspan atribut, što znači da će "raspon stupca" (column span) obuhvatiti ćeliju preko broja ćelija koje je naznačeno.To znači, u ovom primeru, da nema potrebe za trećim td elementom - dvije ćelije se spajaju u jednu.
rowspan atribut je sličan colspan , osim, očigledno, to će proširiti redove, a ne kolone. Opet, ćelije koje se prostiru treba ukloniti. U ovom primjeru, jer se prostire u četvrtom redu, u tom redu su samo dvije ćelije.

Kao i kod jednostavnijeg 3x4, tebele od 12 ćelija, takođe bi trebalo dodati i brojke na ovim tabelama sa spojenim ćelijama. Iako u ovom primjeru ima samo 10 ćelija, postoje 2 raspona.

Cookie85
Posts: 1358
Joined: 01/07/2016 20:22

#4 Re: HTML Intermediate

Post by Cookie85 » 24/08/2018 15:03

Description Lists

U HTML Beginner smo vidjeli unordered lists i ordered lists (neuređene liste i naručene liste), opisne liste (Description Lists) su često zaboravljene.Ovo je možda zato što su mnogo specifičnije od naređenih i neuređenih listi i stoga manje korisne, uopšteno, ali tamo gde postoji lista izraza i opisa (kao što je riječnik), opisna lista je vaš idejni element.

dl je slično ul i ol elementima, uspostavljajući listu. Međutim, umjesto da sadrže li elemente, opisne liste imaju dt elemente, što su uslovi, a zatim slijede elementi dd, koji su opisi povezani sa elementima dt.

Ne mora biti jedan dt koji prati jedan dd, može biti i bilo koji broj. Na primjer, ako postoji niz riječi koje imaju isto značenje, možda postoji i broj dt-a koje prati jedan dd. Ako imate jednu reč koja znači razne različite stvari, možda će biti i jedan dt, a zatim nekoliko DD-ova.

Code: Select all

<h1>Neki Naslov</h1>
<dl>
    <dt>HTML</dt>
    <dd>Skraćenica za HyperText Markup Language - jezik koji se koristi za izradu web stranica.</dd>

    <dt>Pas</dt>
    <dd>Svaka mesojed životinja koja pripada porodici Canidae.</dd>
    <dd>Udomljene podvrste porodice Canidae, Canis lupus familiaris.</dd>

    <dt>Coca Cola</dt>
    <dt>Sarajevska Piva</dt>
    <dt>Mlijeko</dt>
    <dd>Bijela tečnost koju proizvode krave i koristi se za ljudsku upotrebu.</dd>
</dl>


Cookie85
Posts: 1358
Joined: 01/07/2016 20:22

#5 Re: HTML Intermediate

Post by Cookie85 » 25/08/2018 10:02

Text: Addresses, Definitions, Bi-directional, i Editorial

Dobro jutro :-D

Do sada bi trebalo do sada da znamo da ima puno oznaka za tekst. Uradili smo paragraphs (paragrafe), headings (Naslove), Čak smo i uradili abbreviations, quotations, i code (skraćenice, citate i kod). I postoji nekoliko drugih, još nejasnih oznaka koje se mogu koristiti. Neobično jer ih nećete naći malterisane oko Veba, a ne zato što su bezuspješni. Ako nađete da imate tekst koji odgovara opisima ovih elemenata, imaćete lijepu, bogatiju i značajnu HTML stranicu, ako ih koristite.

Addresses

address treba koristiti posebno za kontaktne podatke koji se odnose na cijelu web stranicu (i tako se koristi samo jednom) ili na article (članak) element. To nije, kao što se moglo pojaviti na početku, za obilježavanje bilo kojeg starog naslova.

Code: Select all

<h3>Detalji o kontaktu autora</h3>
<address>
<ul>
    <li>0123-456-7890</li>
    <li>[email protected]</li>
    <li>http://www.klix.ba/contactme/</li>
</ul>
</address>
Definition terms

dfn je pojam definicije i koristi se za isticanje prve upotrebe termina. Kao abbr, title atribut može se koristiti za opis.

Code: Select all

<p> Selim <dfn title = "Pas"> Dog </dfn> majka i <dfn title = "Konj"> Horse </dfn> otac ga je saslušao i pažljivo objasnio da je bila <dfn title = "Mutacija koji kombinuje dvije ili više seta hromozoma iz različitih vrsta "> allopolyploid </dfn> organizma. </p>

Bi-directional text

bdo može se koristiti za promjenu pravca teksta i može se koristiti za prikazivanje jezika koji čitaju desno na lijevo. Vrijednost potrebnog atributa dir može biti ltr (left to right) ili rtl (right to left).

Code: Select all


<bdo dir="rtl">nokaZ lmth</bdo>


Editorial

ins i del koriste se za prikazivanje uređivačkog sadržaja stavljanja i brisanja (insertions i deletions ). Striktno govoreći, oni nisu ograničeni na tekst i mogu se koristiti u čitavim dijelovima sadržaja, ali se obično koriste u umejrenoj mjeri, baš kao što su "Track Changes" funkcije u procesima za obradu teksta. Oni mogu imati atribute datetime a biste naznačili kada je izmjena izvršena i cite da ukaže na opis zašto je izmjena izvršena.

Code: Select all


<p>Odlucio sam <del datetime="2018-08-25">povecati</del> <ins cite="https://www.klix.ba/vijesti/bih/sumnje-zbog-javnih-nabavki-opcine-centar-pregovaracki-postupak-je-iznimka-a-ne-pravilo/180808082">smanjiti</ins> novac Opcini Centar, jer postoji mogucnost kradje.</p>

Kao i kod tradicionalnih uređivanja zasnovanih na tekstualnim procesorima ins element je obično prikazan podvučen i del element se obično prikazuje sa linijom preko teksta.
A ima još ... HTML 5 donosi još više tekstualnih elemenata. više o tome ćemo u HTML Advanced Tutorial.

Sectioning

Dok headings urade veliki, savršeno posao u definisanju početka novog odeljka ili podsjeka u dokumentu, postoji niz elemenata koji se mogu eksploatisati za uspostavljanje čistije i jasnije semantičke strukture. Dok se div elementi mogu koristiti za zadržavanje sekcija, koji se prije svega koriste kao skele na kojima je potrebno čuvati CSS, oni nemaju mnogo značaja. Sekcija uključuje šaku oznaka koje se mogu koristiti za definisanje određenih dijelova stranice, kao što su articles, headers, footers, i navigation.


Articles and Sections

article elemnt može se koristiti za označavanje samostalnog dijela sadržaja. Ovo se može koristiti samo jednom, ako razmišljate o blog postu kao članku, na primjer, ili nekoliko puta, ako zamišljate repliku tradicionalne novinske stranice sa brojnim člancima. section element predstavlja opšti dio i može se koristiti za razdvajanje članka, ili za predstavljanje poglavlja, na primjer.

Code: Select all

<article>
    <section id="intro">
        <p>[Uvod]</p>
    </section>
    <section id="main_content">
        <p>[Kontent]</p>
    </section>
    <section id="related">
        <ul>
            <li><a href="taj_calank.html">Taj clanak</a></li>
            <li><a href="ovaj_clanak.html">Ovaj clanak</a></li>
        </ul>
    </section>
</article>
Dok div može se koristiti za razdvajanja (ili čak i ako vam nisu potrebni razdvajanja za styling (stil), ovo pruža mnogo bogatiji i značajniji dokument.
Specifikacije HTML5 sugerišu da možete koristiti h1 elemente na početku svakog odjeljaka, što će postati podnaslov bilo čega prije tog poglavlja (tako, u gore navedenom primjeru, ako ste imali h1 odmah nakon oznake otvaranja članka, h1 odmah nakon oznake za otvaranje sekcije biće podnaslov tog inicijalnog h1). Ovo zajebe konpatibilnost, međutim, i svi korisnici (uključujući čitače) koji to ne razumiju neće primjeniti pravilno strukturirane nivoa zaglavlja. Predlažem da se pridržavate nivoa zaglavlja koje biste koristili ako niste koristili sekcije (tako h1, zatim h2, itd, bez obzira na odjeljak). Ovo ne kvari ništa ili niti umanjuje značenje ili semantiku.

Headers and Footers

header i footer (zaglavlje i podnožje) pružaju dalje specijalizovane, samo-opisne, sekcije:

Code: Select all


<body>
<article>
    <header>
        <h1>Alternativno&hellip;</h1>
        <p>[Uvod]</p>
    </header>
    <section id="main_content">
        <p>[Kontent]</p>
    </section>
    <footer>
        <p>[Kraj Poruke]</p>
    </footer>
</article>
<footer>
    <p>[Copyright Cookie85]</p>
</footer>
</body>

footer je podnožje odeljka u kojem se nalazi. Dakle, u prethodnom primjeru, prvo podnožje je podnožje članka, a drugo podnožje je podnožje stranice.

Asides

A aside može se koristiti za predstavljanje sadržaja koji je povezan sa sadržajem koji ga okružuje.Pomislite na citate ili odlomke srodnih informacija u članku:

Code: Select all


<section id="main_content">
    <h1>Selim</h1>
    <p>[Sve o Selimu Selimovicu]</p>
    <aside>
        <h2>Selim Selimovic</h2>
        <p>[Kratko o Selimu Selimovicu]</p>
    </aside>
    <p>[Mozda malo vise o Selimu Selimovicu]</p>
</section>


Dok smo u ovoj strukturi, ako želite da uključite cifre, postoje dvije oznake upravo za to:

Code: Select all

<figure>
    <img src="selim.jpg">
    <figcaption>Selim Selimovic</figcaption>
</figure>
Imajte na umu da elementu img ne treba alt atribut AKO JE figcaption "figurativni naslov" radi taj posao.
Navigation

Napokon, tu je nav koristi se za označavanje grupe navigacionih veza (navigation links):

Code: Select all

<nav id="main_nav">
    <ul>
        <li><a href="/onama/">O Nama</a></li>
        <li><a href="/blog/">Blog</a></li>
        <li><a href="/galerija/">Galerija</a></li>
        <li><a href="/kontakt/">Kontakt</a></li>
    </ul>
</nav>
Ovo se također može koristiti za navigaciju unutar stranice (<a href="#nesto">... ), ali nije neophodno za svaku grupu veza - dizajniran je za glavne grupe. Autorska prava, autor i kontakt linka mogu sjediti sretno sami sebi u elementu footer-a, na primjer.
Ako želite da oblikujete ove nove HTML 5 elemente (a vjerovatno, To je mnogo ljepše od korišćenja <div id="content">... oživjet ćete problem kod starijih browsera, a najvažnije Internet Explorer verzije 8 i ranije, koje ne razumiju ove oznake.

HTML5 međutim, može doći do vašeg spašavanja; mali komad JavaScript-a, koji je urezan u element glave (head) koji dopuni browsere i drži tako da možete koristiti nove HTML 5 oznake i stvoriti ih do sadržaja vašeg CSS-om.
Kada završim HTML i CSS onda ću početi sa JavaScriptom

Uživajte u čitanju :D :izet:

User avatar
pirmin
Posts: 11221
Joined: 18/02/2006 23:50
Location: Ciganluk

#6 Re: HTML Intermediate

Post by pirmin » 24/06/2019 15:23

Cookie, je li to to? :zoka:

Moze li se napraviti lista elemenata i atributa koji se moraju "izglave" znati? :)

Cookie85
Posts: 1358
Joined: 01/07/2016 20:22

#7 Re: HTML Intermediate

Post by Cookie85 » 29/06/2019 10:00

pirmin wrote:Cookie, je li to to? :zoka:

Moze li se napraviti lista elemenata i atributa koji se moraju "izglave" znati? :)
Ma ne pisem vise, nema dovoljno zainteresovanih, sada skidam Udemy kurseve i postavljam ih na Website

User avatar
arman1
Posts: 4082
Joined: 06/11/2006 12:06
Location: Na selu čuvam stoku. U gradu se čuvam od stoke.
Contact:

#8 Re: HTML Intermediate

Post by arman1 » 14/02/2020 17:31

HVALA TI

User avatar
Miss Moonlight
Posts: 10338
Joined: 15/11/2018 23:40
Location: Samo drsko na fin način!

#9 Re: HTML Intermediate

Post by Miss Moonlight » 14/02/2020 18:33

Evo jedan super tutorial sa osnovama HTML-a tj načešće korištenim stvarima. Ostalo se sve po potrebi može izguglati

https://www.youtube.com/watch?v=88PXJAA6szs


Nakon toga preporučujem ovaj CSS

https://www.youtube.com/watch?v=3_9znKVNe5g

Post Reply