,HTML Introduction

0


it means hypertext markup language, it provides a predefined set of elements that will be used to create a website.
HTML is mainly used to design the user interface of the Website.
Without HTML we can not create a website means it is mandatory for web development and web designing. all tag of HTML is predefined hence it is called markup language.
Hypertext:-  text within the tag is called Hypertext. all Html elements define as a Tag.
<html>,<head>,<body>,<div>
Hypertext has been categorized into two different type:
1)  Single line closing:-  this type of tag will be closed on the same line means the opening and closing tag will be implemented on the same statement.
<br>,<hr>, <input type="text"  />
2) Multiline closing:-  this type of tag will be closed with multiple lines.
<p> ewfgewhf hegfhe ghf egw</p>
<div>f iur griguyriug yirue ygiure yiugreiugr g</div>




HTML History:-

HTML was developed in 1989 by Tim Berners-Lee to design a web page. HTML was created in 1991 but it was released in 1995 as an HTML 2.0, HTML 4.0 was released in 1999 with lots of new features.
Now HTML 5.0 is the latest version of HTML which was released in 2014.




Basic Structure of HTML:-
<html>
<head>
     Title
     Meta
    JS
    CSS
</head>
<body>
<all html tag>
......
</body>
</html>
Html has two different extension .htm and .html
it can be integrated into any other dyanmic extension .jsp, .php, .aspx



HTML Tag Explanation:-
<html>:-  it is the root tag of HTML,all HTML structure will be based on this tag.
<head>:-  it is used to manage operation during the request to the web server using a web crawler.
<head> tag contains title,meta,fabicon,style,script,google adsense code,google analytics code etc.
<title></title> :- It is used to define page title ,it should be your business name or work profile in short,title should be max 90 char.
<meta />:- it  is used to provide keyword and description for search engine optimization
<fabicon>:- it is used to provide site icon just beside title tag.
<link rel="icon" type="img" href="imagepath"> 
<body>:-  It is used to design the user interface of the web application, the body is used to create different page areas using HTML Container elements.
Heading Tag in HTML:-
<h1>:-  It is heading tag which is used to display bold and maximum font-size 32px;
<h2>:- It is a heading tag that is used to display bold and maximum font-size 24px.
<h3>:- It is a heading tag that is used to display bold and maximum font-size 18.72px.
<h4>:- It is a heading tag that is used to display bold and maximum font-size 16px.
<h5>:- It is a heading tag that is used to display bold and maximum font-size 13.28px.
<h6>:-  It is a heading tag that is used to display bold and minimum font-size 10.72px.
<p>:-  It is used to write content using paragraph pattern, by default paragraph manage content using proper alignment.
if we use a two-paragraph tag then it will automatically manage content into a newline.
<p> abcd .........</p>
<p> xyz ..........</p>
<hr>:-  it means horizontal row, it is used to display a horizontal line on the Html web page.
<br>:-  it is used to break text into a new line 
<font>:-  it is used to change content color ,font-size,font-style
<img>:-  it is used to display content on the web page.
<img src="imagename"  width="100" height="100"  alt="scs" />
<b></b>:- it is used to display the content using bold text
<i></i>:-  it is used to display the content in italic
<strong></strong>:-  it is used to display the content bold but it is semantically understood the statements.
<strike></strike>:-  it is used to display cross line text or cancel text
<mark></mark>:-  It is used to highlight the text in yellow color by default
<sub></sub> :- it is used to display subscript text under main text.for example, if you want to write any formula of chemistry or mathematics then you will use this tag.
h2o  :-   h<sub>2</sub>o
<sup></sup>:-  it is used to display superscript means above main text.
                      tm
ShivaConcept            ShivaConcept<sup>TM</sup>
<ul> and <li>:- ul means unordered list and li means list item.ul is the parent and li is the child.
<ul>
Programming Language
<li>C</li>
<li>CPP</li>
<li>DS</li>
<li>Designing</li>
<li>JS</li>
</ul>
<ol> and </li>:-  ol means ordered list and li means list item, ol is the parent and li is the child.
<ol>
Programming Language
<li>C</li>
<li>CPP</li>
<li>DS</li>
<li>Designing</li>
<li>JS</li>
</ol>
<dl> and </dd>:-  dl means definition list and dt means definition term dd means definition describe means list item, ol is the parent and li is the child.
<dl>
  <dt>HTML</dt>
  <dd>- It is used to design web page</dd>
  <dt>JS</dt>
  <dd>- it is used to provide dynamic design under HTML page</dd>
  <dt>CSS</dt>
  <dd>- it is used to provide extra properties to HTML elements</dd>
</dl>

<center></center>:-
it is used to display the content at the center.
<marquee>:- it is used to rotate text, image from left to right and right to left, top to bottom, and bottom to top.
<marquee direction="left">Welcome in Shiva Concept Solution</marquee>
<marquee direction="right">Welcome in Shiva Concept Solution</marquee>
<marquee direction="up">Welcome in Shiva Concept Solution</marquee>
<marquee direction="down">Welcome in Shiva Concept Solution</marquee>
<marquee direction="left" behavior="alternate">Welcome in Shiva Concept Solution</marquee>
<marquee direction="left" scrollamount="1">Welcome in Shiva Concept Solution</marquee>


<iframe>:-  It is used to integrate external video content,youtube video content, web content etc.
<iframe src="sitename" width="500" height="500" ></iframe>
Example of Iframe Tag:-
<iframe src="demo1.html" width="800" height="400">
</iframe> 
<br><br>
<iframe src="https://shivaconceptsolution.com" width="800" height="400">
</iframe> 
<br><br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/TFoCqZm_RBg" 
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; 
clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
allowfullscreen></iframe>


 Table Tag in HTML:-
<table>:-  it is used to design a table and contain records based on rows and columns.
<tr>:-  it is used to show table row, for example, if we want to create three rows then we add three <tr> tag
<td>:-  it is called table data or description and it will be defined under table row.
<th>:-  it is called table heading and it will be defined under table row.
Example of Table Tag in HTML:-
<html>
<head>
<body>
<table border="1" width="400" height="400" cellpadding="10" cellspacing="5" >
<tr><th>Rno</th><th>Sname</th><th>Branch</th><th>Fees</th></tr>
<tr><td>1001</td><td>Manish</td><td>CS</td><td>45000</td></tr>
<tr><td>1002</td><td>Jay</td><td>CS</td><td>45000</td></tr>
<tr><td>1003</td><td>Ravi</td><td>IT</td><td>45000</td></tr>
<tr><td>1004</td><td>Kunal</td><td>CS</td><td>45000</td></tr>
</table>
</body>
</html>

..................................................................................................................................................................
col span and Rowspan properties in tables:-
col span is used to merge the column and row span is used to merge the rows.

Example of Colspan and Rowspan:-
<html>
<head>
<body>
<table border="1" width="400" height="400" cellpadding="10" cellspacing="5" >
<tr><td rowspan="2">1</td><td>2</td></tr>
<tr><td>3</td></tr>
</table>
<br><br><br>
<table border="1" width="400" height="400" cellpadding="10" cellspacing="5" >
<tr><td colspan="2">1</td></tr>
<tr><td>2</td><td>3</td></tr>
</table>
</body>
</html>


<pre>  It is used to display content on actual style.
<a>:- it is called anchor tag, it is used to display Hyperlink, navigation in HTML web page
<a href="www.shivatutorials.com">Click to Shiva Tutorial</a> Open in same tab
<a href="www.shivatutorials.com" taregt="__blank">Click to Shiva Tutorial</a> open in differnt tab


Special HTML attribute

&nbsp; it is used to manage 1px space between words.It is a non-breaking space.
&copy;  It is used to display a copyright
&lt    It is used to display less than symbol
&gt    It is used to9 display greater than the symbol

<fieldset>:- It provide groupbox with group title using <legend>
<fieldset style="border:2px solid black;">
<legend style="border:2px solid black;">Our Mission</legend>
<p>asd ysafyusf tysdtfidsafasdfyiyadsfiuafy iuaf yuisdafyusdf yusd afyuia ysfuiasdy fuida ffdsdsaf iusadf udsa fi fyuisfy safsayf yusf uisadf usa fuisdf uisf uisf yuf uisf ui faiudsfudsaif uif yuidsafy saui saufysdafusda  fuisdafy usiafy ausdfysaudfy uisadfy uisa fyusay fuisd fysadiufysufusfsufsuusfsfd.</p>

</fieldset>
Complete HTML Code for practice:-



1) Open notepad,Sublime,notepad++
2) Save this file using first.html
<html>
<head>
<title>Computer Sales and Services</title>
<link rel="icon" type="img" href="what.jpg">
</head>
<body>
<pre>
Hello        World
</pre>
Hello &nbsp;&nbsp;&nbsp;&nbsp;world
<marquee direction="left" behavior="alternate">We are providing Computer Sales and Services</marquee>
<center>Welcome in SHIVA CONCEPT SOLUTION</center>
<h1>Welcome in Computer Sales and Services</h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/sOdOJ4w-HIg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe src="https://www.shivatutorials.com/" width="560" height="315"></iframe>
<img src="reg.jpg" width="300" height="300"   />
<hr>
<br>
<br>
<br>
<h1><font color='red' size="34+">About</font> Shiva Concept </h1>
<hr>
<p><i>SHIVA CONCEPT SOLUTION is a best software training institute in indore </i>,<mark>We are providing quality training with affordable fee structure. Our center</mark>, Located Strategically at Palasia near industry house , Vijaynagar near perfect bakery and Bhawarkua near indrapuri</p>
<br>
<br>
<br>
<h1><font color='green' size="24+">About Shiva Sir</font></h1>
<hr>
<p><b>MR. Shiva Gautam</b> is working Professional with <strong>10+ years of IT experience</strong> and have In depth real time exposure in 35+ technologies which helps students to provide corporate exposure. We provide excellent lab facilities with <strike>unlimited timeframe</strike>,We also provide placement assistance to our trainees.
</p>
h<sub>2</sub>o
<h1>Shiva Concept Solution<sup>TM</sup></h1>
<ul>
Programming Language
<li>C</li>
<li>CPP</li>
<li>DS</li>
<li>Designing</li>
<li>JS</li>
</ul>
<ol>
Programming Language
<li>C</li>
<li>CPP</li>
<li>DS</li>
<li>Designing</li>
<li>JS</li>
</ol>
<hr>
<table border="1" cellspacing="10" cellpadding="15" width="500" height="200" bgcolor="red">
<tr><th bgcolor="green">RNO</th><th>Name</th><th>Branch</th><th>Fees</th></tr>
<tr><td>1001</td><td>Manish</td><td>CS</td><td>45000</td></tr>
<tr><td>1002</td><td>Ravi</td><td>CS</td><td>45000</td></tr>
<tr><td>1003</td><td>Jay</td><td>IT</td><td>65000</td></tr>
</table>
</table>
<hr>
<center>&copy;2020 by Shiva Concept </center>
<pre>
hello
world
</pre>
<h1> register here</h1>
<hr>
<form action="" method="post">
<input type="text" name="txt1" placeholder="Enter name" />
<br>
<br>
<input type="radio" name="r1" value="C">C
<br>
<input type="radio" name="r1" value="CPP">CPP
<br>
<input type="checkbox" name="chk1" value="Java">Java
<br>
<input type="checkbox" name="chk2" value=".NET">.NET
<br>
<select>
<option >C</option>
<option >CPP</option>
</select>
<br>
<br>
<select multiple="true">
<option >Java</option>
<option >.NET</option>
<option >PHP</option>
</select>
<br>
<br>
<textarea rows="2" cols="5" placeholder="enter content">
</textarea>
<br><br>
<input type="button" value="Click" />
</form>
</body>
</html>
3) Doble click on the file and open in a web browser



Create Five Web Page application complete code you can download from
Tags

Post a Comment

0Comments

POST Answer of Questions and ASK to Doubt

Post a Comment (0)