HTML-CSS Tutorial

  • source code 3

    This is videoNo 3 source code.
    the involed in videoNo3 for 6 topic.
    1 html boilerplate -The boilerplate is structure html program code for ex.. 
    <<!-- short cut key in keyboard shift+! then press tab , that is work only visul sudio -->
!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>
    2 heading tag -The heading tag is used for add heading in html program. ther are six type of head tag for ex.. 
    <!-- this tag is big for all heading tag -->
<h1>hello! how are you?</h1>
<!-- this tag is small of h1 tag  -->
<h2>hello! how are you?</h2>
<!-- this tag is small of h1 and h2 tag  -->
<h3>hello! how are you?</h3>
<!-- this tag is small of h1,h2 and h3tag  -->
<h4>hello! how are you?</h4>
<!-- this tag is small of h1,h2,h3 and h4 tag  -->
<h5>hello! how are you?</h5>
<!-- this tag is small of h1,h2,h3,h4 and h5 tag  -->
<h6>hello! how are you?</h6>
    3 Comment line -Html comments are visible to anyone that views the page source code,but are not rendered when the Html document is rendered by a browser . the comment line sybole is <--/--> 
    the comment line short cut key is ctrl+/ in keyboard . that is used for only in visul studio 
<!-- <h1>hello! how are you ?</h1> -->
<!-- <h5>I like coding</h5> -->
    4 Paragraph tag - This tag is used for add paragraph in html program for ex.. 
    <p> Enter you choice paragraph </p>
<!-- Enter rendem paragraph is use of lorem10(hear 10 word in paragraph) -->
<p>lorem20</p> 
<!-- then enter -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione adipisci natus id atque aliquid dolorum illo molestias numquam dicta debitis!</p>
    5 break tag - This tag is used for start new line in html program for ex.. 
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing <br> elit. Sit quaerat asperiores ad ipsa <br><br> quibusdam esse deleniti laboriosam quos cumque labore!</p>
    6 strong tag - This tag is used for convert simple font in bold font for ex.. 
    <strong>HELOO freainds</strong>
<h1>hello <strong>how are </strong> you ?</h1>
    vedio 3 source code - This is all program for cleck this icone

  • source code 4

    This is videoNo 4 source code.
    the involed in videoNo4 for 4 topic.
    1 em tag -The em tag is use for convert simple font to italic font for ex... 
    <p> <em>Lorem <em>ipsum</em> dolor sit, amet consectetur adipisicing elit.
    Reiciendis, vel.</em> </p>
    2 del tag -The del tag is use for underline on the word for ex... 
    <h1> <del>hello how are you</del> ?</h1>
    3 sab and sup tag -sub tag :The sub tag defines the subscript text. Subscript text appears half a character below the normal line and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas
    -sup tag :The sup tag is used to add a superscript text to the HTML document. 
    <!-- ####### sub tag -->
<h2> h <sub>2</sub> o</h2>
<!-- ###### sup tag -->
<h2> 4 <sup>2</sup></h2>
    4 ins and u tag -This two tag is use sam for use of underline bottum word for ex... 
    <p><ins>hello,</ins> <u> i am setu patel and i am coder</u></p>
    vedio 4 source code - This is all program for cleck this icone

  • source code 5

    This is videoNo 5 source code.
    the involed in videoNo5 for 3 topic.
    1 link tag -The link tag is use for add link in website and webpage... 
    <a href="Enter linkwebsite">open link</a>
<a href="https://www.facebook.com/">open facbook</a<br>
<a href="https://stackoverflow.com/">stak overfolw</a>
    2 target -The target is use for start new tab in browser and it is use in link tag.. 
    <a href="https://www.facebook.com/" target="_blank" >open facbook</a> <br>
    3 img tag - The image tag is use for insert imag in website and webpage... 
    <img src="set image path" alt="enter content for imag">
<img src="/img/nubelson-fernandes-gTs2w7bu3Qo-unsplash.jpg" alt="This image is coder">
    vedio 5 source code - This is video 5 program for cleck this icone

  • source code 6

    This is videoNo 6 source code.
    the involed in videoNo6 for 2 topic.
    1 ol tag -The ol tag is oderlist. it is use of add list in webpage and website.it type is chang. 
    <ol type="I">
<li>setu</li>
<li>Yash</li>
<li>Dhruv</li>
<li>Mohini</li>
</ol>
    2 ul tag -The ul tag is unoderlist. it is use of add unoder list in webpage and website.it type is not chang. 
    <ul>
<li>setu</li>
<li>Yash</li>
<li>Dhruv</li>
<li>Mohini</li>
</ul>
    3 Full Program - This is html program.in this program add ol and ul 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">
    <title>list</title>
</head>
<body>
    <!-- ol tag is use for add list but it is chang for type -->
    <ol type="I">
        <li>setu</li>
        <li>Yash</li>
        <li>Dhruv</li>
        <li>Mohini</li>
    </ol>
    <!-- ul tag is use for add list but it is not chang for type -->
    <ul>
        <li>setu</li>
        <li>Yash</li>
        <li>Dhruv</li>
        <li>Mohini</li>
    </ul>   
</body>
</html>

  • source code 7

    This is videoNo 7 source code.
    the involed in videoNo7 for 1 topic.
    1 table tag -The table tag is use for create table in webpage and website. it is use for two part 1:table head 2:table body. 
    <table border="3">
    <thead>
        <th>student_name</th>
        <th>Marks</th>
    </thead>
    <tbody>
        <tr>
            <td>Setu</td>
            <td>90%</td>
        </tr>
        <tr>
            <td>yash</td>
            <td>80%</td>
        </tr>
    </tbody>
</table>
    2 Full Program -This program is use for create table for in 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>Table</title>
</head>
<body>
    <table border="3">
        <thead>
            <th>student_name</th>
            <th>Marks</th>
        </thead>
        <tbody>
            <tr>
                <td>Setu</td>
                <td>90%</td>
            </tr>
            <tr>
                <td>yash</td>
                <td>80%</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

  • source code 8

    This is videoNo 8 source code.
    the involed in videoNo8 for 4 topic.
    Create form Part 1
    1 form -The form tag is use for create form in webpage and website. 
    <form ></form>
    2 label tag -The label tag is use in form.It is use for enter message in form.. 
    <label for="name">name</label>
    3 input tag -The input tag is use in form.it is use for create box and enter text in box.. 
    <input type="text" name="name" id="name">
    4 textarea tag -The textarea tag is use in form.it is use for enter text box in form.. 
    <textarea name="Textarea" id="Textarea" cols="30" rows="10">Enter text</textarea> <br><br>
    5 button tag -The button tag is use in form.It is use for create button in webpage/website.. 
    <input type="submit" value="submit">
    6 Full Program -This program is use for create form for in 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>Form</title>
</head>
<body>
    <form >
        <label for="name">name</label>
        <input type="text" name="name" id="name"> <br> <br>

        <label for="Email">Email</label>
        <input type="email" name="Email" id="Email"> <br><br>

        <label for="contact">contact</label>
        <input type="number" name="contact" id="contact"> <br><br>
        
        <label for="textarea">Enter about you</label> <br>
        <textarea name="Textarea" id="Textarea" cols="30" rows="10">Enter text</textarea> <br><br>

        <input type="submit" value="submit">

    </form>
</body>
</html>

  • source code 9

    This is videoNo 9 source code.
    the involed in videoNo9 for 3 topic.
    Create form Part 2
    1 radio button -The radio button is use in form.it is use for chack value. 
    <input type="radio" name="age" id="age">
    2 checkbox -The chackbox is use in form.it is use for chack value.. 
    <input type="checkbox" name="age" id="age"><br><br>
    3 combobox -The combobox is use in form. it is use for choose one option for maney option. 
    <!-- #combobox  -->
<label for="contry">select your contry</label>
<select name="contry" id="contry">
    <option value="contry1">India</option>
    <option value="contry2">Japan</option>
    <option value="contry3">Rous</option>
</select><br><br>
    4 Full Program -This program is create form in html. in this program is invole input,lable,textarea,radio button,chack,button,combobox and button. 
    <!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>Form</title>
</head>
<body>
    <form >
        <label for="name">name</label>
        <input type="text" name="name" id="name"> <br> <br>

        <label for="Email">Email</label>
        <input type="email" name="Email" id="Email"> <br><br>
        
        <label for="contact">contact</label>
        <input type="number" name="contact" id="contact"> <br><br>

        <label for="textarea">Enter about you</label> <br>
        <textarea name="Textarea" id="Textarea" cols="30" rows="10">Enter text</textarea> <br><br>
            
        <label for="age">Select you agegroup</label> <br><br>
        
        <label for="age">10-20 age</label>
        <input type="radio" name="age" id="age"> 

        <input type="checkbox" name="age" id="age"><br><br>

        <label for="age">20-50 age</label>
        <input type="radio" name="age" id="age">

        <input type="checkbox" name="age" id="age"><br><br>
        
        <label for="age">50-80 age</label>
        <input type="radio" name="age" id="age">

        <input type="checkbox" name="age" id="age"><br><br>
         
        <!-- #combobox  -->
        <label for="contry">select your contry</label>
        <select name="contry" id="contry">
            <option value="contry1">India</option>
            <option value="contry2">Japan</option>
            <option value="contry3">Rous</option>
        </select><br><br>

        <input type="submit" value="submit">
    </form>
</body>
</html>

  • source code 10

    This is videoNo 10 source code.
    it is exercise for html language.
    1 exercise:- -in this exercise invole all topics are html. 
    1 heading create 
2 add randome paragraph 
    -strong tag
    - em tag
    - del tag
    - ins and u tag
3 add link (link = youtube)
    - target
4 insert img 
5 create table 
    - result of student
    -Roll_No  student_Name per
        1
        2
        3
6 create Form 
    -student info form 
    -Name
    -Email
    -Roll No
    use radio button 
    1 10-15
    2 16-20
    3 20-30
    use combobox
    - add contry
7 create button 
    - sing in

  • source code 11

    This is videoNo 11 source code.
    the involed in videoNo8 for 8 topic.
    it is entitise
    1 1 symbole of copyright entitise -The entitise is use for create symbole of copyright. 
    <!-- <h1>©</h1> -->
    2 2 Lessthen entitise -The entitise is use for create symbole of Leesthen. 
    <!-- <h1><</h1> -->
    3 3 greaterthen entitise -The entitise is use for create symbole of greaterthen . 
    <!-- <h2>></h2> -->
    4 1 ampherson entitise -The entitise is use for create symbole of ampherson. 
    <!-- <h3>&</h3> -->
    5 5 symbole of Rupy entitise -The entitise is use for create symbole of Rupy. 
    <!-- <h4>₹</h4> -->
    6 6 create space entitise -The entitise is use for create space in the word/charecter. 
    <!-- <h5> </h5> -->
    7 7 double quotation entitise -The entitise is use for create symbole of double quotation. 
     <!-- <h6>"</h6> -->
    8 8 single quotation entitise -The entitise is use for create single quotation of greaterthen. 
     <!-- <p>'</p> -->
    4 Full Program -This program is create entitise. in this program is invole total 8 entitise. 
    <!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>Entitis</title>
</head>
<body>
    <!-- copy symbole  -->
    <!-- <h1>©</h1> -->
    <!-- less then  -->
    <!-- <h1><</h1> -->
    <!-- greter then   -->
    <!-- <h2>></h2> -->
    <!-- amperson  -->
    <!-- <h3>&</h3> -->
    <!-- symoble of rupy  -->
    <!-- <h4>₹</h4> -->
    <!-- create line  -->
    <!-- <h5> </h5> -->
    <!-- double quotation  -->
    <!-- <h6>"</h6> -->
    <!-- single quotation  -->
    <!-- <p>'</p> -->
</body>
</html>

  • source code 12 and 13

    This is videoNo 12 adn 13 source code.
    It is exercise solution.
    It is part 1 and part 2 for exercise solution.
    1 solution Part 1:- -in this exercise solution invole 8 topics. all topics are 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>webpage</title>
    <!-- It is css coding -->
    <style>
        img{
            height: 100px;
            width: 100px;
            border: 2px solid red;
            position: center;
        }
    </style>
</head>
<body>
    <!--1 heading tag  -->
    <h1>Information Webpage</h1>
        
    <!-- 2 add randome paragraph and use strong, em, del, ins and u tag in paragraph -->
    <p><strong> Lorem ipsum dolor sit amet consectetur</strong> <em>adipisicing elit.</em> <del>Maxime fugit debitis hic tempore vel molestias nulla,</del> 
        <ins>est natus tempora veniam odio ad quis</ins> <u>accusamus expedita quod nobis eum ex optio?</u>  </p>
    
    <!-- 3 add link (link = youtube) and use target in link tag -->
    <a href="https://www.youtube.com/" target="_blank"> open youtube</a>

    <!-- 4 insert img  -->
    <img src="/img/nubelson-fernandes-gTs2w7bu3Qo-unsplash.jpg" alt="ranome img">
    
    <!-- 5 create table  -->
    <h2>Result of student</h2>
    <table border="3">
        <thead>
            <th>Roll_No</th>
            <th>Student_Name</th>
            <th>Per(%)</th>
        </thead>
        <tbody>
            <tr>
                <td>53</td>
                <td>setu patel</td>
                <td>90</td>
            </tr>
            <tr>
                <td>43</td>
                <td>yash patel</td>
                <td>80</td>
            </tr>
            <tr>
                <td>53</td>
                <td>Raj patel</td>
                <td>85</td>
            </tr>
        </tbody>
    </table>

    <!-- 6 Create form  -->
    <form>
        <h1>student info form</h1>

        <label for="Name">Enter your name</label>
        <input type="text" name="Name" id="Name" placeholder="Name"> <br><br>

        <label for="Email">Enter your Email</label>
        <input type="email" name="Email" id="Email" placeholder="Email"> <br><br>

        <label for="Roll_No">Enter your Roll_No</label>
        <input type="number" name="Roll_No" id="Roll_No" placeholder="Roll_No"> <br><br>
        
        <!-- Create radio button  -->
        <h1>Select your age-grop</h1>
        <label for="age"> 10-15</label>
        <input type="radio" name="age" id="age"> <br>
        <label for="age">16-20</label>
        <input type="radio" name="age" id="age"> <br>
        <label for="age"> 20-30</label>
        <input type="radio" name="age" id="age"> <br>

        <!-- Create combobox -->
        <label>Choose your contry</label>
        <select name="contry" id="contry">
            <option value="contry">India</option>
            <option value="contry">Japan</option>
            <option value="contry">Rous</option>
        </select> <br><br>
     
        <!-- 7 Create button  -->
        <input type="submit" value="sing in">
    </form>
</body>
</html>

    • CSS tutorial

  • source code 15

    This is videoNo 15 source code.
    That is first CSS video |
    in this video invole two topic|
    1 how to use CSS in html |
    2 tow CSS propety 1]font-color 2]background color |
    1 CSS :- font-color This is CSS property| that is use for chang differunt type of font color | ex.. 
    color: rgba(255, 0, 0, 0.89);
    2 CSS :- background-color This is CSS property| that is use for chang differunt type of backgorund color like change font background color , page background color etc..|ex.. 
    background-color: red;
    3 CSS :- Full Program Code In this program use for font-color and background-color |
    Html Code :- 
    <!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="/css9.css">
    <title>Css 1</title>
</head>
<body>
    <h1>CSS totorial</h1>
</body>
</html>
    CSS Code :- 
    /* heare select all html  */
*{
    /* this is CSS property for use backgroun color */
    background-color: blue;
} 
/* heare select body in html  */
body{
    background-color: red;
}
/* heare select involve all html in body tag   */
html{
    background-color: yellow;
}
/* heare select h1 tag and add css property  */
h1{
    /* font color property  */
    color: rgba(255, 0, 0, 0.89);
    /* backgroun color property */
    background-color: blue;
}

  • source code 16

    This is videoNo 16 source code.
    in this video invole two topic|
    1 how select tag for add css|
    2 one CSS propety 1]border |
    1 CSS :- border This is CSS property| that is use for creating border | ex.. 
    border: 10px solid blue;
    2 CSS :- Full Program Code In this program use for border |
    Html Code :- 
    <!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="/css10.css">
    <title>CSS totorial2</title>
</head>
<body>
    <h1>list of item</h1>
    <ul>
        <h1>Show three item</h1>
        <li>item1</li>
        <!-- use inline CSS  -->
        <li style="background-color: yellow;">item2 </li>
        <li>item3</li>
    </ul>
</body>
</html>
    CSS Code :- 
    /* heare select body in html  */
body{
    /* this is border CSS-property use for given border */
    border: 10px solid blue;
}
/* heare select h1 tag in ul tag (ul>h1) */
ul h1{
    color: red; /* font color  */
    border: 3px dotted red;
}
/* heare select span tag | spna tag is invole in li tag |li tag is invole in ul tag (ul>li>span) */
ul li span{
    background-color: yellow;
}
/* heare select two tage for at the same time | 1. ul tag 2. li tag that is invole in ul tag (ul and ul>li) */
ul, ul li{
    border: 2px solid green;
}
/* hear select ul tag  */
ul{
    border: 2px solid green;
}