Posts

News Website Layout

-
Image
I had a web Engineering lab, in which I need to make a website layout as that of BBC News . So, I made a Banana News Network website layout. Before going towards the code, I want to tell you that I mostly did the work using division tag <div></div>.  The same work can be done using tables, but div provides you more flexibility and responsiveness. So, I used both the div tags and tables. Now, below is the code of that website layout. I am sharing it because the lab has been marked. CODE: <!DOCTYPE html> <html> <head><title> bbc </title> <link rel= "stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" > <style> @media screen and ( min-width : 480px ) { li { display : block ; text-decoration : none ; text-align : left ; color : red ; padding : inherit ; font-size : 17px ; margin : auto ; bor...
Post a Comment
Read more

Let's write a Story..

-
Image
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: -...
Post a Comment
Read more

Guess Number GAME : HTML

-
Image
Python is pretty good language but HTML is pretty web language... so, in first semester I wrote a python code for guess number game, but, now we will learn how to make a guess number game using HTML... so below is the code for it, I will try to upload all my codes on github... and will share a link with you. But for now consider the below mentioned code, in HTML and styling using internal CSS. Code: <!DOCTYPE html> <html> <head><title></title></head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script> <style> body { background : url("https://cdn.pixabay.com/photo/2015/01/08/15/54/lines-593191_960_720.jpg") ; } h1 { margin-top : 10px ; font-family : cursive ; color : black ; background : white ; } table { padding-top : 20px ; border : 10px solid purple ; padding-left : 60px ; padding-bottom : 20px ; } td { width : 20 %; heig...
Post a Comment
Read more

webpage image

-
Image
1 comment
Read more

Form : Coming Fast..

-
Image
Form is one of the significant method for data collection. If you want to make forms for any society or for some other work, then you are at right place.  In this blog post we will learn to make a simple but useful form.  First of all: Open any text editor like notepad, then save the file as "form.html"..... Now start coding.. Write the below mentioned code into the form.html file using a test editor. Code: (HTML) <!DOCTYPE html> <html> <head> <title> Form </title> <link rel= "stylesheet" href= "style.css" type= "text/css" > </head> <body> <div id= "container" > <h1> Fill In The Form.. </h1> <div id= "formBody" > <form> Name: &nbsp; <input type= "text" placeholder= "enter your name.." ><br><br> Class: &nbsp;&nbsp; <input type= "text" p...
Post a Comment
Read more

Think Like a Programmer

-
Image
How? Read this book Why? Because you are to become a software engineer and programming is the basic need, the food for thought of a software engineer especially a programmer software engineer... But... This is too long So what? You have to read it! May be it contains something that is beneficial to you..
Post a Comment
Read more

Banana News Network

-
Image
So, yeah a quick blog post on HTML. You need to make a news website layout, how do you do that? I made a simple web page, that I want to share with you.. The code: <!DOCTYPE html> <html> <head><title> Banana News Network </title></head> <body> <table style= "font-family: georgia;" cellspacing= "0" > <tr> <th width= "100%" colspan= "3" style= "padding-left:50px; background-color: yellow; font-size:30px" ><h1><img src= "b.png" width= "50px" > BANANA NEWS NETWORK </h1></th> <td></td> </tr> <tr> <td colspan= "3" ><span> <ul type= "none" style= "background-color:black; font-size: 30px; font-family: georgia; " > <li style= "display:inline-block" ><a href= "something.html" style=...
Post a Comment
Read more

Question...

-
Image
There was a question related to <datalist>  regarding HTML 5. Question: Is it necessary to have <input> tag for  <datalist> usage or The search bar in the output is due to the <input> tag? Answer: Yes, the <input> tag is a must before <datalist> tag, this is because if you don't use <input> tag, then there will be no data list in the output. Reference code: (WITHOUT INPUT TAG) <!DOCTYPE html> <html><head><title></title></head> <body> <form action="" method="" > <datalist id= "list" > <option value= "a" > <option value= "b" > <option value= "c" > <option value= "d" > </datalist> </form> </body> </html> Output: Nothing in the output _ blank Do you see anything in the output ? No, right? Now let us put input tag, like this: ...
Post a Comment
Read more