Web Tech Cat Codes

HTML
<html>
<head>
<title> Examples
</title>
<body>
<P><STRIKE> strike-through text </STRIKE></BR>
<BIG>places text in a big font </BIG><BR>
<SMALL> places text in a small font</SMALL><BR>
<SUB> places text in subscript position </SUB>

Normal
<SUP> places text in superscript style position </SUP><BR> </P>
</body>
</html>
Special Symbols
<html>
<head>
<title> Examples
</title>
<body>
& this is session 3<br>

are you able to understand
&
> & ©
<font size=6 color=#ff00ff>

<pre>
& this is session 3
are you able to understand
&
> & ©
</pre>
<tt> This is type writer</tt><br>
<em> this is italics</em><br>
<i> this is italics</t><br>
<hr>
<strong> bold </strong>
</font>
</body>
</html>
Hyperlink.html
<html>
<head>
<title> Examples
</title>
<BODY bgColor="clay" Text="brown" Link="blue" VLink="green" ALink="red">
&
&
&
©
<P><STRIKE> strike-through text </STRIKE></BR>
<BIG>places text in a big font </BIG><BR>
<SMALL> places text in a small font</SMALL><BR>
<SUB> places text in subscript position </SUB>

Normal
<SUP> places text in superscript style position </SUP><BR> </P>
<A NAME="bookmark_name"> Select some text at a place in the

document that you would like to create a link to,
then add an anchor to link to like this:</A> <br>
<p>The Name attribute of an anchor element specifies a

location in the document that we link to shortly. All NAME attributes in a document must be
unique.
Next select the text that you would like to create as a link to the location created above.
</p>
<pre>
1
2
3
4
5
6
</pre>
<font size=7>
<a href="figures.html">fig.1</a><br>
<br>
<A HREF="#bookmark_name">Go To Book Mark</A>
<br>
<br>
</body>
</html>
Figures.html
<html>
<body>
<h2>Alternative text</h2>
<p>The alt attribute should reflect the image content,

so users who cannot see the image gets an understanding of what the
image contains:</p>
<img src="fig.jpg" alt="HTML image " width="460" height="345"

border=5 hspace=20>
<A HREF="strikethrough.html">here</A>
</body>
</html>
Tables.html
<table border=2 width=50% cellspacing=10

cellpadding=10 bgcolor="cyan">
<tr align="center">
<th> Column 1 header </th>
<th> Column 2 header </th>
</tr>
<tr align="center" valign="top">
<td> Row1, Col1 </td>
</tr>
<tr align="center">
</tr>
</table>
<TABLE BORDER=1 width=50%>

<CAPTION> <h1>Spare Parts <h1> </Caption>
<TR>
<TH>Stock Number</TH>
<TH>Description</TH>
<TH>List Price</TH></TR>
<TR>
<TD bgcolor=red>3476-AB</TD>
<TD>76mm Socket</TD> <TD>45.00</TD> </TR>
<TR>
<TD>3478-AB</TD>
<TD><font color=blue>78mm Socket</font> </TD>
<TD>47.50</TD></TR>
<TR bgcolor=green>
<TD>3480-AB</TD>
<TD>80mm Socket</TD>
<TD>50.00</TD></TR>
</TABLE>
<br>
<br>
<Table border=5 cellpadding =5 cellspacing=5 bgcolor=cyan>

<tr> <th> Column 1 Header</th>
<th> Column 2 Header</th> </tr>
<tr> <td colspan=2> Row 1 Col 1</td> </tr>
<tr> <td rowspan=2>Row 2 Col 1</td>
<td> Row 2 Col2</td> </tr>
<tr> <td> Row 3 Col2</td> </tr>
</table>
Frames.html
<HTML>
<HEAD>
<TITLE> Framed Page </TITLE>
<FRAMESET COLS="23%,77%">
<FRAME SRC="figures.html">
<FRAMESET rows="20%,50%,*">
<FRAME SRC="hyperlinks.html">
<FRAME SRC="lists.html">
<frame src="strikethrough.html">
</FRAMeSET >
</HEAD>
</HTML>
Frames1.html
<HTML>
<HEAD>
<TITLE> Framed Page </TITLE>
<FRAMESET rows="40%,77%">
<FRAME SRC="figures.html">
<FRAMESET cols="20%,50%,*">
<FRAME SRC="hyperlinks.html">
<FRAME SRC="lists.html" name="n1">
<frame src="strikethrough.html">
</FRAMeSET >
</HEAD>
</HTML>
Forms.html
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
<br>
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" />
<br>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
<br>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
<br>
<p> <h3>This are Radio Buttons </h3> </p>
<br>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
<br>
<input type = "file" name = "fileupload" accept = "image/*" />
<br>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
</form>
</body>
</html>
CSS
External CSS
Style.css
.red {
color: red;
}
.thick {
font-size:20px;
}
.green {
color:green;
}
ExternalCssExp.html
<html>
<head>
<title>HTML External CSS</title>
<link rel = "stylesheet"
type = "text/css" href = "style.css">
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>
CSSdivExp.html
<html>
<head>
<title>HTML Layouts using DIV, SPAN</title>
</head>
<body>
<div style = "width:100%">
<div style = "background-color:#b5dcb3;

width:100%">
<h1>This is Web Page Main title</h1>
</div>
<div style = "background-color:#aaa;

height:200px; width:100px; float:left;">
<div><b>Main Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#eee;
height:200px; width:350px; float:left;" >
<p>Technical and Managerial Tutorials</p>
</div>
<div style = "background-color:#aaa;

height:200px; width:100px; float:right;">
<div><b>Right Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#b5dcb3;

clear:both">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</div>
</div>
</body>
</html>
CssTable.html
<html>
<head>
<title>HTML Layouts using DIV, SPAN</title>
<style type = "text/css">
tr {
bordercolor: red;
}
td{
font-size:20px; color:green;
}
</style>
</head>
<body>
<table border=2 width=100%>
<tr>
<th>123 </th>
<th>456 </th>
<tr>
<tr>
<td> abc </td>
<td> bcd </td>
</tr>
<tr>
<td> abc </td>
<td> bcd </td>
</tr>
</table>
</body>
</html>
Inline1.html
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<b style = "font-size:30px; color:red; background:cyan;text-align:center;">This is red</b>
<p style = "font-size:20px;">This is thick</p>
<p style = "color:green;">This is green</p>
<p style = "color:green;font-size:20px;">This is thick and green</p>
</body>
</html>
Inlinecss.html
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p><font color = "green" size = "5">Hello, World!</font></p>
<p style = "color:green; font-size:24px;" >Hello, World!</p>
</body>
</html>
Inlinep.html
<p style="font-size: 10pt; color: red; font-weight: bold;

font-family: Arial;">
This is a local stylesheet declaration.
</p>
<p>
</p>
<p style="font-size: 30pt; color: green; font-weight: bold;

font-family: Arial, Helvetica, sans-serif">
</p>
Internal.html
<html>
<head>
<title>HTML Internal CSS</title>
h1.t1 {
color: red;
}
h1.t2 {
font-size:60px; color:green;
}
.t3 {
font-size:80px; color:blue;
}
b{
color:green;
}
h2
{ color:cyan;
}
</style>
</head>
<body>
<h1 class="t1">This is red</h1>
<b>This is thick</b>
<h2>This is green</h2>
<p class="t3">This is thick and green</p>
</body>
</html>
Internalclass.html
<html>
<head>
<title>HTML Internal CSS</title>
.red {
color: red;
}
.thick{
font-size:20px;
}
.green {
color:green;
}
</style>
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>
Internalp.html
<html>
<head>
<title>HTML CSS</title>
<style>
p.s1 { color:green; font-size:24px;}
p.s2 { color:blue; font-size:24px;}
h1{color:red;}
</style>
</head>
<body>
<p class="s1">Hello, World!</p>
<p class="s1">Hello, World!</p>
<p class="s2"> first </p>
<h1> header1</h1>
<p class="s2"> second </p>
<p class="s2"> third </p>
</body>
</html>
Zindex.html
<html>
<head>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -2;
}
p
{font-size:30px;
color:red;
}
</style>
</head>
<body>
<h1>The z-index Property</h1>
<img src="html.jpg" width="500" height="140">
<p>Because the image has a z-index of -1,
it will be placed behind the heading.</p>
</body>
</html>
Zindex2.html
<h1 style="color: yellow; position: absolute;

center: 50px; left: 50px; z-index: 4">
in front side.</h1>
<h1 style="color: blue; position: absolute;
center: 50px; left: 50px; z-index: 2">
Text in front.</h1>
top: 50px; left: 50px; z-index: 2">
Text in front.</h1>

top: 50px; right: 50px; z-index: 2">
Text in front.</h1>
<img src="html.jpg" width=250 height=250
style=" position: absolute;
top: 50px; right: 50px; z-index: -2">
JavaScript
JS1.html
<html>
<head><title>Hello World in JavaScript</title>
<script type="text/javascript">
document.write("<h1>Hello World!</h1>");
var a;
var b;
var c;
a=0
b=0.2
c="abc"
document.write(a)
document.write("<h2><font color=blue>"+b+"<br>"+c+"</font></h2>")
</script>
</head>
<body>
document.write("<h1>In body!</h1>");
</script>
</body>
</html>
Js3
<html>
<head>
alert("There's a monster on the wing!");
</script>
</head>
<body>
</body>
</html>
JS4
<html>
<head>
confirm("Are you sure you want to do that?");
</script>
</head>
<body>
</body>
</html>
JS5
<html>
<head>
prompt("Enter you name", "Adam");
</script>
</head>
<body>
</body>
</html>
JSarray.html
<html>
<body>
<h2>JavaScript Arrays
<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>
<p id="demo"></p>
<p id="demo1"></p></h2>
<script>
var a=new Array(1,2,3,4,5,6);
for(i=0; i<a.length;i++)
document.write("<h3>"+a[i]+" ")
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
document.getElementById("demo1").innerHTML = cars[2];
for (i = 0; i < cars.length; i++) {

document.write("<h1><font color=blue>"+cars[i]+"</font></h1><br>")
}
</script>
</body>
</html>
JavaVariables.html
<html>
var a=5
var b=parseInt(prompt("enter number"))
var c=a+b
document.write("<h1>Addition result<br>");
document.write(c)
</script>
</head>
<body>
</body>
</html>
JSVariables.html
<html>
var b=prompt("enter string")

if(b=="abc")
{
document.write("<h1>correct</h1>");
}
else
{
document.write("<h1>incorrect</h1>")
}
</script>
</head>
<body>
</body>
</html>
DateObject.html
<html>
<head>
<title>JavaScript Date Method</title>
</head>
<body>
<script type = "text/javascript">
var dt = Date();
document.write("<h1>Date and Time : " + dt +"<br>");
var dt = new Date();
document.write("getDate() : " + dt.getDate()+"<br>" );
document.write("getDay() : " + dt.getDay() +"<br>");
document.write("<b>Javascript date getDay() method")
document.write("returns the day of the week for the specified")
document.write(" date according to local time.")
document.write(" The value returned by getDay() is an integer")
document.write(" corresponding to the day of the week:")
document.write(" 0 for Sunday, 1 for Monday, 2 for Tuesday, and so on.</b><br>")
document.write("getFullYear() : " + dt.getFullYear()+"<br>" );

document.write(Math.sqrt(4)+"<br>")
document.write(Math.PI)
</script>
</body>
</html>
Validate Form
<html>
<body>
<script>
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;
if (name==null || name==""){
alert("Name can't be blank");
}
else if(password.length<6){
alert("Password must be at least 6 characters long.");
}
else
alert("data is correct");
}
</script>
<body>
<form name="myform" method="post" action=" " onsubmit="return validateform()" >
Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register">
</form>
</body>
</html>
MouseOver.html
<!DOCTYPE html>
<html>
<body>
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.jpg"

alt="Smiley" width="32" height="32">
<p>The function bigImg() is triggered when the user moves the mouse pointer over the
image.</p>
<p>The function normalImg() is triggered when the mouse pointer is moved out of the
image.</p>
<script>
function bigImg(x) {
x.style.height = "64px";
x.style.width = "64px";
}
function normalImg(x) {
x.style.height = "32px";
x.style.width = "32px";
}
</script>
</body>
</html>
MouseOverId.html
<html>
<body>
<p>This example demonstrates how to assign an "onclick" event to a p element.</p>
<p id="demo" onclick="myFunction()">Click me.</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
</script>
<p>This example uses the HTML DOM to assign an "onclick" event to a p element.</p>
<p id="demo1">Click me.</p>
<script>
document.getElementById("demo1").onclick = function() {myFunction1()};
function myFunction1() {
document.getElementById("demo1").innerHTML = "YOU CLICKED ME!";
}
</script>
<p id="demo2" onclick="myFunction2()">Click me to change my text color.</p>
<script>
document.getElementById("demo2").style.color = "red";
}
</script>
</body>
</html>
OnClickEvent.html
<html>
<body>
<h1>The onclick Event</h1>
<p>The onclick event is used to trigger a function when an element is clicked on.</p>
<p>Click the button to trigger a function that will output "Hello World" in a p element with
id="demo".</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>
Validate Forms
FormValid.html
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
var y = document.forms["myForm"]["pwd"].value;
if (x == "") {
alert("Name must be filled out");
if (y == "") {
}}
else
{
if (x=="siva" && y="123")
alert("login success")
else
alert("incorrect details")
}
}
</script>
</head>
<body>
<center>
<form name="myForm" onsubmit="return validateForm()" method="get">
<h3>Name: <input type="text" name="fname"><br><br>
Password: <input type="password" name="pwd"><br><br></h3>
<input type="submit" value="Submit">
</form>
</body>
</html>
Cookie.html
<html>
<body>
<h1>javascript COOKIE example</h1>
<p>Click the below button to create a cookie</p>
<button type="button" onclick="cookieCreate()">CREATE</button>
<p id="Sample"></p>
<script>
function cookieCreate(){
var x=document.cookie;
x="username=Matt;class=prior;location=USA;expires=Wed, 10 July 2019 12:00:00 UTC";
document.getElementById("Sample").innerHTML="The cookie values are : "+x;
}
</script>
</body>
</html>
Attribute Length
<html>
<head>
<style>
.example {
color: red;
padding: 5px;
width: 150px;
font-size: 50px;
}
</style>
</head>
<body>
<p>Click the button to see how many attributes the button element has:</p>
<button onclick="myFunction()" class="example">Try it</button>
<p><strong>Note:</strong> In Internet Explorer 8 and earlier, the attributes property will return a
collection of all possible attributes for the element, and will, in this example, display a much
higher number than 1.</p>
<p>The result should be 2 (the button element's onclick and class attribute).</p>
<p id="demo">Initial document</p>
<script>
var x = document.getElementsByTagName("BUTTON")[0].attributes.length;
document.getElementById("demo").innerHTML = x;
}
document.getElementById("demo").innerHTML = "button clicked";
}
</script>
</body>
</html>
CSS-DOM
<!Doctype html>
<html>
<style>
.container {
width: 400px;
height: 400px;
position: absolute;
background: yellow;
}
.animate {
width: 50px;
height: 50px;
position: absolute;
background: red;
}
</style>
<body>
<h2>My First JavaScript Animation</h2>
<div class="container">
<div class="animate"></div>
</div>
</body>
</html>
CSS1-DOM
<!DOCTYPE html>
<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
</style>
<body>
<p><button onclick="myMove()">Click Me</button></p>
<div id ="container">
<div id ="animate"></div>
</div>
<script>
var id = null;
function myMove() {
var elem = document.getElementById("animate");
var pos = 0;
clearInterval(id);
id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
}
}
</script>
</body>
</html>
ADD Element
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");

var child = document.getElementById("p1");
element.insertBefore(para,child);
</script>
</body>
</html>
Collection
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p>Hello World!</p>
<p>Hello Norway!</p>
<p>Click the button to change the color of all p elements.</p>
<button onclick="myFunction()">Try it</button>
<script>
var myCollection = document.getElementsByTagName("p");
var i;
for (i = 0; i < myCollection.length; i++) {
myCollection[i].style.color = "red";
}
}
</script>
</body>
</html>
Remove Elements
<html>
<body>
<div>
</div>
<button onclick="myFunction()">Remove Element</button>
<script>
var elmnt = document.getElementById("p1");
elmnt.remove();
}
</script>
</body>
</html>
ReplaceElements
<!DOCTYPE html>
<html>
<body>
<div id="div1">
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
parent.replaceChild(para,child);
</script>
</body>
</html>
Cookie
<html>
<body>
<h1>javascript COOKIE example</h1>
<p>Click the below button to create a cookie</p>
<button type="button" onclick="cookieCreate()">CREATE</button>
<p id="Sample"></p>
<script>
function cookieCreate(){
var x=document.cookie;
x="username=Matt;class=prior;location=USA;expires=Wed, 10 July 2019 12:00:00 UTC";
document.getElementById("Sample").innerHTML="The cookie values are : "+x;
}
</script>
</body>
</html>
Factorial
<!DOCTYPE html>
<html>
<head>
</head>
<body style = "text-align: center; font-size: 20px;">
<h1> Welcome to the javaTpoint.com </h1>
Enter a number: <input id = "num">
<br><br>
<button onclick = "fact()"> Factorial </button>
<p id = "res"></p>
<script>
function fact(){
var i, num, f;
f = 1;
num = document.getElementById("num").value;
for(i = 1; i <= num; i++)
{
f = f * i;
}
document.getElementById("res").innerHTML = "The factorial of the number " + i + " is: " + f;

}
</script>
</body>
</html>
Navigation
<html>
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.body</b> property.</p>
</div>
<p id="id1"></p>
<p id="id2"></p>
<script>
alert(document.body.innerHTML)
alert(document.documentElement.innerHTML)
</script>
</body>
</html>
Onfocus
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x) {
x.style.background = "yellow";
}
</script>
</head>
<body>
Enter your name: <input type="text" onfocus="myFunction(this)">

<p>When the input field gets focus, a function is triggered which changes the
background-color.</p>
</body>
</html>
Windows Passing Parameters
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>This example demonstrates how to pass parameter values when using the
addEventListener() method.</p>
<p>Click the button to perform a calculation.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
});
function myFunction(a, b) {
var result = a * b;
document.getElementById("demo").innerHTML = result;
}
</script>
</body>
</html>
Validation
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
var y = document.forms["myForm"]["pwd"].value;
if (x == "") {
if (y == "") {
}}
else
{
if (x=="siva" && y="123")
alert("login success")
else
alert("incorrect details")
}
}
</script>
</head>
<body>
<center>
<form name="myForm" onsubmit="return validateForm()" method="get">
<h3>Name: <input type="text" name="fname"><br><br>
Password: <input type="password" name="pwd"><br><br></h3>
<input type="submit" value="Submit">
</form>
</body>
</html>
Active Element
<html>
<body onclick="myFunction()">
<p>Click anywhere in the document to display the active element.</p>

<input type="text" value="An input field">
<button>A Button</button>
<p id="demo"></p>
<script>
var x = document.activeElement.tagName;
}
</script>
</body>
</html>
BodyColour
<!DOCTYPE html>
<html>
<body>
<p>Click the button to change the background color of the document.</p>

<script>
document.body.style.backgroundColor = "yellow";
}
</script>
</body>
</html>
Create Attribute
<!DOCTYPE html>
<html>
<head>
<style>
.democlass {
color: red;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<h1> SECOND ELEMENT </h1>
<h1> Third ELEMENT </h1>
<p>Click the button to create a "class" attribute with the value "democlass" and insert it to the
H1 element above.</p>
<script>
var h1 = document.getElementsByTagName("H1")[2];
var att = document.createAttribute("class");
att.value = "democlass";
h1.setAttributeNode(att);
}
</script>
</body>
</html>
Create Element
<html>
<body>
<p>Click the button to make a BUTTON element with text.</p>
<script>
var btn = document.createElement("button");

btn.innerHTML = "CLICK ME";
document.body.appendChild(btn);
var header = document.createElement("h1");

header.innerHTML = "new header";
document.body.appendChild(header);
var header = document.createElement("h1");

header.innerHTML = "<font color=green>new header1";
document.body.appendChild(header);
}
</script>
</body>
</html>
Get Element By Name
<!DOCTYPE html>
<html>
<body>
First Name: <input name="fname" type="text" value="Michael"><br>

First Name: <input name="fname" type="text" value="Doug">
<p>Click the button to get the tag name of the first element in the document that has a name
attribute with the value "fname".</p>
<p id="demo"></p>
<script>
var x = document.getElementsByName("fname")[0].tagName;
}
</script>
</body>
</html>
Get Element By Tag Name
<!DOCTYPE html>
<html>
<body>
<p>An unordered list:</p>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<p>Click the button to display the innerHTML of the second li element (index 1).</p>
<p id="demo"></p>
<script>
var x = document.getElementsByTagName("LI");
document.getElementById("demo").innerHTML = x[1].innerHTML;
}
</script>
</body>
</html>
CSS Grids
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 200px 200px 200px;
background-color: #FFFFFF;
padding: 0px;
}
.grid-item {
background-color:#00FFFF;
border: 1px solid #FFFFFF;
padding: 60px;
font-size: 30px;
text-align: center;
}
.item1 {
background-color: #F974FE;
padding: 30px;
font-size: 30px;
text-align: center;
}
.item2 {
background-color: #00FF7F;
padding: 30px;
font-size: 30px;
text-align: center;
}
.item3 {
background-color: #F974FE;
padding: 30px;
font-size: 30px;
text-align: center;
}
.item4 {
background-color: #00FF7F;
padding: 30px;
font-size: 30px;
text-align: center;
}
.item1{
grid-row: 1 / span 2;
}
.item2{
grid-column: 2 / span 2;
}
.item3{
grid-row: 3 / span 2;
}
.item4{
}
</style>
</head>
<body>
<h1>Grid Elements</h1>
<p>A Grid Layout must have a parent element with the <em>display</em> property set to
<em>grid</em> or <em>inline-grid</em>.</p>
<p>Direct child element(s) of the grid container automatically becomes grid items.</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="grid-item">2</div>
</div>
</body>
</html>

Web Tech Cat Codes

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Tech Cat Codes

Uploaded by

Copyright:

Available Formats

HTML

<P><STRIKE> strike-through text </STRIKE></BR>

<BIG>places text in a big font </BIG><BR>

<SMALL> places text in a small font</SMALL><BR>

<SUB> places text in subscript position </SUB>

&amp; this is session 3<br>

<font size=6 color=#ff00ff>

<BIG>places text in a big font </BIG><BR>

<SMALL> places text in a small font</SMALL><BR>

<SUB> places text in subscript position </SUB>

<A NAME="bookmark_name"> Select some text at a place in the

<p>The Name attribute of an anchor element specifies a

<p>The alt attribute should reflect the image content,

<img src="fig.jpg" alt="HTML image " width="460" height="345"

<table border=2 width=50% cellspacing=10

<TABLE BORDER=1 width=50%>

<Table border=5 cellpadding =5 cellspacing=5 bgcolor=cyan>

<div style = "background-color:#b5dcb3;

<div style = "background-color:#aaa;

<div style = "background-color:#aaa;

<div style = "background-color:#b5dcb3;

<p style="font-size: 10pt; color: red; font-weight: bold;

<p style="font-size: 30pt; color: green; font-weight: bold;

<h1 style="color: yellow; position: absolute;

<h1 style="color: blue; position: absolute;

alert("There's a monster on the wing!");

confirm("Are you sure you want to do that?");

prompt("Enter you name", "Adam");

for (i = 0; i < cars.length; i++) {

var b=prompt("enter string")

document.write("getFullYear() : " + dt.getFullYear()+"<br>" );

<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.jpg"

<p>This example demonstrates how to assign an "onclick" event to a p element.</p>

<p id="demo" onclick="myFunction()">Click me.</p>

<p id="demo2" onclick="myFunction2()">Click me to change my text color.</p>

<button onclick="myFunction()">Click me</button>

<button onclick="myFunction()" class="example">Try it</button>

<p id="demo">Initial document</p>

<h2>My First JavaScript Animation</h2>

<p><button onclick="myMove()">Click Me</button></p>

var element = document.getElementById("div1");

<h2>JavaScript HTML DOM</h2>

<p>Click the button to change the color of all p elements.</p>

<button onclick="myFunction()">Try it</button>

<button onclick="myFunction()">Remove Element</button>

document.getElementById("res").innerHTML = "The factorial of the number " + i + " is: " + f;

Enter your name: <input type="text" onfocus="myFunction(this)">

Windows Passing Parameters

<p>Click the button to perform a calculation.</p>

<button id="myBtn">Try it</button>

<p>Click anywhere in the document to display the active element.</p>

<p>Click the button to change the background color of the document.</p>

<button onclick="myFunction()">Try it</button>

<p>Click the button to make a BUTTON element with text.</p>

<button onclick="myFunction()">Try it</button>

var btn = document.createElement("button");

var header = document.createElement("h1");

var header = document.createElement("h1");

Get Element By Name

First Name: <input name="fname" type="text" value="Michael"><br>

<button onclick="myFunction()">Try it</button>

<p>An unordered list:</p>

You might also like

& this is session 3<br>