The Full Stack Developer

Category: html

  • How to make Google display customized content in its search results page for your website?

    Let’s say you have created a website. You are starting to get decent number of hits and google starts indexing your website in its search results. You search for your website in Google Search and “Aha!” your website is shown in the search results. But the content in the search result is random and you…

  • Attribute vs Property in HTML

    The terms attribute and property can be confusing in HTML. For example the javascript framework Angular has the concepts Property Binding and Attribute Binding . Without knowing the difference between the two it is difficult to grasp the difference between those concepts. The major difference between the two is this: Attribute is related to HTML…

  • How to create a custom element (HTML tag) in HTML?

    Until HTML5 , reusing a piece of html code was not straightforward. Thanks to HTML5 , web components came into picture. Now you can create your own custom components and include them in your HTML code using custom tags. And you can reuse them anywhere else in your application by declaring the custom tags just…

  • How to add Google/Bing Search to your web page?

    Let’s say you have created a website. And you want your users to be able to do Google search or Bing search within your website. How do you do that? Just by including the below code: For Google search: For Bing search: The above two are basically html forms which make “GET” requests to the…

  • How to drag and drop a file into a HTML page using HTML5?

    As mentioned in the previous post, drag and drop got easier with HTML5. You just mark the element to be dragged as draggable and then drag and drop it on a HTML element. But how can files be dragged from , say your desktop , and then dropped on a HTML element, say a text…

  • How to implement drag and drop in HTML5?

    Dragging and dropping content in your html document got easier with HTML5. You just need to mark the element you want to drag as “draggable”, drag it and drop it using some simple javascript. Here are the steps: STEP1: Mark the HTML element to drag as draggable STEP2: Write a javascript function for the event…

  • How to show edits in a HTML document?

    Let’s say you created a HTML document with some content . You published it and your users have already started viewing it. And then suddenly you wanted to make some changes. You want to insert new data and delete old ones. You want to do this without affecting the user experience. How do you that?…

  • How to track your website link clicks using a single HTML attribute?

    Let’s say you have created a web app. You have lots of hyperlinks in your app, either to your own web pages or to external resources. You want to track those links: Who clicked it? When was it clicked? How many times a particular link was clicked? Until HTML5, you had to write javascript code…

  • What are the different ways to represent text in HTML?

    There are so many ways to represent text in HTML. The HTML specs specify 29 different ways to mark up text. Here are they: You can hyperlink to a text or even a section of text or a picture using <a> element Example: When user clicks on the words “The Full Stack Developer” they will…

  • How to group HTML content?

    In the previous post as part of this series I wrote about how to structure content in HTML. In this post we will see how to group content. (Grouping is how to group related data together and structuring is more about where to place each type of content in a HTML document) According to the…