HTML-Notes-CODES/code1.html at main · SHROUDSOURAV/HTML-Notes-CODES · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html> <!--basic heading tags learning-->
                <!--learning paragraph tags and lorem-->
                <!-- control slash to comment line shortcut key -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="testing first html">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML head para pre break tags</title>

</head>
<body>
    <!-- shift + alt + downward arrow to copy and paste line pointed by cursor -->

    <!-- to edit start and end of a tag
    press left click on the tag then hold alt and press left click
    on the other tag and edit it both at the same time
    -->
    <h1>learning heading tags1</h1>  <!--h1 is the biggest header-->
    <h2>learning heading tags2</h2>  <!--h2,h3,h4,h5,h6will decrement the size of the text in the header files-->
    <h3>learning heading tags3</h3>  <!--there are 6 header tags h1,h2,h3,h4,h5,h6-->
    <h4>learning heading tags4</h4>  <!--each one decrements the size of the text from h1 to h6-->
    <h5>learning heading tags5</h5>
    <h6>learning heading tags6</h6>


    <!--instead of typing bunch of random words to check paragraph tag use => lorem with p tag
    eg of how to use :
    step 1 -> press p and this symbol >
    step 2 -> enter the word lorem and mention the number of words and then press tab for it to workout
    step 3 -> how it will look => p>lorem50     after pressing tab it will generate 50 words in the p tag or paragraph tag
    -->


    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae laborum natus ipsum ab veritatis? Laboriosam laborum mollitia illum dolore. Aliquam consectetur nisi nemo iste maiores quisquam aut ea corporis ipsum commodi vero, iusto optio eos magnam laboriosam. Non unde facere asperiores, totam quos aspernatur pariatur doloribus ut illo aperiam quidem.</p>
    <br> <!--to break a line-->

    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic corporis, harum aut perspiciatis libero numquam. Iusto, ratione non sed quod,
        <hr> <!--draws a horizontal line -->
    <br>officiis fugit vitae tempore hic praesentium ex laborum quas ut.</p>


    <!--Now lets say we way to write a poem and in html all the text is written horizontally but a poem breaks after each line
    now we dont want that so we can use <br> tag to cause breaklines but its tedius and inefficient so we need to use <pre> tag and whatever
    way we written our text and given our spaces within <pre> tag it gets implemented the same in our html page

        given below is the example
    -->
        <pre>
            poem line1
            poem line2

            poem line3
            poem line4

        </pre>
</body>
</html>

<!--html divided in 2 parts head,body-->
<!--head consits of webpage title and favicol-->
<!--body consits the visual aspect of the webpage-->