building online gallery

Purpose of this website is to showcase picture collections.  This website only contain static pages without any functionality. To concentrate on website building environment with readily available applications like notepad and browser. Before dive into coding, always do some sketches to design your website.

A simple boxes with page name would be enough to give your overall idea. adding your website content and edit them is always easy to do with paper and pencil. Design comes handy when your project become big and complex.websites which contains static pages like home, about us and contact us. We add another page which is specific for this web site gallery.

Once your design is ready, we can dive into coding. Create a folder in desktop and name it gallery, all files belongs to web site will be saved here.

First thing we will do is write a template. Your home page will be template for other pages. All web pages consist of code HTML code:
<html>
      <head></head>
      <body></body>
</html>

write this on a notepad application. Save this file as home.html with select All Files as Save as type field selected. In gallery folder, we will notice a file with your browser icon with file name home. When you double click this icon, browser will open and display home page. The home page is blank because we have not tell browser to display anything.

Determine layout for web page.

White space on both side of page content. and the easiest way to write in html is by using table. We will be using divisions to set layout in next website project.

<html>
      <head>
            <title>Gallery| Home</title>
      </head>
      <body>
            <table>
                  <tr>
                        <td width = “20%”></td>
                        <td width = “60%”></td>
                        <td width = “20%”></td>
                  </tr>
            </table>       
      </body>
</html>

This table only has one row <tr>. and inside this row we have three columns. First column and last column will accommodate 20 percent of the page, while the second column where all of the content we will be writing later is 60 percent. We can change the percentage to as we prefer.

Since location navigation bar is always same on every page, we also add the code for navigation inside template before creating other pages. Designing will help identify which part of page we should put in template.

<html>
      <head>
            <title>Gallery| Home</title>
      </head>
      <body>
            <table>
                  <tr>
                        <td width = “20%”></td>
                        <td width = “60%”>
                              <-- this is navigation -->
                              <a href = "home.html">Home</a>
                              <a href = "about.html">About Us</a>
                              <a href = "gallery.html">Gallery</a>
                              <a href = "contact.html">Contact Us</a>
                              <!-- after the navigation -->
                              <!-- your source codes for each page will go here -->
                              <!-- before the closing tag for the second column-->
                        </td>
                        <td width = “20%”></td>
                  </tr>
            </table> 
      </body>
</html>

The home page (template for now) consist of four links that directs to itself, about us page, gallery page and contact us page. path to each page is written as href, and the element of the <a>tag is the text you will see on the pages as hyperlinks. We will discuss about styling the hyperlinks later, for now we leave is as simple text from.

The comments are written in <!—and --> tag. We use comments to write descriptions that will be helpful for developer to understand source code better. Later we will be writing our code in this section of the file without disturbing other codes.

After adding the navigation bar, we can create other pages in the website. If you decided to add more pages, you can always use the home page as their template.

Now, go to File, select Save As, type about.html in File name and select All Files. Find and Change the following code.

<title>Gallery| Home</title>           to,
<title>Gallery| About</title>

You already created the second page, do the same thing to create other two pages, then change the title to gallery and contact us respectively.

Refresh your website and try clicking on the links. Hope you can navigate between the pages. When you click the hyperlinks, the <a> tag in your html source file will take you to page that you specify if href attribute.

Now click on the hyperlinks to test if they are working. Check the title tab. we should be able to navigate from one page to another.

Now we will be writing the content for each page. Home page is the first page visitor will see when they come to your website. Your home page should welcome them and give brief introduction about your website.

Let’s use heading tag <h1> to add the title. and using paragraph tag <p> to write text in your home page.

<!-- after the navigation -->       
      <h1>Welcome to my gallery </h1>
      <p>
            <!—paragraph content goes here  -->
      </p>
<!-- before the closing tag for the second column-->

Next, about us page mainly describe about yourself, team or your organization. Usually mission and vision statements about your  about your organization to your visitors.

<!-- after the navigation -->
      <h1>About Us </h1>
                             
      <h2>First subtopic</h2>
      <p>
            <!—paragraph content goes here  -->
      </p>

      <h2>Second subtopic</h2>
      <p>
            <!—paragraph content goes here  -->
      </p>
<!-- before the closing tag for the second column-->

This page has contact information like address, phone number, emails or maps. This information is important so that your customer knows how to reach you. 

               <!-- after the navigation -->       
                        <h1>How to reach us</h1>
                               <table>
                                    <tr>
                                         <td>
                                              <!-- address goes here -->
                                              <p>123, Main Road, State, Country</p>
                                         </td>
                                         <td>
                                              <!-- map goes here -->
                                             <img src = "pic/map.jpg"></img>
                                         </td>
                                    </tr>              
                              </table>
               <!-- before the closing tag for the second column-->

we use table to layout the content side by side. We write this table inside earlier table that we use to layout the page. 

Now we open the gallery.html file. This page showcases your items to your customer. Display images of your items using <img>. To use grid view, we can use table. We nest this table inside our layout table.

<!-- after the navigation -->
      <h1>My picture gallery <h1>
      <!-- this is where the gallery is  -->
      <table>
            <tr>
                  <td><img src="pic/pic1.jpg"></td>
                  <td><img src="pic/pic2.jpg"></td>
                  <td><img src="pic/pic3.jpg"></td>
            </tr>
            <tr>
                  <td><img src="pic/pic4.jpg"></td>
                  <td><img src="pic/pic5.jpg"></td>
                  <td><img src="pic/pic6.jpg"></td>
            </tr>              
      </table>
<!-- before the closing tag for the second column-->

The table used for display the item has, Two rows <tr> and three columns <td> in this table. In each column, we have <img> tag that display image with location specified in src attribute. The images are stored in pic folder in website root.

Conclusion


this website has four pages, where we can jump from one page to another page using navigation bar. we use simple techniques to layout the content of each page using table. Next, we will add style to navigation bar. Next

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