Learn Html It's Free.
HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).
"Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.
What is HTML used for?
HTML (Hypertext Markup Language) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables.
What HTML means?
Alternative Title: hypertext markup language. HTML, in full hypertext markup language, a formatting system for displaying material retrieved over the Internet. Each retrieval unit is known as a Web page (from World Wide Web), and such pages frequently contain hypertext links that allow related pages to be retrieved.
Is HTML a programming language?
HTML, as a markup language doesn't really “do” anything in the sense that a programming language does. HTML contains no programming logic. This is because HTML is not a programming language.
An HTML element is set off from other text in a document by "tags", which consist of the element name surrounded by "<" and ">". The name of an element inside a tag is case insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the < title > tag can be written as < Title >, < TITLE >, or in any other way
TAGS
HTML Comment Tags
Single Line Comment:
< !-- Write your comments here -->
multiline comments:
< !-- Do not display this image at the moment
< img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
Boilerplate
Boilerplate text, or simply boilerplate, is any written text (copy) that can be reused in new contexts or applications without significant changes to the original. The term is used in reference to statements, contracts and computer code, and is used in the media to refer to hackneyed or unoriginal writing.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
</body>
</html>
- The Document Type Declaration < !DOCTYPE html> is for HTML5.
- The text between < html> and < /html> describes the web page.
- The text between < body> and < /body> is the visible page content.
- The markup text < title>This is a title< /title> defines the browser page title shown on browser tabs and window titles.
- The tag < div> defines a division of the page used for easy styling.
Elements
HTML uses "markup" to annotate text, images, and other content for
display in a Web browser. HTML markup includes special "elements"
such as < head>, < title>, < body>, < header>, < footer>, < article>,
< section>, < p>, < div>, < span>, < img>, < aside>, < audio>, < canvas>,
< datalist>, < details>, < embed>, < nav>, < output>, < progress>, < video>,
< ul>, < ol>, < li> and many others.
HTML documents imply a structure of nested HTML elements.
- An element is indicated by a pair of tags: a "start tag" < p> and "end tag" < /p>
- < img> < img src="example.com/example.jpg">
- Header of the HTML document: < head>...< /head>. The title is included in the head, for example:
<head>
<title>The Title</title>
<link rel="stylesheet" href="stylebyjimbowales.css" /> <!-- Imports Stylesheets -->
</head>
Headings
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
<p>Paragraph 1</p> <p>Paragraph 2</p>
<p>This <br> is a paragraph <br> with <br> line breaks<p>
<a href="https://www.wikipedia.org/">A link to Wikipedia!</a>
Attributes
Most of the attributes of an element are name-value pairs, separated by = and written within the start tag of an element after the element's name.
ID
The id attribute provides a document-wide unique identifier for an element. This is used to identify the element so that stylesheets can alter its presentational properties, and scripts may alter, animate or delete its contents or presentation. Appended to the URL of the page, it provides a globally unique identifier for the element, typically a sub-section of the page. For example, the ID "Attributes" in https://codingstufftamil/html.html/#Atteibutes.
<-- HTML Id - Syntax-->
<p id="one";></p>
Class
The class attribute provides a way of classifying similar elements.
This can be used for semantic or presentation purposes. For example, an
HTML document might semantically use the designation
<-- HTML Class - Syntax-->
<p class="one";></p>
IMG & LINKS
HTML Links - Hyperlinks
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a
little hand.
Links
HTML Links - The target Attribute The target attribute can have one of the following values:
< HTML Links - Syntax>
<a href="url">link text</a>
<a href="https://codingstufftamil.in/" target="_blank">Visit codingstuff.in!</a>
<h2----Absolute URLs vs Relative URLs----/h2>
<h2>Absolute URLs</h2>
<p><a href="https://codingstufftamil">CST</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images<a><p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>
HTML Links - Use an Image as a Link
<a
href="default.asp" >
<img src="stuff.gif" alt="HTML tutorial" >
</a>
<img src="coding.jpg" alt="Flowers in Chania" >
<img src="/images/warmp.gif" alt="HTML5 Icon" >
Table
The <table> tag defines an HTML table. Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table data/cell is defined with a <td> tag.
<table>
<tr>
<th>Abbreviation</th>
<th>File Format</th>
<th>File Extension<th>
<tr>
<tr>
<td>GIF</td>
<td>Graphics Interchange Format</td>
<td>.gif</td>
</tr>
<tr>
<td>ICO</td>
<td>Microsoft Icon</td>
<td>.ico, .cur</td>
</tr>
<tr>
<td>JPEG</td>
<td>Joint Photographic Expert Group image</td>
<td>.jpg, .jpeg, .jfif, .pjpeg, .pjp</td>
</tr>
<tr>
<td>PNG</td>
<td>Portable Network Graphics</td>
<td>.png</td>
</tr>
<tr>
<td>SVG</td>
<td>Scalable Vector Graphics</td>
<td>.svg</td>
</tr>
</table>
output shown above
File Path
LIST
HTML lists allow web developers to group a set of related items in lists.
HTML Description Lists
The <dl> tag defines the description list, the <dt> tag defines the term
(name), and the <dd> tag describes each term:
Unordered HTML List
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Discription List
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
o/p
Coffee
- black hot drink
Milk
- white cold drink
Block & Inline
Block
Block-level Elements
A block-level element always starts on a new line.
A block-level element always takes up the full width available
(stretches out to the left and right as far as it can).
A block level element has a top and a bottom margin, whereas an inline
element does not.
<div>Hello World</div>
<address><article><aside><blockquote><canvas><div><dd><dl><dt><fieldset>
<figcaption><figure><footer><form><h1>-<h6><header><hr><li><main><nav>
<noscript><ol><p><section><foot><ul><li>
Inline
An inline element only takes up as much width as necessary.
<spam>Hello World</span>
<a><abbr><acronym><br><bdo><big><b><button><cite><code><dfn><em><i>
<img><input><kbd><label><map><object><output><q><samp><script><section>
<small><strong><sub><textarea><time><tt><var>
eg for DIV:
<div>style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city
in the United Kingdom, with a metropolitan area of over 13 million
inhabitants.</p>
</div>
eg for SPAN:
<p>My mother has <span style="color:blue;font-weight:bold">blue</span>
eyes and my father has <span
style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>
Forms
A webform, web form or HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields.
<form action="/action_page.php">
<label> for="fname">First name:</label><br>
<input> type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<label> type="text" id="lname" name="lname" value="Doe"><br><br>
<input> type="submit" value="Submit">
</form>
Type Description
<input type="text"> Displays a single-line text input field.
<input type="radio"> Displays a radio button (for selecting one of
many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more
of many choices)
<input type="submit"> Displays a submit button (for submitting the
form)
<input type="button"> Displays a clickable button
The <label> element is useful for screen-reader users, because the
screen-reader will read out loud the label when the user focus on the
input element.
Video, Audio, iFrame
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
Related Articles
-
Learn HTML It's Essential.
-
Basics Of CSS.
Adhuc quaerendum est ne, vis ut harum tantas noluisse, id suas iisque mei. Nec te inani ponderum vulputate, facilisi expetenda has et. Iudico dictas scriptorem an vim, ei alia mentitum est, ne has voluptua praesent.
Sumo euismod dissentiunt ne sit, ad eos iudico qualisque adversarium, tota falli et mei. Esse euismod urbanitas ut sed, et duo scaevola pericula splendide. Primis veritus contentiones nec ad, nec et tantas semper delicatissimi.
Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.