Бундага Болор-Эрдэнэ

Paragraph Tag

HTML Attributes

<p id="italicsparagraph">Paragraph type 1 Italics</p>
- Класс дуудах

<p id="boldparagraph">Paragraph type 2 Bold</p> - Класс
дуудах

<input type="text" name="TextField" /> - Форм объект
дуудах

<h2 title="Hello There!">Titled Heading Tag</h2> - Толгой
хэсэгт класс дуудах

<h2 align="center">Centered Heading</h2> Текст голлуулах

<h2 align="left">Left aligned heading</h2> Зvvн хэсэгт
байрлуулах

<h2 align="center">Centered Heading</h2> Голлуулах

<h2 align="right">Right aligned heading</h2> Баруун хэсэгт
байрлуулах

HTML tag

<openingtag>Content</closingtag>

<p>A Paragraph Tag</p>

<body> - Вэбийн харагдах хэсэг / эхлэл /

<p>Paragraph Tag</p> Параграф

<h2>Heading Tag</h2> - Толгой текст

<b>Bold Tag</b> - Бvдvvнээр бичих

<i>Italic Tag</i> - Налуу

</body> / тєгсгєл /

<br /> мєр буулгах

<img src="../mypic.jpg" /> -- Зураг дуудах

<br />

<input type="text" size="12" /> -- Формын объект дуудах

HTML

Yндсэн бичлэг

<html>

<head>

</head>

</html>

Бичлэг

<html>

<head>

<title>My WebPage!</title>

</head>

</html>

<html>

<head>

<title>My WebPage!</title>

</head>

<body>

Hello World! All my content goes here!

</body>

</html>

PHP - Arrays

$employee_array[0] = "Bob";
$employee_array[1] = "Sally";
$employee_array[2] = "Charlie";
$employee_array[3] = "Clare";

echo "Two of my employees are "
. $employee_array[0] . " & " . $employee_array[1];
echo "
Two more employees of mine are "
. $employee_array[2] . " & " . $employee_array[3];

$salaries["Bob"] = 2000;
$salaries["Sally"] = 4000;
$salaries["Charlie"] = 600;
$salaries["Clare"] = 0;

echo "Bob is being paid - $" . $salaries["Bob"] . "
";
echo "Sally is being paid - $" . $salaries["Sally"] . "
";
echo "Charlie is being paid - $" . $salaries["Charlie"] . "
";
echo "Clare is being paid - $" . $salaries["Clare"];

PHP - Functions

< ?
function myCompanyMotto(){
echo "We deliver quantity, not quality!
";
}
echo "Welcome to Tizag.com
";
myCompanyMotto();
echo "Well, thanks for stopping by!
";
echo "and remember...
";
myCompanyMotto();
? >

< ?
function mySum($numX, $numY){
$total = $numX + $numY;
return $total;
}
$myNumber = 0;
echo "Before the function, myNumber = ". $myNumber ."
";
$myNumber = mySum(3, 4); // Store the result of mySum in $myNumber
echo "After the function, myNumber = " . $myNumber ."
";
? >

PHP Switch Statement

$destination = "Tokyo";
echo "Traveling to $destination
";
switch ($destination){
case "Las Vegas":
echo "Bring an extra $500";
break;
case "Amsterdam":
echo "Bring an open mind";
break;
case "Egypt":
echo "Bring 15 bottles of SPF 50 Sunscreen";
break;
case "Tokyo":
echo "Bring lots of money";
break;
case "Caribbean Islands":
echo "Bring a swimsuit";
break;
}

$destination = "New York";
echo "Traveling to $destination
";
switch ($destination){
case "Las Vegas":
echo "Bring an extra $500";
break;
case "Amsterdam":
echo "Bring an open mind";
break;
case "Egypt":
echo "Bring 15 bottles of SPF 50 Sunscreen";
break;
case "Tokyo":
echo "Bring lots of money";
break;
case "Caribbean Islands":
echo "Bring a swimsuit";
break;
default:
echo "Bring lots of underwear!";
break;
}

PHP - Elseif

$employee = "Bob";
if($employee == "Ms. Tanner"){
echo "Hello Ma'am";
} else {
echo "Morning";
}

$employee = "Bob";
if($employee == "Ms. Tanner"){
echo "Hello Ma'am";
} elseif($employee == "Bob"){
echo "Good Morning Sir!";
}else {
echo "Morning";
}

If/Else Conditional Statment

$number_three = 3;

if ( $number_three == 3 ) {
echo "The if statement evaluated to true";
} else {
echo "The if statement evaluated to false";
}

$number_three = 421;

if ( $number_three == 3 ) {
echo "The if statement evaluated to true";
} else {
echo "The if statement evaluated to false";
}

IF statement

$my_name = "someguy";

if ( $my_name == "someguy" ) {
echo "Your name is someguy!
";
}
echo "Welcome to my homepage!";

PHP Require Function

< ?
include("noFileExistsHere.php");
echo "Hello World!";
//hevlene
? >

< ?
require("noFileExistsHere.php");
echo "Hello World!";
//hewlehgui
? >

PHP Include Function

< ?
include("filename.php");
? >

PHP comment write

< ! --- This is an HTML Comment -- >

< ?
echo "Hello World!"; // This will print out Hello World!
echo "
Psst...You can't see my PHP comments!"; // echo "nothing";
// echo "My name is Humperdinkle!";
? >

< ?
/* This Echo statement will print out my message to the
the place in which I reside on. In other words, the World. */
echo "Hello World!";
/* echo "My name is Humperdinkle!";
echo "No way! My name is Uber PHP Programmer!";
*/
? >

PHP Operators

Assignment Operators

Operator	English	Example
+	Addition	2 + 4
-	Subtraction	6 - 2
*	Multiplication	5 * 3
/	Division	15 / 3
%	Modulus	43 % 10

$addition = 2 + 4;
$subtraction = 6 - 2;
$multiplication = 5 * 3;
$division = 15 / 3;
$modulus = 5 % 2;
echo "Perform addition: 2 + 4 = ".$addition."
";
echo "Perform subtraction: 6 - 2 = ".$subtraction."
";
echo "Perform multiplication: 5 * 3 = ".$multiplication."
";
echo "Perform division: 15 / 3 = ".$division."
";
echo "Perform modulus: 5 % 2 = " . $modulus
. ". Modulus is the remainder after the division operation has been performed.
In this case it was 5 / 2, which has a remainder of 1.";

Comparison Operators

Operator	English	Example	Result
==	Equal To	$x == $y	false
!=	Not Equal To	$x != $y	true
<	Less Than	$x < $y	true
>	Greater Than	$x > $y	false
<=	Less Than or Equal To	$x <= $y	true
>=	Greater Than or Equal To	$x >= $y	false

Combination Arithmetic & Assignment Operators

Operator	English	Example	Equivalent Operation
+=	Plus Equals	$x += 2;	$x = $x + 2;
-=	Minus Equals	$x -= 4;	$x = $x - 4;
*=	Multiply Equals	$x *= 3;	$x = $x * 3;
/=	Divide Equals	$x /= 2;	$x = $x / 2;
%=	Modulo Equals	$x %= 5;	$x = $x % 5;
.=	Concatenate Equals	$my_str.="hello";	$my_str = $my_str . "hello";

PHP echo

< ?
$myString = "Hello!";
echo $myString;
echo "

I love using PHP!

";
? >

< ?
$my_string = "Hello Bob. My name is: ";
$my_number = 4;
$my_letter = a;
echo $my_string;
echo $my_number;
echo $my_letter;
? >

< ?
$my_string = "Hello Bob. My name is: ";
$newline = "
";
echo $my_string."Bobettta".$newline;
echo "Hi, I'm Bob. Who are you? ".$my_string.$newline;
echo "Hi, I'm Bob. Who are you? ".$my_string."Bobetta";
? >

PHP - Syntax

< ?
//Comment line
/* Comment row */
echo "Helloo World ";
? >

CSS Display

a
{
display: block;
}
p
{
display: inline;
}
p.show
{
display: block
}
p.hide
{
display: none;
}

CSS Classes VS ID

p#exampleID1
{
background-color: white;
}
p#exampleID2
{
text-transform: uppercase;
}

ID = A person's Identification (ID) is unique to one person.
Class = There are many people in a class.

CSS Float

img.floatLeft
{
float: left;
margin: 4px;
}
img.floatRight
{
float: right;
margin: 4px;
}
img.floatRightClear
{
float: right;
clear: right;
margin: 4px;
}

CSS Layers

h4
{
position: relative;
top: 30px;
left: 50px;
z-index: 2;
background-color: #336699;
}
p
{
position: relative;
z-index: 1;
background-color: #FFCCCC;
}

CSS Position

CSS Position

h3
{
position: relative;
top: 15px;
left: 150px;
}
p
{
position: relative;
left: -10px;
}
h3
{
position: absolute;
top: 50px;
left: 45px;
}
p
{
position: absolute;
top: 75px;
left: 75px;
}

CSS Properties

CSS Font properties

+ font
+ font-family
+ font-size
+ font-style
+ font-weight
+ font-variant

CSS Text properties

+ letter-spacing
+ word-spacing
+ text-decoration
+ vertical-align
+ text-transform
+ text-align
+ text-indent
+ line-height

CSS Box properties

+ Margin
+ Padding
+ Border
+ Border-width
+ Border-color
+ Border-style
+ Width
+ Height
+ Float
+ Clear

CSS Color properties

+ Color

CSS Background properties

+ Background
+ Background Color
+ Background Image
+ Background Repeat
+ Background Attachment
+ Background Position

CSS Classification Properties

+ Display
+ Whitespace
+ List Style
+ List Style Type
+ List Style Image
+ List Style Position

CSS Cursor

p
{
cursor: wait
}
h4
{
cursor: help
}
h5
{
cursor: crosshair
}

default - Display the normal mouse cursor icon
wait - The mouse icon to represent the computer "thinking"
crosshair - A cross hair reticle
text - An "I" shaped icon that is displayed when selecting text
pointer - A hand icon that you see when you hover over an HTML link
help - A question mark (usually)

CSS Border

p.solid
{
border-style: solid;
}
p.double
{
border-style: double;
}
p.groove
{
border-style: groove;
}
p.dotted
{
border-style: dotted;
}
p.dashed
{
border-style: dashed;
}
p.inset
{
border-style: inset;
}
p.outset
{
border-style: outset;
}
p.ridge
{
border-style: ridge;
}
p.hidden
{
border-style: hidden;
}
table
{
border-width: 7px;
border-style: outset;
}
td
{
border-width: medium;
border-style: outset;
}
p
{
border-width: thick;
border-style: solid;
}
table
{ border-color: rgb( 100, 100, 255);
border-style: dashed;
}
td
{
border-color: #FFBD32;
border-style: ridge;
}
p
{
border-color: blue;
border-style: solid;
}
p
{
border-bottom-style: dashed ;
border-bottom-color: yellow;
border-bottom-width: 5px;
}
h4
{
border-top-style: double;
border-top-color: purple;
border-top-width: thick;
}
h5
{
border-left-style: groove;
border-left-color: green;
border-left-width: 15px;
border-bottom-style: ridge;
border-bottom-color: yellow;
border-bottom-width: 25px;
}
p
{
border: 20px outset blue ;
}
h4
{
border: 5px solid;
}
h5
{
border: dotted;
}

CSS Margin

p
{
margin: 5px; border: 1px solid black;
}
h5
{
margin: 0px; border: 1px solid red;
}
p
{
margin: 2%; border: 1px solid black;
}
h5
{
margin: 0px; border: 1px solid red;
}
p
{
margin-left: 5px; border: 1px solid black;
}
h5
{
margin-top: 0px;
margin-right: 2px;
margin-bottom: 13px;
margin-left: 21px;
border: 1px solid red;
}
p
{
margin: 5px 15px;
border: 1px solid black;
}
h5
{
margin: 0px 5px 10px 3px;
border: 1px solid red;
}

CSS Padding

p
{
padding: 15px; border: 1px solid black;
}
h5
{
padding: 0px; border: 1px solid red;
}
p
{
padding: 2%; border: 1px solid black;
}
h5
{
padding: 0px; border: 1px solid red;
}
p
{
padding-left: 5px; border: 1px solid black;
}
h5
{
padding-top: 0px;
padding-right: 2px;
padding-bottom: 13px;
padding-left: 21px;
border: 1px solid red;
}
p
{
padding: 5px 15px;
border: 1px solid black;
}
h5
{
padding: 0px 5px 10px 3px;
border: 1px solid red;
}

CSS Text

h4
{
text-decoration: line-through;
}
h5
{
text-decoration: overline;
}
h6
{
text-decoration: underline;
}
a
{
text-decoration: none;
}
p
{
text-indent: 20px;
}
h5
{
text-indent: 30%;
}
p
{
text-align: right;
}
h5
{
text-align: justify;
}
p
{
text-transform: capitalize;
}
h5
{
text-transform: uppercase;
}
h6
{
text-transform: lowercase;
}
p
{
white-space: nowrap;
}
p
{
word-spacing: 10px;
}
p
{
letter-spacing: 3px;
}

CSS Font

h4
{
color: red;
}
h5
{
color: #9000A1;
}
h6
{
color: rgb(0, 220, 98);
}
h4
{
font-family: sans-serif;
}
h5
{
font-family: serif;
}
h6
{
font-family: arial;
}
p
{
font-size: 120%;
}
ol
{
font-size: 10px;
}
ul
{
font-size: x-large;
}
p
{
font-style: italic;
}
h4
{
font-style: oblique;
}
p
{
font-weight: 100;
}
ul
{
font-weight: bolder;
}
p
{
font-variant: small-caps;
}

CSS Background

h4
{
background-color: white;
}
p
{
background-color: #1078E1;
}
ul
{
background-color: rgb( 149, 206, 145);
}
p
{
background-image: url(smallPic.jpg);
}
h4
{
background-image: url(http://www.tizag.com/pics/cssT/smallPic.jpg);
}
p
{
background-image: url(smallPic.jpg);
background-repeat: repeat;
}
h4
{
background-image: url(smallPic.jpg);
background-repeat: repeat-y;
}
ol
{
background-image: url(smallPic.jpg);
background-repeat: repeat-x;
}
ul
{
background-image: url(smallPic.jpg);
background-repeat: no-repeat;
}
textarea.noScroll
{
background-image: url(smallPic.jpg);
background-attachment: fixed;
}
textarea
{
background-image: url(smallPic.jpg);
background-attachment: scroll;
}
p {
background-image: url(smallPic.jpg);
background-position: 20px 10px;
}
h4 {
background-image: url(smallPic.jpg);
background-position: 30% 30%;
}
ol
{
background-image: url(smallPic.jpg);
background-position: top center;
}
p
{
background-image: url(http://www.example.com/gradient.gif);
background-repeat: repeat-x;
}

CSS class

p.first
{
color: blue;
}
p.second
{
color: red;
}
p
{
color: red; font-size: 20px;
}
p.test1
{
color: blue;
}
p.test2
{
font-size: 12px;
}

CSS List - Css tutorials

CSS - List

ol
{
list-style-type: upper-roman;
}
ul
{
list-style-type: circle;
}
ul
{
list-style-image: url("listArrow.gif");
}
ol
{
list-style-image: url("listArrow2.gif");
}
ul
{
list-style-position: inside;
}
ol
{
list-style-position: outside;
}
ul
{
list-style: upper-roman inside url(http://www.example.com/notHere.gif);
}

CSS 2.0

CSS - Cascading Style Sheet

CSS - List

ol {
list-style-type: upper-roman;
}
ul
{
list-style-type: circle;
}
ul
{
list-style-image: url("listArrow.gif");
}
ol
{
list-style-image: url("listArrow2.gif");
}
ul
{
list-style-position: inside;
}
ol
{
list-style-position: outside;
}
ul
{
list-style: upper-roman inside url(http://www.example.com/notHere.gif);
}