Web Technology Tutorials

Designing a HTML5 game (Snakes and Ladders) Making of snakes and ladders game Store the positions of start_ladder to end_ladder as a pair Store the positions of start_snake to end_snake as a pair Store the above data in two one-dimensional arrays For example: If the snakes are at positions 4, 9, 17, 35, 44,59,61,78,93] and the ladders start at positions [7,16,92,62], then let arr1 = [4,9,17,35,44,59,61,78,93] ; let arr2 = [7,16,92,62] Write start() function which will initialize the state of the game In this function, do the following tasks. Create a 1000 * 1000 board with 100 boxes, 10 boxes in one row and having alternate colors ("red" and "yellow") Mark the start of a ladder as green color Mark the start of a snake with a black color Assign a number to each box from one to hundred Assign player1 as "white" color Assign playe...

"em" and "rem" units em and rem are units of measurement which take their measurements based on or relative to its immediate parent element For example, if the "<div>" tag has a font-size attribute in CSS as 12px. and if it contains as an element whose font-size is 1.2em it means that the font-size of the element is 1.2 times the font-size of its parent. Thus, the font-size of the child html element will be 1.2*12 = 14.4px rem is relative to the root element size i.e. html tag size suppose the default size of the html page elements which are not styled by CSS is 14 px then if we specify that the font-sizee be 1.2rem it means the font size will be 14*1.2 =16.8px They are mainly used for creating thumbnails or different sizes of the same image For example, Consider the following piece of code: img:hover {width: 2em;} will scale the image horizontally to double its width when you hover over i...

Bullets and Numberings Different types of bullets and numbering are used in HTML5: Unordered List of items Apples Bananas Lemons Oranges Apples Bananas Lemons Oranges Apples Bananas Lemons Oranges Ordered List of items Apples BAnanas Apples BAnanas Apples BAnanas Apples BAnanas

Query Parameters Query paramaeters are data sent from the client to the server. They area a list of "name" : "value" pairs. They are only relevant in a GET HTTP request. The "name"="value" pair is appended to the ? which is written after the URL. You can incude multiple pairs of name and value separated by a delimiter "&" For example if in a form whose method is GET, if the form is submitted, the URL will look like this: https://www.thwebdesk.blogspot.com/?name1=value1&name2=value2&name3=value3 If the value contains special charcaters that have a certain meaning in a context and encoded to %(2 digit hexadecimal number) For example: If the name = "Gaurav" and value = "S'hirodkar" The HTTP request URL will be https://www.thewebdesk.blogspot.com?name=Gaurav&value=S%3Ehirodkar meaning that the sppecial character apostrophe h...

JavaScript Events jQuery plugins are Javascriot file swhich perform specific functions. For example, If we import a datepicker jQuery plugin, We must write $("#date_picker").datepicker({ format:"mm/dd/YYYY") }); Events: There are several events that can happen while browsing a web page. For e.g., User can press a key a user can double click in an element a user enters an section of a web page a user drags an element a user drops an element a user scrolls down or up The syntax for event handlers is as follows: onkeypress onkeydown onkeyup onmouserover onmouseenter onmouseleave ondragover ondrop onscroll onload onbeforeload onunload onbeforeunload ondblclick onsubmit onclick Sometimes, we want to add some...

HTML5 Colors A color in HTML is written #(<red_component>,<green_componbent>,<blue_component>) eg, #220022 red component of the color is 22 hexadecimal number green component is a 0 hexadecimal number blue component is 22 hexadecimal number Shortcut for defining color codes: If the color code is - #ffffff will be compressed to #fff Explanation If all the components of primary colors(either red,green or blue) are same you should write it once. HTML supports 240 color names. eg, red,lightblue,black,yellow,etc. Gradients represent a transitoion of a color from one shade to another across an HTML element. Suppose wwe want to define a shade of orange to yellow for a div element of size 40px * 80px, we will write: background-image: -webkit-gradient(orange,yellow); background-image:-webkit-radial-gradient(circle,white,black); ...

HTML entities HTML entities: Sometimes, we want to enter charcters wihich have aa special meaning in a HTML markup, we write an HTML entity character sequence in place of the special character. For example, < is encoded to &amplt; > is encoded to &ampgt; " is encoded to &ampqout; ' is encoded to &ampapos; & is encoded to &ampamp; a space is encoded to &ampnbsp;

Data Attributes in HTML Data attributes: "data" attributes are normal HTML element attributes and and are defined using the "data-" prefix. To return the list of all the data attributes in jQuery use $("<selector>").data(); Let us take an example: If we want to store different user-defined properties of an HTML element, we can write:- <span id="span1" data-color-blind-style="true" data-should-be-repeated="true" data-repetition-count="3" >Test</span> The following is the jQuery snippet: $(document).ready(function(){ let data_properties = $("#span1").data(); if(data_properties.length != 0) { if(data_properties["color-blind-style"] == "true") { $("#span1").css({color:"red"}); } if(data_properties['should-be-repeated'] == "true") { i...

Bootstrap Tables and Advanced HTML Bootstrap Basic Table A basic Bootstrap table has a light padding and only horizontal dividers. The .table class adds basic styling to a table. The .table-striped class adds zebra-stripes to a table. The .table-responsive class adjust the table to adjust to different screen sizes i.e., the table will adjust its size (width and height) according to whether the device is a smart phone, a tablet or a laptop or a desktop. To create a link to a specific section of a webpage, use <a href="index.html#top> and the destination element will be <a href="" name="top"> The second way to link to a specific section of a webpage, we should use the nav tag. It contains an Id parameter. For example, if id = "top" then we can jump to the destination section of the nav using <a href="index.html#top"> Header and Footer...

Z-index In HTML5, there is a layering of elements in which different visusal contents can be layered one over the other using CSS For this to accomplish, you need to use the z-index property and an integer(positive or negative) depending on which layer you should position it over or under other items. Example: If you want an image to be layered over a div tag ,you need trher following CSS code: div { z-index : 0 } img { z-index : 1 }

HTML Select Tag The HTML <select> tag creates a drop down list of items. You have the facility to select more than one items in the dropdown list if the select tag's multiple attribute is present. The multiple atribute is a boolean attribute which specifies that you can press and hold the ctrl key and click on many items in one go. The <select> tag contains a set of <option> tags which specify the values of the items in the dropdown box. By default, the first option that is written inside the select tag is selected. You can change that by specifying anmy other option other than the default option by adding a boolean attribute "selected" to the respective option which you want to be displayed when the select list is not opened. The name attribute identifies the form element's value for the select element. If you want to enable multiple items to bve selected your name attribute's value should be su...

The "pre" tag If you want to insert spaces and line breaks in your paragraphs as you type in any text editor such as "Notepad++" or "Gedit", you should encapsulate this text in a <pre> tag. The word "pre" stands for preformatted text. Example: <pre> Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks </pre> Sample output for the above HTML markup is :- Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks The <pre> tag is an extremely imporatant for wriiing code snippets for programming languages which require the code to be intended properly like Python. Just look at the image beow. The <code> should be retained inside the pre tag

HTML Tables In HTML5 tables are semantically marked up. For instance, if there is a header row it is written inside <thead> tag. Going ahead, the data rows are written inside the <tbody> tag. The table rows are writen inmside the <tr> tag and the data cell are written inside the <td> tag. Example: <table> <thead> <tr> <th>Name</th> <th>Gender</th> </tr> </thead> <tbody> <tr> <td>Swara</td> <td>Female</td> </tr> <tr> <td>Arya</td> <td>Female</td> </tr> </tbody> </table> Sample output for the above code is: Name Gender Swara Female Arya Female

Going into the semantics The <address> tag defines the contact information which includes the telephon e number, street address, email id and other means of communication. Example: <address> Written by <a href="mailto:webmaster@example.com">Jon Doe</a>. Visit us at: Example.com Box 564, Disneyland USA</address> There can be multiple <address> tags inside a web page. One for the HR Manager, one for the Technical Lead , one for CEO and so on. Most search engines rank a web page higher in the search results if it contains multi-line and multiple <address> tags

Going into the semantics The <article> tag is used for independent self-contained text. Most search engines give better ranking if the page contains many meaningfule and multi-line articles. Example: <article> <h3>Google chrome</h3> <p>This is test text</p> </article>

IFrames An " iframe " tag creates a child window in the main web page. Explanation: Most websites nowadays keep youtube videos as a part of testimonials or some other way of marketing through social media or other channel The obvious way to achievce this is to have one or more iframes inside parts of webpage. <iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"></iframe> The iframe tag has two attributes: The src attribute contains the URL of the page it is referring to and can contain query parameters The title atribute contains the text when we hover over the iframe window inside the web page The width attribute contains the maximum width the inline frame can take The height attribute contains the maximum height the inline frame can take Example: <iframe src="https://cdn.pixabay.com/photo/2021/02/09/13/00/ganesh-599848...

"noscript" tag The text between the <noscript> tag will be displayed if the browser does not support javascript or javascript has been disabled temporarily by the browser in browser settings. <script> document.write("Hello World"); </script> <noscript> This will be displayed by browsers that do not allow javascript. </noscript>

HTML "textarea" tag A textarea is a multi-line input field. By default, you can resize a textarea input field by using drag and drop mechanism. To disable the drag and drop facility, use the following CSS code snippet. textarea { resize: none; } The textarea tag contains two attributes namely, rows and cols . Example: <textarea rows="10" cols="20">Some text</textarea> defines a textarea having 10 lines and 20 characters per line.

Fieldset and Legend tag The <fieldset> and <legend> are generally used in conjunction to display information about what the form is meant to be. The <fieldset> tag, by default, makes a border around the <form> which it belongs to and the <legend> tag gives the title text for the fieldset of which it is a child of in the top left corner of the border generated by the <fieldset> . Example: <form action="/action_page.php"> <fieldset> <legend>Personal Information:</legend> <label for="fname">First name:</label> <input type="text" id="fname" name="fname" /> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname" /> <label for="email">Email:</label> <input type="email...

Button tag The <button> tag: The <button> tag creates a clickable button having some text. <button type="button">Click Me!</button> The <button> contains the following attributes Attribute Value Definition autofocus Boolean Attribute Specifies that a button should automatically get focus when the page loads disabled Boolean Attribute Specifies that a button should be disabled form form_ tag's name attrbute's value Specifies which form the button belongs to