HTML is the abbreviation of HyperText Markup Language. We use this language for developing the Website in HTML using tags.

It is very easy to use you can create your own website after learning the following tags.

Use Green Colour Text for HTML coding

Copy and paste the following codes in the notepad and type your own code under the body tags  

<!DOCTYPE html>
<html>
<body>

Type your code here

</body>
</html>

List of HTML tags

  1. <!–…–>
    1. Add a comment in the editing source that will not appear in the browse output
    2. <!–This is a comment. It will not appear in the browser –>
    3. <p>This paragraph will appear in the browser </p>
  2. <!DOCTYPE>
    1. Tell the browser about the document type. Add this tag at the start of the HTML document.
    2. <!DOCTYPE HTML>

Tags starting with the letter a

  1. <a> “<a href>”
    1. Create a hyperlink
    2. Click Me to open our website home page in the new tab
    3. <a href =”https://www.lunarcomputercollege.com/” target =”_blank”>Click Me</a> to open our website home page in the new tab.
  2. <abbr>
    1. Popup a full form of an abbreviation on a mouse rollover on the abbreviation. 
    2. Welcome to the LCC for computer training courses.
    3. Welcome to the <abbr title=”Lunar Computer College”>LCC</abbr> for computer training courses.
  3. <address>
    1. Use this tag to add your address information to the webpage.

    2. Our Address

      Mail to Rana Mehtab Alam.
      Visit us at:
      lunarcomputercollege.com
      City XYZ,
      Country ……
    3. <h1>Our Address</h1>
      <address>
      Written by <a href=”mailto:example@example.com”>Rana Mehtab Alam</a>.<br>
      Visit us at:<br>
      lunarcomputercollege.com<br>
      City XYZ, <br>
      Country ……
      </address>
  4. <area>
    1. You can create a clickable image area to open multiple links

    3. <!DOCTYPE html>
      <html>
      <body>
      <img src=”https://www.lunarcomputercollege.com/wp-content/uploads/2022/01/abc.jpg” usemap=”#abcmap”>
      <map name=”abcmap”>
      <area shape=”rect” coords=”118,40,322,88″ target=”_blank” href=”https://www.lunarcomputercollege.com/autocad/”>
      <area shape=”circle” coords=”101,162,62″ target=”_blank” href=”https://www.lunarcomputercollege.com/free-children-stories/a-greedy-dog-modern-age-story/”>
      <area shape=”polygon” coords=”357,119,301,211,412,210″ target=”_blank” href=”https://www.lunarcomputercollege.com/c/”>
      </map>
      </body>
      </html>
       
  5. <article>
      1. You can use this tag to make your paragraph friendly readable, as you are typing any article.

      2. The article tag

        CCA

        Certificate in Computer Applications. This short course is very useful for all. Lunar Computer College is offering CCA in three months for boys and girls. You can also visit our website and watch our YouTube channel by searching Lunar Computer College on Google or YouTube

        CCAG

        Certificate in Computer Applications Graphics. This course is very useful for all. Lunar Computer College is offering CCAG in six months for boys and girls. After completing this course you will be able to get a job and do freelancing in computer operating as well as in graphics designing. You can also visit our website and watch our YouTube channel by searching Lunar Computer College on Google or YouTube

        CIT

        Certificate in Information Technology. Lunar Computer College is offering an advanced one-year computer training course. After completing this course you can work as a computer operator, graphics designer, computer programmer, networker, website developer, YouTuber and freelancer. 

      3. <h1>The article tag</h1><article>
        <h2>CCA</h2>
        <p>Certificate in Computer Applications. This short course is very useful for all. Lunar Computer College is offering CCA in three months for boys and girls. You can
        also, visit our website and watch our YouTube channel by searching Lunar Computer College on Google or YouTube</p>
        </article><article>
        <h2>CCAG</h2>
        <p>Certificate in Computer Applications Graphics. This course is very useful for all. Lunar Computer College is offering CCAG in six months for boys and girls. After
        completing this course you will be able to get a job and do freelancing in computer operating as well as in graphics designing. You can also, visit our website and
        watch out YouTube channel by searching Lunar Computer College on Google or YouTube</p>
        </article><article>
        <h2>CIT</h2>
        <p>Certificate in Information Technology. Lunar Computer College is offering an advanced one-year computer training course. After completing this course you can
        work as a computer operator, graphics designer, computer programmer, networker, website developer, YouTuber and freelancer </p>
        </article>

 

 

<marquee>

marquee Tag HTML

By using a marquee tag we can scroll the text according to our needs.

 

We can use the following attributes with a marquee tag;

<marquee>Continue Scrolling the text from the right side to the left side of the screen.</marquee>

 

<marquee behavior = “alternate”>Continue Scrolling the text from the right side to the left side and then the left side to the right side of the screen.</marquee>

 

 

<marquee width=”100%” direction=”down” height=”150px”>
This is a sample scrolling text in the upper direction.
</marquee>

 

Note:- You can use scrollamount = “x” to control the scrolling speed.

Replace x with 1 for slow scrolling, change the number to see the speed of scrolling. 

1 = slow

Note:- Increasing scrolling speed as you increase the number from 1 to 100.

Rainbow background html code

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(45deg, violet, indigo, blue, green, yellow, orange, red);
animation: rainbowAnimation 5s linear infinite; /* Optional: Add animation for a dynamic effect */
}

@keyframes rainbowAnimation {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}

.content {
font-size: 24px;
font-weight: bold;
color: white; /* Optional: Set text color */
}
</style>
</head>
<body>
<div class=”content”>Replace Your Text with this Text</div>
</body>
</html>

HTML Digital Clock and Date tags and Coding

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}

#digital-clock {
font-family: ‘Arial’, sans-serif;
font-size: 2em;
color: #333;
}

#current-date {
font-family: ‘Arial’, sans-serif;
font-size: 1.5em;
color: #555;
}
</style>
<title>Digital Clock and Date</title>
</head>
<body>
<div id=”digital-clock”></div>
<div id=”current-date”></div>

<script>
function updateClockAndDate() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var day = now.getDate();
var month = now.getMonth() + 1; // Months are zero-indexed
var year = now.getFullYear();

// Add leading zeros if needed
hours = (hours < 10) ? “0” + hours : hours;
minutes = (minutes < 10) ? “0” + minutes : minutes;
seconds = (seconds < 10) ? “0” + seconds : seconds;
day = (day < 10) ? “0” + day : day;
month = (month < 10) ? “0” + month : month;

var timeString = hours + “:” + minutes + “:” + seconds;
var dateString = day + “/” + month + “/” + year;

document.getElementById(“digital-clock”).innerText = timeString;
document.getElementById(“current-date”).innerText = dateString;
}

// Update the clock and date every second
setInterval(updateClockAndDate, 1000);

// Initial call to display the clock and date immediately
updateClockAndDate();
</script>
</body>
</html>

 

Age and Zodiac Sign Calculator with Birthday Wish

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Birthday Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}

h2 {
color: #333;
}

p {
margin: 5px 0;
}Birthday Calculator

#output {
font-weight: bold;
color: #007BFF;
}
</style>
</head>
<body>
<h2>Age and Zodiac Sign Calculator with Birthday Wish
</h2>
<label for=”dob”>Enter your date of birth:</label>
<input type=”date” id=”dob” max=”9999-12-31″>
<button onclick=”calculateAge()”>Calculate</button>

<div id=”output”></div>

<script>
function calculateAge() {
var dobInput = document.getElementById(‘dob’);
var dob = new Date(dobInput.value);
var today = new Date();

var ageInMilliseconds = today – dob;
var ageInSeconds = ageInMilliseconds / 1000;
var ageInMinutes = ageInSeconds / 60;
var ageInHours = ageInMinutes / 60;
var ageInDays = ageInHours / 24;
var ageInMonths = ageInDays / 30.44; // Average days in a month

var years = Math.floor(ageInDays / 365);
var months = Math.floor(ageInMonths % 12);
var days = Math.floor(ageInDays % 30.44);

var dayOfWeek = dob.toLocaleDateString(‘en-US’, { weekday: ‘long’ });

var zodiacSign = getZodiacSign(dob.getMonth() + 1, dob.getDate());

var outputDiv = document.getElementById(‘output’);
outputDiv.innerHTML = `
<p>Your age is: ${years} years, ${months} months, and ${days} days.</p>
<p>You were born on a ${dayOfWeek}.</p>
<p>Your zodiac sign is ${zodiacSign}.</p>
`;

// Check if it’s the user’s birthday
var currentMonth = today.getMonth() + 1;
var currentDay = today.getDate();

if (dob.getMonth() + 1 === currentMonth && dob.getDate() === currentDay) {
outputDiv.innerHTML += `<p>Happy Birthday!</p>`;
} else {
// Calculate days until next birthday
var nextBirthday = new Date(today.getFullYear(), dob.getMonth(), dob.getDate());
if (today > nextBirthday) {
nextBirthday.setFullYear(nextBirthday.getFullYear() + 1);
}
var daysUntilBirthday = Math.floor((nextBirthday – today) / (1000 * 60 * 60 * 24));

outputDiv.innerHTML += `<p>Your birthday is in ${daysUntilBirthday} days.</p>`;
}
}

function getZodiacSign(month, day) {
// Zodiac sign start dates
var signStartDates = [
[3, 21], [4, 20], [5, 21], [6, 21], [7, 23], [8, 23],
[9, 23], [10, 23], [11, 22], [12, 22], [1, 20], [2, 19]
];

var zodiacSigns = [
‘Aries’, ‘Taurus’, ‘Gemini’, ‘Cancer’, ‘Leo’, ‘Virgo’,
‘Libra’, ‘Scorpio’, ‘Sagittarius’, ‘Capricorn’, ‘Aquarius’, ‘Pisces’
];

for (var i = 0; i < signStartDates.length; i++) {
if ((month === signStartDates[i][0] && day >= signStartDates[i][1]) || (month === signStartDates[(i + 1) % 12][0] && day < signStartDates[(i + 1) % 12][1])) {
return zodiacSigns[i];
}
}

return ”;
}
</script><br><br><br><br><br><br><br><br><br><br>
Rana Mehtab Alam<br>

Lunar Computer College<br>

www.lunarcomputercollege.com<br>

www.youtube.com/lunarcomputercolege<br>

www.facebook.com/lunarcomputercollege

</body>
</html>

 

How to create the first web page in HTML?

♣ We can use Notepad as an HTML Editor

Step 1. Open Notepad

Step 2. Type the following in the notepad

<html>
<head>
<title>
My First webpage
</title>
</head>

<body>
Welcome to My First Web Page

</body>
</html>

How to save the HTML page?

In the notepad click on the File then click on the Save or Press Ctrl + S 

⇒save this with .html extension

for example myfirstweb.html

Your first webpage is ready, double click on it to view it in the web browser.

 

HTML Videos

 

Home   English   Courses    Computer     Free Children Stories