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 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-
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-
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-
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
altattribute for images provides text alternatives. - The
langattribute 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
onclickandonmouseover, 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
styleattribute 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-
