HTML or Hypertext Markup Language is a language of marks used for the making of web pages and other types of web content. HTML is a framework of web content such as text, images, videos, and links, and it has the capability to define how the content should be displayed on the web. HTML was initially brought to the table in 1991 by Tim Berners-Lee, a British computer scientist who is considered to be the father of the World Wide Web. HTML origin belongs to Berners-Lee as it was an invention through which the sharing of information between researchers at (CERN) was made a lot simpler. At the very beginning, HTML, like the first technology, was very simple, and composed just a few tags such as paragraph p and line break br. But as the web got more popularity, HTML also became more complex and some new features were added to the language.
One of the maximum large additions to HTML was the advent of Cascading Style Sheets (CSS), which allow web designers to separate the presentation of a web page from its content. This allows for greater bendy and responsive internet layout. Another fundamental development in HTML became the creation of HTML5 in 2014. HTML5 delivered new capabilities consisting of video and audio playback, new semantic elements for progressed accessibility and search engine optimization, and new form controls for better user enjoy. Over the years, HTML has persevered to conform to meet the converting needs of the internet. HTML is now extensively used and is supported through all primary net browsers. While there are actually other technology used to create net content material, together with JavaScript and server-aspect scripting languages, HTML remains a fundamental language for creating net pages and internet content.
HTML Editors:
HTML editors are software applications that allow developers and designers to create and edit HTML documents, web pages, and web content. There are many different HTML editors available, ranging from simple text editors to feature-rich, specialized web design tools.
Here are some popular HTML editors:
- Notepad++:This is a free and open-source text editor for Windows that supports multiple programming languages, including HTML.
- Sublime Text: This is a cross-platform text editor with a customizable interface, syntax highlighting, and advanced search and replace features.
Adobe Dreamweaver: This is a popular web design tool that allows designers to create and edit HTML, CSS, and JavaScript code visually.
- Visual Studio Code: This is a free, open-source code editor that supports a wide range of programming languages, including HTML.
- Atom: This is another free, open-source code editor that offers a range of features for web development, including syntax highlighting, code folding, and multiple panes.
- Brackets: This is a free, open-source code editor designed specifically for web development, with a live preview feature that allows developers to see changes in real-time.
- Bluefish: This is a powerful and feature-rich editor for web designers and programmers, supporting a wide range of languages including HTML, CSS, PHP, and JavaScript.
- Komodo Edit: This is a free, open-source code editor with a range of features, including syntax highlighting, code folding, and auto-completion.
HTML Basics:
HTML Tags:
HTML tags are used to define elements within a document. HTML tags consist of angle brackets (<>) with the tag name inside. Tags can also have attributes that provide additional information about an element. For example, the (p) tag is used to define a paragraph, and it can have attributes such as “class” or “id” to provide additional information about the paragraph.
HTML Documents:
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>.
Here is simple HTML Document
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is My First Program.</p>
</body>
</html>
Output:
HTML Headings:
In HTML, headings are used to outline the significance of a section of textual content. Headings range from <h1> to <h6>, with <h1> being the most crucial and <h6> being the least critical. Here is a top level view of various heading tags in HTML:
Try the following example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Headings</title>
</head>
<body>
<h1>This is an H1 heading</h1>
<h2>This is an H2 heading</h2>
<h3>This is an h2 heading</h3>
<h4>This is an H4 heading</h4>
<h5>This is an H5 heading</h5>
<h6>This is an H6 heading</h6>
</body>
</html>
Output:
HTML Paragraph:
HTML paragraphs are defined with the <p> tag: Here is an example how to create HTML Paragraph:
<!DOCTYPE html>
<html>
<head>
<title>My HTML Page</title>
</head>
<body>
<p>Too many thoughts on my mind, i cant sleep at night so i just keep writing.</p>
<p>I don’t need no help i don’t need no opinion so don’t waste my time.</p>
</body>
</html>
Output:
HTML Links:
In HTML hyperlinks are used to connect one internet web page to another, or to hyperlink to distinctive components of the equal internet web page. Here is an example of a way to create a link in HTML:
<!DOCTYPE html>
<html >
<head>
<title>My Website </title>
</head>
<body>
<h1> Welcome to Master Tech Education! </h1>
<p>Here's a link to <a href="https://www.mastertecheducation.com">Master Tech Education.</a></p>
</body>
</html>
Output:
HTML Image Tag:
In HTML, images can be displayed on a web page using the img tag.
<img> is the HTML tag used to display an image, src is the attribute used to specify the URL of the image.
Try the following example:
<!DOCTYPE html>
<html >
<head>
<title>My Website </title>
</head>
<body>
<h1> Welcome to The Master Tech!</h1>
<p>Here's an image:</p>
<img decoding="async" src=" " alt="Flowers in Chania">
</body>
</html>
Output:
HTML Elements:
HTML uses various elements to structure content, such as text, images, videos, and links. Here are some common HTML elements:
- <html>: the root element that encloses all other elements.
- <head>: contains information about the document, such as the title and metadata.
- <body>:contains the visible content of the document.
- <h1> to <h6> :heading elements that indicate the level of importance of text.
- <p>: paragraph element for text content.
- <img>: image element for embedding images.
- <a>:anchor element for creating hyperlinks.
- <ul>: unordered list element.
- <ol>: ordered list element.
- <li>:list item element for both ordered and unordered lists.
- <div>:division element that defines a section of the page.
- <span>: inline element that defines a small section of text.
- <form>: element that defines a form for user input.
- <input>: element for user input such as text, radio buttons, checkboxes, etc.
- <button>:element for creating a clickable button.
HTML Attributes:
HTML attributes are additional properties that can be added to an HTML element to modify its behavior or appearance. Here are some common HTML attributes:
- id: a unique identifier for an element.
- class: a group identifier for one or more elements.
- style : inline styling for an element.
- src:the source URL for an image or media element.
- href: the destination URL for a link.
- alt:alternative text for an image, displayed when the image cannot be loaded.
- title: a tooltip displayed when hovering over an element.
- value: the value of an input field or button.
- type: the type of input field or button, such as text, password, submit, etc.
- name : the name of an input field, used when submitting a form.
- checked: for a checkbox or radio button, indicates whether it is checked or not.
- disabled: disables an input field or button.
- maxlength: the maximum length of characters allowed in an input field.
- placeholder: text displayed in an input field before any text is entered.
- target: determines where to open the link, such as in a new tab or window.
HTML Style:
HTML style is a way to apply styling to HTML elements, allowing you to control the visual appearance of your web page. There are a few different ways to add styles to HTML elements, but one common method is to use the “style” attribute within the opening tag of the HTML element you want to style.
Here is an example how to styling the HTML document:
<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
</body>
</html>
Output:
Here is an another Program:
<!DOCTYPE html>
<html>
<body>
<p>How to use the style tag:.</p>
<p style="color:red;">Master Tech Education.</p>
<h1 style="color:blue;">ThewebRise- Digital Marketing Solutions:</h1>
<!-- <p style="font-size:50px;">I am big</p>
<h2 style="color:yellow;font-family: algerian;"> HTML sands for hyper text markup langage.</h2>
</body>
</html>
Output:
HTML Style Attribute:
The HTML style attribute is used to define inline styles for an HTML element. This attribute is used to specify the presentation of an element, such as its font size, color, border, etc. The style attribute can be added to any HTML tag, and it contains a set of CSS property-value pairs separated by semicolons.
Try the following example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML style Attribute</title>
</head>
<body>
<p style="font-size: 16px; font-family: Arial, sans-serif; color: blue;">This text will be displayed in 16px Arial font and blue color.</p>
<div style="background-color: #f2f2f2;">This div has a light gray background color.</div>
<p style="text-align: center;">This text is centered.</p>
<h1 style="font-style: italic; font-weight: bold;">This heading is in bold and italic font.</h1>
<h2>This is Image Tag</h2> <img decoding="async" src="https://c4.wallpaperflare.com/wallpaper/286/199/626/movie-marvel-studios-hd-wallpaper-preview.jpg" style="border: 1px solid black; padding: 5px;">
</body>
</html>
Output:
Background Color:
The background color of an HTML document or element can be set using CSS. The background color is the color that appears behind the content of an HTML document.
Here is an Example:
<!DOCTYPE html>
<html>
<body style="background-color:skyblue;">
<h1>Too Many thoughts on my mind.</h1>
<p>I cant sleep at night So i just keep Writing.</p>
</body>
</html>
Output:
Here is another example:
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Colors Example</title>
</head>
<body>
<p style="background-color: red;">This is a red paragraph.</p>
<p style="background-color: blue;">This is a blue paragraph.</p>
<p style="background-color: green;">This is a green paragraph.</p>
<p style="background-color: purple;">This is a purple paragraph.</p>
<p style="background-color: orange;">This is an orange paragraph.</p>
</body>
</html>
Output:
HTML Text Color:
Text color in HTML can be set using CSS, we can also add the text color using the <style> tag. The color property is used to set the color of text.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Colors Example</title>
</head>
<body>
<p style="color: red;">This is a red paragraph.</p>
<p style="color: blue;">This is a blue paragraph.</p>
<p style="color: green;">This is a green paragraph.</p>
<p style="color: purple;">This is a purple paragraph.</p>
<p style="color: orange;">This is an orange paragraph.</p>
</body>
</html>
Output:
HTML Fonts:
HTML provides several ways to define the font family, size, and style for text. You can define the font family and size for the entire document or specific elements using CSS.
Here’s an example of how to set the font family and size for the entire document:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Welcome to my website</h1>
<p style = "font-size:35px;font-family:monotype corsiva">This is an example of setting the font family and size for the entire document.</p>
</body>
</html>
Output:
Example no. 2:
<!DOCTYPE html>
<html>
<head>
<title>Font Example</title>
</head>
<body>
<h1 style="font-family: Georgia, serif; font-size: 32px; font-weight: bold;">Welcome to my website</h1>
<p style="font-family: 'Times New Roman', Times, serif; font-size: 18px; font-style: italic;">This is an example of setting different fonts for different elements.</p>
<p style="font-family: Verdana, Geneva, sans-serif; font-size: 24px; font-weight: bold; text-transform: uppercase;">This paragraph has a special font.</p>
<p style="font-family: Arial, sans-serif; font-size: 16px;">This paragraph has a different font style and size.</p>
<p style="font-family: Tahoma, Geneva, sans-serif; font-size: 20px;">And this paragraph has yet another font style and size.</p>
</body>
</html>
Output:
Text Size:
HTML provides a few ways to set the size of text on a web page. Try the following example:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;"> Its a Heading Area, Chill Dude.</h1>
<p style="font-size:160%;">Its a paragraph.</p>
</body>
</html>
Output:
