Category HTML i CSS

Mar 12 2018

Vežba 3 HTML i CSS

Otvoriti fajl rađen na prethodnim časovima- index.html

  1. Izdvojiti sva podešavanja u interni CSS – unutar <head> tagova.
  2. Tagu <div> zadajte ime pomoću id Npr. Id =“roze“
  3. U interni CSS izdvojiti i podešavanja za #roze <div> tag
  4. Na paragrafe i podnaslov h2 primeniti centalno poravnanje. (primeniti atribut class i CSS opisa text-alignment:center), a samo podnaslov obojiti u Navy
  5. Izdvojiti podešavanja u poseban fajl css, uraditi cut-paste, tj obrisati iz internog.
  6. Šta se desilo kada ste osvežili stranicu u browser-u?
  7. U <head> sekciji dodajte tag <link…./> za stil.css
  8. Napraviti još jednu stranicu – protokoli.html. Iskoristiti sledeći tekst i sliku. Za nabrajanje protokola upotrebiti definicionu listu.

 

Protokoli

Protokol predstavlja set utvrđenih pravila koja olakšavaju ostvarivanje veze, komunikaciju  i prenos podataka između dva uređaja na internetu. Postoji veliki broj protokola, a neki od njih su:

HTTP       (engl. Hypertext Transfer Protocol)

HTTPS    (engl. Hypertext Transfer Protocol Secure)

FTP        (engl. File Transport Protocol)

DNS        (engl.  Domain Name Service protocol)

POP3      (engl. Post office protocol verzija 3)

SMTP     (engl. Simple Mail Transfer Protocol)

Mar 23 2016

Vežba 4 HTML i CSS

 

  •  CSS
    • Inline CSS
    • Interni CSS
    • Eksterni CSS
  • Navigacija
    • Hiperlinkovi u CSS-u

Nacrtati hijerarhijsku strukturu sajta. (Možete koristiti neki od free online alata.  Npr . https://www.gliffy.com)

Kreirati prazne html strane sa nazivima kao na dijagramu.

SiteMapS

  1. Kreirati listu na početku body elementa i kopirati unutar svake strane:

<ul class=”navbar”>

<li><a href=”index.html”>Početna</a></li>

<li><a href=”komuredjaji.html”>Komunikacioni uređaji</a></li>

<li><a href=”vrste.html”>Vrste računarskih mreža</a></li>

<li><a href=”protokoli.html”>Protokoli</a></li>

<li><a href=”osi.html”>OSI slojni model</a></li>

</ul>

  1. Sledećim CSS podešavanjem pomeriti body udesno:

body {

padding-left:300px;

}

  1. Objasniti sledeća podešavanja:

ul.navbar {

list-style-type: none;

padding: 0;

margin: 0;

position:absolute;

left:1em;

top:2em;

width:15em;

color:#e7ddf6;

}

ul.navbar li {

font-family: Helvetica, Geneva, Arial,SunSans-Regular, sans-serif;

background-color:#6b5151;

margin: 0.5em 0;

padding: 1em;

border-right: 1em solid #3c3535;

border:0.2em solid #3c3535;

border-radius:15px;

}

ul.navbar a {

text-decoration: none

}

a:link {

color: blue

}

a:visited {

color: purple

}

a:hover {

color: yellow

}

4. Odvojiti podešavanja u poseban CSS fajl i nazvati ga stil.css

5. Dodati u <head> element svake strane sledeći kod:

<link rel=”stylesheet” type=”text/css” href=”stil.css” />

Mar 8 2016

Vežba2 HTML i CSS

bkgnd

 

  1. Postaviti pozadinsku sliku u <body> tag: <body style = “background-image:url(‘bkgnd.jpg’);“>
  2. Promeniti da hiperlink pokazuje na stranicu: https://www.codecademy.com/
  3. Otvoriti fajl rađen na prethodnom času pa dodati sledeći tekst iznad hiperlinka:

Podela računarskih mreža

Računarske mreže mogu se podeliti na različite načine, u zavisnosti od toga da li se posmatra:

        Površina koju pokriva mreža;

        Način povezivanja računara u mreži (topologija);

        Način komunikacije računara u mreži (logička organizacija) ili

        Odnos među čvorovima u mreži.

Prema površini na kojoj se računari nalaze u mreži, mreže mogu biti:

        Lokalne  računarske mreže LAN (Local Area Network),

        Globalne  računarske mreže WAN (Wide Area Network).

  1. Postaviti da naslov „Podela računarskih mreža“ bude drugog nivoa i obojiti ga plavo.
  2. Prvu podelu predstaviti numerisanom listom, a drugu nenumerisanom.
  3. Uokviriti prvu podelu tankom plavom linijom.
  4. Obojiti pozadinu druge podele u žuto.
  5. Uokviriti obe podele debelom crvenom linijom ( uvodi se <div> tag !!)
  6. Primećujemo da su linije i tekst slepljeni i da hiperlink nije odmaknut od okvira, pa ćemo oko crvene linije dodati prostor pomoću deklaracije: margin:10px, a u odnosu na unutrašnji sadržaj sa: padding:10px;
  7. Objasniti promene.

 

Jan 23 2015

Vežba1 HTML i CSS

 

 

1. Otvoriti Notepad i ubaciti sledeći tekst:

Računarske mreže

Računarska mreža je pojam koji se odnosi na računare i druge uređaje koji su međusobno povezani kablovima ili na drugi način, a u svrhu međusobne komunikacije i deljenja podataka. U najjednostavnijem obliku, mrežu čine dva računara koja su povezana kablom, što im omogućava da zajednički koriste podatke. Možda ideja povezivanja dva računara kablom danas ne spada u vrhunska dostignuća, ali u prošlosti je bila upravo to – vrhunsko dostignuće u oblasti komunikacija.

Računarske mreže su se razvile iz potrebe stalnog zajedničkog korišćenja informacija. Računari su moćni zato što mogu da obrađuju ogromne količine podataka vrlo brzo. Ipak, njihov ozbiljan nedostatak je što nemaju mogućnost efikasnog deljenja tih podataka sa drugim računarima i korisnicima.

2. Snimiti dokument pod nazivom index.html u folder MyDocuments\MojHTML  i zatvoriti Notepad.

3. Otvoriti index.html na sledeći način: desni klik->open with->Google Chrome

Šta se dešava? Tekst je prikazan u Browser-u,  sve je spojeno i problem se javlja sa našim slovima.

4. Ponovo otvoriti  fajl u Notepad-u (dupli klik). Snimiti ga sa Save As ali ovaj put odabrati Encoding: UTF-8 (levo od Save). – Ovo bi trebalo da reši problem sa našim slovima.

5. Otkucati :

<h1>Računarske mreže</h1> – objasniti promenu u browseru…

6. Dodati na početak : <title>Računarske mreže</title>  – objasniti promenu u browseru…

7. Izdvojiti tagove <html>, <head> i <body>…RMreza

8. Dodati tagove za paragraf <p>, bold tekst <b>, italik tekst <i> i podvučen tekst <u>…

9.  Između drugog i trećeg paragrafa ubaciti sliku računarske mreže dimenzija: 300 x 250.

<img src=”rmreza.jpg”  width=”300″ height=”250″>

napomena: slika mora biti iskopirana u isti folder kao i index.html

10. Obojiti tekst paragrafa i pozadinu:

style=”color:red ; background-color:yellow”

11. Na kraju teksta dodati link ka w3schools tutorijalima:

<a href=”http://www.w3schools.com ” > Ovo je link ka tutorijalima.</a>

 

Vaš prvi html dokument bi trebalo da izgleda ovako.