Sunday, March 28, 2021

CSS u HTML

CSS je Cascading Style Sheets.

Može se dodati na 3 načina u HTML dokument:

    Korišćenjem style atributa unutar HTML elementa

    Korišćenjem <style> taga unutar <head> sekcije

    Korišćenjem <link> taga koji pokazuje na CSS fajl gde se piše CSS kod


Primer 1:

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>


Primer 2:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Primer 3:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Imamo i fajl styles.css u sitom folderu sa sledećim sadržajem:

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
{
  color: red;
}

Primer 4: Podešavanje colorfont-familyfont-size:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
{
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Primer 5: Podešavanje border-a:

{
  border: 2px solid powderblue;
}

Primer 6: Podešavanje padding-a

{
  border: 2px solid powderblue;
  padding: 30px;
}

Primer 7: Podešavanje margine

{
  border: 2px solid powderblue;
  margin: 50px;
}

HTML forma

1. Krenućemo od jednostavne forme u kojoj se unosi Ime i Prezime i koja te podatke prosleđuje PHP stranici.

Primer HTML koda je:

iframe element

 Ovim elementom možemo sadržaj sa druge web stranice da uključimo u našu stranicu.

Primer HTML koda:

HTML atributi id i class

id atribut se koristi da bi jednoznačno odredio HTML element.

class atribut može da se doda u više HTML elemenata.

Primeri za dodavanje ID i CLASS elemenata:

<h2 id="jedinstvenID">Beograd</h2>

<h2 class="klasa">Beograd</h2>

Najčešće se koriste se za formatiranje HTML elementa pomoću CSS-a.

Ideja je da se u CSS-u definiše formatiranje elemenata po id i class. To je predmet drugog kursa.

Blok i inline elementi

Blok elementi uvek počinju u novom redu.

Blok elementi uvek zauzmu celu dostupnu širinu.

Blok elementi imaju top i bottom marginu.

Blok elementi su:

Inline elementi ne počinju u novom redu.

Inline elementi zauzmu samo širinu koja im je neophodna za prikazivanje

Inline elementi su:



Liste u HTML-u

 Primer HTML koda:

Tabela u html-u

Tabela se definiše <table> tagom.

Red u tabeli se definiše <td> tagom.

Kolona u tabeli se definiše <th> tagom.

Primer tabele u HTML-u:

Slike u HTML-u

Slike se u HTML-u dodaju korišćenjem <img>  taga i atributa src.

<img src="nazivslike.jpg" alt="tekst umesto slike" width="500" height="600">

src - definiše putanju do slike

alt - alternativni tekst koji se prikazuje ako slika ne može da se prikaže

width - širina slike u pikselima

height - visina slike u pikselima

Primer u html-u. U ovom primeru imamo i sliku desktop.png koja se nalazi u istom folderu gde i html dokument.

Linkovi u HTML-u

 Linkovi se u HTML-u dodaju na sledeći način:

<a href="url">link tekst</a>

gde je url http adresa do stranice koju želimo da linkujemo.


Ako želimo da se otvori novi tab kada kliknemo na link koristimo ovaj kod:

<a href="url" target="_blank">Tekst koji se linkuje</a>

Primer HTML koda sa linkovima:

Boje u HTML-u

1. Sa background-color možemo setovati boju pozadine HTML elementa:

<h1 style="background-color:DodgerBlue;">Pozadina H1 elementa</h1>

<p style="background-color:Tomato;">Pozadina P elementa</p>

2. Sa color možemo setovati boju teksta:

<h1 style="color:Tomato;">Izmenjena boja teksta</h1>
<p style="color:DodgerBlue;">Izmenjena boja teksta</p>

3. Sa border možemo podesiti boju okivar:

<h1 style="border:2px solid Tomato;">Element ima okvir u boji</h1>

4. Boje možemo podešavati i u RGB formatu:

<h1 style="background-color:rgb(255, 99, 71);">...</h1>

Primer HTML koda:

Komentari u HTML kodu

Komentari u HTML kodu se neće prikazati u browser

Komentari se označavaju na sledeći način:

<!-- Ovo je komentar -->

Primer HTML koda sa komentarima:

HTML tagovi za formatiranje teksta

 U ovom primeru ćemo iskoristiti sledeće HTML tagove:

  • <b> - Bold text
  • <strong> - Important text
  • <i> - Italic text
  • <em> - Emphasized text
  • <mark> - Marked text
  • <small> - Smaller text
  • <del> - Deleted text
  • <ins> - Inserted text
  • <sub> - Subscript text
  • <sup> - Superscript text

HTML kod:

Saturday, March 27, 2021

HTML stilovi

Style je atribut HTML elementa

Style ima osobinu (property) i vrednost (value)

Style se dodaje u početnom tagu elementa, na primer:

<nazivtaga style="property:value;">

Primer html koda sa style tagom:

HTML pasus - HTML paragraf

Važna pravila sa paragrafom:

Paragraf uvek počinje u novom redu
Paragraf se definiše tagom <p>

Primer html koda:

HTML Naslov

 <!DOCTYPE html>

<html>
<title>HTML naslovi</title>
<body>


<h1>Primer naslova u tagu H1</h1>
<h2>Primer naslova u tagu H2</h2>
<h3>Primer naslova u tagu H3</h3>
<h4>Primer naslova u tagu H4</h4>
<h5>Primer naslova u tagu H5</h5>
<h6>Primer naslova u tagu H6</h6>

<h1 style="font-size:60px;">H1 naslov nad kojim je primenjen atribut style</h1>
<p>Naslov možemo promeniti sa atributom style.</p>


</body>
</html>

IZGLED HTML STRANICE u BROWSER-u:












Friday, March 26, 2021

Šta su HTML atributi?

Svaki HTML element može imati atribut.

Kada elementu dodamo atribut na web stranici će se promeniti boja, stil, širina, visina, može se dodati link, dodati sliku,..., 

Atributi se definiše u početnom tagu elementa:

<tag imeatributa="vrednost"></tag>

Praktični primeri su sledeći:

<a href="https://skolahtmla.blogspot.com/">Mala škola HTML-a</a>

<img src="nazivslike.jpg">

<img src="nazivslike.jpg" width="500" height="600">

<img src="nazivslike.jpg" alt="Girl with a jacket">

<p style="color:red;">Ovo je crveni pasus.</p>

<p title="iskace iznad paragrafa">Ovo je pasus iznad kog iskace title.</p>

Objašnjenja šta koji atribut znači slede u narednim lekcijama.

Kako kreirati HTML dokument?

1. - Otvorimo notpad

2. - Prekopiramo html kod iz prethodnog primera


3. - Sačuavamo notped dokument sa nazivom index.html


4. - Na desktopu ćemo imati ikonicu index.html


5. - Kada otvorimo index.html dobijamo web stranicu koju smo krirali:




Šta je HTML? Šta su elementi HTML, HEAD, TITLE, BODY?

HTML je skraćenica od Hyper Text Markup Language

HTML je jezik za kreiranje web stranica

HTML je sačinjena od elemenata 

HTML element govori Google Chrome ili Internet Explorer browser-u kako da prikaže sadržaj

HTML elementima se označava sadržaj na web stranici, kao što je naslov, pasus, link ka drugoj stranici

CSS u HTML

CSS je Cascading Style Sheets. Može se dodati na 3 načina u HTML dokument:     Korišćenjem  style  atributa unutar HTML elementa     Korišće...