Adding style to gallery

This post continues from previous blog where we  created online gallery website. In this post, we will add style to our pages. For this we will be using cascading styling sheet or CSS for short. The CSS codes are written inside notepad.

Write the code written below in blank notepad (don't copy and paste) and save it as style.css in gallery folder. 

a{
               color: white;
               background-color:gray;
               padding: 15px;
               text-decoration: none;
}

a:hover{
               background-color:blue;
}

Don't forget to link this style sheet to your page. In home.html file, we need specify path to style sheet. Use <link> tag like shown below.

<head>
<title>Gallery| Home</title>
<link rel="stylesheet" type = "text/css" href = "style.css">
</head>

the hyperlinks now looks like button, when you move mouse on top of each button, changes color. write this same code in all the pages. Now entire website looks same. you can modify styles in this file and all the pages in your website will show this new changes.

Notice that all buttons has same color. We want to highlight button for current page we are in with different color. Mean that if we are in home page, home button is different color than other three button. If we go to about us page, its button is different, while home, gallery and contact page are same. Lets highlight the active page with green color.

In our style sheet file, write following below the last code and save the file.

a.active {
               background-color:green;
}

In our home page add class attribute to anchor tag that lead to itself.

<a href = "home.html" class = "active">Home</a>
<a href = "about.html">About Us</a>
<a href = "gallery.html">Gallery</a>
<a href = "contact.html">Contact Us</a>

then in about.html and save the file.

<a href = "home.html" >Home</a>
<a href = "about.html"class = "active">About Us</a>
<a href = "gallery.html">Gallery</a>
<a href = "contact.html">Contact Us</a>

and do the same to other two pages. Now when you enter a page, button corresponding to that page is highlighted in green color, while button for other pages are in gray color.

Our contact us page only contains address, phone number and email address. it is good idea to have contact us form where your visitor can straight away contact you from the web site. For that we could use html form to allow your visitor to ask for more information from you.

After visitor type and submit form, it will be sent to server for further processing like storing the information in contact list. Before moving further we will write JavaScript to perform simple checks before sending the form to server. However, validation at server side is much more better as it offers more security.

Replace the entire content (middle column except the navigation bar) in contact.html with this codes.
<!-- after the navigation -->       

            <p>Leave us message</p>

            <form name = “contactForm”>
                  Subject:<br/>
                  <input type = “text” name= “subject” size = 65/><br/>

                  Message:<br/>
                  <textarea name = “message” rows= 5 cols = 60></textarea><br/>

                  <br/>
                  <input type = “button” onclick = “confirmInput()” value = “send”/>

            </form>
<!-- before the closing tag for the second column-->

you can write JavaScript in the head section or you can write it in external file (like the style sheet file). Write the following code in notepad and save it as script.js in the root folder.

function confirmInput(){
           var subjectVariable = document.forms["contactForm"]["subject"].value;
           var messageVariable = document.forms["contactForm"]["message"].value;
              
          alert("Thank for contacting us.\nSubject:\n" + subjectVariable + "\nMessage:\n " +
               messageVariable + "\n will be saved into our contact list.");
}

this file contains one function called confirmInput(). The function gets subject and message entered by customer and keeps it in variable. The alert() function display pop up message. In this case, the alert function display string that containing subject and message that your visitor entered in the form. 


Same like the style sheet file, we have to refer to this script file to use this function, write following line in head section of the contact page

<script type = "text/JavaScript" src = "script/myScript.js"></script>

now, when customer fills in the fields and click send, confirmInput() function in the myScript.js file will be called. Your browser will display the message in pop up dialog box. Actual input check should include functionality like whether required field is empty or not, format of input is correct or not (like emails and phone numbers). This example is to shows how to integrate html file with JavaScript file.

This is website do not saves the subject and message entered by visitor into database. To use database, we have to use powerful scripting languages like PHP. 

Next, we will be learning how to use PHP to save the contact information to MySQL database.

Comments

Post a Comment

Popular posts from this blog

Drawing Simple Pie Chart

Image
To draw pie chart with 5 sectors. The program calculates the total of all the input given by user and find the angle in degrees to draw each sectors. When the program first loads, chart based on default values is painted by the program. User can edit the values in the text field and presses draw button to redraw the chart. Each time the draw button is pressed, new set of angle is calculated and repainted. I have attached the the sources for this program. It is simple and needs upgrades. Pie.java This class executed the program and initializes the components JTextField and JPanel to draw the chart. package coolApp.graphics; import java.awt.*; import java.awt.event.*; import javax.swing.*; public class Pie { JTextField a,b,c,d,e; JButton btnDraw; double total; JPanel contentPane; Pie(){ JFrame frame = new JFrame("Pie - CoolApps"); frame.setSize(500,500); contentPane = new JPanel(); contentPane.setLayout(new BorderLayout()); frame
Read more

VB.net connecting to SQL Server

Connecting to SQL server 2014 from VB.Net 2017, read values from the database and display the data in windows form. Before begin to write this program, first we need to import SqlClient class. Imports System.Data.SqlClient Step 1 Create a sql connection object. This is to make connection to object. Dim conn As New SqlConnection() Step 2 Set the connection string to the sqlconnection object: conn.ConnectionString = connStr Road block The variable connStr is a connection string. Connection object need connection string to make connection to database. It has information like who providing the database, the name of the database and some security information. Dim connStr As String = "Data Source = ServerInstanceName;Initial Catalog=testDB;Integrated Security=True" Let's break down the connection string into the three main components. Dim provider As String = "ServerInstanceName;" Dim database As String = "Initial Catalog=testDB;" Dim
Read more

VB.net

a quick and convenient way to build a window based application. basically there is two main components in VB, the design view where we place the controls on a window form. then we have the code view where we write implementation for each controls on the form. Typically the control implementation or procedures are executed when certain events happens to the controls. Events like mouse click, or value change on text box, form load, form close and so on. After working with programming language like C, C++ and Java, getting use to VB is a bit challenging. its because first of all, VB don't use curly bracket to specify code blocks, and the statements don't end with semicolon. variable declaration for example is written as dim age As Integer in C, C++ and Java it written int age; in VB, variable declaration start with dim keyword, it means dimension and the functions are written as Function addNumber(ByVal num1 As Integer, ByVal num2 As Integer) As Integer addNumber
Read more