Posts

Showing posts with the label html

Recap of Web Engineering...

Image
Well, one of my hobbies is to write HTML and CSS. So I thought to type some code and share that in this blog post. so here you go.. CODE: "ForEnjoyment.html" file <!DOCTYPE html > < html lang= "en" > < head > < meta charset= "UTF-8" > < link type= "text/css" rel= "stylesheet" href= "styleSheet.css" > < title > Just for Fun </ title > </ head > < body > < div class= "a" > < div class= "e" > < div class= "f" > </ div > < div class= "a" > < div class= "b" > < div class= "c" > < div class= "d" > </ div > </ div > </ div >< div class= "b" > <...

PHP chess board : how to make ?

Image
As we have learned much of the basics of  HTML and CSS . Let us now learn how can we make our web applications more user friendly, flexible and versatile, using php . Today we will see how to make a chess board using php in collaboration with HTML and CSS .  So, Let's start: BASIC php SYNTAX: Starting Closing Tags: <?php ?> Php code must be written in these tags. Variables:              Start with "$" sign e.g. $num=3;               ; is really important to put after every statement. Functions:              Functions start with the keyword "function". E.g. function power(){} Print:             echo "printing by using echo";             echo ("printing by using echo");             print "pri...

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

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