Html
HTML stands for “Hyper Text Markup Language” which is used for creating web page and web site. HTML is widely use in web page or application, we can create static website using only. In this time html latest version is available “HTML5”.
Syntax for HTML5.
<!DOCTYPE>
<html>
<head>
<title>Web page title</title>
</head>
<body>
<h1>this is heading</h1>
<p>this is paragraph</p>
</body>
</html>
<!DOCTYPE>: This define the HTML5, latest version of html.
<html > :This tag informs the browser that it is an HTML document. Text between html tag describes the web document. It is a container for all other elements of HTML except <!DOCTYPE>
<head>: It should be the first element inside the <html> html tag, which contains the metadata(information about the document). It must be closed before the body tag opens.
<title>: As its name suggested, it is used to add title of that HTML page which appears at the top of the browser window. It must be placed inside the head tag ;
<body> : Text between body tag describes the body content of the page that is visible to the end user. This tag contains the main content of the HTML document.
<h1> : Text between <h1> tag describes the first level heading of the webpage.
<p> : Text between <p> tag describes the paragraph of the webpage.
Features of HTML
1. It is very easy and simple. It can be easily read and modified.
2. It has lot of formatting tag for designing a web sites.
3. HTML is a case-insensitive language. In other language HTML tags are write in lower case or upper case.
4. It is a platform independent because it can display on any platform (window, Linux, and Mac).
5. It has one best feature for linking a one page to another page using “Anchor Tag”.
6. It is markup language so it provide flexible way to design a web page.
7. It has facility to add Graphics, Video, and Sound in web page by programmer.
8. It has facility to add Graphics, Video, and Sound in web page by programmer.
Building Blocks
A webpage consist these three things
• Tags
• Attributes
• Elements
Syntax for Tags in HTML –
< tag-name attribute-name=” value “> content < / tag-name>
Example of Tags-
<p align=”center” > this is a paragraph </p>
Tags in HTML –
HTML tags are like keyword which define how web browser will format and display the content. When a web browser read html document top to bottom and right to left, after reading the document web browser render tag properties. Each tag has different properties.
HTML has two tags.
1. Unclosing tags
• <br> - it used for break the line of code
• <hr> - it used for put a line across the webpages
2. Closed tags
• Meta tags
o Title, meta, link, style
• Text tag
o P, h1 – h6, strong, em, abbr, address, cite, q, code, b, I,
• Link tags
o A, link, base
• Image or object tags
o Img, area, map, param, object
• List tags
o Ul, ol, li, dd, dt,dl
• Table tags
o Table, td, tr, tbody, thead, tfoot, col, caption
• Form tags
o Form, input, textarea, select, option, button, label, fielsset,
• Script tags
o Script and noscript
HTML attributes –
1. Html attributes are special word which provide decoration of content on html page.
2. Each element have some specific attributes
3. The attribute are always used with name and value
4. Attribute always apply on start tags
5. We can add multiple value in attribute with separating each value with space
6. The attributes are always written in lower-case
Syntax of attribute –
<tags-name attribute-name=” values ” > content </ tag-name>
Or
<tags-name attribute-name=” key1=values1; key2=value2;--- ” > content </ tag-name>
Example of attribute and tags of HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style='height: 10px; color: blue'>It will add style property in element</p>
<p style='color: red'>It will change the color of content</p> </br>
<a href='https://www.javatpoint.com/html-anchor'>This is a link</a></br>
<img src='whitepeacock.jpg' height='100' width='100'>
<hr>
</br>
<a href='https://www.mindstick.com/'>MindStick Software pvt ltd</a>
</body>
</html>
Create a form using HTML –
<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta charset='UTF-8' />
<meta name='description' content='demo page' />
<meta name='keywords' content='HTML, CSS, JavaScript' />
<meta name='author' content='Ravi Vishwakarma' />
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
<title>MindStick form demo fo html</title>
</head>
<body>
<form action='' method='get'>
<table align='center' width='100%' height='100%' border='0'>
<tr>
<td align='center' colspan='2'>
<h1>Form in table</h1>
</td>
</tr>
<tr>
<td>Name : </td>
<td>
<input type='text' name='name' placeholder='Enter your name ' /></td>
</tr>
<tr>
<td>Password : </td>
<td>
<input type='password' name='password' placeholder='Enter your password' /></td>
</tr>
<tr>
<td>Contectno : </td>
<td>
<input type='tel' name='telephone' placeholder='Enter your contect no' /></td>
</tr>
<tr>
<td>Date name : </td>
<td>
<input type='date' name='date' placeholder='Enter your mother name' /></td>
</tr>
<tr>
<td>Select Gender : </td>
<td>Famale
<input type='radio' name='gender' value='Female' />
Male
<input type='radio' name='gender' value='Male' /></td>
</tr>
<tr>
<td>Select Course : </td>
<td>
<select style='width: 100px;' name='course'>
<option value='Java'>Java</option>
<option value='C'>C</option>
<option value='C++'>C++</option>
<option value='C#'>C#</option>
<option value='.NET'>.NET</option>
</select>
</td>
</tr>
<tr>
<td colspan='2'>
<input type='checkbox' value='checked' style='margin-left: 35%;' name='check' />Check the term and condition
</td>
</tr>
<tr>
<td colspan='2'>
<input type='submit' value='Submit' style='margin-left: 35%;' />
<input type='button' value='Cancel' /></td>
</tr>
</table>
</form>
</body>
</html>
Output –
Text and link tags
<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta charset='UTF-8' />
<meta name='description' content='demo page' />
<meta name='keywords' content='HTML, CSS, JavaScript' />
<meta name='author' content='Ravi Vishwakarma' />
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
<link rel='stylesheet' href='style.css' type='text/css'/>
<title>MindStick form demo for html</title>
</head>
<body>
<p>this is paragraph</p>
<h1>Heading H1</h1>
<h2>Heading H2</h2>
<h3>Heading H3</h3>
<h4>Heading H4</h4>
<h5>Heading H5</h5>
<h6>Heading H6</h6>
<strong>this is strong tags like bold </strong>
<em> emphasis word with em tags</em>
<abbr title='Hyper Text Markup Language'>HTML</abbr>
<address>this is address tag in html</address>
<cite>this is cite tag in html</cite>
<q>this is q tag in html for including the double quates</q><br />
<pre><code>
using system;
namespace ClassDemo{
class ClassName{
static void Main()
{
Console.WriteLine('This is code tag');
}
}
</code></pre>
<b>this is b tag use for bold the text</b>
<i>this is used for italic the text</i>
<a href='https://www.mindstick.com/' >goto MindStick website using anchor tag</a><br />
<img src='oops.png' alt='showing image slowly' width='300px' height='300px' />
<img src='oops.png' alt='Workplace' usemap='#workmap' width='400' height='379'>
<map name='workmap'>
<area shape='circle' target='_blank' coords='337,250,50' alt='Cup of coffee' href='https://www.w3schools.com/cs/cs_interface.php'/>
<area shape='circle' target='_blank' coords='100,250,50' alt='Cup of coffee' href='https://www.tutorialspoint.com/csharp/csharp_encapsulation.htm'/>
<area shape='circle' target='_blank' coords='200,310,50' alt='Cup of coffee' href='https://www.w3schools.com/cs/cs_polymorphism.php'/>
</map>
</body>
</html>
Output-
List example in html
<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta charset='UTF-8' />
<meta name='description' content='demo page' />
<meta name='keywords' content='HTML, CSS, JavaScript' />
<meta name='author' content='Ravi Vishwakarma' />
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
<title>List example in html</title>
</head>
<body>
<ul><b>Unorderd List</b>
<li>Java</li>
<li>C++</li>
<li>.NET</li>
<li>C</li>
<li>HTML</li>
</ul>
<ul type='circle'><b>Unorderd List with circle</b>
<li>Java</li>
<li>C++</li>
<li>.NET</li>
<li>C</li>
<li>HTML</li>
</ul>
<ul type='square'><b>Unorderd List with square</b>
<li>Java</li>
<li>C++</li>
<li>.NET</li>
<li>C</li>
<li>HTML</li>
</ul>
<ol><b>Ordered list</b>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Grapes</li>
<li>Guava</li>
</ol>
<ol type='i'><b>Ordered list with 'i'</b>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Grapes</li>
<li>Guava</li>
</ol>
<ol type='A'><b>Ordered list with 'A'</b>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Grapes</li>
<li>Guava</li>
</ol>
<b>Description List</b>
<dl>
<td>HTML</td><dd>Hyper Text Markup Language</dd>
<td>HTML</td><dd>Hyper Text Markup Language</dd>
<td>HTML</td><dd>Hyper Text Markup Language</dd>
<td>HTML</td><dd>Hyper Text Markup Language</dd>
</dl>
</body>
</html>
Output-
Table tags in html
<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta charset='UTF-8' />
<meta name='description' content='demo page' />
<meta name='keywords' content='HTML, CSS, JavaScript' />
<meta name='author' content='Ravi Vishwakarma' />
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
<link rel='stylesheet' type='text/css' href='style.css' />
<title>table example in html</title>
</head>
<body>
<table width='100%' border='1' >
<caption class='mb-2'><b>Table example in html</b></caption>
<thead style='background-color:green;'>
<tr>
<th>Name</th>
<th>Class</th>
<th>Address</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Shivam Prajapati</td>
<td>BCA</td>
<td>Allahabad</td>
<td>221305</td>
</tr>
<tr>
<td>Shivam Prajapati</td>
<td>BCA</td>
<td>Allahabad</td>
<td>221305</td>
</tr>
<tr>
<td>Shivam Prajapati</td>
<td>BCA</td>
<td>Allahabad</td>
<td>221305</td>
</tr>
<tr>
<td>Shivam Prajapati</td>
<td>BCA</td>
<td>Allahabad</td>
<td>221305</td>
</tr>
<tr>
<td>Shivam Prajapati</td>
<td>BCA</td>
<td>Allahabad</td>
<td>221305</td>
</tr>
<tr>
<td>Shivam Prajapati</td>
<td>BCA</td>
<td>Allahabad</td>
<td>221305</td>
</tr>
</tbody>
<tfoot>
<tr style='background-color:red; '>
<td colspan='4'> This is table footer</td>
</tr>
</tfoot>
</table>
</body>
</html>
Output -
Leave Comment