Web Development and Design | Tutorial for Java, PHP, HTML, Javascript: html

Web Development and Design | Tutorial for Java, PHP, HTML, Javascript: html
Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

HTML LISTS (+ FORMATTING)

LISTS (+ FORMATTING)


INTRODUCTION

Lists are used all the time on the web. Articles, website navigation menus, and product features on e-commerce websites all make frequent use of lists – even when you can't tell that a list is being used just by looking at the web page.
There are three types of lists you can use, and this quick guide will show you how to use each.

Un ordered Lists


An un ordered list is a list in which the order of the list items does not matter. Unordered lists should be used when rearranging the order of the list items would not create confusion or change the meaning of the information on the list.

The UI element opens and closes an un ordered list. The items on the list are contained between list item, LI tags. A simple un ordered list containing three items could be created with the following HTML.

<ul> 
<li>Item A</li> 
<li>Item B</li> 
<li>Item C</li> 
</ul>
Unless CSS rules are created to change the appearance of the list, the default presentation of an unordered list is to add a disc-style bullet point on the left-hand side of each list item and to indent the entire list.

.ul_ex {
list-style-type: disc;
padding-left: 32px;
}

Ordered Lists


Ordered lists are used for lists of items for which the order of the items does matter. The syntax for an ordered list is exactly the same as for an unordered list. However, to create an ordered list, the oi tag is used rather than the ui tag. By making this one change, we can convert the unordered list in our previous example into an ordered list.

We're also going to change the text of the list items to make it clear that these are items that need to appear in a specific sequential order.

<ol> 
<li>Step 1</li> 
<li>Step 2</li> 
<li>Step 3</li> 
</ol>

As you can see below, rather than a bulleted list, we now have a numbered list.

.ol_ex {
list-style-type: decimal;
padding-left: 32px;
margin-bottom: 0px;
}

<o1>...</o1>

Create numbered (ordered) lists showing sequential oredr, preference or priority.

<u1> .. </u1>

Display a bulleted (unordered) list without any extra emphasis on order of importance.

<li> ... </li>

Specifies each list itmen to be bulleted or numered.

<d1> ... </d1>

Resereved specifically for list items definitions.

<dt> .. </dt>

The definition of a single term inline with body content.

<dd> ... </dd>

The description for the defined term.

EXAMPLE

<ol>
<li>january</li>
<li>fevraury</li>
<li>march</fi>
<.ol>

<dl>
<dt>coffee</dt>
<dd>black hot drink</dd>
<dt>milk</dt>
<dd>white cold drink</dd>
</dl>

<ul>
<li>tomato</li>
<li>lettuce</li>
<li>cheese</li>
</ui>

SAMPLE


By AMANDEEP SINGH on December 12, 2018 , , , , , , , 0

CSS Basics Tutorial

CSS Basics Tutorial

HTML CSS Tutorial

Topics

  • Introduction
  • Syntax
  • Selector
  • Using CSS in HTML Pages
  • CSS Rules
  • CSS Fonts
  • CSS Text Formating
  • CSS Box Model
  • CSS Backgrounds

CSS Introduction 


Cascading Style Sheets (CSS)
Applies to HTML Pages For Designing the Layout and View Appearance of Your Website.


A styled HTML document produced by the CSS   

<!DOCTYPE html>
<html>
<head>
 <title>CSS Style</title>
 <style type="text/css">
  body {
   background: yellow;
  }
  p {
   color: red;
   font-size: 20px;
  }
 </style>
</head>
<body>
 <p>Hello World</p>

</body>
</html>

css background

CSS Usage : 

css html

 

CSS Syntax

css selector { property-name:values } 

Css Selector - HTML Dom Elements Selecting By Elements Tag,Class name or By id.

Property-name : like - background , font-size , color , text-alignment etc.
Property -values: like - orange , 17px, center, etc. 

css syntax

CSS Elements Selecting Syntax

  • Single Element Type
Syntax : - Single Element Type - p { color:red; } 
HTML Element : -  <p>Hello World! I Select All p Tag Elements</p> 
  • Multi Element Type 
Syntax : - h1,h2,h3 { background : orange } 
HTML Element : <h1>Hello H1<h1><h2>Hello H2<h2><h3>Hello H3<h3>
  • All Element Type 
Syntax : - * { padding:5px; }
HTML Element : <p>selected me</p> <h2>Selected me</p>  

  • Element By id  ( # )
Syntax :  - #p1 , #p2 { marging:5px  }
HTML Element : - <p id=”p1”>paragraph1</p><p id=”p2”>paragraph2</p>

  • Element By Class ( . )
Syntax : - .p1,.h1 { color :seagreen; }
HTML Element : - <p class=”p1>Class p1</p><h1 class=”h1”>Heading 1</h1>

  • Element with class 
Syntax : -  p.p1 { font-style:italic; }
HTML Element : - <p class=”p1>Only Select me</p><p class=”p2”>Not Select me</p>
  •  Descendents Selector (E.g : - Only Select li element which parent is ul )
Syntax : - ul li { color : green; } 
HTML Element : - <ul><li>select me</li><li>select me</li></ul> 

Using CSS in HTML Pages

We Can Use CSS in HTML Pages in 3 ways: -  

Inline css - 

E.g : 

<p style=”color:red”>I am a inline CSS Style Paragaraph Tag</p>


Internal CSS - 
E.g : 

 

<html>
<head>
<style>  p { color:red; } </style>
<!----Internal CSS--->
</head>
<body>
<p> My Color Changed By Internal CSS</p>
</body>
</html>


External CSS - 
E.g : 

<html>
<head>
<link rel=”stylesheet” href=”style.css”>
<!---Linking External CSS Using Href-->
</head>
<body>
<p>My Style Changed By External CSS style.css</p>
</body>
</html>

style.css 
 
p{color:red;}
h1{color:blue;}

As a Developer i Not Prefered To Using Inline CSS use minimum inline CSS Try to Use CSS Externally or Internally Because managing all element style easy.

You think what you like to edit?
100 time paragraph tag style?
Or
Just 1 change in External CSS 

 CSS Rules

Now What happened If Multiple Style Comes To Same Elements ?

E.g : - in Internal i add 

p{ color :red; }

And in External I add
p{ color:black;}

Then Here is a Some Rules Which we See How It Works And Whom It Select.

Important ( <p style=’color:red!important’>Important</p>)

This always Comes First when we Selecting Element whether any internal external or inline css added important works first.

Inline css (we already see inline css above)

 This comes in Second Position.

 Now Inline and External Had Some Different Case.

 Rule with selector :
1. ID
2. class
3. descendant/element type
4. universal
5. HTML attribute


 This Rules Followed By Internal and External but Internal Always Comes First Then External.

 CSS Fonts
  • CSS font is  Very important part of CSS for Customizing Fonts in Our Webpage. We Can Customize this fonts using Css.
  • Change Font Weight
  • Change Color
  • Change line height (line gap between paragraph)
  • Change Font Size
  • Change Font Style

 Example : - 

  
<!DOCTYPE html>
<html>
<head>
 <title>CSS Style</title>
 <style type="text/css">
  #p1 {           color: red;font-size: 20px; }
  #p2{   font-family: sans-serif;  line-height: 40px;  }
  #p3{   font-style: italic;font-weight: 600;  }
 </style>
</head>
<body>
 <p id="p1">I am p1 text  with css font property color red and font size 20px </p>
<p id="p2">I am p2 text with css font property font family sans-serif and line height 20px</p>
 <p id="p3">I am p3 with css property font style italic and font weight 600</p>
</body>
</html> 
 
css fonts 
CSS Box Model 

All elements in HTML can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.

Css BOX Model is Wraps HTML elements.It consists of: margins, borders, padding, and the  content.  

Css BOX Model

CSS Box Model Example

  
<!DOCTYPE html>
<html>
<head>
<title>Box Model</title>
<style type="text/css">
body{
padding: 10px;
background: red;
}
#box{
margin: 20px;
padding: 20px;
border:10px solid yellow;
}
</style>
</head>
<body>
<div id="box">
<p>I m inside a box Model</p>
</div>
</body>
</html>

Results :  


CSS Box Model


CSS Box Model

Thanks. 

Video Demo.

By sanjeev kumar on May 20, 2018 , , , , , , , , , , , , 0

HTML5 Tutorial End With JavaScript

HTML5 Tutorial End With JavaScript

html javascript

Topics

  1. HTML with JavaScript
  2. HTML Events
  3. HTML Live Coding

What is JavaScript?

JavaScript Helps to Change Behaviour of Page in Live in front of our eyes we see its changes live in web pages. Like.

  1. Reloading a web page
  2. Redirection
  3. Taking Value From Input Box
  4. Animation
  5. Fetching Live data From Server
  6. Live Chat 
Now i will not Go Details in JavaScripts in this Topic My Aim in this topic is How to Write JavaScript Codes, Html Codes.

But Don’t Worry I will Cover my JavaScript in Seperate Topic.

JavaScript Start with Tag <script>

Code  : <script>JavaScript Codes</script>
Use this Tag Only when You using JS in HTML page if you write external js dont use this tag on that js page.

We link external js file by using

code : <script src=”first.js”></script>
 
This is Our External js file first.js which contain only js Code Seprately like css.
We can use Comments in js by using (//) single line or multi line (/* comments */) 

E.g 1. Adding Js in Your HTML files and Takes Input From text Box and alert that value in browser.

   



<!DOCTYPE html>
<html>
<head> <title>HTML with JavaScript</title></head>
<input type="text" id="name">
<button onclick="display()">Display</button>
<body>
 <!-- JavaSript begin -->
<script type="text/javascript">
 function display(){

        //declaring js Vaiable 
      var a;
        //storing my html element (DOM Element : Document Object Model)
        //every dom element had its own list of properties 

        //finding My Dom Element with its id
  a=document.getElementById("name");
  
  //Alert Popup Box which Display input value
  alert(a.value);
 }
</script>
<!-- Java Script End -->
</body>
</html>
 
 
Results :
javascript example
After Clicking .

javascript result


E.g 2. Set Value in div and Inpux Box using js

<!DOCTYPE html>
<html>
<head> <title>HTML with JavaScript</title></head>
<input type="text" id="name">
<input type="text" id="copyvalue">
<div id="copydiv"></div>
<button onclick="display()">Display</button>
<body>
 <!-- JavaSript begin -->
<script type="text/javascript">
 function display(){

        //declaring js Vaiable 
      var a;
        //storing my html element (DOM Element : Document Object Model)
        //every dom element had its own list of properties 

        //finding My Dom Element with its id
  a=document.getElementById("name");
  //finding element with id copyvalue and setting value
  document.getElementById('copyvalue').value=a.value;
  //finding element with id copydiv and setting text
  document.getElementById('copydiv').innerHTML=a.value;
  //div dont have propert of (value) it had property of text 
 }
</script>
<!-- Java Script End -->
</body>
</html>

Result : 

js example
 After Clicking
js example
I know You All think What is Events in HTML?
Events in HTML just like some action taken by user like.
  1. Clicking a Button
  2. Moving Mouse
  3. Keypress (when user press key from keyboard)
  4. Keyup (when user move finger from keyboard)
  5. By using This Events We Can Call Our JavaScript See previous Example
  6. (Button Click) 
Video Tutorial


Source Codes : Download
By sanjeev kumar on February 25, 2018 , 0

HTML Tutorial Topic 4

HTML Tutorial Topic 4

html forms

Welcome Again all,
Today I am Going To Start New Topic
Very Very Important as a Web Developer
For HTML which covers Forms.
Let’s Start...

Topics

  1. Form Elements select and Text Area
  2. Input Elements
  3. Input Elements Attributes
Form elements are such element which we used for creating our HTML form like Some Elements input box,dropdown select,Buttons,Textarea.
Input Box – For Simple input of data in any format.
Select Dropdown – For Selecting Item in a list of items
textarea – For Large Area of Input Contents ,Description Message which is  used to display our data in also multiline.
Button – For Submit our Form or Simple Button For Any Events.

List of Form Elements.

  1. <form>
  2. <select>
  3. <input>
  4. <textarea>
  5. <button>
  6. <option>
  7. <datalist>
  8. <optgroup>
  9. <button> 


<!DOCTYPE html>
<html>
<head>
<title>Form Elements</title>
</head>
<body>
Input Box <input type="text" name="text">
<br>
    DropDown Select <select name="text">
     <option>First</option>
     <option>Second</option>
       </select>
    <br>
    Text Area<textarea cols="50" rows="5">I m a text area</textarea>
<br>   
    Button <button type="button" name="button">Button</button>

</body>
</html>

Result : 



html form

Simple Login Form Example

<!DOCTYPE html>
<html>
<head>
<title>Form Elements</title>
</head>
<body>
<form action="login.php" method="post">
Email<br> <input type="email" name="email" placeholder="Email">
<br>
    Password <br> <input type="password" name="Password" placeholder="Password">
    <br>
 <button type="submit" name="button">Login</button>
    </form>

</body>
</html>

Result

html login form

Explaination
From line <form> - Here is form beginning form elements pass all data to new page on submitting. Form elements pass only that data which is child element of form.
E.g <form>child Elements</form>
method= method is default get but we can use get or post.
When we use get our data pass through url which we see in url and post 
pass data hidden.
action = action is our url for submitting data on that page like any server side page where it catch that data.( which we see in php tutorial) for now we just pass and server side language catch it.

Other line after that are data elements which contain in its its variable and variable name is name=”value” this value is the variable name which we catch in server side.

Submit = button submit is used to submit our its very important for submitting our forms.




  

Here is a list of Input Types Elements like radio,checkbox,button,date,select

select element and properties
select has a list of child  elements which values we defined inside option element when we submit the form the selected values pass through the form
<option>First</option>   and <option value=”1”>First</option> 
Here you two types of option i declare both is same but if we dont defined (set value=”value”) then option text value will be passed else value attribute value pass.

We can also make default selection of any element by using attribute
selected=”selected” in option element

We can set the size of select box  like display more than one value at a time  by using.
size=”n” where n= no. Of elements to display 

We can also make multiple selection this time the value will pass in array format.
By using multiple=”multiple” but for using mutiple we have to change name  in array for like my variable name is : -

name=”vegeable”
then i have to change it to

name=”vegetable[]”
if we don’t do that then we only get single selected value only

Simple All Select Example

<!DOCTYPE html>
<html>
<head>
 <title>HTML Select</title>
</head>
<body>
 <form action="http://localhost/form.php"> 
        <select name="fruit">
  <option>Apple</option><option>Mango</option><option>Orange</option>
                    </select><br>
         <select name="animal" size="4">
  <option>Cat</option><option>Dog</option><option>Elephant</option><option>Horse</option><option>Zebra</option>
        </select><br>
        <select name="vegetable[]" size="4" multiple="multiple">
  <option>Potato</option><option>Onion</option><option>Cabbage</option><option>Pea</option><option>Carrot</option>
        </select><br>
        <select name="defaultselected">
  <option>Potato</option><option>Onion</option><option selected="selected">Cabbage</option><option>Pea</option>  <option>Carrot</option>
         </select><br>
         <select name="differntvalue">
  <option value="1">First</option><option value="2">Second</option><option value="3">Third</option><option value="4">Fourth</option>
     <option value="5">Fifth</option>
         </select><br>
         <button type="submit" name="submit">Submit</button> 
   </form>

</body>
</html>

Result

form select

PHP Output

php request
 I Know You all Excited To Check This Form Data After Seeing Output So Jst Use this.
Note : -Make Sure You Install Xampp Or Local Server 

Code : 

<?php
echo "<pre>";
print_r($_REQUEST);
echo "</pre>";

Textarea

Text area  is a large area for writing contents like post,message it is multi line input area.
We can change its no. Of line to occcupied by using attribute
rows=”n” n= no. Of rows
We can change its no. Of column to occupied by using attribute
cols=”n” n= no. Of cols
E.g : <textarea rows=”5” cols=”5”>I am textarea</textarea>

Input Elements

Input Elements is a huge list of types that why am covering this on last topic.
It contain datalist like auto complete data.
It contain checkbox,Radio button
It also contain 3 types of buttons also button,submit,reset
button – Normal Button
submit – Form Submit Button
reset – Reset The Form Data

List Of Types of all Inputs (type=”value” attrribute) 

type=”text” for text input
type=”password” for password hidden values
type=”submit” for submit values in forms
type=”reset” for reseting values in form inputs
type=”radio” for radio button option
type=”checkbox” for multi check boxes (used name in array like name=”language[]”)
type=”color” for color picker
type=”date” for date selecting using calendar
type=”email” for email input
type=”number” for number input
type=”time” for time input 

Input Elements Example 

<!DOCTYPE html>
<html>
<head>
<title>Input Elements</title>
</head>
<body>
<form action="http://localhost/form.php" method="post">
Plain Text Box <input type="text" name="name"><br>
Password Field <input type="password" name="password"><br>
Radio Button (Gender E.g): 
<label>Male <input type="radio" name="gender" value="male"><label>Female <input type="radio" name="gender" value="female"></label><br>
CheckBox (Language E.g) :
<label>C++ <input type="checkbox" name="lang[]" value="c++"></label><label>PHP <input type="checkbox" name="lang[]" value="php"></label><br>
Color <input type="color" name="color"><br>
Date (E.g DoB) <input type="date" name="dob" ><br>
Email <input type="email" name="email"><br>
Number (E.g Age) : <input type="number" name="age"><br>
Time <input type="time" name="time" ><br>
<input type="submit" name="submit" value="submit"><input type="reset" name="reset" value="Reset Form Fields">
</form>
</body>
</html>

Result 
html input

html input color

html input date

Result Output in PHP

php request

 Input Attributes

Now We See Different Types Of Inputs Now lets see its Extra Attributes.
value=”value” which set values in input fields.
readonly=”readonly” which only reads values we can’t edit it.
disabled=”disabled” disabled the input element then it will be not pass data to server.
maxlength=”n” n= length of input field
required=”required” used for validation without filling that field user can’t submit form.
autofocus=”autofocus” which directly focus that field when page loads.
placeholder=”transparent hint values” for display transparent hint values
I added a blog more about how to handle form data in server side using PHP
Check My Blog : -

Link :  PHP REQUEST and GET

 
By sanjeev kumar on February 20, 2018 , , 1

HTML5 Web Sql Tutorial


HTML5 Web Sql Tutorial



What is HTML5 Web Sql?

Html5 gives many new thing to us. One Of this is Web sql with new functionality to store row and Columns sql data locally on client side machine (browser, web view app,cordova based apps) with the help of local storage we can store value in browser by using queries .
Web Sql use Sqlite for data Storage.
Note :- WebSql is supported only in some browser like chrome,Android ,etc(firefox not supporting websql).
Websql is divided into Three Steps.
1.Open Database
2.Execute Transaction
3.Execute Queries
Step 1. Create Or Open Web Sql Database
var database=openDatabase(‘mydatabase’,1.0,’testing’,1024*1024);
1. First parameter is Database name
2.Second Parameter is Database Version
3.Database Description
4.Size of databse (1024*1024) = 1 Mb (size of database)

Step 2.Executing Queries like Creating Table,Insert,Select,etc. All Our Queries Can Be done inside transaction.
var a=2;
var user=”john2”;
database.transaction(function(tx)
{
tx.executeSql(‘CREATE TABLE IF NOT EXISTS demo (id unique, username
varchar)’,[],success,error);
});
//here we give three parameters which is first table creating
//third callback function when table created
//fourth is error function when web sql generate error
//insert data in table
function error(error)
{
console.log(error)
}
function success()
{
database.transaction(function(tx)
{
tx.executeSql(‘INSERT INTO demo (id, username) VALUES (1, "John")’);
//for dynamic data
tx.executeSql(‘INSERT INTO demo (id, username) VALUES (?,?)’,[a,user],function(tx,result) { console.log(‘succes’); } ,function(tx,error){ console.log(‘failed’); });
//here we use four parameter
//first is for binding the value in table
//second is giving to insert into table
//third is for success function when data insert
//fourth is for error generating object
});
}
//retrieve data from table
database.transaction(function(tx)
{
tx.executeSql('SELECT * FROM demo ', [], function (tx, results)
{
var len = results.rows.length;
for(var i=0;i<len;i++)
{
var id=results.rows.item(i).id;
var user=results.rows.item(i).user;
document.write(“id : “+id+” User : “+user+” “);
}
},function(tx,error){
});
//here first parameter is for sql query
//second is data of array
//third is success function
//fourth is error
});

Code 2.(Complete Code Example)
<html>
<head>
<script>
var database=openDatabase(‘mydatabase’,1.0,’testing’,1024*1024);
var a=2;
var user=”john2”;
database.transaction(function(tx)
{
tx.executeSql(‘CREATE TABLE IF NOT EXISTS demo (id unique, username
varchar)’,success,error);
});
//here we give three parameters which is first table creating
//second callback function when table created
//third is error function when web sql generate error
//insert data in table
function success()
{
database.transaction(function(tx)
{
tx.executeSql(‘INSERT INTO demo (id, username) VALUES (1, "John")’);
//for dynamic data
tx.executeSql(‘INSERT INTO demo (id, username) VALUES (?,?)’,[a,user],function(tx,result) { console.log(‘succes’); } ,function(tx,error){ console.log(‘failed’); });
//here we use four parameter
//first is for binding the value in table
//second is giving to insert into table
//third is for success function when data insert
//fourth is for error generating object
});
}
//retrieve data from table
database.transaction(function(tx)
{
tx.executeSql('SELECT * FROM demo ', [], function (tx, results)
{
var len = results.rows.length;
for(var i=0;i<len;i++)
{
var id=results.rows.item(i).id;
var user=results.rows.item(i).username;
document.write(“id : “+id+” User : “+user+” “);
}
},function(tx,error){
});
//here first parameter is for sql query
//second is data of array
//third is success function
//fourth is error
});
</script>
</head>
<body>
<h1>Web Sql Tutorial</h1>
</body>
</html>
When We Reload Page Again We Get The Web Sql Value Like This.


Note : - Generally We Use Web Sql in Cordova based application where we store information locally in app when user come again and see local data of offline app.


Thank you .
By sanjeev kumar on December 24, 2016 , , 0
Subscribe to: Posts (Atom)

Blog Archive

Advertisement

Copyright ©