Meera Teaches Tech

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

  Using HTML to create clickable images that can lead to any website that you specify. Introduction In this post we will learn how to create a clickable image , that is an image in your html page that when clicked, will lead to any website page. Steps to create a clickable Image 1). First write the URL link address inside the <a> hyperlink . 2). Inside this hyperlink, wrap the image source inside this hyperlink as shown below in the source code .  3). Now, try clicking anywhere on the image in the preview window and lo and behold! You are forwarded to the specified web page that you had mentioned in your hyperlink. You may view the preview image  here. To view the Image in Full View in my code editor, check out this   IMAGE LINK  to read the  in a CODE   editor  If  I write the link to my home page of my blog website in the hyperlink as shown in the code below,  by linking in the image, you will be forwarded to the home page o...

Introduction This guide will teach you how to run your HTML code from Windows Terminal and here you will be coding on the Notepad code editor. Read carefully to understand the steps properly. Write Code using Notepad For writing the html code, we are going to consider a very basic code with some headers and paragraph so that you are actually concentrating on the process of running the code rather than trying hard to understand the code! Take a look at the code below. <h1>Run Code From Windows Terminal</h1> <h2>Code using Notepad</h2> <p>This blog post instruction is meant for beginners in HTML/CSS. <p>Ipsum lorem Ipsum Loren Ipsum Loren Ipsum Loren etc ect ect</p> In the above code you can see one big header and one smaller header followed by two paragraphs as shown in the code block. The full view display will be as shown below. Now, after writing this code on Notepad file, we are going to save the file with a .html extension Every computer...

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

Introduction This simple project in Python will not only teach you to build a simple ToDo List, but also assist you to learn basic Python concepts along the way! The basic concepts that you will be learning are about using the indefinite loop, that is, while True, how to stop the loop, if-elif-else loops, and also about creating a functional to do list in which the user is able to not only add items, but also, view items, update or edit them, remove items and also delete the entire list itself.  Please note this is Part 4 of my Python series. If you missed the algorithms and planning stages, check out Parts 1, 2, and 3 on my Substack! What We Want Our To do List to do Defining the Problem : Creating a storage space for storing the to do list grocery items that I want to shop. I want to make the list with a menu that shows a menu of choice with features such as Add, View, Edit, Remove, Delete and Exit options. So, I need a way to add items, view them, edit them, remove any of the it...