Scribd
Upload
21 views

HTML I CSS

The document provides information on various HTML elements and tags for formatting text, adding images, lists, headings, paragraphs and other content. It explains common HTML tags like <html>, <head>, <body>, <p>, <h1>-<h6>, <ul>, <ol>, <img>, and <a> and how they are used to structure and style web pages. It also covers CSS attributes for styling elements, adding comments, and using <div> tags to group and style content on the page.

Uploaded by

gfgoranf
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

HTML I CSS

The document provides information on various HTML elements and tags for formatting text, adding images, lists, headings, paragraphs and other content. It explains common HTML tags like <html>, <head>, <body>, <p>, <h1>-<h6>, <ul>, <ol>, <img>, and <a> and how they are used to structure and style web pages. It also covers CSS attributes for styling elements, adding comments, and using <div> tags to group and style content on the page.

Uploaded by

gfgoranf
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

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>


<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</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 sledećem primeru imamo element <h1> koji ukazuje na ime id "myHeader". Ovaj <h1> element
ć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>

<!-- This is a comment -->


<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->

</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>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</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>
<p>Oslo is the capital city of Norway.</p>
<p>Oslo has over 600.000 inhabitants.</p>
</div>

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


<h2>Rome</h2>
<p>Rome is the capital city of Italy.</p>
<p>Rome has almost 3 million inhabitants.</p>
</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>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</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>

</div>

</body>
</html>

You might also like