Develop a HTML Interface for Online Public Access Catalogue for College of Technology Jaffna (OPAC)

Learn With Thiru October 02, 2021

 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&nbsp; 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/

http://lib.sjp.ac.lk/opac-search/







Post a Comment

0 Comments