Develop an HTML Interface for Online Public Access Catalogue for College of Technology Jaffna (OPAC)
OPAC Basic System
Vithusalini
College of Technology Jaffna NVQ Level 05 ICT
Code:
<!DOCTYPE html>
<html style="font-size: 16px;">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta name="keywords" content="Username:-, Password:-">
<meta name="description" content="">
<meta name="page_type" content="np-template-header-footer-from-plugin">
<title>TopBooks</title>
<link rel="stylesheet" href="nicepage.css" media="screen">
<link rel="stylesheet" href="TopBooks.css" media="screen">
<script class="u-script" type="text/javascript" src="jquery-1.9.1.min.js" defer=""></script>
<script class="u-script" type="text/javascript" src="nicepage.js" defer=""></script>
<meta name="generator" content="Nicepage 3.26.5, nicepage.com">
<link id="u-theme-google-font" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab:100,200,300,400,500,600,700,800,900|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i">
<link id="u-page-google-font" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i,900,900i">
<script type="application/ld+json">{
"@context": "http://schema.org",
"@type": "Organization",
"name": "",
"logo": "images/hhj.png"
}</script>
<meta name="theme-color" content="#478ac9">
<meta property="og:title" content="TopBooks">
<meta property="og:type" content="website">
</head>
<body class="u-body"><header class="u-clearfix u-header u-header" id="sec-78a2"><div class="u-clearfix u-sheet u-sheet-1">
<h3 class="u-headline u-text u-text-palette-2-base u-text-1">
<a href="/">College of Technology Jaffna OPAC Library Format</a>
</h3>
<a href="https://nicepage.com" class="u-image u-logo u-image-1" data-image-width="259" data-image-height="370">
<img src="images/hhj.png" class="u-logo-image u-logo-image-1">
</a>
<nav class="u-menu u-menu-dropdown u-offcanvas u-menu-1">
<div class="menu-collapse" style="font-size: 1.25rem; letter-spacing: 0px;">
<a class="u-button-style u-custom-left-right-menu-spacing u-custom-padding-bottom u-custom-top-bottom-menu-spacing u-nav-link u-text-active-palette-1-base u-text-hover-palette-2-base" href="#">
<svg><use xlink:href="#menu-hamburger"></use></svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><symbol id="menu-hamburger" viewBox="0 0 16 16" style="width: 16px; height: 16px;"><rect y="1" width="16" height="2"></rect><rect y="7" width="16" height="2"></rect><rect y="13" width="16" height="2"></rect>
</symbol>
</defs></svg>
</a>
</div>
<div class="u-custom-menu u-nav-container">
<ul class="u-nav u-unstyled u-nav-1"><li class="u-nav-item"><a class="u-button-style u-nav-link u-text-active-palette-1-base u-text-hover-palette-2-base" href="Home.html" style="padding: 10px 20px;">Home</a>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link u-text-active-palette-1-base u-text-hover-palette-2-base" href="About.html" style="padding: 10px 20px;">About</a><div class="u-nav-popup"><ul class="u-h-spacing-20 u-nav u-unstyled u-v-spacing-10 u-nav-2"><li class="u-nav-item"><a class="u-button-style u-nav-link u-white">Started</a>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link u-white">Books Details</a>
</li></ul>
</div>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link u-text-active-palette-1-base u-text-hover-palette-2-base" href="Contact.html" style="padding: 10px 20px;">Contact</a><div class="u-nav-popup"><ul class="u-h-spacing-20 u-nav u-unstyled u-v-spacing-10 u-nav-3"><li class="u-nav-item"><a class="u-button-style u-nav-link u-white">phone number</a>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link u-white">Web Address</a>
</li></ul>
</div>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link u-text-active-palette-1-base u-text-hover-palette-2-base" href="search.html" style="padding: 10px 20px;">search</a><div class="u-nav-popup"><ul class="u-h-spacing-20 u-nav u-unstyled u-v-spacing-10 u-nav-4"><li class="u-nav-item"><a class="u-button-style u-nav-link u-white">WebProgramming Books</a>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link u-white">Lan Proposals</a>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link u-white">NewBooks</a>
</li></ul>
</div>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link u-text-active-palette-1-base u-text-hover-palette-2-base" href="TopBooks.html" style="padding: 10px 20px;">TopBooks</a>
</li></ul>
</div>
<div class="u-custom-menu u-nav-container-collapse">
<div class="u-black u-container-style u-inner-container-layout u-opacity u-opacity-95 u-sidenav">
<div class="u-inner-container-layout u-sidenav-overflow">
<div class="u-menu-close"></div>
<ul class="u-align-center u-nav u-popupmenu-items u-unstyled u-nav-5"><li class="u-nav-item"><a class="u-button-style u-nav-link" href="Home.html" style="padding: 10px 20px;">Home</a>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link" href="About.html" style="padding: 10px 20px;">About</a><div class="u-nav-popup"><ul class="u-h-spacing-20 u-nav u-unstyled u-v-spacing-10 u-nav-6"><li class="u-nav-item"><a class="u-button-style u-nav-link">Started</a>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link">Books Details</a>
</li></ul>
</div>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link" href="Contact.html" style="padding: 10px 20px;">Contact</a><div class="u-nav-popup"><ul class="u-h-spacing-20 u-nav u-unstyled u-v-spacing-10 u-nav-7"><li class="u-nav-item"><a class="u-button-style u-nav-link">phone number</a>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link">Web Address</a>
</li></ul>
</div>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link" href="search.html" style="padding: 10px 20px;">search</a><div class="u-nav-popup"><ul class="u-h-spacing-20 u-nav u-unstyled u-v-spacing-10 u-nav-8"><li class="u-nav-item"><a class="u-button-style u-nav-link">WebProgramming Books</a>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link">Lan Proposals</a>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link">NewBooks</a>
</li></ul>
</div>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link" href="TopBooks.html" style="padding: 10px 20px;">TopBooks</a>
</li></ul>
</div>
</div>
<div class="u-black u-menu-overlay u-opacity u-opacity-70"></div>
</div>
</nav>
</div></header>
<section class="u-align-center u-clearfix u-section-1" id="sec-6d29">
<div class="u-clearfix u-sheet u-sheet-1">
<div class="u-image u-image-circle u-image-1" alt="" data-image-width="277" data-image-height="182"></div>
<h1 class="u-custom-font u-font-merriweather u-text u-text-1">Username:-</h1>
<div class="u-border-2 u-border-grey-dark-1 u-shape u-shape-rectangle u-shape-1"></div>
<h1 class="u-custom-font u-font-merriweather u-text u-text-2">Password:-</h1>
<div class="u-border-2 u-border-grey-dark-1 u-shape u-shape-rectangle u-shape-2"></div>
<a href="https://nicepage.com" class="u-border-none u-btn u-btn-round u-button-style u-hover-palette-4-light-1 u-radius-50 u-btn-1">Login</a>
</div>
</section>
<footer class="u-align-center u-clearfix u-footer u-grey-80 u-footer" id="sec-c924"><div class="u-clearfix u-sheet u-sheet-1">
<p class="u-small-text u-text u-text-variant u-text-1">Sample text. Click to select the text box. Click again or double click to start editing the text.</p>
</div></footer>
<section class="u-backlink u-clearfix u-grey-80">
<a class="u-link" href="https://nicepage.com/website-templates" target="_blank">
<span>Website Templates</span>
</a>
<p class="u-text">
<span>created with</span>
</p>
<a class="u-link" href="https://nicepage.com/" target="_blank">
<span>Website Builder Software</span>
</a>.
</section>
</body>
</html>
OPAC Basic System
P.Inthuga
College of Technology Jaffna NVQ Level 05 ICT
Coding:
<html>
<head>
<form>
<h1 align="center" size="20">Adithiya Institue of Technology Libraray</h1>
<h2 align="center" size="15">Online Public Access Catalog</h2>
<img src="C:\Users\other user\Desktop\AIT.jpg" width="100" height="100"/>
</form>
<body bgcolor="sky blue">
<form align="center" size="18">
Basic Search</br>
Title:<input type="combobox" name="title" />
<select>
<option>NUMBER THE STAR</option>
<option>BRAVE NEW WORLD</option>
<option>ROSEMARY AND RUE</option>
<option>ROMIYO JULIAD</option>
</select>
<input type="Submit" name="button" />
</body>
</form>
<h3 Text_align:left size="40">Welcome!</h3>
<h4 align="left" size="18">
Online Public Access<br/>
CatLog of AdithiyaInstitute of<br/>
Technology Libraray<br/>
<form>
<img src="C:\Users\other user\Desktop\adithiya.jpg" width="200" height="200"/>
</form>
</form>
</html>
</head>
Here are Some sample OPAC systems.
http://opac.lib.uom.lk/
 |
Posts
0 Comments