LAB 4 ASSIGNMENT
The task is to create HTML Documents by using creative example or exercises given and design the interface such as buttons, menus etc.
This is what i did:
How i code?
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<br></br>
<h1>LEARN JAVASCRIPT</h1>
<img src="javascriptpicture.gif" width="600" height="200">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.subnav {
float: left;
overflow: hidden;
}
.subnav .subnavbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .subnav:hover .subnavbtn {
background-color: red;
}
.subnav-content {
display: none;
position: absolute;
left: 0;
background-color: orange;
width: 100%;
z-index: 1;
}
.subnav-content a {
float: left;
color: blue;
text-decoration: none;
}
.subnav-content a:hover {
background-color: #eee;
color: black;
}
.subnav:hover .subnav-content {
display: block;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<div class="subnav">
<button class="subnavbtn">JavaScript Basic <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<a href="syntax.html">Syntax</a>
<a href="Operators.html">Operators</a>
<a href="JavaScriptBasic.html">Placement</a>
<a href="ifElse.html">If- Else</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn">JavaScript Object <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<a href="objectt.html">Object</a>
<a href="Numbers.html">Numbers</a>
<a href="Boolean.html">Boolean</a>
<a href="String.html">String</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn">JavaScript Advance <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<a href="formvalidation.html"> Form Validation</a>
<a href="animation.html">Animation</a>
<a href="Multimedia.html">Multimedia</a>
<a href="browsers.html">Browsers</a>
</div>
</div>
<a href="#contact">Help</a>
</div>
<div style="padding:0 16px">
<h3>What is JavaScript?</h3>
<p>Hover over the "Javascript is a dynamic computer programming language. It is lightweight and
most commonly used as a part of web pages, whose implementations allow
client-side script to interact with the user and make dynamic pages. It is an
interpreted programming language with object-oriented capabilities.
JavaScript was first known as LiveScript, but Netscape changed its name to
JavaScript, possibly because of the excitement being generated by Java.
JavaScript made its first appearance in Netscape 2.0 in 1995 with the
name LiveScript. The general-purpose core of the language has been
embedded in Netscape, Internet Explorer, and other web browsers.
</p>
</div>
</body>
</html>
No comments:
Post a Comment