HTML Introduction | HTML Tutorial

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.

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.

Example of Single Line Closing:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Single Line Closing Example</title>
</head>
<body>
     <img src="images/mqdefault.webp" height="200" width="200" alt="SCS" title="SCS" /> <br>

     <input type="text" name="txt1" id="txt1" />
     <br>
     <input type="radio" name="r1" id="r1" />C <br/>
     <br>
     <input type="checkbox" name="chk" id="chk" />C <br/>
     <br>
     <input type="submit" name="r1" id="r1" value="Submit" /><br/>
     <br>
     <input type="button" name="r1" id="r1" value="click" /> <br/>
     <br />
     <input type="reset" name="r1" id="r1" value="click" /> <br/>
     <hr/>
     Hello &nbsp; &nbsp; &nbsp; world
     <hr/>
     &gt; &lt;
     &copy;2024 by SCS
</body>
</html>

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

CSS

</head>

<body>

......

</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.

<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.

<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.

<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.

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>Designing</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>Designing</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>

<dd>- It is used to design web page</dd>

<dd>- it is used to provide dynamic design under HTML page</dd>

<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.

Example of Iframe Tag:-

</iframe>

</iframe>

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>

<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>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>

</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

  it is used to manage 1px space between words.It is a non-breaking space.

© 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>

</head>

<body>

<pre>

Hello World

</pre>

Hello     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>

<hr>

<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>

<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>Designing</li>

</ul>

<ol>

Programming Language

<li>Designing</li>

</ol>

<hr>

<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>

</table>

<hr>

<pre>

hello

world

</pre>

<h1> register here</h1>

<hr>

<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>

<br>

</select>

<br>

</textarea>

</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

Download here

Uncontrolled form input in React-JS

Uncontrolled form input in React-JS? If we want to take input from users without any separate event handling then we can uncontrolled the data binding technique. The uncontrolled input is similar to the traditional HTML form inputs. The DOM itself handles the form data. Here, the HTML elements maintain their own state that will be updated when the input value changes. To write an uncontrolled component, you need to use a ref to get form values from the DOM. In other words, there is no need to write an event handler for every state update. You can use a ref to access the input field value of the form from the DOM. Example of Uncontrolled Form Input:- import React from "react" ; export class Info extends React . Component { constructor ( props ) { super ( props ); this . fun = this . fun . bind ( this ); //event method binding this . input = React . createRef ();...

قراءة المزيد

بحث هذه المدونة الإلكترونية

HTML Introduction | HTML Tutorial

التسميات

تعليقات

إرسال تعليق

المشاركات الشائعة من هذه المدونة

Uncontrolled form input in React-JS

JSP Page design using Internal CSS

JDBC using JSP and Servlet