Said Dulevic

Msc Said Dulevic

Web Developer & Lecturer

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 –>

Reverse nje tekst

function reverseString(string) {
       //convert the string to an array
       let array = string.split("");

    //Use the reverse method
    array.reverse()

    //Convert it back to a string and return
    return array.join("")
}

Arrays


Struktura baze e html

Fillon me dhe me pas me dhe
Brenda head vendosim linket e boostratp,css dhe javascript
Brenda body vendosim content

Resurset per materiale website

  1. CODEPEN
  2. Krijimi Butonave
  3. Imazhe Falas
  4. Boostrap 4
  5. Materiale free
  6. Template falas

 Footer with css  (html)

<link href=”//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css” rel=”stylesheet” id=”bootstrap-css”>
<script src=”//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js”></script>
<script src=”//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<!—— Include the above in your HEAD tag ———->

<footer class=”section footer-classic context-dark bg-image” style=”background: #2d3246;”>
<div class=”container”>
<div class=”row row-30″>
<div class=”col-md-4 col-xl-5″>
<div class=”pr-xl-4″><a class=”brand” href=”index.html”><img class=”brand-logo-light” src=”images/agency/logo-inverse-140×37.png” alt=”” width=”140″ height=”37″ srcset=”images/agency/logo-retina-inverse-280×74.png 2x”></a>
<p>We are an award-winning creative agency, dedicated to the best result in web design, promotion, business consulting, and marketing.</p>
<!– Rights–>
<p class=”rights”><span>©  </span><span class=”copyright-year”>2018</span><span> </span><span>Waves</span><span>. </span><span>All Rights Reserved.</span></p>
</div>
</div>
<div class=”col-md-4″>
<h5>Contacts</h5>
<dl class=”contact-list”>
<dt>Address:</dt>
<dd>798 South Park Avenue, Jaipur, Raj</dd>
</dl>
<dl class=”contact-list”>
<dt>email:</dt>
<dd><a href=”mailto:#”>dkstudioin@gmail.com</a></dd>
</dl>
<dl class=”contact-list”>
<dt>phones:</dt>
<dd><a href=”tel:#”>https://karosearch.com</a> <span>or</span> <a href=”tel:#”>https://karosearch.com</a>
</dd>
</dl>
</div>
<div class=”col-md-4 col-xl-3″>
<h5>Links</h5>
<ul class=”nav-list”>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Projects</a></li>
<li><a href=”#”>Blog</a></li>
<li><a href=”#”>Contacts</a></li>
<li><a href=”#”>Pricing</a></li>
</ul>
</div>
</div>
</div>
<div class=”row no-gutters social-container”>
<div class=”col”><a class=”social-inner” href=”#”><span class=”icon mdi mdi-facebook”></span><span>Facebook</span></a></div>
<div class=”col”><a class=”social-inner” href=”#”><span class=”icon mdi mdi-instagram”></span><span>instagram</span></a></div>
<div class=”col”><a class=”social-inner” href=”#”><span class=”icon mdi mdi-twitter”></span><span>twitter</span></a></div>
<div class=”col”><a class=”social-inner” href=”#”><span class=”icon mdi mdi-youtube-play”></span><span>google</span></a></div>
</div>
</footer>

CSS (tek style.css)

.context-dark, .bg-gray-dark, .bg-primary {
color: rgba(255, 255, 255, 0.8);
}

.footer-classic a, .footer-classic a:focus, .footer-classic a:active {
color: #ffffff;
}
.nav-list li {
padding-top: 5px;
padding-bottom: 5px;
}

.nav-list li a:hover:before {
margin-left: 0;
opacity: 1;
visibility: visible;
}

ul, ol {
list-style: none;
padding: 0;
margin: 0;
}

.social-inner {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding: 23px;
font: 900 13px/1 “Lato”, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, “Helvetica Neue”, Arial, sans-serif;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
.social-container .col {
border: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-list li a:before {
content: “\f14f”;
font: 400 21px/1 “Material Design Icons”;
color: #4d6de6;
display: inline-block;
vertical-align: baseline;
margin-left: -28px;
margin-right: 7px;
opacity: 0;
visibility: hidden;
transition: .22s ease;
}

Need Help? Chat with me