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

<form name=”contactform” method=”post” action=”send_form_email.php”>
<table width=”450px”>
<tr>
<td valign=”top”>
<label for=”first_name”>First Name *</label>
</td>
<td valign=”top”>
<input type=”text” name=”first_name” maxlength=”50″ size=”30″>
</td>
</tr>
<tr>
<td valign=”top””>
<label for=”last_name”>Last Name *</label>
</td>
<td valign=”top”>
<input type=”text” name=”last_name” maxlength=”50″ size=”30″>
</td>
</tr>
<tr>
<td valign=”top”>
<label for=”email”>Email Address *</label>
</td>
<td valign=”top”>
<input type=”text” name=”email” maxlength=”80″ size=”30″>
</td>
</tr>
<tr>
<td valign=”top”>
<label for=”telephone”>Telephone Number</label>
</td>
<td valign=”top”>
<input type=”text” name=”telephone” maxlength=”30″ size=”30″>
</td>
</tr>
<tr>
<td valign=”top”>
<label for=”comments”>Comments *</label>
</td>
<td valign=”top”>
<textarea name=”comments” maxlength=”1000″ cols=”25″ rows=”6″></textarea>
</td>
</tr>
<tr>
<td colspan=”2″ style=”text-align:center”>
<input type=”submit” value=”Submit”> <a href=”http://www.freecontactform.com/email_form.php”>Email Form</a>
</td>
</tr>
</table>
</form>

 

 

 

 

<?php
if(isset($_POST[’email’])) {

// EDIT THE 2 LINES BELOW AS REQUIRED
$email_to = “you@yourdomain.com”;
$email_subject = “Your email subject line”;

function died($error) {
// your error code can go here
echo “We are very sorry, but there were error(s) found with the form you submitted. “;
echo “These errors appear below.<br /><br />”;
echo $error.”<br /><br />”;
echo “Please go back and fix these errors.<br /><br />”;
die();
}

// validation expected data exists
if(!isset($_POST[‘first_name’]) ||
!isset($_POST[‘last_name’]) ||
!isset($_POST[’email’]) ||
!isset($_POST[‘telephone’]) ||
!isset($_POST[‘comments’])) {
died(‘We are sorry, but there appears to be a problem with the form you submitted.’);
}

$first_name = $_POST[‘first_name’]; // required
$last_name = $_POST[‘last_name’]; // required
$email_from = $_POST[’email’]; // required
$telephone = $_POST[‘telephone’]; // not required
$comments = $_POST[‘comments’]; // required

$error_message = “”;
$email_exp = ‘/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/’;

if(!preg_match($email_exp,$email_from)) {
$error_message .= ‘The Email Address you entered does not appear to be valid.<br />’;
}

$string_exp = “/^[A-Za-z .’-]+$/”;

if(!preg_match($string_exp,$first_name)) {
$error_message .= ‘The First Name you entered does not appear to be valid.<br />’;
}

if(!preg_match($string_exp,$last_name)) {
$error_message .= ‘The Last Name you entered does not appear to be valid.<br />’;
}

if(strlen($comments) < 2) {
$error_message .= ‘The Comments you entered do not appear to be valid.<br />’;
}

if(strlen($error_message) > 0) {
died($error_message);
}

$email_message = “Form details below.\n\n”;

function clean_string($string) {
$bad = array(“content-type”,”bcc:”,”to:”,”cc:”,”href”);
return str_replace($bad,””,$string);
}

$email_message .= “First Name: “.clean_string($first_name).”\n”;
$email_message .= “Last Name: “.clean_string($last_name).”\n”;
$email_message .= “Email: “.clean_string($email_from).”\n”;
$email_message .= “Telephone: “.clean_string($telephone).”\n”;
$email_message .= “Comments: “.clean_string($comments).”\n”;

// create email headers
$headers = ‘From: ‘.$email_from.”\r\n”.
‘Reply-To: ‘.$email_from.”\r\n” .
‘X-Mailer: PHP/’ . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
?>

<!– include your own success html here –>

Thank you for contacting us. We will be in touch with you very soon.

<?php

}
?>

The JavaScript Section
This section will include the display, solve and clear functions.

Display Function: This function only displays the user input, followed by results. We just an id which can be called by “document.getElementById”. Here, the id is “edu”.
Solve Function: eval() is a gobal function in JavaScript and has a defined purpose of solving JavaScript codes.
Clear Function: We just need a void in between the quotes to perform this function.

<script>
//function for displaying values
function dis(val)
{
document.getElementById(“edu”).value+=val
}
//function for evaluation
function solve()
{
let x = document.getElementById(“edu”).value
let y = eval(x)
document.getElementById(“edu”).value = y
}
//function for clearing the display
function clr()
{
document.getElementById(“edu”).value = “”
}
</script>

The Visible Section

Title: You can write anything here, we prefer calling it “Edureka JavaScript Calculator”.
Table creation: Every row must have buttons and input fuctions. For display screen, we need an input type of text with a <colspan> since we require lengthier strings. The others remain with button types.
The displays are only onclick() functions here, so we use our dis() function here.

<!– create table –>
<body>
<div class = title >Edureka JavaScript Calculator</div>
<table border=”1″>
<tr>
<td><input type=”button” value=”c” onclick=”clr()”/> </td>
<td colspan=”3″><input type=”text” id=”edu”/></td>
<!– clr() function will call clr to clear all value –>
</tr>
<tr>
<!– creating buttons and assigning values–>
<td><input type=”button” value=”+” onclick=”dis(‘+’)”/> </td>
<td><input type=”button” value=”1″ onclick=”dis(‘1’)”/> </td>
<td><input type=”button” value=”2″ onclick=”dis(‘2’)”/> </td>
<td><input type=”button” value=”3″ onclick=”dis(‘3’)”/> </td>
</tr>
<tr>
<td><input type=”button” value=”-” onclick=”dis(‘-‘)”/> </td>
<td><input type=”button” value=”4″ onclick=”dis(‘4’)”/> </td>
<td><input type=”button” value=”5″ onclick=”dis(‘5’)”/> </td>
<td><input type=”button” value=”6″ onclick=”dis(‘6’)”/> </td>
</tr>
<tr>
<td><input type=”button” value=”*” onclick=”dis(‘*’)”/> </td>
<td><input type=”button” value=”7″ onclick=”dis(‘7’)”/> </td>
<td><input type=”button” value=”8″ onclick=”dis(‘8’)”/> </td>
<td><input type=”button” value=”9″ onclick=”dis(‘9’)”/> </td>
</tr>
<tr>
<td><input type=”button” value=”/” onclick=”dis(‘/’)”/> </td>
<td><input type=”button” value=”.” onclick=”dis(‘.’)”/> </td>
<td><input type=”button” value=”0″ onclick=”dis(‘0’)”/> </td>
<!– Evaluating function call eval()–>
<td><input type=”button” value=”=” onclick=”solve()”/> </td>
</tr>
</table>
</body>

Front End Web Development Training
Adding Flavours of CSS
The title element is optional, play with it
The border radius is kept at 10px to give round corners to the elements. The width should be kept at 100% to cover the entire span.
The text-alignment is upto you, feel free.
The RGB colour code: #ff4456

<!– for styling –>
<style>
.title{
border-radius: 10px;
margin-bottom: 10px;
text-align:center;
width: 210px;
color:#ff4456;
border: solid black 1px;
}
input[type=”button”]
{
border-radius: 10px;
background-color:#ff4456;
color: black;
border-color:#ff4456 ;
width:100%;
}
input[type=”text”]
{
border-radius: 10px;
text-align: right;
background-color:white;
border-color: black ;
width:100%
}
</style>

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


www.mersinportal.net | www.idealminer.com | www.thefabric.com.tr
Need Help? Chat with me