HTML
Hypertext Markup Language
The first publicly available description of HTML was a document called "HTML Tags", first mentioned on the Internet by Tim Berners-Lee in late 1991.
Berners-Lee considered HTML to be an application of SGML. It was formally defined as such by the Internet Engineering Task Force (IETF) with the mid-1993 publication of the first proposal for an HTML specification, the "Hypertext Markup Language (HTML)"
Introduction
Hypertext Markup Language is the text markup language currently used on the World Wide Web. The symbols and acronyms used in those editorial markups suggested changes for you to interpret or imlement. In that scenario, markup is seperate from the actual content of your document.
An HTML document is simply a text file that contains the information you want to publish. It ialso contains embedded instructions, caled elements, that indicate how a Web browse should structure or present the document.
To create a Chessboard with Chess pieces we first need to know their unicode or HTML equivalent codes.
There are around 12 Symbols that are needed to create a Chessboard in HTML.
These symbols are available in Unicode range U+2654 to U+265F.
Note : To display these Symbols you need to have the font that supports this Unicode Range.
Source Code HTML + CSS
Click for download images Images Zip
- <html>
- <head>
- <title>Chessboard using Pure CSS and HTML</title>
- <style type= "text/css">
- .chessboard
- width : 640px;
- height : 640px;
- margin : 20px;
- border : 15px solid #333;
- }
- .black
- float : left;
- width : 73.7px;
- height : 73.7px;
- background-color : #999;
- font-size : 50px;
- text-align : center;
- display : table-cell;
- vertical-align : middle;
- }
- .white
- float : left;
- width : 73.7px;
- height : 73.7px;
- background-color : #fff;
- font-size : 50px;
- text-align : center;
- display : table-cell;
- vertical-align : middle;
- }
- </style>
- </head>
- <body>
- <table class="chessboard table">
- <tr>
- <td class="white" ><img src="img/chess/white1.png"> </td>
- <td class="black" ><img src="img/chess/white2.png"> </td>
- <td class="white" ><img src="img/chess/white3.png"> </td>
- <td class="black" ><img src="img/chess/white4.png"> </td>
- <td class="white" ><img src="img/chess/white5.png"> </td>
- <td class="black" ><img src="img/chess/white6.png"> </td>
- <td class="white" ><img src="img/chess/white7.png"> </td>
- <td class="black" ><img src="img/chess/white8.png"> </td>
- </tr>
- <tr>
- <td class="black" ><img src="img/chess/white9.png"> </td>
- <td class="white" ><img src="img/chess/white9.png"> </td>
- <td class="black" ><img src="img/chess/white9.png"> </td>
- <td class="white" ><img src="img/chess/white9.png"> </td>
- <td class="black" ><img src="img/chess/white9.png"> </td>
- <td class="white" ><img src="img/chess/white9.png"> </td>
- <td class="black" ><img src="img/chess/white9.png"> </td>
- <td class="white" ><img src="img/chess/white9.png"> </td>
- </tr>
- <tr>
- <td class="white"></td>
- <td class="black"></td>
- <td class="white"></td>
- <td class="black"></td>
- <td class="white"></td>
- <td class="black"></td>
- <td class="white"></td>
- <td class="black"></td>
- </tr>
- <tr>
- <td class="black"></td>
- <td class="white"></td>
- <td class="black"></td>
- <td class="white"></td>
- <td class="black"></td>
- <td class="white"></td>
- <td class="black"></td>
- <td class="white"></td>
- </tr>
- <tr>
- <td class="white"></td>
- <td class="black"></td>
- <td class="white"></td>
- <td class="black"></td>
- <td class="white"></td>
- <td class="black"></td>
- <td class="white"></td>
- <td class="black"></td>
- </tr>
- <tr>
- <td class="black"></td>
- <td class="white"></td>
- <td class="black"></td>
- <td class="white"></td>
- <td class="black"></td>
- <td class="white"></td>
- <td class="black"></td>
- <td class="white"></td>
- </tr>
- <tr>
- <td class="white" ><img src="img/chess/black9.png"> </td>
- <td class="black" ><img src="img/chess/black9.png"> </td>
- <td class="white" ><img src="img/chess/black9.png"> </td>
- <td class="black" ><img src="img/chess/black9.png"> </td>
- <td class="white" ><img src="img/chess/black9.png"> </td>
- <td class="black" ><img src="img/chess/black9.png"> </td>
- <td class="white" ><img src="img/chess/black9.png"> </td>
- <td class="black" ><img src="img/chess/black9.png"> </td>
- </tr>
- <tr>
- <td class="black" ><img src="img/chess/black1.png"> </td>
- <td class="white" ><img src="img/chess/black2.png"> </td>
- <td class="black" ><img src="img/chess/black3.png"> </td>
- <td class="white" ><img src="img/chess/black4.png"> </td>
- <td class="black" ><img src="img/chess/black5.png"> </td>
- <td class="white" ><img src="img/chess/black6.png"> </td>
- <td class="black" ><img src="img/chess/black7.png"> </td>
- <td class= "white" ><img src="img/chess/black8.png"> </td>
- </tr>
- </table>
- </body>
- </html>