5 Html trick that you have never heard before

https://youtube.com/shorts/dYk2aZundVs?feature=share

comment your favorite HTMl trick

html #webdevelopment

Hi there,

I made a website for beginners, so that they could learn HTML easier.

The link of the website is here: https://randomhtmltags.tech/

What do you think? Do you find it useful? If you think it's worth it I would appreciate your vote on Product Hunt: https://www.producthunt.com/tech/random-html-tags

Cheers,

Hey Guys,

I am learning HTML from the pirple website. I've designed my first page through some HTML codes.

Can all the pro guys can take a look and rank my page and code.

Attaching the code here:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>My First HTML Page - Recipe of Sheer Khurma</title>
</head>
<body>
<h1>How Is Sheer Khurma Made</h1>
<p><b>Sheer kurma</b> is a rich dessert consisting of various dry fruits, ghee and milk. This is an easy recipe and there are different variations of making sheer kurma. In this variation, I have roasted the vermicelli first and then added it to milk. The vermicelli is then cooked for some more minutes till they become soft. As the vermicelli-milk mixture thickens towards the end, the dry fruits which have been fried in ghee are added.</p>
<p>I just needed to add 1.5 tbsp sugar in this sheer korma as the dates I used were very sweet. Both dates and raisins contribute to the sweetness. So adjust the proportion of sugar accordingly and as per your taste. Also, use the fine variety of vermicelli.</p>
<h2>Ingredients</h2>
<!-- unordered list started -->
<ul>
<li>500 ml milk or 2 cups full fat organic milk</li>
<li>1 tablespoon ghee</li>
<li>1 to 1.5 tablespoon sugar or as required (the dates and raisins add a lot of sweetness to the milk, so add sugar accordingly.)</li>
<li>½ cup broken seviyan (whole wheat vermicelli)</li>
<li>7 to 8 cashews, chopped</li>
<li>8 to 9 almonds, sliced</li>
<li>8 to 9 unsalted pistachios, sliced</li>
<li>8 to 9 dates seedless, chopped</li>
<li>4 green cardamoms - crushed to a powder in a mortar-pestle.</li>
<li>½ or 1 tablespoon chironji (charoli)</li>
<li>1 tablespoon golden raisins</li>
<li>½ to 1 teaspoon rose water</li>
</ul>
<!-- unordered list finish -->
<h2>Preparation To Make Sheer Khurma</h2>
<!-- ordered list started -->
<ol>
<li>roast the seviyan till golden and keep aside. If you want then you can roast the seviyan in ghee also. In the same pan. Heat ghee. And add chopped dry fruits (chopped dates, raisins, cashews, almonds, pistachios, chironji) and saute for 3-4 minutes.</li>
<li>heat milk in a saucepan or a heavy pot. Let the milk come to boil. Lower the flame and simmer for 8-10 minutes till the milk slightly thickens. Keep on stirring the milk at intervals.</li>
<li>add the roasted seviyan and sugar to the milk and simmer till the seviyan are cooked and are softened…. About 8-10 minutes.</li>
<li>the milk will also thicken and reduce by now. add the dry fruits, ghee et all and cardamom powder. Also add rose water.</li>
<li>switch off the fire and stir. Serve the sheer khurma hot or warm in individual bowls. The sheer khurma will thicken more when cooled, so switch off the fire as per the consistency you want.</li>
<li>You can also garnish the sheer khurma with saffron stands or rose petals or powdered cardamom. Serve sheer khurma Hot, warm or cold.</li>
</ol>
<!-- ordered list finish -->
</body>
</html>

Attaching the frontend picture as well:

Well, it's kind of cool when you start learning this type of stuff and you can create the pages from yourself.

Well, it's my first attempt, do rate the work.

Thanks!

Edit: - The content is not mine, so please don't block my id because of the copy content.

<!DOCTYPE html>

<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>"recipe html".</title> </head> <body> <p><h2> HOW TO COOK JOLLOF RICE AND STEAMED VEGETABLES.</h2></p> <p><strong>Description:</strong> </p> <p><!-- Description of the dish --> With the taste of jollof rice recipe, I'll show you how to make the perfect side for <em>fried beef or chicken</em>. The rice has a fantastic flavour thanks to a unique cooking method while some yummy steamed vegetables will round off your meal both in taste and nutrition. </p> <!--Unordered List of dish items --> <p><strong>INGREDIENTS </strong></p> <ul> <li>2 cups (500 grams) parboiled rice.</li> <li>4 medium fresh pepper <em>rodo.</em></li> <li> 4 medium fresh bell pepper <em> tatashe.</em></li> <li> 8 medium fresh bell tomatoes. </li> <li>li 8 medium pieces of beef or chicken. </li> <li>1/2 cup Cray fish. </li> <li>1 small ginger. </li> <li> 2 sachets tomato puree.</li> <li> 2 cooking spoon groundnut oil seasoning and salt to taste.</li> <li> 1 large onion. </li> <li>1 cup green peas.</li></ul>

<p> <!-- method of cooking the dish  -->
  <strong> METHOD</strong>
</p> 
<ol> 
  <li> Blend the fresh rodo, tatashe, 
  tomatoes, ginger, gashi and crayfish.</li>
  <li> Wash the spice and boil the beef 
  or chicKen until
  tender then dry.</li>
  <li> Add the oil used in 
  frying the chicken or beef
  to a clean pot.</li>
  <li>Add the onions,  tomatoes 
  puree and blend them together and 
  dey for 20 minutes.</li>
  <li> Add the seasoning.</li>
  <li> Add the beef stock along
   With 1 or 2 cups of hot 
  water, and stir .</li>
  <li>Add the parboiled rice 
    <em> the water and rice must be 
    on the same level.</em></li>
  <li>Cook on low heat for 20 minutes 
    <em>(you can add more water , 
    if the water dries up 
    and the rice 
    is not well- cooked yet). </em>
  </li>
  <li>Add the green peas, sliced onion 
  and sliced tomatoes.
  stir with a wooden spoon and 
  cook for 10minutes.</li>
</ol>

</body> </html>

        SHORT NOTES ABOUT THE CODE CREATED AND WHAT I HAVE LEARNT SO FAR.

1. The Code Created above is about my Favourite dish which is JOLLOF RICE AND STEAMED VEGETABLES. And the above code created is in three paragraphs. The first paragraph talks about the description of the dish , second paragraph displays the ingredients and the last but not the least which I thinks is the most relevant part of making the dish showing how the food is done. 2. HTML is the acronym for "Hypertext Markup Language" which is defined as the "standard markup language " for documents to be displayed in a web browsers. Inorder for the browser to interpret the words in an HTML you need to use tags.From above I used some of the basic tags/ elements such as ● <head> defines the information about the document and here the information about the document is my favourite dish. when ever you open a tag you close it with this </head >. ● <title> defines a title of the document and mine is " recipe html". ● <p> defines paragraph And I used it three time in the document that is why I had three paragraphs and also closes it with this tag</p>. ● <h1> to <h5> defines the html heading and in my case i used <h2> tag for my heading and closed it with </h2> tag. ● <strong> this tag emphasizes on the element/ word and I used it on the headings of " description, Ingredients and method of the dish again you close it with this tag </strong>. ● <em> I also used this tag to emphasize on some relevant words or points i talked about and closed it with </em>. ● <OL> this tag is used to order elements such as food items and many more and and it is closed with </ol>. ● <Ul> is used for unordered list closed it with </ul> tag. ●<li> is used to number the listed items and is also closes with </li> tag. ●<!-- --> defines comment in an HTML <-- --> is used to close it .

I have learned about html course in pirple website Now I can create my html file. I just have created a html file on how to make a cake This is the code

<!DOCTYPE html>

<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>cake Recipe</title> </head <body> <h1>How to make a cake?</h1>

<h2>Ingredients:</h2> <!-- Unordered list --> <ul> <li>1 cup white sugar</li> <li>½ cup butter</li> <li>2 teaspoons vanilla extract</li> <li>1 ¾ teaspoons baking powder</li> <li>1 ½ cups all-purpose flour</li> </ul>

<h2>Directions:</h2> <!-- Ordered list --> <ol> <li>Preheat oven to 350 degrees F (175 degrees C). Grease and flour a 9x9 inch pan or line a muffin pan with paper liners.</li> <li>In a medium bowl, cream together the sugar and butter. Beat in the eggs, one at a time, then stir in the vanilla. Combine flour and baking powder, add to the creamed mixture and mix well. Finally stir in the milk until batter is smooth. Pour or spoon batter into the prepared pan.</li> <li>Bake for 30 to 40 minutes in the preheated oven. For cupcakes, bake 20 to 25 minutes. Cake is done when it springs back to the touch.</li> </ol>

</body> </html>

this program consist of very basic structure of html for beginners. you can learn the very basic way of writing a html code using header file and title and created ordered list and unordered list as well as tried explaining the concept of nested list and different font styles it's the best way to start learning html language.

my first html code <pizza recipe>

I have learned how to create ordered and unordered lists on HTML. It is a really cool feature which is commonly used whether you are creating a list of items/ingredients or menu for a dropdown list and it's pretty easy to use.

I have attached the code and screenshot for your reference. feel free to try .

<html>

<head>

<title>Egg Omlette</title>

</head>

<body>

<h1>My Recipe for Bread Omlette</h1>

<h2>Ingredients</h2>

<ul>

<li>Bread</li>

<li>2 Eggs</li>

<li>Pinch of Salt</li>

<li>Chilli powder for flavour</li>

</ul>

<h2>

Steps to Prepare Egg-Omlette

</h2>

<ol>

<li>Break Eggs in a bowl</li>

<li>Put Salt in the eggs</li>

<li>Stir it well</li>

<li>Put it on pan </li>

<ul><li>flip the egg multiple times so that it is cooked properly.</li></ul>

<li>After Omlette is prepared put bread slice on it</li>

<li>Enjoy the bread Omlette</li>

</ol>

</body>

</html>

The Output for the above code is as follows:

Hello nice people! This time I came up with an HTML code far more detailed and big. I've designed a webpage about a story, well, the story of my favourite movie: Interstellar. I took the liberty of coloring and styling my fonts and background of every paragraph and every section, by using "style" attribute under <p>,<h3> and <div> tags. It allowed the page to look more vibrant and the sections more distinguished. I googled up the color codes available for HTML and used as belows.

I have learnt the use of <meta> and <div> tags, and adding images and links. By looking up on the Internet, I came across some more cool tags like <marquee>, <strike>, <audio>, <video> and <form>. The audio and video tags help add audio and videos of certain format. The strike tag strikes through a specific text amount. The marquee creates a sliding effect of texts or images or other embedments which is highly customizable via different attributes. Like, the attribute direction helps to select the vector of the slide, the scroll amount indicates speed, behavior indicates if the slide will stop, stop after a certain period or keep scrolling etc. The form tag allow a form with multiple tags within, like the radio button(allows to choose an option), the checkbox (multiple options), the text area( to comment) etc.; thus allowing the user an interactive experience. If you have any enquiries regarding the code, please comment down. I'll try and help ✌

<!DOCTYPE html>

<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <!--To adjust the width on any device--> <title> Interstellar </title> </head> <body bgcolor="honeydew"> <h2 style="font-size:25pt;color:navy"> Interstellar:Dreams stretching beyond light years</h2> <hr> <div style="background-color:paleturquoise"> <!--To distinguish any part of the page and style it accordingly--> <p align="center" style="font-family:Times New Roman;font-size:15pt;color:gray;"><b><big>"</big></b> Love is the one thing we're capable of perceiving... that transcends dimensions of time and space. Maybe we should trust that , even if we can't understand it yet.<b><big>"</big></b></p> <p align="right" style="font-family:Monospace;font-size:10pt"> -Anna Hathaway as <em> Brand </em></p> </div> <br><br> <div> <p align="left" style="font-family:fantasy;font-size:12pt;color:rebeccapurple;"> Interstellar, Nolan's answer to 2001,is an odyssey reincarnated in space to conclude on Earth. It is a fan favourite, to be precise. However complex the science behind it is, Nolan sure grabbed the attention of all classes of people with its bedazzling visuals, powerful OST and...Matthew McCounaghey! Yes. the director delivered yet another masterpiece story taking the best of three worlds- space, score and stars. Released in November 2014 in theatres as a pleasant surprise, the movie left its fanboys grieving about missing the premiere in the hall with their stash of popcorn.</p> </div> <h3 align="middle"style="font-size:20pt;color:Firebrick">A visual masterpiece</h3> <hr> <p style="font-family:fantasy;font-size:12pt;color:indianred;"> Here are some stills from the movie showing just how eye-catching the the attempt of showing the galaxies far far away is...</p> <div style="background-color:coral;"> <marquee width="360px" height="144px" onmouseover="this.stop();" onmouseout="this.start();" direction="left" behaviour="scroll" scrollamount="15"> <img src="Gargantua.jpg" height="240px" width="360px" floating="left" alt="Gargantua"> <img src="Mann's_planet.jpg" height="240px" width="360px" floating="left" alt="Dr. Mann's planet"> <img src="Tesseract.jpg" height="240px" width="360px" floating="left" alt="The Tesseract"> </marquee> <!--To create sliding animations of text or images or others within the webpage--> </div> <br><br> <p style="font-size:20pt;color:darkmagenta"><b> Flabergasting Original Score</b> </p> <hr> <p style="font-family:fantasy;font-size:12pt;color:mediumorchid">The OST of movie, undoubtedly, was a big surprise.It is, to some, the best part of the storytelling. The melody of organs and piano blended in so well with such a sci-fi movie that it suggests only one thing, there's more to the story than just peak level<strike> pop </strike>science. Below are two pieces used directly in the movie, which will make you want to buy tickets to a dolby atmos theatre to experience the magic through not just your eyes.<br><br> Mountains: <audio style="color:lavender;" controls> <source src="Hans-Zimmer-Mountains-Interstellar-Soundtrack_o_Ay_iDRAbc.mp3" type="audio/mp3"> This format is not supported on your device </audio> S.T.A.Y: <audio controls> <source src="Hans-Zimmer-S-T-A-Y-Interstellar-Main-Theme_N4o0qnSeVQQ.mp3" type="audio/mp3"> This format is not supported on your device </audio><br><br> <!--To add controllable audio file to the webpage--> Now, where is my money for giving you free sleep advice?😜</p><br><br><br> <p style="font-size:17pt;color:teal"><b>Survey!</b></p> <hr> <p style="font-family:fantasy;color:darkcyan;font-size:12pt"> Now that you have gone through the article, care of a quick survey? <tt><small>I swear it is the shortest one you'll ever do!</small></tt><br> <form style="color:darkcyan;"> <b> Your Name:<input type="text" name="Your Name"> <br> <br> Gender: <input type="radio" name="gender" value="Male">Male <input type="radio" name="gender" value="Female">Female <input type="radio" name="gender" value="Other"> Other<br><br> <!--To create a list where the user can select only one option via radio button--> Do you think Neil deGreasse Tyson approves of the overly fictional ending of the story?<br> Yes<input type="radio" name="approval" value="Yes"> No<input type="radio" name="approval" value="No"><br><br> Which of these sci-fi movies do you like? And why?<br> <input type="checkbox" name="fav" value="1"> 2001:A Space Odyssey <br> <input type="checkbox" name="fav" value="2"> Gravity<br> <input type="checkbox" name="fav" value="3"> The Martian<br> <input type="checkbox" name="fav" value="4"> Interstellar<br> <input type="checkbox" name="fav" value="5"> Red Planet <br><br> <!--To create a list where the user can choose multiple options via checkboxes--> Your Reason Here: <br></b> <textarea name="comment" rows="5" cols="40"></textarea> </form> </p> <!--To create an interavtive form to be filled by inputs by the user--> </body> </html>

This article is to provide a basic idea about learning html, and specifically listing items on html. Html is a fun thing to learn which allows us to develop our webpage on our own. It is the abbreviated form of HyperText Markup Language. The language is based on processing the tags and attributes of a command, implying the term 'markup'. The code shown below is a simple example of an html code. Here, the head tag sets up the title of the webpage, the body tag sets up the structure of the page. The use of "h3" tag under body lets us give a heading to our webpage with an automated bold and larger font. There are six tags starting from h1 to h6, in descending order of font size. The hr tag helps put a line through the page helping the cause of distinguishing sections within the page. The ul and ol tags are used for listing items. The ul tag sets up an unordered list, that is, a list without any sort of naming or numbering the points. Adding the 'type=' attribute gives us options of solid circle, hollow circle and solid square to be used as points. The ol tag is for an ordered list, which can be numerical (1-infinite), alphabetical (A-Z) capital or small letters, and even roman numerics. The li tags under both ol and ul enlists items within the list. Hence, the code is shown below:

<doctype HTML> <html> <head> <meta charset="utf-8"> <title> HomeWork #1 </title> <!--"To show the topic of webpage on top"--> </head> <body> <h3> Easy egg sandwich recipe </h3> <!--"Heading of the topic in a larger and bold font--> <hr> <ul type="circle"> <strong> Ingredients </strong> <li> 1 egg </li> <li> 1 slice of bacon </li> <li> 1 slice of American cheese </li> <li> 1 square sandwich bun </li> <li> Edible oil </li> <li> Hot sauce </li> <!--"Items in a list without order"--> </ul> <!--"A list without any sort of numbering"--> <ol type="i"> <strong> <em> The Recipe:</em></strong> <li> Break the egg and fry it on the pan with medium heat.</li> <li> Put oil on the bacon and cook it for 5 minutes. </li> <li> Cut the bun in half and brush edible oil.</li> <li> Set the bun on the grill in low heat topping with the bacon, egg and cheese.</li> <li> Pour just a dash of hot sauce on the cheese and let the cheese slightly melt on the bun.</li> <li> Heat the whole deal and grill the bun for a minute. Serves 2 men.</li> <!--"Items in a list maintaining an order"--> </ol> <!--"A list maintaining a specific numbering or order"--> </body> </html>

I write a html code for kids story In this code i use some new tag as follows. <Center> it is use to write text in center. <Video> it is use for to upload video in page. <Hr> it create horizontal line or called end line.

<table> it is use to create table. <Style> it is use for change the colour size style of the page.

Hi everyone, I am new to html and have been working on a project and I had created a whole CSS file and mistakenly overwritten it with my SCSS file because I thought it would have just updated my CSS file. My question is:

When using scss, does the entire css file need to be copied to the scss file? Even if some of the style is not using scss properties (like variables or nesting)

Hi, it's my first HTML code done in Visual Studio Code. I have learned making orderlists, unorderlists and basics commands in this language with Pirple. The code is about ingredients needed to make pancakes and how to do it. on the left u can see the code written by me and ot he right how it looks on the website. Hope u will enjoy it!

Hello,

I am learning Html and CSS with Pirple and I would like to share with you guys my first homework. Html is not new to me but for so many years I stop using it so this is more a refresh, CSS is new to me.

In this task I had to use an unordered list and an ordered list.

when you use lists you have to take into consideration if the order of the itens matter or not. In the first case, if the order matters than you should use an ordered list, if not you can use the other one.

Heres is a picture of the webpage I created:

and the code behind it :

Hello,

I am somewhat new to designing and editing HTML websites.

From the image, I have taken a HTML website that had the content in the middle of the page so there was a lot of whitespace on the left and right of the page. I now want it to look normal and not have everything in the middle of the page and can utilize the whole page.

As I said earlier, I am new to all of this.

I have removed the div class container and it has now sort of done what I want but also hasn't because now everything is stretched and doesn't look right.

Would really appreciate some help with this.