This post and this website contains affiliate links. See my disclosure about affiliate links.
Aligning elements in a webpage is probably one of the most challenging things for a beginner. You know all the HTML tags and your code is correct but somehow things just don’t align how you want it to be. One of the important concepts to understand is the type of elements: block elements and inline elements. Inline elements will go…
Defining the size of text in different contexts is important when designing and developing webpages. In HTML, there are primarily two different ways of specifying the font size or size of text. One is using the font tag and the other is using cascading style sheets or CSS. According to the latest W3C recommendations, the best way to change the…
It is easy enough to insert or draw a horizontal line in html. But how do you draw a vertical line in html? Unlike for the horizontal line, there is no single tag in html that will draw the vertical line. But that does not mean it is impossible to do so. Using CSS One way to do this is…
Many webpage analyzers and most website designers will actively discourage you from using inline CSS (cascading style sheets) in your web pages. There are usually very good reasons for it, and let’s see why it is generally frowned upon. One question that I generally gets asked is: I just want to use it in this one place. Is it that bad?…
When coding your webpage layout in HTML, you will often need to center elements inside or with in another HTML element. Centering a text (or any element) means horizontally aligning the piece of content in the center of the parent tag. Quite often, it will be text that needs to centered but it can be an image or any other…
Images are an integral part of any or at least most webpages. Almost every single webpage that you find on the internet will have at least one image in it. Of course, you might find some manual pages (and some pages on this blog) that might be devoid of any image, but they are usually far and few in between….
A clickable image is an image that acts also as an HTML hyperlink. Clicking on any part of the image will redirect the user to another URL or webpage. You can make any image on a webpage clickable. Simple HTML is all you need to create the image clickable, just as a text link. First, let’s look at how images…
Cascading Style Sheets or CSS files are an integral part of all modern websites. It allows you keep your content and layout separate and maintainable over the long run. This also mean that these files can grow in size over time and can negatively impact the page load time. When you optimize CSS files for size, you reduce the time…
Minification is the process by which all unnecessary characters, including white spaces are removed from the source files so as to reduce the size of the file, without comprising any of the functionality of the program. The unnecessary characters can include spaces, blank, new line and comments. Almost all web programming or rendering languages such as HTML, JavaScript and Style-sheets…
Every webpage has a head tag at the top of the source, known as the document head. It is different from what is sometimes referred as a header. Header usually refers to the visual elements that constitute the top part of a web site. Usually the header has a constant look and feel across all the pages, often containing the…
Cascading style sheets or CSS are an important part of modern day websites. They allow you to format the HTML elements as defined in your layouts. It can also be used to do layouts in addition to setting properties such as fonts and colors. Using CSS allows for some amount separation between your web content, layout and formatting. This increases…
Almost every webpage consists of mainly some text content and several web resources, such as images, external JavaScript files, external style sheets and other related files. In order for the web page to render correctly in the browser, it needs to download and often parse each of these web resources. Ideally you would want is to reduce the number of…
