HTML примери и презентации од ученици

Презентации

Андреј Ангелоски II 3        HTML и WEB 


Html - документи 

Евгенија Пипоска - II 4


<html>
<head>
<title>Птици</title>
</head>
<body>
<body bgcolor="#C0C0C0" text="#0000FF">
<font size="6">
<h1>Видови птици</h1>
<hr></hr>
<font size="5">
<p>Листа на птици во Македонија:</p>
<p>
<ul> <li>Штркови</il>
<li>Патки</li>
<li>Гулаби</li>
<li>Галеби</li>
<li>Кукавици</li>
<li>Гаврани</li>
<li>Јастреби</li>
<li>Пеликани</li>
</ul>
<p>Слики од птици:</p>
<img src="galebi.jfif" width="200" height="150">
<img src="gavrani.jfif" width="200" height="150">
<img src="patki.jfif" width="200" height="150">
<img src="strkovi.jfif" width="200" height="150">
<p>
<a href="https://www.youtube.com/watch?v=a1wp1RnC7kk&ab_channel=WildlifeWorld">Линк до видео за "Птици" </a>
</p>
</body>
</html>

Александар Ковачески II -2


<html>
<head>
<title>За HTML</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body >
<h1 >HTML Александар Ковачески II-2 </h1>
<br>
<h2 >Нешто за HTML</h2>

<p ><b>HTML или HyperTextMarkup Language е јазик за означување кој се користи за
создавање на мрежни места односно веб страни. Овој јазик се користи а опишување на структурата на информациите во текст ориентираните документи
со обвиткување(маркирање) на одредени делови од текстот при што означениот текст се формаира или се заменува со интерактивни форми, вгнездени слики или други објекти.
Целта на прелистувачот е да ги толкува овие ознаки во аудиовизуелен документ, а тие да не се прикажуваат на самиот документ.</b></p>

<p ><b>Oвој јазик бил измислен од Тим Бернерс во 1990 година со цел научниците
од различни универзитети да добијат полесен пристап кон документи од научни истражувања. Повеќе можете да дознаете во следното видео: </b></p>

<iframe width="560" height="315" src="https://www.youtube.com/embed/NzzGt7EmXVw" title="YouTube video player" frameborder="0" allow="accelerometer;
autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<h2>Како се пишува HTML</h2>
<h4 >Синтакса</h4>
<p ><b>Синтаксата на HTML е изградена од елементи наречени ознаки. Тие се пишуваат во аглести
загради и најчесто одат во парови. Најосновните ознаки се (hеаd,p,html,body итн.) Еве пример за тоа како изледа синтаксата во HTML: </b></p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-Dnx_CmN0A8sU1BnoxZjdiWSJ8jHR7ZWkzXFpZlkjTESaQFxt4v1Oo7NZbIDJ-QPzQmvmYjX6_ADKJfb268Pw23BNEH7oAUkvC_Kc1IPkLogRjYsiLOGhzDOYdmiLf6aL0aTDi2jCj1o/s1600/simple-web-page-code.png" alt="Сликата е избришана"
<br>
<p ><b>Во HTML исто така може да се вметнуваат слики и да се подесува нивната големина.</b></p>
<img src="https://www.discoverlosangeles.com/sites/default/files/styles/hero/public/images/2019-01/Hermosa%20Beach%20Pier%20sunset.jpg?h=7a740ff7&itok=9x82CPJg" alt= "Сликата е избришана" width= 300
<br>
<img src="https://www.discoverlosangeles.com/sites/default/files/styles/hero/public/images/2019-01/Hermosa%20Beach%20Pier%20sunset.jpg?h=7a740ff7&itok=9x82CPJg" alt= "Сликата е избришана" width= 400
<br>
<img src="https://www.discoverlosangeles.com/sites/default/files/styles/hero/public/images/2019-01/Hermosa%20Beach%20Pier%20sunset.jpg?h=7a740ff7&itok=9x82CPJg" alt= "Сликата е избришана" width= 150
<br>
<p ><b>Во некои случаи може да дојде сликата која ја избрал содавачот на веб сајтот да биде тргната од интернетот. Во тој случај доколку е вметнат код за резервен текст ќе биде прикажан
резервниот текст, како на пример:</b></p>
<img src="" alt= "Сликата е избришана" width= 150
<br>
<p ><b>Во HTML може и да се вметнат линкови и од други страни како на пример google или youtube или пак други страни кои се дел од истиот проект. </b></p>
<a href="https://www.youtube.com/" target="_blank"><h2><b>Youtube</b></h2></a>
<a href="https://www.google.com/" target="_blank"><h2><b>Google</b></h2></a>
<p ><b>Една од најзабавните медии кои можат да се вметнат во веб страните се видеата како на пример вашата омилена песна</b></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/UprcpdwuwCg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media;
gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
<h2 ><b>Видеата и веб страните кои ми помогнаа во содавањето на овој веб сајт се: </b></h2>
<a href="https://itedukacija-gimnazija.blogspot.com/" target="_blank"><h2><b>Страната ITedukacija создадена од страна на Охридската гимназија</b></h2></a>

<iframe width="560" height="315" src="https://www.youtube.com/embed/pQN-pnXPaVg" title="YouTube video player" frameborder="0" allow="accelerometer;
autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Tfjd5yzCaxk" title="YouTube video player" frameborder="0" allow="accelerometer;
autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
</body>
</html>

CSS DELOT
body {
background-color: #57e481;
margin-top: 0px
}
h1 {
font-family: Arial, Helvetica, sans-serif;
background-color: #42d497 ;
color: #045f2a;
margin-top: 0%;
margin-right: 300px;
border: 3px solid black;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
color: #045f2a;
}
h4{
font-family: Arial, Helvetica, sans-serif;
background-color:#42d497 ;
color: #045f2a;
margin-right: 600px;
border: 3px solid black;
}
p{
font-family: Arial, Helvetica, sans-serif;
color: #045f2a ;
background-color:#42d497;
border: 3px solid black;
}


Филип Вичороски II - 1


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Assignment 1</title>
</head>
<body>
    <h1>Large title</h1> 
    <p>And another one. <br>
    This time, spanning over <br>
    multiple <br>rows.</p> 

    <p><i>This text should be in italics.</i></p> 

    <p><b>And this one should be in bold.</b></p>
    <p>W = m * c<sup>2</sup></p>
    <p>Stratch hydrolysis:C<sub>6</sub>H<sub>10</sub>+ H<sub>2</sub>0 &#8594 C <sub>6</sub>H<sub>12</sub>O<sub>6</sub></p>
    <p>Let's show an image.</p>
    <img src="/img/Bak1.jpg" alt="" style="height: 200px;">
    <p>An unordered list of items:</p>
    <ul>
        <li>html</li>
        <li>CSS</li>
        <li>Sublime text</li>
        </ul>
        <p>This is the order in which we take meals:</p>
    <ol>
        <li>Breakfast</li>
        <li>Lunch</li>
        <li>Supper</li>
    </ol>
    <p>Choose gender:<input type="radio" id="Man" name="gender" value="Man">
        <label for="Man">Man</label><input type="radio" id="Woman" name="gender" value="Woman">
        <label for="Woman">Woman</label></p>
        <p>(Note that a value can be selected by clicking on the text.)</p>
        <a href="#top">Top</a> , <a href="a2.html">Next page</a>
</body>
</html>

CSS DELOT
body{
    background-color:greenyellow ; 
}
.text{
    background-color: green;
}
a{
    color: blue;
    text-decoration: none;
}
a:hover{
    background-color: yellow;
}


Гораст Палоски  II 5


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Konvertor</title>
    <link rel="stylesheet" href="style.css">
</head>
<body style="background-color: #89CFF0;">
    <h2 style="text-align:center">Celsius to Fahrenheit convertor</h2>
    <hr>
    <p style="text-align:center">Внеси температура во C: <input type="text" id="c"></p>
    
    <button id="button" onclick="convert()">Конвертирај</button>
    <p style="text-align:center">Температура во F е: <span id="f">  </span></p>   

<script src="script.js"></script>
</body>
</html>

CSS
 #button{ 
    position: absolute;
  top: 20%;
  width: 20%;
  text-align: center;
  font-size: 18px;
    right: 40%;
 }


function convert() {
let x = document.getElementById("c").value;
let c = parseInt(x);
let f = c * 1.8 + 32;
document.getElementById("f").innerHTML = f
}

No comments: