WEB PAGE CREATION
HTML-JAVASCRIPT
Visan dreams
1
5/19/2020
Scope
By using HTML 🡪 Hyper text mark up language and Java script, any one can create own offline web page.
HTML for page
Java script for functions
To publish your web page into internet you have to buy domain from providers
Some free domains also available ( wixsite.com )
After you got domain you can just paste your page to share link to public
Visan dreams
2
5/19/2020
Begin
Open or crate text file in any editor (notepad/textpad/notepad++/……)
Start writing commands
Save text document as .html
Your offline page is ready……
You can open your page in any browser ( right click open with…/ double click on file)
Code structure:
Text file🡪
<html>
…………..(your code)
<html> <html>,</html> (optional)
Visan dreams
3
5/19/2020
Text
Writing text is simple in webpage
For standard text no commands needed. Directly you can write your text
If you need to format (size, color,etc,.), need to write text with in <font> …</font>
Hint: always better to use font , even no format required
Visan dreams
4
5/19/2020
Text
<font size=5> : to apply font size
<font color=‘red’> to apply font color
<font style='background-color:green‘> to set background color�<font style='border: 1px solid black> to create border
<font onclick=‘alert(“hello”)’ > to run function on selection of text
We can combine style by ;
style='border: 1px solid black; background-color:green'
Visan dreams
5
5/19/2020
text
Additional commands:
<br> 🡪 next line
<i>🡪 italic
<b>🡪 bold
<marquee> 🡪 scrolling text
<ins>🡪 underline
<del> 🡪 strike out
<mark> 🡪 yellow highlight
<sup>🡪 upper position (square)
<sub>🡪 lower position (log)
Visan dreams
6
5/19/2020
input
<textarea id="inputTextToSave" cols="80" rows="25"></textarea>
Visan dreams
7
5/19/2020
Create Input box
Set default value
Create password box : input value is hidden
Button
Visan dreams
8
5/19/2020
Check box
<input type='checkbox' onchange='alert("checked")'> 🡪 add on change function
<input type='checkbox' Checked>checkbox2 🡪 set default checked
Visan dreams
9
5/19/2020
Radio button
Visan dreams
10
5/19/2020
select
Select is used to create dropdown
Add options:
Set default selection
Visan dreams
11
5/19/2020
Division
<div id=‘id’ class=‘id’>…….</div> 🡪 to create elements group
Visan dreams
12
5/19/2020
Table
Visan dreams
13
5/19/2020
<table> 🡪command for table
<tr> 🡪 table row
<td> 🡪 table cell
<th> 🡪 table head
Table
Full table format
<table contenteditable>
<table style='border-collapse: collapse'>
For each cells format
<style>th,td{ border: 1px solid black; border-collapse: collapse}<style> (css part)
<style>th,td{ border: 1px solid black;width:200}<style>
Visan dreams
14
5/19/2020
Page setup
<html style= "height: 2000px;width: 1000px ">
<title>Visan Dreams</title>
<body style= "background-image: url('https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&w=1000&q=80' );
background-size: cover">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&w=1000&q=80"
alt="Flowers in Chania"
style="width:100px;height:100px;
position: absolute;
left: 60px;
top: 3em;
">
</body>
</html>
Get Screen size:
screenw=window.screen.availWidth
screenh=window.screen.availHeight
Visan dreams
15
5/19/2020
Scroll box
<!-- Scroll -->
<div style="height:120px;width:120px;border:1px solid #ccc;overflow:auto;
position: absolute;
left: 60px;
top: 12em;">
As you can see, once there's enough text in this box, the box will grow scroll bars...
that's why we call it a scroll box! You could also place an image into the scroll box.
</div>
Visan dreams
16
5/19/2020
Tab page
<!-- Scroll -->
<div style="height:120px;width:120px;border:1px solid #ccc;overflow:auto;
position: absolute;
left: 60px;
top: 12em;">
As you can see, once there's enough text in this box, the box will grow scroll bars...
that's why we call it a scroll box! You could also place an image into the scroll box.
</div>
Visan dreams
17
5/19/2020
Audio/Video
<audio >
<source src="F:/personal/youtube/1.mp3" type="audio/mpeg">
</audio>
<video autoplay controls>
<source src="F:/personal/youtube/1.mp4" type="video/mp4">
</video>
Additional options:
<audio controls autoplay loop>
Controls🡪 to show player
Autoplay🡪 play on load
Loop🡪 replay on completed
Visan dreams
18
5/19/2020
Image
Image on page:
<img src="F:/personal/youtube/test.jpg" width="500" height="600">
Elements position on page:
Image on exact position:
<style>img{position: absolute;top: 0;left: 0}<style>
Image on fixed position:
<style>img{position: fixed;top: 0;left: 0}<style>
Other types: relative,sticky
Visan dreams
19
5/19/2020
Animation
<div id="textdiv">ZOOM</div>
<style>
#textdiv {animation: textgrowth 2s infinite alternate}
@keyframes textgrowth {0% {font-size: 20px}100% {font-size: 50px}}
</style>
Visan dreams
20
5/19/2020
Function Control
onclick=‘<javafunction>’ 🡪 run function on mouse left click on widget
oncontextmenu=‘<javafunction>’ 🡪 run function on right click
onmousedown=‘<javafunction>’ 🡪 run function on any click (return 0,1,2 based)
onmouseup =‘<javafunction>’ 🡪 run function on button release
ondblclick =‘<javafunction>’ 🡪 run function on double click
onmouseover =‘<javafunction>’ 🡪 run function while enter mouse on widget
onmousemove= ‘<javafunction>’ 🡪 run function while move mouse on widget
onmouseleave=‘<javafunction>’ 🡪 run function while leave mouse on widget
onwheel =‘<javafunction>’ 🡪 run function on scroll
onchange =‘<javafunction>’ 🡪 run function on value change
Visan dreams
21
5/19/2020
JAVA SCRIPT PART
Continues
Visan dreams
22
5/19/2020
Pop up windows
alert(“hello”) 🡪 popup message box
x=confirm(“is it ok?") 🡪 confirm true/false box
x=prompt(“enter value")🡪 value input box
Visan dreams
23
5/19/2020
Get elements
We can get elements by 3 ways:
By id , class and type
input1 <input id='1' class='1' >
element=document.getElementById('1')
single element will return; id must be unique
elements=document.getElementsByTagName('input')
multiple elements are return; search by type of elements
elements=document.getElementsByClassName('1')
multiple elements return; search by class name
Visan dreams
24
5/19/2020
Page navigation
window.open('https://www.google.com/') (new tab)
myWindow = window.open("example.html", "window","top=500,left=500,width=100, height=100")
target=_self (same tab)
Reload: location.reload()
myWindow.blur()
window.focus()
window.onload=()=>{function}
Current location= location
Visan dreams
25
5/19/2020
Web Page Publish
Google pages
Visan dreams
26
5/19/2020
Login/Signup
Login if you have google drive already. Or else create google drive account and log in
Visan dreams
27
5/19/2020
Create New page
New🡪More🡪 googleSite
Visan dreams
28
5/19/2020
Now you can start adding elements or add already created code in <Embed>
Visan dreams
29
5/19/2020
Embed
Embed is the place to write your html / java code
Visan dreams
30
5/19/2020
Publish
After adding your page publish (save)
Add page name you want as url and
Publish
Default:http://sites.google.com/view/ + <your site name>
If you want to remove <sites.google.com/view/> from your Url
You need to buy domain (pay) or else you can use default url for free
Visan dreams
31
5/19/2020
Your website
Once published your web page will save in google drive, you can open it and share to anyone
Visan dreams
32
5/19/2020