Scribd
Upload
21 views

HTML

Uploaded by

Rahmat Taufiq Sigit
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

HTML

Uploaded by

Rahmat Taufiq Sigit
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

<head>

<title>Page Title</title> #title that appear on the page


<link rel="stylesheet" href="mystyle.css"> #defines the page relationship to an external resource.
<meta name="description" content="Free Web tutorials on HTML and CSS">#Define a description of your
web page
</head>

<tagname>content</tagname>
<h1>My First Heading</h1>
<h2>My First Heading</h2>
<h3>My First Heading</h3>
<h4>My First Heading</h4>
<h5>My First Heading</h5>
<p>My first paragraph.</p>
<p><em>This text is emphasized</em>.</p> #Defines emphasized text
<h2>HTML <small>Small</small> Formatting</h2> # Defines smaller text
<h2>HTML <mark>Marked</mark> Formatting</h2># Defines marked/highlighted text
<p>This is <sup>superscripted</sup> text.</p># Defines superscripted text
<p><i>This text is italic</i>.</p> # Defines italic text
<p><strong>This text is strong</strong>.</p># Defines important text
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p># Defines a
short inline quotation
<blockquote cite="http://www.worldwildlife.org/who/index.html">#Defines a section that is quoted from
another source
For 50 years, WWF has been protecting the future of nature.</blockquote>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p># Defines an
abbreviation or acronym
<address> #Defines contact information for the author/owner of a document
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<bdo dir="rtl">This text will be written from right to left</bdo># Defines the text direction
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p> Defines the title of a work

<ins> Defines inserted text

<del> Defines deleted text

<a href="http://www.w3schools.com">This is a link</a> # link


<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"># image
<p title="About W3Schools">W3Schools is a web developer's site.</p> #title of text
<p title=About W3Schools>
<p title='John "ShotGun" Nelson'>
<p title="John 'ShotGun' Nelson">
<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.


</pre> #text like it appear

<br> Inserts a single line break

<ul> #
<li>Coffee</li> # point
<li>Tea</li>
<li>Milk</li>
</ul>

<ul style="list-style-type:disc"> # <ul style="list-style-type:circle"> # <ul style="list-style-


type:square"> # <ul style="list-style-type:none">
<ol> # order 1-2-3-4… #<ol type="1">#<ol type="A">#<ol type="a">#<ol type="I"> #<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
<input type="password" name="psw">
<input type="number" name="quantity" min="1" max="5">
<input type="date" name="bday" min="2000-01-02"><br>
<input type="range" name="points" min="0" max="10">
<input type="month" name="bdaymonth"> <input type="week" name="week_year"> <input type="time"
name="usr_time"> <input type="datetime" name="bdaytime"> <input type="datetime-local"
name="bdaytime"> <input type="email" name="email"> <input type="search" name="googlesearch">
<input type="tel" name="usrtel">v
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
<input type="submit" value="Submit">

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected >Fiat</option>
<option value="audi">Audi</option>
</select>

<textarea name="message" rows="10" cols="30">


The cat was playing in the garden.
</textarea>
button type="button" onclick="alert('Hello World!')">Click Me!</button>
</form>

CSS:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> # link html to .css

p {color: red;text-align: center;} # element selector


h1, h2, p {text-align: center;color: red;} multiple element selector
#para1 {text-align: center;color: red;} # id selector
.center {text-align: center;color: red;} # class selector
p.center {text-align: center;color: red;} # element-class selector
a:link { background-color: yellow;} # link selector
background:

background Sets all the background properties in one declaration

background-attachment Sets whether a background image is fixed or scrolls with the rest of the page

background-color Sets the background color of an element

background-image Sets the background image for an element

background-position Sets the starting position of a background image


background-repeat Sets how a background image will be repeated

Borders:

border Sets all the border properties in one declaration

border-bottom Sets all the bottom border properties in one declaration

border-bottom-color Sets the color of the bottom border

border-bottom-style Sets the style of the bottom border

border-bottom-width Sets the width of the bottom border

border-color Sets the color of the four borders

border-left Sets all the left border properties in one declaration

border-left-color Sets the color of the left border

border-left-style Sets the style of the left border

border-left-width Sets the width of the left border

border-right Sets all the right border properties in one declaration

border-right-color Sets the color of the right border

border-right-style Sets the style of the right border

border-right-width Sets the width of the right border

border-style Sets the style of the four borders

border-top Sets all the top border properties in one declaration

border-top-color Sets the color of the top border

border-top-style Sets the style of the top border

border-top-width Sets the width of the top border

border-width Sets the width of the four borders

Margins:

margin A shorthand property for setting the margin properties in one declaration

margin-bottom Sets the bottom margin of an element

margin-left Sets the left margin of an element

margin-right Sets the right margin of an element

margin-top Sets the top margin of an element

Padding:

padding A shorthand property for setting all the padding properties in one declaration

padding-bottom Sets the bottom padding of an element

padding-left Sets the left padding of an element

padding-right Sets the right padding of an element

padding-top Sets the top padding of an element


Heigh-width:
Sets the height of an element
height

max-height Sets the maximum height of an element

max-width Sets the maximum width of an element

min-height Sets the minimum height of an element

min-width Sets the minimum width of an element

width Sets the width of an element

Outline:

outline Sets all the outline properties in one declaration

outline-color Sets the color of an outline

outline-offset Specifies the space between an outline and the edge or border of an element

outline-style Sets the style of an outline

outline-width Sets the width of an outline

Text:

color Sets the color of text

direction Specifies the text direction/writing direction

letter-
Increases or decreases the space between characters in a text
spacing

line-height Sets the line height

text-align Specifies the horizontal alignment of text

text-
Specifies the decoration added to text
decoration

text-indent Specifies the indentation of the first line in a text-block

text-shadow Specifies the shadow effect added to text

text-
Controls the capitalization of text
transform

Used together with the direction property to set or return whether the text should be
unicode-bidi
overridden to support multiple languages in the same document

vertical-
Sets the vertical alignment of an element
align

white-space Specifies how white-space inside an element is handled

word-spacing Increases or decreases the space between words in a text

Fonts:

Times New
Serif Roman Serif fonts have small lines at the ends on some characters
Georgia
Sans- Arial "Sans" means without - these fonts do not have the lines at the ends of
serif Verdana characters

Courier New
Monospace All monospace characters have the same width
Lucida Console

font Sets all the font properties in one declaration

font-family Specifies the font family for text

font-size Specifies the font size of text

font-style Specifies the font style for text

font-variant Specifies whether or not a text should be displayed in a small-caps font

font-weight Specifies the weight of a font

Link:
a:link {color: red;} /* unvisited link */

a:visited {color: green;} /* visited link */

a:hover {color: hotpink;} /* mouse over link */

a:active {color: blue;} /* selected link */


List :

list-style Sets all the properties for a list in one declaration

list-style-image Specifies an image as the list-item marker

list-style- Specifies if the list-item markers should appear inside or outside the content
position flow

list-style-type Specifies the type of list-item marker

Table:

border Sets all the border properties in one declaration

border-collapse Specifies whether or not table borders should be collapsed

border-spacing Specifies the distance between the borders of adjacent cells

caption-side Specifies the placement of a table caption

empty-cells Specifies whether or not to display borders and background on empty cells in a table

table-layout Sets the layout algorithm to be used for a table

Visibility:
Specifies how an element should be displayed
display

visibility Specifies whether or not an element should be visible

h1.hidden {visibility: hidden;}


h1.hidden {display: none;}

a {display: block;}
bootstrap:
Method 1: <link rel="stylesheet" type="text/css" href="css1.css" >
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></scrip
t>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></scri
pt>
Method 2:
1-Include bootstrap folders

2-<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></scrip
t> <script src="js/bootstrap.min.js"></script> </body> </html>

Jquery:
Get started:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></scrip
t>
<script type="text/javascript" src="js/jquery.js"></script>
$("p").hide();
$("p").show();
$("p").toggle();
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
$("#panel").slideDown();
$("#panel").slideUp();
$("#panel").slideToggle();
$("div").animate({left: '250px'});
$("div").animate({left: '250px',opacity: '0.5',height: '150px',width: '150px'
});
$("div").animate({ height: 'toggle'});
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
$("#panel").stop();
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

.val()
.text()
.html()
.attr("href")
").append("Some appended text.");
$("p").prepend("Some prepended text.");
$("img").after("Some text after");

$("img").before("Some text before");


$("#div1").remove();
$("#div1").empty();
$("p").remove(".test"); class=test
$("div").addClass("important");
$("h1, h2, p").removeClass("blue");
$("h1, h2, p").toggleClass("blue");
$("p").css("background-color", "yellow");

Selector Example Selects

* $("*") All elements


#id $("#lastname") The element with id="lastname"

.class $(".intro") All elements with class="intro"

.class,.class $(".intro,.demo") All elements with the class "intro" or "demo"

element $("p") All <p> elements

el1,el2,el3 $("h1,div,p") All <h1>, <div> and <p> elements

:first $("p:first") The first <p> element

:last $("p:last") The last <p> element

:even $("tr:even") All even <tr> elements

:odd $("tr:odd") All odd <tr> elements

:first-child $("p:first-child") All <p> elements that are the first child of their pare

:first-of-type $("p:first-of-type") All <p> elements that are the first <p> element of t
parent

:last-child $("p:last-child") All <p> elements that are the last child of their pare
:last-of-type $("p:last-of-type") All <p> elements that are the last <p> element of t
parent

:nth-child(n) $("p:nth-child(2)") All <p> elements that are the 2nd child of their pare

:nth-last-child(n) $("p:nth-last-child(2)") All <p> elements that are the 2nd child of their pare
counting from the last child

:nth-of-type(n) $("p:nth-of-type(2)") All <p> elements that are the 2nd <p> element of t
parent

:nth-last-of-type(n) $("p:nth-last-of-type(2)") All <p> elements that are the 2nd <p> element of t
parent, counting from the last child

:only-child $("p:only-child") All <p> elements that are the only child of their par

:only-of-type $("p:only-of-type") All <p> elements that are the only child, of its type,
parent

parent > child $("div > p") All <p> elements that are a direct child of a <div> e

parent descendant $("div p") All <p> elements that are descendants of a <div> e

element + next $("div + p") The <p> element that are next to each <div> eleme

element ~ siblings $("div ~ p") All <p> elements that are siblings of a <div> eleme
:eq(index) $("ul li:eq(3)") The fourth element in a list (index starts at 0)

:gt(no) $("ul li:gt(3)") List elements with an index greater than 3

:lt(no) $("ul li:lt(3)") List elements with an index less than 3

:not(selector) $("input:not(:empty)") All input elements that are not empty

:header $(":header") All header elements <h1>, <h2> ...

:animated $(":animated") All animated elements

:focus $(":focus") The element that currently has focus

:contains(text) $(":contains('Hello')") All elements which contains the text "Hello"

:has(selector) $("div:has(p)") All <div> elements that have a <p> element

:empty $(":empty") All elements that are empty

:parent $(":parent") All elements that are a parent of another element

:hidden $("p:hidden") All hidden <p> elements

:visible $("table:visible") All visible tables

:root $(":root") The document's root element


:lang(language) $("p:lang(de)") All <p> elements with a lang attribute value starting

[attribute] $("[href]") All elements with a href attribute

[attribute=value] $("[href='default.htm']") All elements with a href attribute value equal to "de

[attribute!=value] $("[href!='default.htm']") All elements with a href attribute value not equal to
"default.htm"

[attribute$=value] $("[href$='.jpg']") All elements with a href attribute value ending with

[attribute|=value] $("[title|='Tomorrow']") All elements with a title attribute value equal to 'Tom
or starting with 'Tomorrow' followed by a hyphen

[attribute^=value] $("[title^='Tom']") All elements with a title attribute value starting with

[attribute~=value] $("[title~='hello']") All elements with a title attribute value containing th


word "hello"

[attribute*=value] $("[title*='hello']") All elements with a title attribute value containing th


"hello"

:input $(":input") All input elements

:text $(":text") All input elements with type="text"

:password $(":password") All input elements with type="password"


:radio $(":radio") All input elements with type="radio"

:checkbox $(":checkbox") All input elements with type="checkbox"

:submit $(":submit") All input elements with type="submit"

:reset $(":reset") All input elements with type="reset"

:button $(":button") All input elements with type="button"

:image $(":image") All input elements with type="image"

:file $(":file") All input elements with type="file"

:enabled $(":enabled") All enabled input elements

:disabled $(":disabled") All disabled input elements

:selected $(":selected") All selected input elements

:checked $(":checked") All checked input elements

Events

Method / Property Description

bind() Attaches event handlers to elements

blur() Attaches/Triggers the blur event


change() Attaches/Triggers the change event

click() Attaches/Triggers the click event

dblclick() Attaches/Triggers the double click event

delegate() Attaches a handler to current, or future, specified child elemen


matching elements

die() Removed in version 1.9. Removes all event handlers added wi


live() method

error() Deprecated in version 1.8. Attaches/Triggers the error event

event.currentTarget The current DOM element within the event bubbling phase

event.data Contains the optional data passed to an event method when t


executing handler is bound

event.delegateTarget Returns the element where the currently-called jQuery event h


was attached

event.isDefaultPrevented() Returns whether event.preventDefault() was called for the eve

event.isImmediatePropagationStopped() Returns whether event.stopImmediatePropagation() was calle


event object

event.isPropagationStopped() Returns whether event.stopPropagation() was called for the ev


object

event.namespace Returns the namespace specified when the event was triggere
event.pageX Returns the mouse position relative to the left edge of the doc

event.pageY Returns the mouse position relative to the top edge of the doc

event.preventDefault() Prevents the default action of the event

event.relatedTarget Returns which element being entered or exited on mouse mov

event.result Contains the last/previous value returned by an event handler


by the specified event

event.stopImmediatePropagation() Prevents other event handlers from being called

event.stopPropagation() Prevents the event from bubbling up the DOM tree, preventing
parent handlers from being notified of the event

event.target Returns which DOM element triggered the event

event.timeStamp Returns the number of milliseconds since January 1, 1970, wh


event is triggered

event.type Returns which event type was triggered

event.which Returns which keyboard key or mouse button was pressed for

focus() Attaches/Triggers the focus event

focusin() Attaches an event handler to the focusin event

focusout() Attaches an event handler to the focusout event


hover() Attaches two event handlers to the hover event

keydown() Attaches/Triggers the keydown event

keypress() Attaches/Triggers the keypress event

keyup() Attaches/Triggers the keyup event

live() Removed in version 1.9. Adds one or more event handlers to


future, selected elements

load() Deprecated in version 1.8. Attaches an event handler to the lo

mousedown() Attaches/Triggers the mousedown event

mouseenter() Attaches/Triggers the mouseenter event

mouseleave() Attaches/Triggers the mouseleave event

mousemove() Attaches/Triggers the mousemove event

mouseout() Attaches/Triggers the mouseout event

mouseover() Attaches/Triggers the mouseover event

mouseup() Attaches/Triggers the mouseup event

off() Removes event handlers attached with the on() method

on() Attaches event handlers to elements


one() Adds one or more event handlers to selected elements. This h
only be triggered once per element

$.proxy() Takes an existing function and returns a new one with a partic
context

ready() Specifies a function to execute when the DOM is fully loaded

resize() Attaches/Triggers the resize event

scroll() Attaches/Triggers the scroll event

select() Attaches/Triggers the select event

submit() Attaches/Triggers the submit event

toggle() Removed in version 1.9. Attaches two or more functions to tog


between for the click event

trigger() Triggers all events bound to the selected elements

triggerHandler() Triggers all functions bound to a specified event for the selecte
elements

unbind() Removes an added event handler from selected elements

undelegate() Removes an event handler to selected elements, now or in the

unload() Deprecated in version 1.8. Attaches an event handler to the u


event

Effects
Method Description

animate() Runs a custom animation on the selected elements

clearQueue() Removes all remaining queued functions from the selected elements

delay() Sets a delay for all queued functions on the selected elements

dequeue() Removes the next function from the queue, and then executes the function

fadeIn() Fades in the selected elements

fadeOut() Fades out the selected elements

fadeTo() Fades in/out the selected elements to a given opacity

fadeToggle() Toggles between the fadeIn() and fadeOut() methods

finish() Stops, removes and completes all queued animations for the selected elements

hide() Hides the selected elements

queue() Shows the queued functions on the selected elements

show() Shows the selected elements

slideDown() Slides-down (shows) the selected elements

slideToggle() Toggles between the slideUp() and slideDown() methods


slideUp() Slides-up (hides) the selected elements

stop() Stops the currently running animation for the selected elements

toggle() Toggles between the hide() and show() methods

Method Description

addClass() Adds one or more class names to selected elements

after() Inserts content after selected elements

append() Inserts content at the end of selected elements

appendTo() Inserts HTML elements at the end of selected elements

attr() Sets or returns attributes/values of selected elements

before() Inserts content before selected elements

clone() Makes a copy of selected elements

css() Sets or returns one or more style properties for selected elements

detach() Removes selected elements (keeps data and events)

empty() Removes all child nodes and content from selected elements
hasClass() Checks if any of the selected elements have a specified class name

height() Sets or returns the height of selected elements

html() Sets or returns the content of selected elements

innerHeight() Returns the height of an element (includes padding, but not border)

innerWidth() Returns the width of an element (includes padding, but not border)

insertAfter() Inserts HTML elements after selected elements

insertBefore() Inserts HTML elements before selected elements

offset() Sets or returns the offset coordinates for selected elements (relative to the docum

offsetParent() Returns the first positioned parent element

outerHeight() Returns the height of an element (includes padding and border)

outerWidth() Returns the width of an element (includes padding and border)

position() Returns the position (relative to the parent element) of an element

prepend() Inserts content at the beginning of selected elements

prependTo() Inserts HTML elements at the beginning of selected elements

prop() Sets or returns properties/values of selected elements


remove() Removes the selected elements (including data and events)

removeAttr() Removes one or more attributes from selected elements

removeClass() Removes one or more classes from selected elements

removeProp() Removes a property set by the prop() method

replaceAll() Replaces selected elements with new HTML elements

replaceWith() Replaces selected elements with new content

scrollLeft() Sets or returns the horizontal scrollbar position of selected elements

scrollTop() Sets or returns the vertical scrollbar position of selected elements

text() Sets or returns the text content of selected elements

toggleClass() Toggles between adding/removing one or more classes from selected elements

unwrap() Removes the parent element of the selected elements

val() Sets or returns the value attribute of the selected elements (for form elements)

width() Sets or returns the width of selected elements

wrap() Wraps HTML element(s) around each selected element

wrapAll() Wraps HTML element(s) around all selected elements


wrapInner() Wraps HTML element(s) around the content of each selected element

Method Description

$.ajax() Performs an async AJAX request

$.ajaxPrefilter() Handle custom Ajax options or modify existing options before each request is sen
before they are processed by $.ajax()

$.ajaxSetup() Sets the default values for future AJAX requests

$.ajaxTransport() Creates an object that handles the actual transmission of Ajax data

$.get() Loads data from a server using an AJAX HTTP GET request

$.getJSON() Loads JSON-encoded data from a server using a HTTP GET request

$.getScript() Loads (and executes) a JavaScript from a server using an AJAX HTTP GET reques

$.param() Creates a serialized representation of an array or object (can be used as URL que
for AJAX requests)

$.post() Loads data from a server using an AJAX HTTP POST request

ajaxComplete() Specifies a function to run when the AJAX request completes

ajaxError() Specifies a function to run when the AJAX request completes with an error
ajaxSend() Specifies a function to run before the AJAX request is sent

ajaxStart() Specifies a function to run when the first AJAX request begins

ajaxStop() Specifies a function to run when all AJAX requests have completed

ajaxSuccess() Specifies a function to run when an AJAX request completes successfully

load() Loads data from a server and puts the returned data into the selected element

serialize() Encodes a set of form elements as a string for submission

serializeArray() Encodes a set of form elements as an array of names and values

$.get("demo_test.asp", function(data, status){


alert("Data: " + data + "\nStatus: " + status);
});

$.post("demo_test_post.asp",
{
name: "Donald Duck",
city: "Duckburg"
},
function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});

You might also like