Programi Web : HTML & CSS & JAVASCRIPT

Programim ne web

HTML eshte nje html markup language, e cila krijon strukturen baze te nje website dhe me pas website dizenjohet nga css dhe funksionalitet lidhen me javascript.Ky page tregon dhe lidhjen me bootsrap dhe font awsome.

Tagu kryesor eshte :

<html> </html>  Cdo tag qe hapet ne html duhet te mbyllet me shtimin e nje /
<head>

Head eshte pergjegjes per mbajtjen e skripteve dhe lidhjeve me css dhe js

</head>

<header> </header> //shpesh ketu vendosim menune

<body> </body> // body permban te gjith kontentin

<footer> </footer> //pergjegjes per footerin qe do jete i njejte ne te gjithe website

<style>

shtojme stilime css

</style>

<script>

shtojme scripte javascript

</script>


Forme kontakti

<div class="form-style-6">

 <h1>Plotesoni formen tuaj</h1> 

<form> <input type="text" name="field1" placeholder="Emri Juaj" />

<input type="email" name="field2" placeholder="Adresa email" />

 <textarea name="field3" placeholder="Shkruani mesazhin tuaj...">

</textarea> <input type="submit" value="Dergo" /> 

</form> </div>

Stilimet CSS te cilan i perfshini brenda tagut <html> </html>

<style type="text/css"> .form-style-6{ font: 95% Arial, Helvetica, sans-serif; max-width: 400px; margin: 110px auto; padding: 16px; background: #F7F7F7; } .form-style-6 h1{ background: #43D1AF; padding: 20px 0; font-size: 140%; font-weight: 300; text-align: center; color: #fff; margin: -16px -16px 16px -16px; } .form-style-6 input[type="text"], .form-style-6 input[type="date"], .form-style-6 input[type="datetime"], .form-style-6 input[type="email"], .form-style-6 input[type="number"], .form-style-6 input[type="search"], .form-style-6 input[type="time"], .form-style-6 input[type="url"], .form-style-6 textarea, .form-style-6 select { -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; background: #fff; margin-bottom: 4%; border: 1px solid #ccc; padding: 3%; color: #555; font: 95% Arial, Helvetica, sans-serif; } .form-style-6 input[type="text"]:focus, .form-style-6 input[type="date"]:focus, .form-style-6 input[type="datetime"]:focus, .form-style-6 input[type="email"]:focus, .form-style-6 input[type="number"]:focus, .form-style-6 input[type="search"]:focus, .form-style-6 input[type="time"]:focus, .form-style-6 input[type="url"]:focus, .form-style-6 textarea:focus, .form-style-6 select:focus { box-shadow: 0 0 5px #43D1AF; padding: 3%; border: 1px solid #43D1AF; } .form-style-6 input[type="submit"], .form-style-6 input[type="button"]{ box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; padding: 3%; background: #43D1AF; border-bottom: 2px solid #30C29E; border-top-style: none; border-right-style: none; border-left-style: none; color: #fff; } .form-style-6 input[type="submit"]:hover, .form-style-6 input[type="button"]:hover{ background: #2EBC99; } </style>

 Nje slider i cili eshte 100% Responsiv 
<html>
<head>

<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>
<script src=”https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js”></script>

<script>
$(document).ready(function(){
$(‘.slider’).bxSlider();
});
</script>

</head>
<body>

<div class=”slider”>
<div>I am a slide.</div>
<div>I am another slide.</div>
</div>

</body>
</html>

 Si te bllokosh right click ne nje website 

<!–Script by said.al->
<script type=”text/javascript”>
<!– Edit the message as your wish –>
var msg_box =”Sorrry! Said.al has blocked right click here”; function dis_rightclickIE(){
if (navigator.appName == ‘Microsoft Internet Explorer’ && (event.button == 2 || event.button == 3))
alert(msg_box)
}
function dis_rightclickNS(e){
if ((document.layers||document.getElementById&&!document.all) && (e.which==2||e.which==3))
{
alert(msg_box)
return false;
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=dis_rightclickNS;
}
else if (document.all&&!document.getElementById){
document.onmousedown=dis_rightclickIE;
}
document.oncontextmenu=new Function(“alert(msg_box);return false”)
</script>
<!– Script by said.al –>

<html>

<head><title> Smart Center </title>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<header>
<img class ="logo" src="https://travels.al/wp-content/uploads/2019/03/logo-smartcenter-blue-512.png" alt="Smart Center" width="130px" height="60px" style="float:left;">
<nav class="topnav">
<a class="active" href="file:///C:/Users/DORI/Desktop/web/web10.html" > Home </a>
<a href="file:///C:/Users/DORI/Desktop/web/rrethnesh.html"> Rreth Nesh </a>
<a href="file:///C:/Users/DORI/Desktop/web/portofoli.html"> Portofoli </a>
<a href="file:///C:/Users/DORI/Desktop/web/kontakt.html"> Kontakti </a>
</nav>

</header>

<body>
<div class="koka" style="text-align:center;">
<h1> Mireserdhet ne Smart Center </h1>
<p> Ne kursin e Programimit ne Web </p> </div>

<div class="content">
<div class="row">
<div class="col-md-4 col-sm-4">
<h2> Materiali 1 </h2>
<p>Ky do te jete nje pershkrim i materialit 1 <br>
Mesoni me teper rreth programimit ne kursit tone ne Smart Center</p>
</div>

<div class="col-md-4 col-sm-4">
<h2> Materiali 2 </h2>
<p>Ky do te jete nje pershkrim i materialit 2 </p>
</div>

<div class="col-md-4 col-sm-4">
<h2> Materiali 3 </h2>
<p>Ky do te jete nje pershkrim i materialit 3</p>
</div>

</div>
</div>

</body>
<footer class="footer" style="text-align:center;background-color:black;">
<div class="content">
<div class="row">
<div class="col-sm-4 col-md-12 col-lg-12 col-xs-6">
<p style="color:white;">Powered by: Said Dulevic</p>
<p style="color:white;">Contact information: <a href="mailto:info@said.al">info@said.al</a>.</p></footer>
</div>
</div>
</div>

</html>
<html> <head><title> Rreth Nesh </title> <link rel="stylesheet" type="text/css" href="styles.css"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <header> <img class ="logo" src="https://travels.al/wp-content/uploads/2019/03/logo-smartcenter-blue-512.png" alt="Smart Center" width="130px" height="60px" style="float:left;"> <nav class="topnav"> <a href="file:///C:/Users/DORI/Desktop/web/web10.html" > Home </a> <a class="active" href="file:///C:/Users/DORI/Desktop/web/rrethnesh.html"> Rreth Nesh </a> <a href="file:///C:/Users/DORI/Desktop/web/portofoli.html"> Portofoli </a> <a href="file:///C:/Users/DORI/Desktop/web/kontakt.html"> Kontakti </a> </nav> </header> <body> <div class="koka" style="text-align:center;"> <h1> Rreth Nesh </h1> <p> Mesoni me teper rreth nesh</p> </div> <div class="content"> <div class="row"> <div class="col-md-12 col-sm-4" style="text-align:center;"> <h2> Kush jemi ne </h2> <p>Ne jemi nje grup kursantesh ne Smart Center. Deshira per programim ka qene pjese e jona dhe sot po e realizojme ate.</p> </div> <button class="accordion"> <i class="fa fa-adn" style="font-size:48px;"></i>Website</button> <div class="panel"> <p>Ndertim dhe optimizim websitesh</p> </div> <button class="accordion"> Grafic Design</button> <div class="panel"> <p>Ndertojme Logo dhe banera</p> </div> <button class="accordion">Optimization</button> <div class="panel"> <p>Optimizim webi dhe SEO</p> </div> </div> </div> </body> <footer class="footer" style="text-align:center;background-color:black;"> <div class="content"> <div class="row"> <div class="col-sm-4 col-md-12 col-lg-12 col-xs-6"> <p style="color:white;">Powered by: Said Dulevic </p> <p style="color:white;">Contact information: <a href="mailto:info@said.al">info@said.al</a>.</p></footer> </div> </div> </div> <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } </script> <style type="text/css"> .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; text-align: center; border: none; outline: none; transition: 0.4s; } /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ .active, .accordion:hover { background-color: #ccc; } /* Style the accordion panel. Note: hidden by default */ .panel { padding: 0 18px; background-color: white; display: none; overflow: hidden; text-align:center; } .accordion:after { content: '\02795'; /* Unicode character for "plus" sign (+) */ font-size: 13px; color: #777; float: right; margin-left: 5px; } .active:after { content: "\2796"; /* Unicode character for "minus" sign (-) */ } </style> </html>
<html> <head><title> Portofoli </title> <link rel="stylesheet" type="text/css" href="styles.css"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> </head> <header> <img class ="logo" src="https://travels.al/wp-content/uploads/2019/03/logo-smartcenter-blue-512.png" alt="Smart Center" width="130px" height="60px" style="float:left;"> <nav class="topnav"> <a href="file:///C:/Users/DORI/Desktop/web/web10.html" > Home </a> <a href="file:///C:/Users/DORI/Desktop/web/rrethnesh.html"> Rreth Nesh </a> <a class="active" href="file:///C:/Users/DORI/Desktop/web/portofoli.html"> Portofoli </a> <a href="file:///C:/Users/DORI/Desktop/web/kontakt.html"> Kontakti </a> </nav> </header> <body> <div class="koka" style="text-align:center;"> <h1> Portofoli Puneve</h1> <p> Mesoni me teper rreth nesh</p> </div> <div class="content"> <div class="row"> <div class="col-md-12 col-sm-4" style="text-align:center;"> <h2> Punimet tona me te mira </h2> <p>Ne jemi nje grup kursantesh ne Smart Center. Deshira per programim ka qene pjese e jona dhe sot po e realizojme ate.</p> </div> <div class="main"> <h1 style="text-align:center;">Smart Center</h1> <hr> <h2 style="text-align:center;">PORTFOLIO</h2> <p style="text-align:center;">Resize the browser window to see the responsive effect.</p> <!-- Portfolio Gallery Grid --> <div class="row"> <div class="column"> <div class="content"> <img src="mountains.jpg" alt="Mountains" style="width:100%"> <h3>My Work</h3> <p>Lorem ipsum..</p> </div> </div> <div class="column"> <div class="content"> <img src="lights.jpg" alt="Lights" style="width:100%"> <h3>My Work</h3> <p>Lorem ipsum..</p> </div> </div> <div class="column"> <div class="content"> <img src="nature.jpg" alt="Nature" style="width:100%"> <h3>My Work</h3> <p>Lorem ipsum..</p> </div> </div> <div class="column"> <div class="content"> <img src="mountains.jpg" alt="Mountains" style="width:100%"> <h3>My Work</h3> <p>Lorem ipsum..</p> </div> </div> </div> <div class="content"> <img src="bear.jpg" alt="Bear" style="width:100%"> <h3>Some Other Work</h3> <p>Lorem ipsum..</p> </div> <!-- END MAIN --> </div> </div> </div> </body> <footer class="footer" style="text-align:center;background-color:black;"> <!--<div class="content" style="text-align:center;background-color:white;">--> <div class="row" style="text-align:center;background-color:black;"> <div class="col-sm-4 col-md-12 col-lg-12 col-xs-6"> <p style="color:white;">Powered by: Said.al </p> <p style="color:white;">Contact information: <a href="mailto:info@said.al">info@said.al</a>.</p></footer> </div> </div> </div> <style type="text/css"> /* { box-sizing: border-box; }*/ /*body { background-color: #f1f1f1; padding: 20px; font-family: Arial; }*/ /* Center website .main { max-width: 1000px; margin: auto; }*/ h1 { font-size: 50px; word-break: break-all; } .row { margin: 8px -16px; } /* Add padding BETWEEN each column (if you want) */ .row, .row > .column { padding: 8px; } /* Create four equal columns that floats next to each other */ .column { float: left; width: 25%; } /* Clear floats after rows */ .row:after { content: ""; display: table; clear: both; } /* Content */ .content { background-color: white; padding: 10px; } /* Responsive layout - makes a two column-layout instead of four columns */ @media screen and (max-width: 900px) { .column { width: 50%; } } /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .column { width: 100%; } } </style> </html>
<html> <head><title> Na Kontaktoni </title> <link rel="stylesheet" type="text/css" href="styles.css"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> </head> <header> <img class ="logo" src="https://travels.al/wp-content/uploads/2019/03/logo-smartcenter-blue-512.png" alt="Smart Center" width="130px" height="60px" style="float:left;"> <nav class="topnav"> <a href="file:///C:/Users/DORI/Desktop/web/web10.html" > Home </a> <a href="file:///C:/Users/DORI/Desktop/web/rrethnesh.html"> Rreth Nesh </a> <a href="file:///C:/Users/DORI/Desktop/web/portofoli.html"> Portofoli </a> <a class="active" href="file:///C:/Users/DORI/Desktop/web/kontakt.html"> Kontakti </a> </nav> </header> <body> <div class="content"> <div class="row"> <div class="col-md-12 col-sm-4" style="text-align:center;"> <h2> Na kontaktoni </h2> <p>Ne jemi nje grup kursantesh ne Smart Center. Deshira per programim ka qene pjese e jona dhe sot po e realizojme ate.</p> </div> <div class="form-style-6"> <h1>Plotesoni formen tuaj</h1> <form> <input type="text" name="field1" placeholder="Emri Juaj" /> <input type="email" name="field2" placeholder="Adresa email" /> <textarea name="field3" placeholder="Shkruani mesazhin tuaj..."></textarea> <input type="submit" value="Dergo" /> </form> </div> </div> </div> </body> <footer class="footer" style="text-align:center;background-color:black;"> <div class="content"> <div class="row"> <div class="col-sm-4 col-md-12 col-lg-12 col-xs-6"> <p style="color:white;">Powered by: Said Dulevic </p> <p style="color:white;">Contact information: <a href="mailto:info@said.al">info@said.al</a>.</p></footer> </div> </div> </div> <style type="text/css"> .form-style-6{ font: 95% Arial, Helvetica, sans-serif; max-width: 400px; margin: 110px auto; padding: 16px; background: #F7F7F7; } .form-style-6 h1{ background: #43D1AF; padding: 20px 0; font-size: 140%; font-weight: 300; text-align: center; color: #fff; margin: -16px -16px 16px -16px; } .form-style-6 input[type="text"], .form-style-6 input[type="date"], .form-style-6 input[type="datetime"], .form-style-6 input[type="email"], .form-style-6 input[type="number"], .form-style-6 input[type="search"], .form-style-6 input[type="time"], .form-style-6 input[type="url"], .form-style-6 textarea, .form-style-6 select { -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; background: #fff; margin-bottom: 4%; border: 1px solid #ccc; padding: 3%; color: #555; font: 95% Arial, Helvetica, sans-serif; } .form-style-6 input[type="text"]:focus, .form-style-6 input[type="date"]:focus, .form-style-6 input[type="datetime"]:focus, .form-style-6 input[type="email"]:focus, .form-style-6 input[type="number"]:focus, .form-style-6 input[type="search"]:focus, .form-style-6 input[type="time"]:focus, .form-style-6 input[type="url"]:focus, .form-style-6 textarea:focus, .form-style-6 select:focus { box-shadow: 0 0 5px #43D1AF; padding: 3%; border: 1px solid #43D1AF; } .form-style-6 input[type="submit"], .form-style-6 input[type="button"]{ box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; padding: 3%; background: #43D1AF; border-bottom: 2px solid #30C29E; border-top-style: none; border-right-style: none; border-left-style: none; color: #fff; } .form-style-6 input[type="submit"]:hover, .form-style-6 input[type="button"]:hover{ background: #2EBC99; } </style> </html> https://www.freecontactform.com/email_form.php

Si te dergojme email nga nje contact form pa ndihmen e javascript dhe php ?

<form action="https://formspree.io/email@domaini.tld" method="POST" /> 

Mjafton te shkruani kete tek tagu i FORM me siper

.topnav{ text-align:center; font-size: 24px; background-color:#333; overflow:hidden; } .topnav a{ float:left; color:#f2f2f2; text-align:center; padding: 18px 22px; font-size:17px; text-decoration:none; } .topnav a:hover{ background-color:#ddd; color:black;} .topnav a.active { background-color:#4CAF50; color:white; body { background-color: lightblue; } img.logo { float: left; } .koka {text-align:center;} .container { border-radius: 5px; background-color: #f2f2f2; padding: 20px; .h2 { color: green; }
error: Materiali eshte i bllokuar, e mira eshte ta shkruani vet! Suksese!