Let's write a Story..

-

HTML provides us the opportunity to write stories by using beautiful background and themes.
Let us write a story using HTML (do not ignore CSS)
(NOTE: I took the story from here)

HTML Code with Internal CSS:

(The code within <style></style> tag is CSS code. This is used for styling.)


<!DOCTYPE html>
<html>
<head><title></title></head>
<style>
 body{
  background-image: url(https://ubisafe.org/images/leaf-transparent-gif-3.gif);
 }
 header{
  background-image:  url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtDfPZ1vWpRDFkDl8dZ7h1IYsNolC3Mqos_7DitiaztuzI-8yi0w);
  width: 100%;
  /*background-repeat: no-repeat;*/
  text-align: center;
  height: 100px;
  padding-top: 0.1px;
  padding-bottom: 17px;
  
  
 }
 #header{
  
 }
 #container{

  background: white;
  width: 50%;
  padding: 20px;
  text-align: justify;
  margin-left: 25%;
  border: 10px solid orange;
  box-shadow: -6px -6px 8px black, 10px 10px 8px black;

 }
 #title{
  opacity: none;
 }
 h1{

  
  text-shadow: -3px 0px black, 0px -3px black, 3px 0px black, 0px 3px black;
  background: white;
  font-weight: bold;
  font-size: 50px;
  color: gray;
  opacity: 0.9;
  font-family: arial;
  
 }
 p{
  font-family: arial;
  font-size: 20px;
  
 }

 #moral{
  
  text-align: center;
  background: orange;
  font-weight: bold;
 }
</style>
<body>
 <div id="container">
 <div id="header"><header>
  <h1 id="title">Title : Thirsty Crow</h1>
 </header></div>
  <div id="Story Board">
   
   <p>One hot day, a thirsty crow flew all over the fields looking for water. For a long time, he could not find any. He felt very weak, almost lost all hope. Suddenly, he saw a water jug below the tree. He flew straight down to see if there was any water inside. Yes, he could see some water inside the jug!
The crow tried to push his head into the jug. Sadly, he found that the neck of the jug was too narrow. Then he tried to push the jug to tilt for the water to flow out, but the jug was too heavy.
The crow thought hard for a while. Then, looking around it, he saw some pebbles. He suddenly had a good idea. He started picking up the pebbles one by one, dropping each into the jug. As more and more pebbles filled the jug, the water level kept rising. Soon it was high enough for the crow to drink. His plan had worked!
</p>
<p id="moral">Moral: Think and work hard, you may find solution to any problem.</p>


  </div>


 </div>
</body>
</html>


I would really appreciate you, if you write the above code (or copy paste it), to see the 


output.


Well, at my end the output is :







Here is something amazing about the background leaves, and you will know it once you yourself try this out...



If you are asking; which text editor you should use for HTML and family, then I would suggest you what my Honorable Teacher suggested my class, and that is to use Notepad in the beginning...



When you will be an expert, then editor will not matter.. (You can just imagine the code and will get the output in the mind browser!) 



So, that was it for today, enjoy learning... 












































Comments











Post a Comment



















Popular posts from this blog









Relational Data Model






-














Image







In the previous blog post, we covered Data Modeling. We have seen that data modeling is really important before jumping into predictive modeling.  In this article, we will cover the Relational Data Model (RDM). Let's start from the very basics, relational means anything which is linked with some other thing. This link is called "Relationship". In RDM or RM there are major three types of relationship cardinalities (also called Multiplicities or Cardianalities): 1. One to one 2. One to many 3. Many to many We can understand these with the help of a few simple examples;  One to one: One department has one manager. One to many: One class has many students. Many to many: Many teachers can teach many students. Okay, so we have got an abstract overview of the term " Relational ", now the next thing is " Data ", data covers everything, anything... And finally, " Model " means something in the form of a template, design, a kind of blueprint.  To store...








Read more










An Interview with Pakistani Data Scientist : Dr. Zeeshan Ul Hassan Usmani






-














Image







        Dr. Zeeshan-ul-Hassan Usmani, the name known for Data Science, Predictify me, Eisenhower fellowship  and most importantly motivation for many of the students.   He is the Author of book like  (C++) ++سی/سی ,  Bit Coin Block Chain aur Crypto Currency بٹ کوائن، بلاک چین اور کرپٹو کرنسی  and many other, you can visit them here .   Today "Data Science Tales - A Tech blog by Bia Chaudhry," asked him some of the questions, as an interview and we are very glad that he gave his precious time to answer them.   It was kinda "Remote Interview"... not the traditional one..         The Interview  Question:  How can you describe " Dr. Zeeshan ul Hassan Usmani " ?  ANSWER:  I am a shameless idealist. We are all idealists at some stage of our lives but then it fades away and we live as a mediocre. I don’t want it to fade away. I remind myself almost every day that I need to make my today better than my yesterday, and the challenge is keep getting harder J . We onl...








Read more










Data Engineering Tools 






-














Image







   Data is a new oil. To channelize this data we need proper pipelines. These pipelines are mostly called ETL or data pipelines.  There are various tools out there to work out these Extract, Transform, and Load (ETL) operations.  Some of the scripting tools are:  - Python - SQL and NoSQL Apache provides a wide range of products that can be used as Data Engineering tools.  Some of the amazing apache DE services comprised of; - Hadoop - Spark - Kafka - Cassandra - Hive In addition, some cool DE tools are: - Tableau - Talend - MapReduce These DE tools provide a way to manage the data pipelines in a more effective, efficient, and better way.  Almost every Data-Oriented company in the corporate sector is highly dependent upon these technologies. They are leveraging many of the above-mentioned mechanisms for promising Data Services and Architecture. That's it for today. Hope you have enjoyed this article. If you want to know more about data or software relat...








Read more










Applications of Data Engineering






-














Image







In a previous blog  post about data engineering, we went through several many concepts related to data engineering such as data modeling, and then we went through different types of databases, for example, relational databases and we also got a glimpse of relational as well as NoSQL  databases. And in today's blog post we will be writing about data engineer applications. Which are basically the use cases of data engineering 1st let's see what data engineering applications mean; so basically when we have data and we have engineered it then there are several things that we can do with that data and these things that we can do with processed data are the use cases of the data engineering. For example: If we have filled our containers with the data then it's not of any good use if it is not clean and well-formed. If your data is well-formed and if there are no logical mistakes, missing values, and garbage then we can easily perform the use cases and applications of data enginee...








Read more










Five People to Follow on Social Media






-














Image







   How many times you used to scroll Facebook, Instagram, Twitter, and other social media platforms? You always want to make your scrolling productive but after 2-3 hours you realize that you have wasted tons of your precious time.    so, if you want to make the best use of your social media time, then you can follow the following people, their posts are meant to give some worthy information. let's get started:     Hisham Sarwar  Follow Hisham Sarwar for freelancing related information.  Zeeshan Ul Hassan Usmani  Follow Zeeshan Ul Hassan Usmani for data science, artificial intelligence and, block-chain related stuff.  Aman Dhattarwal  Follow Aman Dhattarwal for study and placement tips and tricks.  Sandeep Maheshwari  Follow Sandeep Maheshwari for business strategies and motivational content.  Qasim Ali Shah  Follow Qasim Ali Shah for study motivation as well as life lessons.    Enjoy!  








Read more










Data Science : The Fusion Reaction






-














Image







       “ Data is the new oil? No: Data is the new soil. ”             ~ David McCandless        These days plethora of new things are coming like: "Naya Pakistan" , "Naya prime-minister" , "Naya Semester" and the list goes on...   but Let's just talk about this "new soil" science that is "Data Science "     Data Science is made up of two words: Data and Science.  Data  is a Latin word and a plural of  datum, meaning "thing"  It is first used in English in 1640's (17th Century ).  Science  came from Latin  too, it is derived from a Latin word "scientia" meaning knowledge . Then the old French  said : "Hey, I don't like "scientia"  let's call it "escience"  or just forget about "e"  in the beginning and say it: "science" " . Then an English came and said : "I order you to take this word as "science"  and no more debate on this !"     ...








Read more










Elasticsearch and Redis : NoSql






-














Image







      The colorful  bubble logo  is of Elasticsearch , while the redish logo is of Redis .   First let's talk about Elastic search..   Elasticsearch  is an open source search engine. Now, what is a search engine? Search engine is basically a website, for example: google.com, yahoo.com, bing and MSN. What we look as Google chrome, Safari or Internet Explorer is basically a Web browser. Let's say we type "www.facebook.com" in a web browser's address bar , then the web browser will take us directly to the website "facebook.com". As for search engine, if we type in its search bar , "www.facebook.com", then it will open up different links according to the search algorithm.   So Elasticsearch is like a search engine. But it is different from traditional search engines. Like in most of the search engines, tables are used to store data, while elasticsearch is no schema based search engine. In place of tables, JSON documents are used in Elasticsearch. I...








Read more










Web Scraping : Urdu News






-














Image







     Web scraping  is an amazing method to collect data. Many data scientist use this method. I have scrape Urdu news . Urdu is difficult to scrape but thanks to Python and its libraries. Have a look at the code and outputs below:     








Read more