Posts

Showing posts with the label web page

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

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

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

Design A simple Web page!

-
Image
Today, we will learn how to write simple HTML code, and make a webpage with some important tags. We will also add some styling in that without style sheet. so let's begin... <html> <head> <title>webpage</title> </head> <body> <center> <hr> <h1 style = " font-size:50 px"><ins>Books For You...</ins></h1> <hr> <h2 style= "font-size:20px"><ins>For Programmers:</ins></h2> <h3><a href = "https://arisuchan.jp/λ/src/1493491363210.pdf">Think  Like A Programmer</a></h3> <img src = "https://kbimages1-a.akamaihd.net/ac5e4364-30dc-4d33- 8461-f27f8032e59e/353/569/90/False/think-like-a-programmer-4.jpg" alt = "Book Img"> <hr> <h2 style= "font-size:20px"><ins>For Software Developers:</ins><h2> <h3><a href="https://www.amazon.com/S...
Post a Comment
Read more

Simple Web Page : Step by Step

-
Image
Today I will tell you, how can you create a simple web page using HTML and CSS, step by step. so let's begin.. Make a folder on desktop (for easy access) naming MyFirstWeb . Open any text editor like Notepad etc. Type simple HTML structure in the text editor as: <!DOCTYPE html> <html>         <head>                     <title>                    </title>         </head>                         <body>                         </body> </html> Now save this file in the MyFirstWeb folder by naming it as : index.html You can see the file Icon as of your browser. Click this file to open it in the browser. Edit the above code a...
Post a Comment
Read more