css

style='color: red;'>

p style='color: green;'> The world is full of fascinating places. Planning the perfect vacation involves packing up, leaving home, and experiencing something new.</p>

<h1 class="title">My First Website</h1>

<!DOCTYPE html>
<html>
<head>
    <title>My Portfolio</title>
</head>
<body>
        <h1>itsmeashu</h1>
        <h2>itsmeashu</h2>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>My Portfolio</title>
</head>
<body>
        <h1>itsmeashu</h1>
        <h2>itsmeashu</h2>
        <p>heythere</p>
        <a href="https://evil.com">twitter</a>
</body>
</html>

as we can see below the code and there result;)

<!DOCTYPE html>
<html>
<head>
    <title>My Portfolio</title>
</head>
<body>
        <h1>itsmeashu</h1>
        <h2>itsmeashu</h2>
        <p>heythere</p>
        <a href="https://x.com/6173687561646d6">twitter</a>
         
</body>
</html>

twitter twitter is wrtitten continiously !!! so we have to use <br />

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

use <br> to break the line and start a new line !!

 <a href="/portfolio/nice.html">go to hello</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Ashutosh munde</h1>
</body>
</html>

below is my port.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
</head>
<body>
        <h1>itsmeashu</h1>
        <h2>itsmeashu</h2>
        <p>heythere</p>
        <a href="https://x.com/6173687561646d6">twitter</a>
        <br />
        <a href="https://x.com/6173687561646d6">twitter</a>
        <br>
        <a href="/portfolio/nice.html">go to hello</a>
</body>
</html>

image tag

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="dinner.css">
    <title>My Portfolio</title>
</head>
<body>
        <h1>itsmeashu</h1>
        <h2>itsmeashu</h2>
        <p>heythere</p>
        <a href="https://x.com/6173687561646d6">twitter</a>
        <br />
        <a href="https://x.com/6173687561646d6">twitter</a>
        <br>
        <a href="/portfolio/nice.html">go to hello</a>
        <img src="/portfolio/Screenshot 2026-02-21 155428.png" alt="notebook" />   
</body>
</html>

  <img src="/portfolio/Screenshot 2026-02-21 155428.png" alt="notebook" />

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="dinner.css">
    <title>My Portfolio</title>
</head>
<body>
        <h1>itsmeashu</h1>
        <h2>itsmeashu</h2>
        <p>heythere</p>
        <a href="https://x.com/6173687561646d6">twitter</a>
        <br />
        <a href="https://x.com/6173687561646d6">twitter</a>
        <br>
        <a href="/portfolio/nice.html">go to hello</a>
        <img src="/portfolio/Screenshot 2026-02-21 155428.png" alt="notebook" height="100"/>  <!-- we can also add width !!--> 
</body>
</html>

we can use the proper function here !!!

<br />
        <u>underline</u>
        <br>
        <i>italic</i>
        <br>
        <b>bold</b>
        <br>
        <big>this tag shows big text </big>

<hr> tag means a ruler !!!

spo basically a ruler line do present there !!!

<p>h<sub>2</sub>0</p> <!--this is subscript-->
        <p>3<sup>2</sup>=9</p><!--this is superscript-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="dinner.css">
    <title>My Portfolio</title>
</head>
<body>
        <h1>itsmeashu</h1>
        <h2>itsmeashu</h2>
        <p>heythere</p>
        <a href="https://x.com/6173687561646d6">twitter</a>
        <br />
        <a href="https://x.com/6173687561646d6">twitter</a>
        <br>
        <a href="/portfolio/nice.html">go to hello</a>
        <img src="/portfolio/Screenshot 2026-02-21 155428.png" alt="notebook" height="100"/>  <!-- we can also add width !!--> 
        <br />
        <u>underline</u>
        <br>
        <i>italic</i>
        <br>
        <b>bold</b>
        <br>
        <big>this  tag shows big text </big>
        <hr>
        <small>this tag shows small text</small>
        <p>h<sub>2</sub>0</p> <!--this is subscript-->
        <p>3<sup>2</sup>=9</p><!--this is superscript-->
      <pre> hi there this is   (long space pre tag !!)     ashutosh</pre>


</body>
</html>

in above code i used a pre tag !!! itself !! < pre tag is used as i can use as many spaces and the spaces will create the differencce !!

section tag !!

<section> --> for a section on your page !!

article tag -->

<article> for an article on your page

aside tag

<aside>for content aside main content(Ads)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Ashutosh munde</h1>
    <header>hea
        <h1>Ashutosh</h1>
    </header>
    <main>
        <section>education: nice</section>
        <section>sports kabaddi </section>
        <article>blah blah  praragraph likho we can write the story here !!!!  </article>
    </main>
</body>
</html>

header , footer , section ,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Ashutosh munde</h1>
    <header>hea
        <h1>Ashutosh</h1>
    </header>
    <main>
        <section>education: nice</section>
        <section>sports kabaddi </section>
        <article>blah blah  praragraph likho we can write the story here !!!!  </article>
    </main>
</body>
</html>

aside tag and more !!

<a href="https://evil.com" target="_main" >evil</a>

so this above target attribute is for opening the link in the new tab !!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Ashutosh munde</h1>
    <header>hea
        <h1>Ashutosh</h1>
    </header>
    <main>
        <section>education: nice</section>
        <section>sports kabaddi </section>
        <article>blah blah  praragraph likho we can write the story here !!!!  </article>
        <a href="https://evil.com" target="_main" >evil</a>
        <aside>THIS IS AN AD  ADVERTISE PART , AFTER SEEING THIS GOOGLE DO HIS ADS ASIDE THIS !!</aside>
    </main>
    
</body>
</html>

so in below code we made the image clickable !!!

<a href="https://evil.com" target="_main" >evil</a>
        <a href="https://evil.com" target="_main" ><img src="/portfolio/Screenshot 2026-02-21 155428.png" height="100" alt=""></a>

<a href="https://evil.com" target="_main" ><img src="/portfolio/Screenshot 2026-02-21 155428.png" height="100" alt=""></a>

above tag is for clicking the image !!

revisiting image tag !!

<img src="link" height=50px> //set height

<img src="link" width=50px> // set width

div tag !!

a non semantic

div is a container used for other HTML elements

Block Element(takes full width )

ubnordered list

<main>

<ul> <l></l>

</ul>

</main>

subordered list !!

same in ordered list !!!!

tables

<table>

<tr> tab le row

<td>table data

<th> table header !

</table>

Form in HTML --> MOST IMPORTANT !

forms are uised to colect data from the user

ef- sign up/login/help requests/contact me !!

<form>

form content

</form>

below is the example how form is introduced !!!

  <form action="action.php"><input type="text" placeholder="type something here">
    </form>

    <form>
        <input type="text" placeholder="username">
        <input type="password" placeholder="password">
    </form>

<input type="radio" value="good" name="name">good
       <input type="radio" value="bad" name="name">bad

so in above code its about label !! options choices , we havce to use the radio as a type and value as its we want !!

if i provide the id , so if i select the text or click on the text i will be getting the option selected !!

classes and id !!

div

checkbox !!

so basically id helps backend to understand the the particular dom !!

feedback form !!

 <textarea name="feedback" id="101" placeholder="input here !!" rows=5> feedback</textarea>

iframe tagg !!

<iframe src="link">

click on share and then embed adn then copy the code !!! and paste heere !! its iframe !!

<iframe width="560" height="315" src="https://www.youtube.com/embed/ajdRvxDWH4w?si=bFJ_vOUuwbb3C2Zm" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Previousacess controls

Last updated 1 month ago

Was this helpful?

Good night

hashtagimage tag

hashtagrevisiting image tag !!

hashtagdiv tag !!

hashtagtables

hashtagForm in HTML --> MOST IMPORTANT !

hashtagclasses and id !!

hashtagdiv

hashtagcheckbox !!

hashtagfeedback form !!

hashtagiframe tagg !!