HTML TUTORIAL
1. LINKS AND IMAGES
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>links and images</title>
</head>
<body>
<!-- LINKS -->
<a href="https://google.com"target="_blank">go to google</a><br>
<a href="https://facebook.com"target="_blank">go to facebook</a><br>
<a href="https://twitter.com"target="_blank">go to twitter</a><br>
<a href="https://linkedin.com"target="_blank">go to linkedin</a><br>
<a href="/google.html"target="_blank">google</a><br>
<!-- IMAGES -->
<img src="/HTML/1.img.jpg" alt="Eroor">
<img src="/HTML/2.img.jpg" alt="eroor">
<img src="/fb/125296075_875523989853012_9089424355630781266_n.jpg" alt="eroor">
</body>
</html>
2. Tables and Lists
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tables and Lists</title>
</head>
<body>
<!-- Lists -->
<ul type="square">
<li>my first Lists</li>
<li>
<ul>
<li> first Lists</li>
<li> second lists</li>
<li> third lists</li>
</ul>
</ul>
<li>my second lists</li>
<li>my third lists</li>
</ul>
<ol type="I">
<li>my first web</li>
<li>my secund web</li>
<li>my third web</li>
</ol>
<!-- TABLE -->
<h3>HTML Table</h3>
<table>
<thead>
<tr>
<th>name</th>
<th>roll no</th>
<th>post</th>
</tr>
</thead>
<tr>
<td>soham</td>
<td>123</td>
<td>first</td>
</tr>
<tr>
<td>soha</td>
<td>1243</td>
<td>firtst</td>
</tr>
<tr>
<td>sohham</td>
<td>1723</td>
<td>fjirst</td>
</tr>
<tbody>
</tbody>
</table>
</body>
</html>
3. Forms
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forms</title>
</head>
<body>
<h2>this is my html forms tutorial</h2>
<form action="backend.php">
<label for="name"> Name</label>
<div>
<input type="text" name="myName" id="name">
</div>
<br>
<div>
Roll: <input type="text" name="myRoll">
</div>
<br>
<DIV>
Email: <input type="text" name="myEmail">
</DIV>
<br>
<div>
Bonus: <input type="number" name="myBonas">
</div>
<br>
<div>
Date: <input type="date" name="myDate">
</div>
<br>
<div>
<label for=" Are you eligible"> Are you eligible</label>
<input type="checkbox" name="myEligibilty" id=" Are you eligible">
Are you eligible: <input type="checkbox" name="myEligibilty" checked>
</div>
<br>
<div>
Write about yourself: <br> <textarea name="myText" id="yoyrself" cols="30" rows="5"></textarea>
</div>
<br>
<div>
Gender: Male <input type="radio" name="myGender"> FeMale <input type="Radio" name="myGender">
Other <input type="radio" name="myGender">
</div>
<br>
<div>
<label for="car">car</label>
<select name="myCar" id="car">
<option value="swf">Swift</option>
<option value="ind" selected>Indica</option>
</select>
</div>
<br>
<div>
<input type="submit" value="Submit now">
<input type="reset" value="reset now">
</div>
</form>
</body>
</html>
4. Inline and block elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline and block elements</title>
</head>
<body>
<strong style="border: 2px solid red;">this si a paragraph</strong> <a style="border: 2px solid blue;">
this is also a paragraph</a>
<span style="border: 2px solid red;">this is a span</span> <span style="border: 2px solid blue;"> this is also a span </span>
</body>
</html>
5.ids and classes in html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ids and classes in html</title>
</head>
<body>
<h3>ids and classes tutorial</h3>
<div id="mainbox" class="redBg blackborder">
this is mainbox
</div>
<span class="redBg"></span>
<!-- Emmet -->
<!-- . is for class and # is for id -->
<span class="redBg"></span>
<span id="mainSpan"></span>
<div class="redBg blackborder anotherclass"></div>
<!-- Emmet takes div tag as default -->
<div class="blackBackground"></div>
<!-- Creating multiple alements using Emmet -->
<!-- span.myclass.myclass2.myclass3*4 + <tab> to print 4 similar elements using Emmet -->
<span class="myclass myclass2 myclass3">First</span>
<span class="myclass myclass2 myclass3">Second</span>
<span class="myclass myclass2 myclass3">Third</span>
<span class="myclass myclass2 myclass3">Fourth</span>
</body>
</html>
6. HTML Entities
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Entities</title>
</head>
<body>
<div class="container">
<p>This is paragraph</p>
</div>
<div class="container">
<p>This is another paragraph with three spaces </p>
<p>Paragraph is written like this <p> </p>
<p>Pound is written like this £ </p>
<p>Copyright is written like this © </p>
<p>Another character is written like this ⇛ </p>
<p>Another character is written like this ¼ </p>
<p>Empty character is written like this ​ </p>
</div>
</body>
</html>
7. HTML Semantic Tags
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Semantic Tags</title>
</head>
<body>
<!--this is all semantic tags
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time> -->
<h3>Semantic elements</h3>
<details>
<summary> my name is shjivam singh. i am from mirzapur, and i am a programar</summary>A keybord.
<summary> my name is shjivam singh. i am from mirzapur, and i am a programar</summary>
<summary> my name is shjivam singh. i am from mirzapur, and i am a programar</summary>
<summary> my name is shjivam singh. i am from mirzapur, and i am a programar</summary>
<summary> my name is shjivam singh. i am from mirzapur, and i am a programar</summary>
<summary> my name is shjivam singh. i am from mirzapur, and i am a programar</summary>
</details>
</body>
</html>
Comments
Post a Comment