<html>
<head>
<tile>
Basic notes of HTML
</title>
</head>
<body>

<ol>
<ol type="i">
<li>HTML</li>
<p><b>Full form :</b>

<ul>
<br><li>HTML = HyperText Markup Language </li><br>
<br><li>HTTP = HyperText Transfer Protocal Secured</li><br>
<br><li>HTTPS = HyperText Transfer Protocal</li><br></p>
</ul>
<li>Web page </li>
<p>Web page is a collection of HTML, CSS, Java Script, images to form a appropriate layout.</p>
<li>Web side</li>
<p>The web side is a collection of numbers of web pages, database, images, files, etc.</p>
</ol><hr>


<li>Tag</li>
<ol type = "i">
<li>Single tag</li>
<p> A tag which have only opening tag are called single tag Ex:br, hr, img, etc.</p>
<li>Paired tag</li>
<p> A tag which have only closing tag are called paired tag Ex:i, b, u, p, dell, sub, sup, ol, ul, dl, h1, marquee, etc</p></ol><hr>

<li>Text formating tag</li>
<p>Besically text formating is used to edit text in difference way. 
The example of text formating tag are: 
<ol type="i"><li><i>Italic= i/em</i></li><li><b>Bold= b/strong</b></li><li><u>Underline= u</u></li><li>Pragraph= p</u></li></ol></p><hr>
<li>Subscript & superscript</li>
<ol type="i">
<li>Subscript (sub)</li>
<p>Subscript is a used to make base. For example: CO<sub>2</sub></p>
<li>Subscript (sup)</li>
<p>Superscript is a used to make power. For example: a<sup>2</sup>+b<sup>2</sup></p></ol><hr>

<li>Types of list</li>
<ol type="i">
<li>Ordered list(ol)</li>
<p>The arrangement of element arrenge in sequence/order using number "1", alphabet "A", "a" and roman number "I", "i" is known as ordered list.
For example: <ol type=1><li>I am Ordered list</li></ol></p>
<li>Unordered list(ul)</li>
<p>The arrangement of element arrenge in unorder using "disc", "circle", "square" and "none" is known as unordered list.
For example: <ul type=disc><li>I am Unordered list</li></ul></p>
<li>Defination or Description list(dl)</li>
<p>The type of list which is used to explain the term is known as definition or description list.<b>Note:</b> The (dl) is used to decribe defination tag.<br>Inside (dl) tag (dt) and (dd) tag are used. The (dt) tag is used for Definatio Derm where (dd) is used for Defination Description.
For example:<br><dl><dt>I am Defination term</dt><dd>I am Defination description</dd></dl></p>
</ol><hr>

<li>Types of heading</li><p>Heading is used to give priority to text. There are six types of heading where all gives difference priority for difference text and it is paired tag. They are:<br>
<h1>I am h1</h1>
<h2>I am h2</h2>
<h3>I am h3</h3>
<h4>I am h4</h4>
<h5>I am h5</h5>
<h6>I am h6</h6>
</p><ul type="none"><li></li></ul><hr>

<li>Marquee</li>
<p>The tag which is used to creat animation of text, images and video in web page is known as marquee. 
Some main attributes of marquee are: <ol type="i"><li>direction</li><li>scrollamount</li><li>behavior</li></ol><br>
The example of marquee is:</p> <marquee direction="right" scrollamount="5" behavior="alternate">I am marquee</marquee><hr>

<li>Image(img)</li>
<p>Image tag is used to insert image in web page.<br><b>Note:</b>src is used to show the path of image with it's name and extention.
Some extention of image are: <ul type="none"><li>.png</li><li>.gif</li><li>.jpg</li><li>.jpeg</li></ul><br>
Some main attributes of image are: <ol type="i"><li>src</li><li>width</li><li>height</li><li>title</li><li>alt</li><li>align="left"/"right"/"center"</li></ol><br>
The example of image is </p>
<img src= "" width="100" height="100" align="left" title="john" alt="check your internet connection"><br><br><br><br><br><br><hr>
<li>Table</li>
<p>The arrangement of rows and column is known as table. The table row (tr) tag is used to take new line in table. In (tr) we basically used another two tag which are table heading (th) and table data (td). (th) is used to write head in table and (td) is used to write data in table. The basic attributes of table are:<br>
<ol type ="i"><li>border="1"</li><li>height="50"</li><li>width="150"</li></ol></p>
<table border="1" height="50" width="150">
<tr><th>th</th><th>th</th><th>th</th></tr><tr><td>td</td><td>td</td><td>td</td></tr><tr><td>td</td><td>td</td><td>td</td></tr><tr><td>td</td><td>td</td><td>td</td></tr></table><br>

<ol type="i">
<li>Colspan</li>
<p>Colspan is the attribute of (tr) tag which is used to merge the number of row in table.For example we merged 3 (th) row in following table.</p>
<table border="1" height="50" width="150">
<tr>
<th colspan="3">th</th>
<th>th</th>
<th>th</th>
<th>th</th>
<th>th</th>

</tr>
<tr>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
<tr>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
<tr>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
</tr><tr>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
</table><br>
<li>Rowspan</li>
<p>Rowspan is the attribute of (td) tag which is used to merge number of column in table.For example we merged 1 (th) and 5 (td) column in following table.</p>
<table border="1"

HTML Online Editor & Compiler

Write, Run & Share HTML code online using OneCompiler's HTML online Code editor for free. It's one of the robust, feature-rich online Code editor for HTML language, running on the latest version HTML5. Getting started with the OneCompiler's HTML compiler is simple and pretty fast. The editor shows sample boilerplate code when you choose language as HTML. You can also specify the stylesheet information in styles.css tab and scripts information in scripts.js tab and start coding.

About HTML

HTML(Hyper Text Markup language) is the standard markup language for Web pages, was created by Berners-Lee in the year 1991. Almost every web page over internet might be using HTML.

Syntax help

Fundamentals

  • Any HTML document must start with document declaration <!DOCTYPE html>
  • HTML documents begin with <html> and ends with </html>
  • Headings are defined with <h1> to <h6> where <h1> is the highest important heading and <h6> is the least important sub-heading.
  • Paragrahs are defined in <p>..</p> tag.
  • Links are defined in <a> tag.

    Example:

    <a href="https://onecompiler.com/html">HTML online compiler</a>
  • Images are defined in <img> tag, where src attribute consists of image name.
  • Buttons are defined in <button>..</button> tag
  • Lists are defined in <ul> for unordered/bullet list and <ol> for ordered/number list, and the list items are defined in <li>.

HTML Elements and Attributes

  • HTML element is everything present from start tag to end tag.
  • The text present between start and end tag is called HTML element content.
  • Anything can be a tagname but it's preferred to put the meaningful title to the content present as tag name.
  • Do not forget the end tag.
  • Elements with no content are called empty elements.
  • Elements can have attributes which provides additional information about the element.
  • In the below example, href is an attribute and a is the tag name.

    Example:

    <a href="https://onecompiler.com/html">HTML online compiler</a>

CSS

CSS(cascading style sheets) describes how HTML elements will look on the web page like color, font-style, font-size, background color etc.

Example:

Below is a sample style sheet which displays heading in green and in Candara font with padding space of 25px.

body{
  padding: 25px;
}
.title {
	color: #228B22;
	font-family: Candara;
}

HTML Tables

  • HTML Tables are defined in <table> tag.
  • Table row should be defined in <tr> tag
  • Table header should be defined in <th> tag
  • Table data should be defined in <td> tag
  • Table caption should be defined in <caption> tag

HTML-Javascript

  • Javascript is used in HTML pages to make them more interactive.
  • <script> is the tag used to write scripts in HTML
  • You can either reference a external script or write script code in this tag.

Example

<script src="script.js"></script>