Meera Teaches Tech

HTML Lists - A Simpe Guide for Beginners  Introduction This guide will enumerate on html lists. Html lists are created to form a group for similar set of items. There are two types of lists in HTML, namely, ordered and unordered lists. In the below sections, we will learn the differences between the two types of lists in detail. Unordered Lists An Unordered list is a list of items in which each of the items is held with a bullet point by default. Let's consider an example of an unordered html list below: Mary John Peter Smith Wolf Gung Code for unordered html list: <ul> <li>Mary John</li> <li>Peter Smith</li> <li>Wolf Gung</li> </ul> Code Explanation As you understand from the tag itself , ul stands for unordered list and for every unordered list, we have a pair of open <ul> and closed </ul> tags respectively and they are referred to ss the list tags. nested within the list tags are the item tags , open list item t...

Understanding Figure Elements in HTML We need to use figure elements to define figure contents in a html page and this post contains details about the same.          Photo by Boston Public Library on Unsplash Introduction What is a figure element? A figure element written as <figure> is required to indicate pictures, drawings, code snippet listings, quotes, diagrams, illustrations eatc or any such content , that is part of the main content in the web page, but, exists independently with regards to it’s position in the main flow of the content and even if it is removed from the content of that web page, it will not interfere with the configuration of the main content. Let us see in more details how to use this figure element in an html web page. Using the figure element to define an Image As you can see from the below code, the figure element has an opening and closing tag , <figure> and </figure> tags respectively and within the figure elements...

 How To Add Hyperlink To Your HTML Page This tutorial will guide you on adding external links to your specified html page or website and this post is meant for HTML beginner learners. Introduction In my previous posts, you have learnt how to add images to your html page, and here, you will learn how to add clickable links to your html pages which on clicking, will lead you to a separate tab or window. I will be using codepen to do this code for this lesson and in the next post, I will be guiding you on how to get started with Notepad code editor, as an alternative source code editor, in case you want to consider the same, but, for all tutorial posts, I will be doing the code on codepen, for convenience sake and at some particular point for some projects or examples, if codepen does not work, then, I would be using Notepad . Hence, it is a good idea to be conversant to be familiar with both Codepen as well as Notepad and any code editors of your choice.  What is <a> tag...

Inserting images from your saved images to your site in html Introduction In my previous post regarding inserting images to your HTML pages, we had used the url of the websites in your html image source to get the image added to your website. You could have used several suggested free platforms such as pexels, adobe, and many others if you search google , to make your html page very illustrative. In this part, I want to show you how to use the saved image from your laptop to insert in your html code. The Process using imgur First of all, find some beautiful pictures if you do not have any and save it to your device. Then, upload this image to a free website called imgur.com. All you need to do is to set up a free account by signing up on imgur.com and then use their free feature for uploading your saved images to this site. To show you an example case, I have uploaded a cat’s image to my imgur page and when you open this page with the image, you will see that there are multiple butto...