Advertisements

Tag archive for: website programming

Flexible CSS rule-sets to keep your images within their parent element

Since an image is worth a thousand words, we use images in your webpage to express complex ideas succinctly.

By default, if we do not specify any dimensions for an image, most browsers will show the image according to its actual size. In this situation, an image will appear to spill over the boundaries of its parent element if it is bigger.

For example, the following screenshot shows the image at https://commons.wikimedia.org/wiki/File:LARGE_elevation.jpg spilling over its parent element:

Example of large image overspilling the parent container

One way to prevent a larger image from going beyond the boundaries of its parent element is to give a standard width to all images. However, if the actual width of an image is smaller than the given width, the image will be stretched:

Example of small image being stretched to fill parent container

This post shows the CSS rule-sets that you can use for flexibly keeping images within their parent element.

Advertisements

How to make a HTML search box with the input text field and search button within the same enclosing box

Since Google had indexed most of the content from my website, Google Custom Search is the easiest way for me to implement site-wide search. In addition to fast searching, Google Custom Search also comes with AdSense monetization.

Given these points and some time on hand, I had recently implemented site-wide search with Google Custom Search.

In addition to building the search page to display the search result, there is a need for a HTML search box beside the top navigation links:

Techcoil search box as at 20180616

Since I had spent quite a bit of time on building the search box, I decided to document the steps in this post for future references.

With this intention, this is how to make a HTML search box with the input text field and search button within the same enclosing box.

Books that helped me understood how to add some JavaScript to my website

The books that teach me the concepts and skills that I need to build my website is enough for me to have a personal space on the Internet. However, I had to add interactivity to my website and web applications at work in order to make them more interesting. This post lists some of the books which I had read to get Javascript into my toolbox.

Books that taught me the concepts and skills that I needed to build my website

When I had that spark of motivation to build a website for myself, I do not know how to get started.

At that point of time, I found myself lacking in the following skills to:

  • design my website
  • create codes for the browser to render the front end look and feel
  • create codes for the web server to respond to HTTP requests from the browser
  • write some decent content for my website

This post lists the books that help me understood the concepts that I needed and acquired the skills that I needed to fulfill my motivation of building my website.