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...

  Introduction In my previous post, you learnt how to add a clickable image to your html page . We will learn how to add images linked to a source on your html page and it is interesting to create a page filled with images so read the whole post to understand how to do this. Image from Online Free Websites Browse the free website called pexels.com where you can copyright free pictures to download or use their source url to insert for this purpose. You don’t even need to sign up for an account to browse free images here on this website! After selecting a picture, right click on the image that you selected there and click on open in a new tab, then, just select the url until the jpg and copy the url source. For example, I found a beautiful image from pexels , it is an Italian hill picture and the full source url when opened in the new tab is  https://images.pexels.com/photos/147411/italy-mountains-dawn-daybreak-147411.jpeg?auto=compress&cs=tinysrgb&w=1260&h=...

  Introduction This HTML guide is part of the full-stack web development course, starting from basic HTML. In this post, we will learn what are HTML tags and how to write the heading tag in HTML. These tags are usually some words enclosed by  angle brackets, that is written as < and >. The basic HTML tags that form part of the structure of a document in html  are heading tags, paragraph tags  and listing tags. There are several more tags, but, we will go through all of them  in different posts, so that , you are not burdened to learn all of the basics in just one sitting! What are HTML tags? HTML tags are basic html elements that assists you to structure your HTML document and Heading tags are used to write different headings for a html document as explained in detail in this post.  Headings Every document has different types of headings and html has 6 types of heading tags , namely, h1 ,h2 ,h3, h4, h5 and h6. Let’s understand the differences between ...