HTML (build a website)
to make a website from scratch:
1 create a new folder (in here you put all your files, and webpages)
2 create a new text file change its ending to html or htm
3 right click the htm file open with notepad or wordpad (if your on windown), or typepad(for mac os)
4 skelleton of html code:
<html>
<head>
<title>My WebPage!</title>
</head>
<body>
Hello World! All my content goes here!
</body>
</html>
for xml :
4.2 here is an example of htm code for an html site :
<html>
<header>
<title>moti site</title>
</header>
<body>
<center>
<p><h1><b>welcome<br>new line</b></h1></p>
<p><h2><i>welcome</i></h2></p>
<p><u>welcome</u></p>
<p>welcome</p>
</center>
space
<table align = "center" border = "1" width = "300">
<tr><td>videos</td></tr>
<tr><td><ol>
<li>item 1</li>
<li>item 2</li>
</ol></td></tr>
<tr><td>paste youtube embedded here</td></tr>
<tr><td>test1</td><td>test2</td></tr>
</table>
videos:
<ol>
<li>item 1</li>
<li>item 2</li>
</ol>
</body>
</html>
5 save (with ctrl s) close the notepad open your html site.
html code:
tags : open tag <html></html> close tags thats the format for all the html tags in them you put text and stuff
in the <html></html> tags you put <header></header> and <body></body tags outside of header tag as
see number 4 above
<title>your site title</title> goes in header tags.
in body tags goes your contents (pictures, links, text). to add text you type it inside body tags and you can
sorround some text in special tags to change its appearence.
attributes: in the tags can be added (to the first tag) attributes for the contents in the tag.
some characters in your text can be input laccording to the following:(Entities)
& - &
cent sign - ¢
copyright symbol - © or ©
degree sign - °
greater than - >
lower than - <
space -
registered trade mark - ®
trademark - ™
tags list exampled:
1 <p> - opening paragraph tag
Element Content - paragraph words
</p> - closing tag
<p align="justify">some text</p> (align is an attribute) align = "center" or "right"
2 list :
<h4 align="center">Goals</h4> (headline) also h1 to h6 h1 is biggest.
attribute : align = "left" or "center" or "right"
<ol> (numbered list, use ul (not ol)for unnumbered) can use <ol start ="4"> to start count from 4
<li>stuff1</li>
<li>stuff2</li>
</ol>
(<ol type="x"> x replace with "a", "A", "i" or "I" to change counters)
(<ul type="square"> or <ul type="disc"> or <ul type="circle">)
3 definition:
<dl>
<dt><b>chizu</b></dt>
<dd>japanese word for cheese.</dd>
<dt><b>jidosha</b></dt>
<dd>japanese word for car.</dd>
</dt>
4 line break (enter new line):
<br />
5 horizontal line : <hr />
<b>Bold Text</b>
<em>Emphasized Text</em>
<strong>Strong Text</strong></p>
<i>Italic Text</i>
<sup>superscripted Text</sup>
<del>struckthrough Text</del>
<code>Computer Code Text</code>
6 <font size="5">Here is a size 5 font</font>
<font color="#990000">This text is hexcolor #990000</font>
(This text is hexcolor #990000)
<font color="red">This text is red</font>
Attributes:
size= "Num. Value 1-7" Size of your text 7 is biggest
color= "rgb,name,or hexidecimal" Change font color
face= "name of font" Change the font type
7 HTML - Hypertext Reference (href):
<a href="http://www.espn.com/" target="_blank" >ESPN Home</a>
<a href="http://www.yahoo.com/" target="_blank" >Yahoo Home</a>
(the text between the tags will be shown)
Internal - href="#anchorname" (link to a word on your site) and add :
<A name="anchorname">you get here</A>
Local - href="../pics/picturefile.jpg" (link to a file in a folder in the folder of your site (to be ftb via your domain url
and stored in your webhost)
Global - href="url" (link to a site)
target=" _blank" Opens new page in a new browser window
_self" Loads the new page in current window
_parent" Loads new page into a frame that is superior to where the link lies
_top" Loads new page into the current browser window, cancelling all frames
ancoring: step1:
<h2>HTML Links and Anchors<a name="top"></a></h2>
<h2>HTML Text Links<a name="text"></a></h2>
<h2>HTML Email<a name="email"></a></h2>
step2:
<a href="#top">Go to the Top</a>
<a href="#text">Learn about Text Links</a>
<a href="#email">Learn about Email Links</a>
email link: <a href="mailto:x@yahoo.com?subject=Feedback" >Email@personx.com</a>
email link with filling email body:
<a href="mailto:email@yahoo.com?subject=Feedback&body=nice">
Email@personx.com</a>
download link:
<a href="http://www.sitename.com/pics/htmlT/something.zip">Text Document</a>
href ="location of file (url of another site or location in the folder containing the file compared to your location)
href = images/images.html (link to webpage images in folder images)
href = "images/pic1.png" link to a picture
8 images:
<img src="anime da.gif" />
src="anime da.gif" picture file resides in same directory(folder) as .html file
src="../anime da.gif" picture file resides in previous directory as .html file
src="../pics/anime da.gif" picture file resides in the pic directory in a previous directory as .html file
attributes:
alt="anime" (text to be displayed when hovering with mouse over picture)
<img src="anime da.gif" height="60" width="200">
align="right" or "left" or "center"
Images as Links:
<a href="http://www.sitename.com/">
<img src="anime da.gif">
</a>
small picture link to comlete big picture:
<a href="anime da.gif">
<img src="thmb_anime da.gif">
</a>
image link:
<a href="http://www.espn.com" target="_blank"> <img src="anime da.gif"> </a>
attributes : border="0"
9 embed music:
<embed src="beethoven.mid" width="360" height="165" /> (file beethoven.mid is in the site folder)
Embed Attributes - Related to Functionality:
autostart - choose if the media file will start automatically
loop - sets the media file to repeat or not
volume - set the volume of the media file. The range is 0-100.
<embed src="beethoven.mid" autostart="false" loop="false"
volume="60" />
10 embed video:
<embed src="siteurl/files/html/htmlexample.mpeg"
autostart="false" />
also:
<a href="http:siteurl/pics/flash/motiontween1easy.swf">
motiontween1easy.swf</a>
Flash movies (.swf), AVI's (.avi), and MOV's (.mov) , .mpeg files file types are supported by the embed tag. you sould
use a new webbrowser so it will work such as IE (internet explorer) 8 or higher
HTML - Embed Attributes:
autostart - controls the media's ability to start without prompting. Values are true or false.
hidden - controls whether or not the play/stop/pause embedded object is hidden or not. Values are true or false. (Hide your embeded media if you just want background noise).
loop - A true value means the media will continuously loop, false means no looping.
playcount - Setting a playcount means the media will repeat itself x number of times instead of continuously as with the loop attribute above. (playcount="2" will repeat the video twice).
volume - set a numeric value for the loudness of your media. (0-100).
also you can get the embed code of a video of youtube or google and paste it on your site
11 <table border="1"> (table)
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
</table>
for this code:
<table border="1" cellspacing="10"
bgcolor="rgb(0,255,0)">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
</table>
in tr the text is bold and you see table attributes
12 background color:
<body bgcolor="Silver">
<p>We set the background...</p>
</body>
bgcolor for table:
<table>
<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
</table>
13 background picture:
add attribute: background="url" (of picture) or picture file location, to body or table tag
14 comment (does nothing but the site won't show it
<!--buy milk -->
14.2 <p>This text is <del>scratched</del> out!</p>
14.3 iframe: embed a webpage in another webpage:
<html>
<head>
</head>
<frameset cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>
frameset - The parent tag that defines the characteristics of this frames page.
Individual frames are defined inside it.
frameset cols="#%, *"- Cols(columns) defines the width that each frame will have.
In the above example we chose the menu (the 1st column) to be 30% of the total
page and used a "*", which means the content (the 2nd column) will use the remaining width for itself.
frame src="" -The location of the web page to load into the frame.
<html><head></head>
<frameset rows="20%,*">
<frame src="title.html">
<frameset cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>
<html><head></head>
<frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
<frame src="title.html">
<frameset border="0" frameborder="0" framespacing="0" cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>
frameborder="#" - A zero value shows no "window" border.
border="#"- Modifies the border width, used by Netscape.
framespacing="#" -Modifies the border width, used by Internet Explorer.
15 meta here in contents attribute you put tags key words to help search engines find and rank your site:
<head>
<meta name="keywords" content="HTML, XHTML, CSS, tutorials, site" />
</head>
name defines what type of meta tag being used. Note that the keywords are separated by commas.
<head> (description meta tag
<meta name="description" content="site contains webmaster tutorials." />
</head>
16 font:
<p>
<font size="5">Here is a size 5 font</font>
</p>
<font color="#990000">This text is hexcolor #990000</font>
<font color="red">This text is red</font>
<p>
<font face="Bookman Old Style, Book Antiqua, Garamond">This paragraph
has had its font...</font>
</p>
Attributes:
size= "Num. Value 1-7" Size of your text, 7 is biggest
color= "rgb,name,or hexidecimal" Change font color
face= "name of font" Change the font type
First Letter Style:
<p><font size="7" face="Georgia, Arial" color="maroon">C</font>ustomize
your font to achieve a desired look.</p>
17 Favicon - an icon for your site(an icon ends with .ico)
download an icon and save it in your sites root directory(main folder)
to your webpages add:
<head>
<link rel="shortcut icon"
href="http://www.domain.com/iconfile.ico">
</head>
to create a favicon(instead of download):
using an icon editor:
PixelToolbox from AxiomX, the icon image is 16x16 pixel size(if you make it from an existing image file (like jpeg)).
18 add site to favorites link:
<script language="JavaScript" type="text/javascript">
function addBookmark()
{
if (document.all) {
window.external.AddFavorite(location.href, document.title);
}else if (window.sidebar){
window.sidebar.addPanel(document.title, location.href, "");}
}
</script>
<a href="JavaScript:addBookmark();"
onclick="addBookmark();">Add to your favorites</a>
19 add a forum:
you can open a free forum for example at: http://www.ace.st/en/
and add the forums link to your site.
,manage the forum from : profile, scroll down to administration panel
20 display pdf(ebook):
assuming you added the pdf to your site folder(on your pc or in the webhost via ftp)
<a target="_blank" href="NAME OF FILE.pdf" title="">NAME OF LINK AS YOU WANT IT TO APPEAR </a>
to embed the pdf in a webpage:
<embed src="NAME OF FILE.pdf" width="500" height="375">.
21 add current date using vbScript: (visual basic script)
<script type="text/vbscript">
Dim myDateString
myDateString = Date()
document.write(myDateString)
</script>
21.2 embed countdown clock :
https://www.timeanddate.com/clocks/freecountdown.html
22 EMBED A CHAT:
a chat with webcam, picture sharing and voice:
www.oohya.net
example:
<br><a href="http://www.oohya.net/index.php?option=com_content&task=view&id=85&Itemid=1">Click Here to embed OohYa Chat in your profile.</a></br>
<br><p><object type="application/x-shockwave-flash" allowScriptAccess="always" allowNetworking="all" height="425" width="525" data="http://www.oohya.net/123flashchat/client/123flashchat.swf?init_root=http://www.oohya.net/123flashchat/client/">
<param name="allowScriptAccess" value="always" />
<param name="allowNetworking" value="all" />
<param name="movie" value="http://www.oohya.net/123flashchat/client/123flashchat.swf?init_root=http://www.oohya.net/123flashchat/client/" />
</object><br />
<a href="http://www.oohya.net">Free Chat Rooms</a>
other chat providers (use a search engine to look them up):
chatango.com
99Chats, TinyChat, Meebo Chat, Chat Maker, Yaplet, Gabbly
23 web show :
find a live streaming provider and embed(</embed>) or add its link:
A stickam.com , in the site in your profile: embed your stickam player on your web site
http://www.ustream.tv/ (sign up ...), login, broadcast now, you can get the embed link from your profile page
(live embed) or from bellow the video stream, bellow share this ( embed stream)
click on the “Embed” tab. From the "Embed the Live Video anywhere!" text field, and click on “Copy Embed”
(you can also embed Chat or Social Stream modules) and paste this into your HTML code.
B livestream.com , www.justin.tv
24 publish your site:(write down all user passwords you set) see 24 to publish for free
A get a disposable credit card like visa's from the post office
B buy a domain (search buy a domain(url)) you can use http://www.websitepalace.com/ for example
also: Register.com and NetworkSolutions.com
C buy space in a webhost(most offer to buy a domin) you can use http://www.websitepalace.com/ for example
the webhost can offer you services like add a forum or add ssl security
D ftp your site to your domain:
internet explorer(IE), tools, internet options, advanced tab, enable ftb view outside IE is checked
create a desttop shortcut type:
explorer.exe ftp://username:password@servername (webhost is server name or your website url) the password
in the webhost and also called credentials
or open ftp://siteurl and enter your user and password(might need to: file,login)
sometimes you can ftp via your webhost
or use filezilla (ftp software)
25 host your site on your own pc(for free):
optional : ask your isp(internet service provider) for a static(not changing ipaddress)
option A:
control panel, add or remove programs, add/remove windows components, internet information services(iis) -
checked, next, new window asks you to insert windows cd, wait till install wizard will have completed.
mycomputer, c:, inetpub, wwwroot, put site files folders in wwwroot folder
start, control panel, administrative tools, internet information services, hpc, websites, default website -
right click, properties, documents, add yourSiteFile.html, ok
to get your ip adress: go to ipchicken.com or start, run, cmd, ipconfig (look at 2nd ip Address)
connect to your site by: entering your ip adress to enter your site from anywhere (if your pc is on) or
on your pc type the url(in the webrowser) localhost. to get a name in addition to your ip address(a site domain
name): go to no-ip.com or search for: dns for static ip
option B:
Download Wampserver, type localhost for the server name, 13To use Wampserver, create a folder in the
www directory and save the files for your site in that folder.
14The address for your site will be: yourstaticipaddress/yourfolderinthewwwdirectory/. Except if you signed
up for a static DNS service (see end of option B)
WARNING: update windows and install an antivirus when running hosting on your pc.
also you want to have fast adsl(internet connection)
26 Web Statistics Software:(to check how popular your site is)
Analog Website: www.analog.cx
AWStats Website: awstats.sourceforge.net
Google Analytics Website: www.google.com/analytics
Webalizer Website: www.mrunix.net/webalizer
VisitorVille Website: www.visitorville.com
now you can delete update downlod and add files by dragging into and out off the ftp
27 usualy homepage.htm opens for your domain url]
CSS (graphics for html)
Cascading Style Sheets (CSS) (adding simple graphics to your html code):
"HTML tag" { "CSS Property" : "Value" ; }
"Property" (html attribute) is the CSS element you wish to manipulate
"VALUE" represents the value of the specified property.
1 internal css:
<html>
<head>
<style type="text/css">
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>White text on a black background!</p>
</body>
</html>
2 External CSS (a file that contains only CSS code and is saved with a ".css" file extension):
in notepad type:
body{ background-color: gray;}
p { color: blue; }
h3{ color: white; }
save as fileName.css (in the same folder of your .html file)
in the html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="fileName.css" />
</head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font.
The background color of this page is gray because
we changed it with CSS! </p>
</body>
</html>
3 inline css (can overide other two types of css):
<p style="background: blue; color: white;">A new background and font color with inline CSS</p>
4 css classes:
css code:
p.first{ color: blue; }
p.second{ color: red; }
html code:
<p class="first">This is a paragraph that uses the p.first CSS code!</p>
<p class="second">This is a paragraph that uses the p.second CSS code!</p>
example 2: css code:
p{ color: red; font-size: 20px; }
p.test1{ color: blue; }
p.test2{ font-size: 12px; }
html code: (in body (webpage contents(text and pictures) area))
<p class="test1">This is a paragraph that uses the p.test1 CSS code!</p>
<p class="test2">This is a paragraph that uses the p.test2 CSS code!</p>
5 css background: (text background)
p { background-image: url(smallPic.jpg); }
h4{ background-image: url(picture url here sould end with picture formate like .jpg); }
example 2:
p {
background-image: url(smallPic.jpg);
background-repeat: repeat; } (horizontal)
h4 {
background-image: url(smallPic.jpg);
background-repeat: repeat-y;} (vertical)
ol {
background-image: url(smallPic.jpg);
background-repeat: repeat-x;} (horizontal short)
ul {
background-image: url(smallPic.jpg);
background-repeat: no-repeat;} (vertical short)
6 CSS Fixed Background Image( with scrolling):
textarea.noScroll {
background-image: url(smallPic.jpg);
background-attachment: fixed;
}
textarea {
background-image: url(smallPic.jpg);
background-attachment: scroll;}
6 CSS Gradient(fading) Background:
p {
background-image: url(http://www.example.com/gradient.gif);
background-repeat: repeat-x;
}
7 css font:
h4 { font-family: sans-serif; }
h5 { font-family: serif; }
h6 { font-family: arial; }
size:
p { font-size: 120%; }
ol{ font-size: 10px; }
ul{ font-size: x-large; }
ul{ font-weight: bolder; } (bold text)
decoration:
h4{ text-decoration: line-through; }
h5{ text-decoration: overline; }
h6{ text-decoration: underline; }
a { text-decoration: none; }
align:
p { text-align: right; }
h5{ text-align: justify; }
text case:
p { text-transform: capitalize; }
h5{ text-transform: uppercase; }
h6{ text-transform: lowercase; }
CSS White Space ( until </br> long text will be horizontally scrolled)
p { white-space: nowrap; }
CSS Word Spacing
p { word-spacing: 10px; }
p { letter-spacing: 3px; } (CSS Letter Spacing)
8 CSS Padding (framing the text):
p {padding: 15px; border: 1px solid black; }
h5{padding: 0px; border: 1px solid red;}
9 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; }
example 2: border table:
table { border-width: 7px;
border-style: outset; }
td { border-width: medium;
border-style: outset; }
p { border-width: thick;}
example 3
table { border-color: rgb( 100, 100, 255);
border-style: dashed; }
td { border-color: #FFBD32;
border-style: ridge; }
p { border-color: blue;
border-style: solid; }
border-style: solid; }
10 CSS List Style Type:
ol { list-style-type: upper-roman; }
ul { list-style-type: circle; }
list with images:
ul { list-style-image: url("listArrow.gif"); }
ol { list-style-image: url("listArrow2.gif"); }
11CSS Links ( Pseudo-classes )
css code:
a:link { color: red; }
a:visited { color: red; }
a:hover { color: blue; } (also a:active for while clicking a link)
html code:
<a href="">This is a special CSS Link</a>!
css fat example:
a:hover{
color: blue;
background-color: red;
font-size: 27px;
border: 10px inset blue;
font-family: serif;
text-transform: uppercase;
text-decoration: line-through;
letter-spacing: 3px;
word-spacing: 6px;
font-weight: normal;}
12 CSS Cursor Code:
p { cursor: wait }
h4 { cursor: help }
h5 { cursor: crosshair }
13 search for: CSS Reference
to get a list of all css attributes and values
JS java script:
to open the JS compiler :
from google chrom : f12 or ctrl+shift+I or tools line, extra tools, tools for developers, console tab.
0 shift+enter = down line
enter = run code.
ctrl+l = clear console
0.1 output :
console.log("hello world")
console.warn("hello world")
console.info("hello world")
alert("err")
0.2 redock console :
near the console x there are thre dots.
0.3 {} is called a block
1 messagebox :
alert("hello world")
2 variables :
var x = "value"; // and this is a comment
var y = 2;
var bool1 = true; // boolean variable
var x; // declaration
x = 'hadouken' ; // initialization
3 comments :
// comment
/*comment
block*/
4 get type of a var :
var x1;
x1 = 1;console.log(typeof(x1));
5 array :
var grades = [];
grades[0] = 90;
grades[1] = 100;
console.log(grades.length);
console.log(grades);
output : (2) [90, 100]
var names=["moti","barski","rulz"]; console.log(names);
output : (3) ["moti", "barski", "rulz"]
var a=[30,true,"hi"]
6 conditional :
var temprature = -10
if (temprature > 20){console.log('it is warm')}
else if (temprature < -15){console.log('it is cold')}
else{'it is ok'}
7 select case :
var day = 7;
switch(day){
case 1:console.log("sunday");break;
case 2:case 3:case 4:case 5:case 6:
console.log("workday");break;
case 7 : console.log("saturday"); break;
default: console.error("error enter a 0<number <8");
}
output : saturday
8 while loop :
var c = 10;
while (c<30){c++;console.info(c);}
var i = 0;
while(i++<5){console.log(i)}
// compare, increase
i = 0;
while(++i<5){console.log(i)}
//increas, compare
outputs :
VM161:2 1
VM161:2 2
VM161:2 3
VM161:2 4
VM161:2 5
VM161:4 1
VM161:4 2
VM161:4 3
VM161:4 4
do while loop :
var n1 = 1;
do{console.info(n1++);}while(n1 <12);
for loop :
for (var i=0;i<5;i++){console.info(i);}
var y=1;
for (var i=0,y=2;i<5;i++){console.info(i);}
var i =0;
for (;i<5;){console.info(i++);}
for each loop :
var stuff=[1,3,5,7];
for(var v of stuff){console.log(v)}
output: 1 3 5 7
but
var stuff=[1,3,5,7];
for(var k in stuff){console.log(k)}
outputs : 0 1 2 3
9 functions :
function wasap(){console.info('hello')}
wasap()
outputs : hello
function of1(n){
if (n > 0){
console.log(n);
of1(n-1);
}
}
of1(5)
output : 5 4 3 2 1
function connect(x,y){
console.log(x + " and " + y)
}
connect('peanut','butter')
function countDown(steps){
if(!(steps>0)){return;} // breaks out of function doing nothing
for(;steps>0;steps--){console.log(steps);}
}
countDown(0) //does nothing
countDown('katon gouka mekkyaku') //does nothing
countDown(5) //counts down
function square(x){return x * x;}
console.log(square(5))// output 25
10 examples : fibonnacci series :
function fibonacci(n){
var a =0; var b = 1; var temp;
for (var i=0;i<n;i++){
temp = a; a = b; b =temp+a;
}
return a;
}
console.log(fibonacci(5))
triangled number series :
function triangledNums(n){
var a =1; var adder = 2;
for (var i=0;i<n-1;i++){
a=a+adder;
adder++
}
return a;
}
console.log(triangledNums(8))
or
function triangledNums(n){return n*(n+1)/2}
console.log(triangledNums(8))
11 string replace :
var str = "Visit Microsoft!";
var res = str.replace("Microsoft", "W3Schools");
12 let : replaces var and makes the var exist only in the scope in which it was declared
13 get input from user :
var x = prompt("enter something")
or
var x = prompt("enter something", "default input")
or
window.prompt("something")
14 string techniques :
http://str.lengh
var st = "slkdjfkl"
console.log(st.length)
convert string to integer :
parseInt("1234")
conver # to string :
var str = 4 + ""
or
var x = 4;var st = x.tostring
str.indexOf("x") // returns -1 if x isn't in the string or the first index of x in the string
\n goes down a line
console.log("hi\nmoti")
15.1 dates :
var Xmas95 = new Date()
var day = Xmas95.getHours();
console.log(day); // 25
using JS with HTML and CSS :
1 skeleton :
<html>
<head>
<script>
<!--java script goes here and this is a comment tag it does nothing-->
</script>
</head>
<body>
</body>
</html>
button hello world :
<html>
<head>
<script>
var count = 0;
function countClicks(btn){
count++;+alert(count);
btn.innerText=count;
}
</script>
</head>
<body>
<button onclick="countClicks(this)">count</button>
</body>
</html>
2 naming a tag and playing with it :
<html>
<head>
<script>
function changeColor(color){
document.querySelector("#main").style.background=color;
}
</script>
</head>
<body>
<button onclick="changeColor('red')">red me</button>
<button onclick="changeColor('blue')">blue me</button>
<button onclick="changeColor('green')">green me</button>
<section id="main">
the main section
</section>
</body>
</html>
3 get all inputs inside the fieldset & iterate over all found inputs
<html>
<head>
<script>
function saveData(){
//get all inputsinside the fieldset
var data=document.querySelectorAll("fieldset>input");
// iterate over all found inputs
for(var i=0;i<data.length;i++){alert(data[i].value)}
}
</script>
</head>
<body>
<fieldset>
<input id="userName">
<input id="email">
<input id="phone">
<button onclick="saveData()">save</button>
</fieldset>
<section id="main">
the main section
</section>
</body>
</html>
4 passing input boxes data to JS functions
<html>
<head>
<script>
function alrt(x,y){
alert(x,y)
}
function alrt(){
alert(in1.value + ' ' + in2.value)
}
</script>
</head>
<body>hi
<input id="in1" type = "text"/>
<input id="in2" type = "text"/>
<button onclick="window.alert(in1.value + ' ' + in2.value);">click1</button>
<button onclick="window.alrt(in1.value + ' ' + in2.value);">click2</button>
<button onclick="window.alrt();">click3</button>
<br/>
</body>
</html>
input place holder :
<input type="placeholder" placeholder="I replaced value with placeholder">
5.1 css invisible text :
<html>
<head>
<script>
</script>
</head>
<body>
<p id="ptag" style="color:white;">invisible text mark with mouce to see</p>
</body>
</html>
5.2 css via style tag :
<style type="text/css">
/* style - by tag name */
body {
background-color: rgba(230,230,230,1.0); /*red green blue alpha*/
}
h2 {
color: green;
font-size: 35px;
}
#idname {
font-family: Arial;
font-weight: bold;
}
.classname {
width: 100%;
height: 50px;
text-align: right;
}
</style>
affects : body tag, h2 tag,
<p id="idname">another P with id Bubu</p>
<button class="Groot">so.. what up?</button>
6 change btn attributes :
function paintBlue(ele) {
let st = ele.style; //set variable to style
st.backgroundColor = "Blue";//set background color
st.color = "white";//set text color
}
<button onclick="paintBlue(this);">click me to blue</button>
7 add tags using JS :
function ex2() {
var h = document.createElement("h1"); //create element
h.textContent = "Bubu is the king"; //set text
h.style.fontSize = "60px"; //set font size
document.body.appendChild(h);//add to body
}
function ex3(){
var sp = document.createElement("span");
sp.textContent = "left ";
document.body.appendChild(sp);
sp = document.createElement("span");
sp.textContent = "right ";
document.body.appendChild(sp);
}
8 change the inner html value of the tag :
<html>
<head>
<script>
//innerHTML
function intxt(){
x1.innerHTML = 'hadouken !!!';
in1.value = 'hi';
}
</script>
<style type="text/css">
//p {color: white; }
p {font-size: 50px;}
//body {color: white; }
</style>
</head>
<body>
<p id="x1">text to be changed by JS</p>
</br><input id="in1" type = "text"/>
<button onclick="window.intxt();">click3</button>
</body>
</html>
9 wrapping controls and using css classes :
<html>
<head>
<script>
//innerHTML
function intxt(){
x1.innerHTML = 'hadouken !!!';
in1.value = 'hi';
}
</script>
<style type="text/css">
.btn1{
padding: 15px 32px;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.inpt{font-size: 34px;}
p {font-size: 50px;}
</style>
</head>
<body>
<fieldset>
<p id="x1">text to be changed by JS</p>
</br><input class='inpt', id="in1" type = "text"/>
<button class='btn1', onclick="window.intxt();">test click</button>
</fieldset>
</body>
</html>
Last edited by Admin on Tue Jan 16, 2018 6:53 pm; edited 4 times in total
to make a website from scratch:
1 create a new folder (in here you put all your files, and webpages)
2 create a new text file change its ending to html or htm
3 right click the htm file open with notepad or wordpad (if your on windown), or typepad(for mac os)
4 skelleton of html code:
<html>
<head>
<title>My WebPage!</title>
</head>
<body>
Hello World! All my content goes here!
</body>
</html>
for xml :
4.2 here is an example of htm code for an html site :
<html>
<header>
<title>moti site</title>
</header>
<body>
<center>
<p><h1><b>welcome<br>new line</b></h1></p>
<p><h2><i>welcome</i></h2></p>
<p><u>welcome</u></p>
<p>welcome</p>
</center>
space
<table align = "center" border = "1" width = "300">
<tr><td>videos</td></tr>
<tr><td><ol>
<li>item 1</li>
<li>item 2</li>
</ol></td></tr>
<tr><td>paste youtube embedded here</td></tr>
<tr><td>test1</td><td>test2</td></tr>
</table>
videos:
<ol>
<li>item 1</li>
<li>item 2</li>
</ol>
</body>
</html>
5 save (with ctrl s) close the notepad open your html site.
html code:
tags : open tag <html></html> close tags thats the format for all the html tags in them you put text and stuff
in the <html></html> tags you put <header></header> and <body></body tags outside of header tag as
see number 4 above
<title>your site title</title> goes in header tags.
in body tags goes your contents (pictures, links, text). to add text you type it inside body tags and you can
sorround some text in special tags to change its appearence.
attributes: in the tags can be added (to the first tag) attributes for the contents in the tag.
some characters in your text can be input laccording to the following:(Entities)
& - &
cent sign - ¢
copyright symbol - © or ©
degree sign - °
greater than - >
lower than - <
space -
registered trade mark - ®
trademark - ™
tags list exampled:
1 <p> - opening paragraph tag
Element Content - paragraph words
</p> - closing tag
<p align="justify">some text</p> (align is an attribute) align = "center" or "right"
2 list :
<h4 align="center">Goals</h4> (headline) also h1 to h6 h1 is biggest.
attribute : align = "left" or "center" or "right"
<ol> (numbered list, use ul (not ol)for unnumbered) can use <ol start ="4"> to start count from 4
<li>stuff1</li>
<li>stuff2</li>
</ol>
(<ol type="x"> x replace with "a", "A", "i" or "I" to change counters)
(<ul type="square"> or <ul type="disc"> or <ul type="circle">)
3 definition:
<dl>
<dt><b>chizu</b></dt>
<dd>japanese word for cheese.</dd>
<dt><b>jidosha</b></dt>
<dd>japanese word for car.</dd>
</dt>
4 line break (enter new line):
<br />
5 horizontal line : <hr />
<b>Bold Text</b>
<em>Emphasized Text</em>
<strong>Strong Text</strong></p>
<i>Italic Text</i>
<sup>superscripted Text</sup>
<del>struckthrough Text</del>
<code>Computer Code Text</code>
6 <font size="5">Here is a size 5 font</font>
<font color="#990000">This text is hexcolor #990000</font>
(This text is hexcolor #990000)
<font color="red">This text is red</font>
Attributes:
size= "Num. Value 1-7" Size of your text 7 is biggest
color= "rgb,name,or hexidecimal" Change font color
face= "name of font" Change the font type
7 HTML - Hypertext Reference (href):
<a href="http://www.espn.com/" target="_blank" >ESPN Home</a>
<a href="http://www.yahoo.com/" target="_blank" >Yahoo Home</a>
(the text between the tags will be shown)
Internal - href="#anchorname" (link to a word on your site) and add :
<A name="anchorname">you get here</A>
Local - href="../pics/picturefile.jpg" (link to a file in a folder in the folder of your site (to be ftb via your domain url
and stored in your webhost)
Global - href="url" (link to a site)
target=" _blank" Opens new page in a new browser window
_self" Loads the new page in current window
_parent" Loads new page into a frame that is superior to where the link lies
_top" Loads new page into the current browser window, cancelling all frames
ancoring: step1:
<h2>HTML Links and Anchors<a name="top"></a></h2>
<h2>HTML Text Links<a name="text"></a></h2>
<h2>HTML Email<a name="email"></a></h2>
step2:
<a href="#top">Go to the Top</a>
<a href="#text">Learn about Text Links</a>
<a href="#email">Learn about Email Links</a>
email link: <a href="mailto:x@yahoo.com?subject=Feedback" >Email@personx.com</a>
email link with filling email body:
<a href="mailto:email@yahoo.com?subject=Feedback&body=nice">
Email@personx.com</a>
download link:
<a href="http://www.sitename.com/pics/htmlT/something.zip">Text Document</a>
href ="location of file (url of another site or location in the folder containing the file compared to your location)
href = images/images.html (link to webpage images in folder images)
href = "images/pic1.png" link to a picture
8 images:
<img src="anime da.gif" />
src="anime da.gif" picture file resides in same directory(folder) as .html file
src="../anime da.gif" picture file resides in previous directory as .html file
src="../pics/anime da.gif" picture file resides in the pic directory in a previous directory as .html file
attributes:
alt="anime" (text to be displayed when hovering with mouse over picture)
<img src="anime da.gif" height="60" width="200">
align="right" or "left" or "center"
Images as Links:
<a href="http://www.sitename.com/">
<img src="anime da.gif">
</a>
small picture link to comlete big picture:
<a href="anime da.gif">
<img src="thmb_anime da.gif">
</a>
image link:
<a href="http://www.espn.com" target="_blank"> <img src="anime da.gif"> </a>
attributes : border="0"
9 embed music:
<embed src="beethoven.mid" width="360" height="165" /> (file beethoven.mid is in the site folder)
Embed Attributes - Related to Functionality:
autostart - choose if the media file will start automatically
loop - sets the media file to repeat or not
volume - set the volume of the media file. The range is 0-100.
<embed src="beethoven.mid" autostart="false" loop="false"
volume="60" />
10 embed video:
<embed src="siteurl/files/html/htmlexample.mpeg"
autostart="false" />
also:
<a href="http:siteurl/pics/flash/motiontween1easy.swf">
motiontween1easy.swf</a>
Flash movies (.swf), AVI's (.avi), and MOV's (.mov) , .mpeg files file types are supported by the embed tag. you sould
use a new webbrowser so it will work such as IE (internet explorer) 8 or higher
HTML - Embed Attributes:
autostart - controls the media's ability to start without prompting. Values are true or false.
hidden - controls whether or not the play/stop/pause embedded object is hidden or not. Values are true or false. (Hide your embeded media if you just want background noise).
loop - A true value means the media will continuously loop, false means no looping.
playcount - Setting a playcount means the media will repeat itself x number of times instead of continuously as with the loop attribute above. (playcount="2" will repeat the video twice).
volume - set a numeric value for the loudness of your media. (0-100).
also you can get the embed code of a video of youtube or google and paste it on your site
11 <table border="1"> (table)
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
</table>
for this code:
<table border="1" cellspacing="10"
bgcolor="rgb(0,255,0)">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
</table>
in tr the text is bold and you see table attributes
12 background color:
<body bgcolor="Silver">
<p>We set the background...</p>
</body>
bgcolor for table:
<table>
<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
</table>
13 background picture:
add attribute: background="url" (of picture) or picture file location, to body or table tag
14 comment (does nothing but the site won't show it
<!--buy milk -->
14.2 <p>This text is <del>scratched</del> out!</p>
14.3 iframe: embed a webpage in another webpage:
<html>
<head>
</head>
<frameset cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>
frameset - The parent tag that defines the characteristics of this frames page.
Individual frames are defined inside it.
frameset cols="#%, *"- Cols(columns) defines the width that each frame will have.
In the above example we chose the menu (the 1st column) to be 30% of the total
page and used a "*", which means the content (the 2nd column) will use the remaining width for itself.
frame src="" -The location of the web page to load into the frame.
<html><head></head>
<frameset rows="20%,*">
<frame src="title.html">
<frameset cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>
<html><head></head>
<frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
<frame src="title.html">
<frameset border="0" frameborder="0" framespacing="0" cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>
frameborder="#" - A zero value shows no "window" border.
border="#"- Modifies the border width, used by Netscape.
framespacing="#" -Modifies the border width, used by Internet Explorer.
15 meta here in contents attribute you put tags key words to help search engines find and rank your site:
<head>
<meta name="keywords" content="HTML, XHTML, CSS, tutorials, site" />
</head>
name defines what type of meta tag being used. Note that the keywords are separated by commas.
<head> (description meta tag
<meta name="description" content="site contains webmaster tutorials." />
</head>
16 font:
<p>
<font size="5">Here is a size 5 font</font>
</p>
<font color="#990000">This text is hexcolor #990000</font>
<font color="red">This text is red</font>
<p>
<font face="Bookman Old Style, Book Antiqua, Garamond">This paragraph
has had its font...</font>
</p>
Attributes:
size= "Num. Value 1-7" Size of your text, 7 is biggest
color= "rgb,name,or hexidecimal" Change font color
face= "name of font" Change the font type
First Letter Style:
<p><font size="7" face="Georgia, Arial" color="maroon">C</font>ustomize
your font to achieve a desired look.</p>
17 Favicon - an icon for your site(an icon ends with .ico)
download an icon and save it in your sites root directory(main folder)
to your webpages add:
<head>
<link rel="shortcut icon"
href="http://www.domain.com/iconfile.ico">
</head>
to create a favicon(instead of download):
using an icon editor:
PixelToolbox from AxiomX, the icon image is 16x16 pixel size(if you make it from an existing image file (like jpeg)).
18 add site to favorites link:
<script language="JavaScript" type="text/javascript">
function addBookmark()
{
if (document.all) {
window.external.AddFavorite(location.href, document.title);
}else if (window.sidebar){
window.sidebar.addPanel(document.title, location.href, "");}
}
</script>
<a href="JavaScript:addBookmark();"
onclick="addBookmark();">Add to your favorites</a>
19 add a forum:
you can open a free forum for example at: http://www.ace.st/en/
and add the forums link to your site.
,manage the forum from : profile, scroll down to administration panel
20 display pdf(ebook):
assuming you added the pdf to your site folder(on your pc or in the webhost via ftp)
<a target="_blank" href="NAME OF FILE.pdf" title="">NAME OF LINK AS YOU WANT IT TO APPEAR </a>
to embed the pdf in a webpage:
<embed src="NAME OF FILE.pdf" width="500" height="375">.
21 add current date using vbScript: (visual basic script)
<script type="text/vbscript">
Dim myDateString
myDateString = Date()
document.write(myDateString)
</script>
21.2 embed countdown clock :
https://www.timeanddate.com/clocks/freecountdown.html
22 EMBED A CHAT:
a chat with webcam, picture sharing and voice:
www.oohya.net
example:
<br><a href="http://www.oohya.net/index.php?option=com_content&task=view&id=85&Itemid=1">Click Here to embed OohYa Chat in your profile.</a></br>
<br><p><object type="application/x-shockwave-flash" allowScriptAccess="always" allowNetworking="all" height="425" width="525" data="http://www.oohya.net/123flashchat/client/123flashchat.swf?init_root=http://www.oohya.net/123flashchat/client/">
<param name="allowScriptAccess" value="always" />
<param name="allowNetworking" value="all" />
<param name="movie" value="http://www.oohya.net/123flashchat/client/123flashchat.swf?init_root=http://www.oohya.net/123flashchat/client/" />
</object><br />
<a href="http://www.oohya.net">Free Chat Rooms</a>
other chat providers (use a search engine to look them up):
chatango.com
99Chats, TinyChat, Meebo Chat, Chat Maker, Yaplet, Gabbly
23 web show :
find a live streaming provider and embed(</embed>) or add its link:
A stickam.com , in the site in your profile: embed your stickam player on your web site
http://www.ustream.tv/ (sign up ...), login, broadcast now, you can get the embed link from your profile page
(live embed) or from bellow the video stream, bellow share this ( embed stream)
click on the “Embed” tab. From the "Embed the Live Video anywhere!" text field, and click on “Copy Embed”
(you can also embed Chat or Social Stream modules) and paste this into your HTML code.
B livestream.com , www.justin.tv
24 publish your site:(write down all user passwords you set) see 24 to publish for free
A get a disposable credit card like visa's from the post office
B buy a domain (search buy a domain(url)) you can use http://www.websitepalace.com/ for example
also: Register.com and NetworkSolutions.com
C buy space in a webhost(most offer to buy a domin) you can use http://www.websitepalace.com/ for example
the webhost can offer you services like add a forum or add ssl security
D ftp your site to your domain:
internet explorer(IE), tools, internet options, advanced tab, enable ftb view outside IE is checked
create a desttop shortcut type:
explorer.exe ftp://username:password@servername (webhost is server name or your website url) the password
in the webhost and also called credentials
or open ftp://siteurl and enter your user and password(might need to: file,login)
sometimes you can ftp via your webhost
or use filezilla (ftp software)
25 host your site on your own pc(for free):
optional : ask your isp(internet service provider) for a static(not changing ipaddress)
option A:
control panel, add or remove programs, add/remove windows components, internet information services(iis) -
checked, next, new window asks you to insert windows cd, wait till install wizard will have completed.
mycomputer, c:, inetpub, wwwroot, put site files folders in wwwroot folder
start, control panel, administrative tools, internet information services, hpc, websites, default website -
right click, properties, documents, add yourSiteFile.html, ok
to get your ip adress: go to ipchicken.com or start, run, cmd, ipconfig (look at 2nd ip Address)
connect to your site by: entering your ip adress to enter your site from anywhere (if your pc is on) or
on your pc type the url(in the webrowser) localhost. to get a name in addition to your ip address(a site domain
name): go to no-ip.com or search for: dns for static ip
option B:
Download Wampserver, type localhost for the server name, 13To use Wampserver, create a folder in the
www directory and save the files for your site in that folder.
14The address for your site will be: yourstaticipaddress/yourfolderinthewwwdirectory/. Except if you signed
up for a static DNS service (see end of option B)
WARNING: update windows and install an antivirus when running hosting on your pc.
also you want to have fast adsl(internet connection)
26 Web Statistics Software:(to check how popular your site is)
Analog Website: www.analog.cx
AWStats Website: awstats.sourceforge.net
Google Analytics Website: www.google.com/analytics
Webalizer Website: www.mrunix.net/webalizer
VisitorVille Website: www.visitorville.com
now you can delete update downlod and add files by dragging into and out off the ftp
27 usualy homepage.htm opens for your domain url]
CSS (graphics for html)
Cascading Style Sheets (CSS) (adding simple graphics to your html code):
"HTML tag" { "CSS Property" : "Value" ; }
"Property" (html attribute) is the CSS element you wish to manipulate
"VALUE" represents the value of the specified property.
1 internal css:
<html>
<head>
<style type="text/css">
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>White text on a black background!</p>
</body>
</html>
2 External CSS (a file that contains only CSS code and is saved with a ".css" file extension):
in notepad type:
body{ background-color: gray;}
p { color: blue; }
h3{ color: white; }
save as fileName.css (in the same folder of your .html file)
in the html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="fileName.css" />
</head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font.
The background color of this page is gray because
we changed it with CSS! </p>
</body>
</html>
3 inline css (can overide other two types of css):
<p style="background: blue; color: white;">A new background and font color with inline CSS</p>
4 css classes:
css code:
p.first{ color: blue; }
p.second{ color: red; }
html code:
<p class="first">This is a paragraph that uses the p.first CSS code!</p>
<p class="second">This is a paragraph that uses the p.second CSS code!</p>
example 2: css code:
p{ color: red; font-size: 20px; }
p.test1{ color: blue; }
p.test2{ font-size: 12px; }
html code: (in body (webpage contents(text and pictures) area))
<p class="test1">This is a paragraph that uses the p.test1 CSS code!</p>
<p class="test2">This is a paragraph that uses the p.test2 CSS code!</p>
5 css background: (text background)
p { background-image: url(smallPic.jpg); }
h4{ background-image: url(picture url here sould end with picture formate like .jpg); }
example 2:
p {
background-image: url(smallPic.jpg);
background-repeat: repeat; } (horizontal)
h4 {
background-image: url(smallPic.jpg);
background-repeat: repeat-y;} (vertical)
ol {
background-image: url(smallPic.jpg);
background-repeat: repeat-x;} (horizontal short)
ul {
background-image: url(smallPic.jpg);
background-repeat: no-repeat;} (vertical short)
6 CSS Fixed Background Image( with scrolling):
textarea.noScroll {
background-image: url(smallPic.jpg);
background-attachment: fixed;
}
textarea {
background-image: url(smallPic.jpg);
background-attachment: scroll;}
6 CSS Gradient(fading) Background:
p {
background-image: url(http://www.example.com/gradient.gif);
background-repeat: repeat-x;
}
7 css font:
h4 { font-family: sans-serif; }
h5 { font-family: serif; }
h6 { font-family: arial; }
size:
p { font-size: 120%; }
ol{ font-size: 10px; }
ul{ font-size: x-large; }
ul{ font-weight: bolder; } (bold text)
decoration:
h4{ text-decoration: line-through; }
h5{ text-decoration: overline; }
h6{ text-decoration: underline; }
a { text-decoration: none; }
align:
p { text-align: right; }
h5{ text-align: justify; }
text case:
p { text-transform: capitalize; }
h5{ text-transform: uppercase; }
h6{ text-transform: lowercase; }
CSS White Space ( until </br> long text will be horizontally scrolled)
p { white-space: nowrap; }
CSS Word Spacing
p { word-spacing: 10px; }
p { letter-spacing: 3px; } (CSS Letter Spacing)
8 CSS Padding (framing the text):
p {padding: 15px; border: 1px solid black; }
h5{padding: 0px; border: 1px solid red;}
9 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; }
example 2: border table:
table { border-width: 7px;
border-style: outset; }
td { border-width: medium;
border-style: outset; }
p { border-width: thick;}
example 3
table { border-color: rgb( 100, 100, 255);
border-style: dashed; }
td { border-color: #FFBD32;
border-style: ridge; }
p { border-color: blue;
border-style: solid; }
border-style: solid; }
10 CSS List Style Type:
ol { list-style-type: upper-roman; }
ul { list-style-type: circle; }
list with images:
ul { list-style-image: url("listArrow.gif"); }
ol { list-style-image: url("listArrow2.gif"); }
11CSS Links ( Pseudo-classes )
css code:
a:link { color: red; }
a:visited { color: red; }
a:hover { color: blue; } (also a:active for while clicking a link)
html code:
<a href="">This is a special CSS Link</a>!
css fat example:
a:hover{
color: blue;
background-color: red;
font-size: 27px;
border: 10px inset blue;
font-family: serif;
text-transform: uppercase;
text-decoration: line-through;
letter-spacing: 3px;
word-spacing: 6px;
font-weight: normal;}
12 CSS Cursor Code:
p { cursor: wait }
h4 { cursor: help }
h5 { cursor: crosshair }
13 search for: CSS Reference
to get a list of all css attributes and values
JS java script:
to open the JS compiler :
from google chrom : f12 or ctrl+shift+I or tools line, extra tools, tools for developers, console tab.
0 shift+enter = down line
enter = run code.
ctrl+l = clear console
0.1 output :
console.log("hello world")
console.warn("hello world")
console.info("hello world")
alert("err")
0.2 redock console :
near the console x there are thre dots.
0.3 {} is called a block
1 messagebox :
alert("hello world")
2 variables :
var x = "value"; // and this is a comment
var y = 2;
var bool1 = true; // boolean variable
var x; // declaration
x = 'hadouken' ; // initialization
3 comments :
// comment
/*comment
block*/
4 get type of a var :
var x1;
x1 = 1;console.log(typeof(x1));
5 array :
var grades = [];
grades[0] = 90;
grades[1] = 100;
console.log(grades.length);
console.log(grades);
output : (2) [90, 100]
var names=["moti","barski","rulz"]; console.log(names);
output : (3) ["moti", "barski", "rulz"]
var a=[30,true,"hi"]
6 conditional :
var temprature = -10
if (temprature > 20){console.log('it is warm')}
else if (temprature < -15){console.log('it is cold')}
else{'it is ok'}
7 select case :
var day = 7;
switch(day){
case 1:console.log("sunday");break;
case 2:case 3:case 4:case 5:case 6:
console.log("workday");break;
case 7 : console.log("saturday"); break;
default: console.error("error enter a 0<number <8");
}
output : saturday
8 while loop :
var c = 10;
while (c<30){c++;console.info(c);}
var i = 0;
while(i++<5){console.log(i)}
// compare, increase
i = 0;
while(++i<5){console.log(i)}
//increas, compare
outputs :
VM161:2 1
VM161:2 2
VM161:2 3
VM161:2 4
VM161:2 5
VM161:4 1
VM161:4 2
VM161:4 3
VM161:4 4
do while loop :
var n1 = 1;
do{console.info(n1++);}while(n1 <12);
for loop :
for (var i=0;i<5;i++){console.info(i);}
var y=1;
for (var i=0,y=2;i<5;i++){console.info(i);}
var i =0;
for (;i<5;){console.info(i++);}
for each loop :
var stuff=[1,3,5,7];
for(var v of stuff){console.log(v)}
output: 1 3 5 7
but
var stuff=[1,3,5,7];
for(var k in stuff){console.log(k)}
outputs : 0 1 2 3
9 functions :
function wasap(){console.info('hello')}
wasap()
outputs : hello
function of1(n){
if (n > 0){
console.log(n);
of1(n-1);
}
}
of1(5)
output : 5 4 3 2 1
function connect(x,y){
console.log(x + " and " + y)
}
connect('peanut','butter')
function countDown(steps){
if(!(steps>0)){return;} // breaks out of function doing nothing
for(;steps>0;steps--){console.log(steps);}
}
countDown(0) //does nothing
countDown('katon gouka mekkyaku') //does nothing
countDown(5) //counts down
function square(x){return x * x;}
console.log(square(5))// output 25
10 examples : fibonnacci series :
function fibonacci(n){
var a =0; var b = 1; var temp;
for (var i=0;i<n;i++){
temp = a; a = b; b =temp+a;
}
return a;
}
console.log(fibonacci(5))
triangled number series :
function triangledNums(n){
var a =1; var adder = 2;
for (var i=0;i<n-1;i++){
a=a+adder;
adder++
}
return a;
}
console.log(triangledNums(8))
or
function triangledNums(n){return n*(n+1)/2}
console.log(triangledNums(8))
11 string replace :
var str = "Visit Microsoft!";
var res = str.replace("Microsoft", "W3Schools");
12 let : replaces var and makes the var exist only in the scope in which it was declared
13 get input from user :
var x = prompt("enter something")
or
var x = prompt("enter something", "default input")
or
window.prompt("something")
14 string techniques :
http://str.lengh
var st = "slkdjfkl"
console.log(st.length)
convert string to integer :
parseInt("1234")
conver # to string :
var str = 4 + ""
or
var x = 4;var st = x.tostring
str.indexOf("x") // returns -1 if x isn't in the string or the first index of x in the string
\n goes down a line
console.log("hi\nmoti")
15.1 dates :
var Xmas95 = new Date()
var day = Xmas95.getHours();
console.log(day); // 25
using JS with HTML and CSS :
1 skeleton :
<html>
<head>
<script>
<!--java script goes here and this is a comment tag it does nothing-->
</script>
</head>
<body>
</body>
</html>
button hello world :
<html>
<head>
<script>
var count = 0;
function countClicks(btn){
count++;+alert(count);
btn.innerText=count;
}
</script>
</head>
<body>
<button onclick="countClicks(this)">count</button>
</body>
</html>
2 naming a tag and playing with it :
<html>
<head>
<script>
function changeColor(color){
document.querySelector("#main").style.background=color;
}
</script>
</head>
<body>
<button onclick="changeColor('red')">red me</button>
<button onclick="changeColor('blue')">blue me</button>
<button onclick="changeColor('green')">green me</button>
<section id="main">
the main section
</section>
</body>
</html>
3 get all inputs inside the fieldset & iterate over all found inputs
<html>
<head>
<script>
function saveData(){
//get all inputsinside the fieldset
var data=document.querySelectorAll("fieldset>input");
// iterate over all found inputs
for(var i=0;i<data.length;i++){alert(data[i].value)}
}
</script>
</head>
<body>
<fieldset>
<input id="userName">
<input id="email">
<input id="phone">
<button onclick="saveData()">save</button>
</fieldset>
<section id="main">
the main section
</section>
</body>
</html>
4 passing input boxes data to JS functions
<html>
<head>
<script>
function alrt(x,y){
alert(x,y)
}
function alrt(){
alert(in1.value + ' ' + in2.value)
}
</script>
</head>
<body>hi
<input id="in1" type = "text"/>
<input id="in2" type = "text"/>
<button onclick="window.alert(in1.value + ' ' + in2.value);">click1</button>
<button onclick="window.alrt(in1.value + ' ' + in2.value);">click2</button>
<button onclick="window.alrt();">click3</button>
<br/>
</body>
</html>
input place holder :
<input type="placeholder" placeholder="I replaced value with placeholder">
5.1 css invisible text :
<html>
<head>
<script>
</script>
</head>
<body>
<p id="ptag" style="color:white;">invisible text mark with mouce to see</p>
</body>
</html>
5.2 css via style tag :
<style type="text/css">
/* style - by tag name */
body {
background-color: rgba(230,230,230,1.0); /*red green blue alpha*/
}
h2 {
color: green;
font-size: 35px;
}
#idname {
font-family: Arial;
font-weight: bold;
}
.classname {
width: 100%;
height: 50px;
text-align: right;
}
</style>
affects : body tag, h2 tag,
<p id="idname">another P with id Bubu</p>
<button class="Groot">so.. what up?</button>
6 change btn attributes :
function paintBlue(ele) {
let st = ele.style; //set variable to style
st.backgroundColor = "Blue";//set background color
st.color = "white";//set text color
}
<button onclick="paintBlue(this);">click me to blue</button>
7 add tags using JS :
function ex2() {
var h = document.createElement("h1"); //create element
h.textContent = "Bubu is the king"; //set text
h.style.fontSize = "60px"; //set font size
document.body.appendChild(h);//add to body
}
function ex3(){
var sp = document.createElement("span");
sp.textContent = "left ";
document.body.appendChild(sp);
sp = document.createElement("span");
sp.textContent = "right ";
document.body.appendChild(sp);
}
8 change the inner html value of the tag :
<html>
<head>
<script>
//innerHTML
function intxt(){
x1.innerHTML = 'hadouken !!!';
in1.value = 'hi';
}
</script>
<style type="text/css">
//p {color: white; }
p {font-size: 50px;}
//body {color: white; }
</style>
</head>
<body>
<p id="x1">text to be changed by JS</p>
</br><input id="in1" type = "text"/>
<button onclick="window.intxt();">click3</button>
</body>
</html>
9 wrapping controls and using css classes :
<html>
<head>
<script>
//innerHTML
function intxt(){
x1.innerHTML = 'hadouken !!!';
in1.value = 'hi';
}
</script>
<style type="text/css">
.btn1{
padding: 15px 32px;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.inpt{font-size: 34px;}
p {font-size: 50px;}
</style>
</head>
<body>
<fieldset>
<p id="x1">text to be changed by JS</p>
</br><input class='inpt', id="in1" type = "text"/>
<button class='btn1', onclick="window.intxt();">test click</button>
</fieldset>
</body>
</html>
Last edited by Admin on Tue Jan 16, 2018 6:53 pm; edited 4 times in total