HTML

-

HTML- HyperText Markup Language

HTML, or HyperText Markup Language, is the standard language for creating and designing web pages. It provides the basic structure of a website by using a set of elements or tags to define different parts of the content. Here are some key points about HTML:

HTML Structure:

HTML documents are plain text files with a “.html” extension.

The basic structure of an HTML document includes the <!DOCTYPE html> declaration, the <html> element, and two main sections: <head> and <body>.

html

<!DOCTYPE html> <html>   <head>     <!– Meta tags, title, and linked stylesheets go here –>   </head>   <body>     <!– Content of the web page goes here –>   </body> </html>

HTML Elements:

HTML elements are represented by tags, enclosed in angle brackets (<>).

Tags usually come in pairs, with an opening tag and a closing tag.

Some tags are self-closing and don’t have a separate closing tag.

html

<tagname>content</tagname> <selfclosingtag />

Common HTML Tags:

<head>: Contains meta-information about the HTML document, such as title, meta tags, and linked stylesheets.

<title>: Sets the title of the HTML document, displayed in the browser’s title bar or tab.

<body>: Contains the content of the HTML document, including text, images, links, etc.

<h1> to <h6>: Define headings of different levels (1 being the largest and 6 the smallest).

<p>: Defines a paragraph.

<a>: Creates a hyperlink.

<img>: Embeds an image.

<ul>, <ol>, <li>: Define unordered and ordered lists and list items.

<div>: Defines a division or section in an HTML document.

Attributes:

HTML tags can have attributes that provide additional information about the element.

Attributes are always included in the opening tag and are usually in name/value pairs.

html

<tagname attribute=”value”>content</tagname>

Comments:

HTML comments are written between <!– and –>.

html

<!– This is a comment –>

HTML5 Semantic Elements:

HTML5 introduced semantic elements like <article>, <section>, <header>, <footer>, <nav>, and <aside>. These elements add meaning to the structure of a web page.

html

<article>   <h2>Article Title</h2>   <p>Article content goes here.</p> </article>

This is just a basic overview of HTML. It is often used in conjunction with CSS (Cascading Style Sheets) for styling and layout, and JavaScript for interactivity on the web.


The marquee tag is a HTML element which causes text to scroll up, down, left or right automatically.

The marquee tag एक एचटीएमएल घटक आहे ज्यामुळे मजकूर आपोआप वर, खाली, डावीकडे किंवा उजवीकडे स्क्रोल होतो.


Example-1

Code showing the words moving left to right-

<!DOCTYPE html>
<html>
     
<head>       
<title>HTML marquee Tag</title>    
</head>
          
<body>    
<marquee direction = “left”>Active Digital Teacher</marquee>    
</body>
      
</html>

Effect of above code-


HTML marquee Tag Active Digital Teacher

Example-2

Code showing the words moving right to left-

<!DOCTYPE html>
<html>
     
<head>       
<title>HTML marquee Tag</title>    
</head>
          
<body>    
<marquee direction = “right”>Active Digital Teacher</marquee>    
</body>
      
</html>

Effect of above code-


HTML marquee Tag Active Digital Teacher

Example- 3

See code-

<h1><span style=”font-weight : bold;”><marquee behavior=”scroll” direction=”left”scrollamount=10><span =””  style=”color:black;”> <i>Activity Work Book for XII New syllabus (With Marathi Translation) is available for sale. Do buy it as early as possible.<span =””  style=”color:blue;”> <span =””  style=”color:blue;”> Price Rs. 380 + 50 (Packing and Postage charges)= Rs.430. Discount is available on buying 25 and more copies  <span =””  style=”color:black;”> < Contact Writer:- <span =””  style=”color:green;”> Prof. Tushar Chavan from Rashtriya Junior College, Chalisgaon Dist.Jalgaon. Whats app Number: 9850737199 ,<span =””  style=”color:blue;”> Cell 9850737199. Pages in the book- 400</span></span></span></span></span></i></span></marquee></span><div dir=”ltr” style=”text-align: left;” trbidi=”on”><br /><br /></div> </h1>

Effect of the above code showing words and different colours-


Activity Work Book for XII New syllabus (With Marathi Translation) is available for sale. Do buy it as early as possible. Price Rs. 380 + 50 (Packing and Postage charges)= Rs.430. Discount is available on buying 25 and more copies < Contact Writer:- Prof. Tushar Chavan from Rashtriya Junior College, Chalisgaon Dist.Jalgaon. Whats app Number: 9850737199 , Cell 9850737199. Pages in the book- 400



Read More-

Video Editing

Web Designing

Mobile Apps for Learning English

UPI- Payment App

WordPress and Blogger


Junior College Teacher (Website)


HTML codes are the building blocks of the web. They are used for a variety of purposes, from structuring web content to embedding media. Here are some common uses of HTML codes:

Structural Markup

HTML codes are used to create the structural skeleton of a website. This includes:

  • Defining the headings (<h1> through <h6>) and paragraphs (<p>) to organize and present content.
  • Creating lists with <ul> for unordered lists, <ol> for ordered lists, and <li> for list items.
  • Dividing sections of a page using <div> and <span> to group elements and apply CSS styles.

Hyperlinks and Navigation

The <a> tag is pivotal in connecting different pages on the web:

  • Creating text links to other pages or resources.
  • Making image maps, where parts of an image link to different destinations.

Images and Multimedia

HTML codes allow embedding images and other multimedia:

  • The <img> tag is used to incorporate images into a webpage.
  • Tags such as <audio> and <video> are utilized to embed sound and video content.

Forms and User Input

HTML forms are created using various tags which facilitate user interaction:

  • <form> to create the form container.
  • Input elements like <input>, <textarea>, and <button> for text fields, text areas, and buttons.

Tables

The arrangement of data in rows and columns is done using table tags:

  • <table> to initiate a table.
  • <tr> to start a row, <th> for header cells, and <td> for table data cells.

Semantic Markup

HTML5 introduced semantic tags to better describe the content:

  • <header>, <footer>, <article>, <section>, <nav>, and <aside> tags define different parts of a web page or application with meaningful names.

Accessibility

HTML codes include attributes that enhance web accessibility:

  • The alt attribute for images provides text alternatives.
  • The lang attribute specifies the language of the content.

SEO Benefits

Search engines use HTML tags to understand the structure and relevance of content:

  • Meta tags like <title> and <meta> elements provide metadata about the HTML document, crucial for SEO.
  • Header tags are used to define important content hierarchy.

Scripting and Interactivity

HTML provides a platform to incorporate dynamic content via scripting:

  • The <script> tag embeds JavaScript or other scripting languages to add interactivity and functionality.
  • Event attributes, such as onclick and onmouseover, enable HTML elements to respond to user actions.

Integration with CSS and JavaScript

HTML is often used alongside CSS and JavaScript for:

  • Applying styles to elements with the style attribute or by connecting with external stylesheets via the <link> tag.
  • Manipulating the HTML DOM with JavaScript for real-time content updates.

Embed External Content

HTML codes can integrate external content from other services:

  • The <iframe> tag embeds content from another source, like a YouTube video or Google Map.
  • The <object> tag embeds items like Flash animations, Java applets, or PDFs.

By using these methods, HTML codes give shape to the vast majority of the content and functionality experienced on the internet.


Here’s an example of HTML code that demonstrates how to make an image move from left to right using the <marquee> tag. Please note that the <marquee> tag is a non-standard HTML element and is deprecated. It is not recommended for use in modern web design due to accessibility issues and inconsistency across different web browsers. A better approach would be to use CSS animations for this effect.

<!DOCTYPE html>
<html>
<head>
  <title>Moving Image Example</title>
</head>
<body>

<marquee direction="right"><img src="path-to-your-image.jpg" alt="Moving Image"></marquee>

</body>
</html>

Replace path-to-your-image.jpg with the actual path to your image file. The alt attribute should be a brief description of the image, used for accessibility purposes.


HTML has colour codes too. See one example below-


Previous article
Next article
Prof. Tushar Chavan
Prof. Tushar Chavanhttps://activedigitalteacher.com
I am a techno savvy person working as a Junior College Teacher at Rashtriya Junior College, Chalisgaon Dist, Jalgaon

LEAVE A REPLY

Please enter your comment!
Please enter your name here

LATEST POSTS

Educational Games

Educational Games - Play and Learn Educational games are tools designed to combine learning with engaging gameplay, helping users—especially students—develop various academic, social, or life...

Scholarship Exam

Scholarship Exam Maharashtra State - शिष्यवृत्ती परीक्षा महाराष्ट्र राज्य पूर्व उच्च प्राथमिक शिष्यवृती परीक्षा (इ. 5 वी) व पूर्व माध्यमिक शिष्यवृत्ती परीक्षा (इ. 8 वी) दि. 09...

Proverbs

Proverbs - A proverb is a folk piece of advice or suggestion expressed through short and brief sentences. Most proverbs are related to local beliefs or traditions...

AAPAR ID

AAPAR ID- Know more about it. AAPAR means - AUTOMATED PERMANENT ACADEMIC ACCOUNT REGISTRY AAPAR is based on the principle- One Nation, One Student ID The National Education Policy...

Most Popular

You cannot copy content of this page