Skip to main content

Basic Examples of HTML


In my blog, I will show some basic HTML examples...

Basic Examples of HTML
(Image Source - Google Images)

Documents in HTML :
  • All HTML documents must start with a document type declaration -> <!DOCTYPE html>.
  • The HTML document itself begins with <html> and ends with </html>.
  • The visible part of the HTML document is between <body> and </body>.
Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Headings in HTML :
  • HTML headings are defined with the tags <h1> to <h6>.
  • <h1> defines the most important heading. <h6> defines the least important heading.

Example

<h1>This is 1st heading</h1>
<h2>This is 2nd heading</h2>
<h3>This is 3rd heading</h3>

Paragraphs in HTML :
  • HTML paragraphs are defined with the <p> tag.

<p>This is first paragraph.</p>
<p>This is second paragraph.</p>

Links in HTML :
  • HTML links are defined with the <a> tag.

Example

<a href="https://www.google.com">This is a link</a> 

  • The destination of the link is specified in the href attribute.
  • Attributes are used to provide additional information about HTML elements.

Images in HTML :
  • HTML images are defined with the <img> tag.
  • The source file (src), alternative text (alt), width, and height are provided as attributes.

Example

<img src="image.jpg" alt="DemoImage" width="500" height="500">

Buttons in HTML :
  • HTML buttons are defined with the <button> tag.

Example

<button>Click Here</button>

Lists in HTML :
  • HTML lists are defined with the <ul> (Unordered List) or <ol> (Ordered List) tag, followed by <li> (List Items) tags.

Example

<ul>
  <li>Name</li>
  <li>Address</li>
  <li>Mobile</li>
</ul>

<ol>
  <li>Name</li>
  <li>Address</li>
  <li>Mobile</li>
</ol>

Comments

Post a Comment

Popular posts from this blog

WhatsApp to Start Offering Health Insurance, Micro-Pension Products in India Soon.

WhatsApp to Start Offering Health Insurance, Micro-Pension Products in India Soon. By the end of the year, WhatsApp plans to start offering affordable health insurance coverage from SBI General. (Image Source - Google Images) WhatsApp plans to start rolling out health insurance and micro-pension offers in India. India chief Abhijit Bose revealed WhatsApp's roadmap to deliver "critical livelihoods and financial services" to the country's mobile users at the Facebook Fuel for India event. The Facebook-owned company is working with SBI General to launch health insurance products, while HDFC Pension and Singapore-based firm PinBox Solutions are on board to offer micro-pension products. The new developments come alongside WhatsApp's digital payments company: WhatsApp Pay. By the end of the year, WhatsApp will begin offering affordable health insurance coverage from SBI General, Bose said during his presentation at the virtual event.  The executive also announced Whats...

How to disable WhatsApp message preview on lock screen

While iOS users have the option in the WhatsApp app to disable the preview option, Android users need to turn it off from the phone's settings section. (Image Source - Google Images) Have you ever given your phone to family members and worried that they might read a personal message on the notification panel or on the lock screen? If by chance you have experienced this, then there is a way to prevent accidents from happening. You can make sure this doesn't happen by simply disabling the WhatsApp notification or the preview message option. Note that when iOS users disable the preview option, WhatsApp only displays the sender's name and the notification text will be "Message". But this will not be the case for Android users as they will disable the WhatsApp notifications option in the phone settings. Keep reading to know more. (Image Source - Google Images) Android : How to disable WhatsApp message preview on lock screen Step 1 : Go to the Phone’s settings sectio...

Responsive Google Maps

Create Responsive Google Maps on Any Website. (Image Source - Google Images) Google Maps makes it easy to insert/embed a map into your own website. However, by default, Google Maps does not provide responsive support. In my Blog, I will show you how to make your maps responsive, using just a few lines of CSS. This technique will work on any website platform. 1. Get the embed code from Google Maps Go to Google Maps. Find the area of the map you want to use on your website. Click on the "Share" link. (Image Source - Google Images) Choose "Embed map". Select the iframe code. Right-click and copy the embed code. (Image Source - Google Images) 2. Use the Google Maps Embed Code Paste the embed code on your website. It will look similar to this: <iframe src="/" width="600" height="300" frameborder="0" style="border:0" allowfullscreen></iframe> 2.1.Modify the Embed Code Add a div tag around the embed code. Use th...