HTML I CSS

HTML – osnovno:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
KREIRANJE PARAGRAFA (ELEMENTI HTML-A):
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
HEADING-primeri:
<html>
<body>
<h1>This is heading 1</h1>

</body>
</html>
HTML ATRIBUTI:
 Svi HTML elementi mogu imati atribute

 Atributi pružaju dodatne informacije o elementima
 Atributi su uvek navedeni u početnoj oznaci
 Atributi obično dolaze u parovima ime/vrednost kao što su: name="value"
<html>
<body>
<h2>The href Attribute</h2>
<p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p>
<a href="https://www.google.com">Visit Google</a>
</body>
</html>
HTML – SLIKE:
<html>
<body>
<h2>HTML Image</h2>
<img src="pic_trulli.jpg" alt="Trulli" width="500" height="333">
</body>
</html>
ATRIBUT ID:
Atribut id navodi jedinstveni ID za HTML element. Vrednost atributa id mora biti jedinstvena
unutar HTML dokumenta.
Atribut id se koristi da ukaže na određenu deklaraciju stila u listi stilova. Takođe ga koristi
JavaScript za pristup i manipulisanje elementom sa određenim ID-om.
Sintaksa za id je: napišite znak heš (#), nakon čega sledi ime id. Zatim definišite CSS svojstva
unutar vitičastih zagrada {}.
U sledećem primeru imamo element <h1> koji ukazuje na ime id "myHeader". Ovaj <h1> element
će biti stilizovan prema #miHeader definiciji stila u odeljku zaglavlja:
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h2>The id Attribute</h2>
<p>Use CSS to style an element with the id "myHeader":</p>
<h1 id="myHeader">My Header</h1>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 10px 20px 30px 40px;
text-align: center;
}
</style>
</head>
<body>
<h2>The id Attribute</h2>
<p>Use CSS to style an element with the id "myHeader":</p>
<b id="myHeader">My Header</b>
</body>
</html>
HTML-Text Formatiranje
<html>
<body>
<p><b>This text is bold</b></p>

<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
Dodavanje komentara
<html>
<body>


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

</body>
</html>
HTML – Boje
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>
HTML-Liste
<html>
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
HTML-Liste/Podliste
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
-------------------------------------------------------------------------------------
<html>
<body>
<h2>A Description List</h2>
<ol>
<li>Coffee</li>
<dd>- black hot drink</dd>
<li>Milk</li>
<dd>- white cold drink</dd>
</ol>
</body>
</html>
HTML-Div element
<html>
<style>
div {
background-color: #FFF4A3;
}
</style>
<body>
<h1>HTML DIV Example</h1>
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
<p>The yellow background is added to demonstrate the footprint of the DIV element.</p>
</body>
</html>
--------------------------------------------------------------------------------
<html>
<body>
<h1>Multiple DIV Elements</h1>
<div style="background-color:#FFF4A3;">
<h2>London</h2>
</div>
<div style="background-color:#FFC0C7;">
<h2>Oslo</h2>
<p>Oslo is the capital city of Norway.</p>
<p>Oslo has over 600.000 inhabitants.</p>
</div>
<div style="background-color:#D9EEE1;">
<h2>Rome</h2>
<p>Rome is the capital city of Italy.</p>
<p>Rome has almost 3 million inhabitants.</p>
</div>
<p>CSS styles are added to make it easier to separate the divs, and to make them more pretty:)</p>
</body>
</html>
--------------------------------------------------------------
<html>
<body>
<h1>Multiple DIV Elements</h1>
<div style="background-color:#FFF4A3;color: red;">

<h2>London</h2>
<p><i>London is the capital city of England.</i></p>
<p> <i>London has over 13 million inhabitants.</i></p>
</div>
<div style="background-color:#FFC0C7;color: green;">

<h2>Oslo</h2>
</div>
<div style="background-color:#D9EEE1;color: blue;">

<h2>Rome</h2>
</div>
<p>CSS - dodaju se stilovi da bi se lakše odvojili div-ovi </p>
</body>
</html>
-------------------------------------------------------------------
<html>
<style>
div.mycontainer {
width:100%;
overflow:auto;
}
div.mycontainer div {
width:33%;
float:left;
}
</style>
<body>
<div class="mycontainer">
<div style="background-color:#FFF4A3;">
<h2>London</h2>
</div>
<div style="background-color:#FFC0C7;">
<h2>Oslo</h2>
</div>
<div style="background-color:#D9EEE1;">
<h2>Rome</h2>
</div>
</div>
</body>
</html>

HTML I CSS

Uploaded by

Copyright:

Available Formats

HTML I CSS

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML I CSS

Uploaded by

Copyright:

Available Formats

HTML – osnovno:

KREIRANJE PARAGRAFA (ELEMENTI HTML-A):

<h1>My First Heading</h1>

<h1>This is heading 1</h1>

 Svi HTML elementi mogu imati atribute

<h2>The href Attribute</h2>

<a href="https://www.google.com">Visit Google</a>

<h1 id="myHeader">My Header</h1>

<b id="myHeader">My Header</b>

<p><b>This text is bold</b></p>

<h2>A Description List</h2>

<h2>A Description List</h2>

<h1>HTML DIV Example</h1>

<h1>Multiple DIV Elements</h1>

<h1>Multiple DIV Elements</h1>

<div style="background-color:#FFF4A3;color: red;">

<div style="background-color:#FFC0C7;color: green;">

<div style="background-color:#D9EEE1;color: blue;">

<p>CSS - dodaju se stilovi da bi se lakše odvojili div-ovi </p>

You might also like