CodeFoad/html.html at main · Jadu07/CodeFoad · 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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Essentials</title>
    <link rel="stylesheet" href="python.css">
</head>
<body>
    <nav class="navbar">
        <div class="logo">
            <a href="./index.html">
                CODE<span style="color: #ff6f61;">FOAD</span>
            </a>
        </div>
        <ul class="navigationlinks">
            <li><a href="./index.html">Home</a></li>
            <li class="tutdropdown">
                <a>Tutorials</a>
                <ul class="tutorialdropdownitems">
                    <li><a href="./Python1.html">Python Essentials</a></li>
                    <li><a href="./bashscripting.html">Bash Scripting</a></li>
                    <li><a href="./html.html">HTML</a></li>
                    <li><a href="./css.html">CSS</a></li>
                </ul>
            </li>
            <li><a href="./index.html#aboutus">About Us</a></li>
            <li><a href="./contactus.html">Contact</a></li>
            <li id="loginItem"><a href="./login.html" class="loginbutton">Login</a></li>
        </ul>
    </nav>
    <div class="htmlbackground">
        <div class="pythonhero">
            <h1>Welcome to the World of HTML!</h1>
            <p>"Dive into the heart of the web, where HTML lays the foundation for everything you see and interact with."</p>
        </div>
    </div>
    <section class="topics">
        <div class="themebackground">
            <div class="theme">
                <h2>🌐 What is HTML?</h2>
                <p>HTML, or HyperText Markup Language, is the backbone of all websites. It defines the structure and layout of content, enabling creators to bring their ideas to life on the web.</p><br>
                <h3>✨ Why Learn HTML?</h3>
                <ul>
                    <li>Build your own websites from scratch.</li>
                    <li>Understand how the web works behind the scenes.</li>
                    <li>Combine it with CSS and JavaScript for dynamic, visually stunning websites.</li>
                </ul>
                <p>Are you ready to unlock the power of HTML? Let's begin our journey into web development! 🌟</p>
            </div>
        </div>

        <div class="topicbackground1">
            <div class="topiccontent">
                <h3>📄 Creating Your First HTML Page</h3>
                <p>Starting with HTML is simple. Here's a basic structure to get you going:</p>
                <div class="codebackground">
<pre>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;My First Page&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Hello, World!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
                </div>
                <a href="./compiler.html" class="tryitbutton" target="_blank">Try It</a>
            </div>
        </div>

        <div class="topicbackground2">
            <div class="topiccontent">
                <h3>🛠️ Basic Tags in HTML</h3>
                <p>HTML uses tags to structure content. Some essential tags include:</p>
                <ul>
                    <li><b>&lt;h1&gt; to &lt;h6&gt;:</b> Define headings of varying importance.</li>
                    <li><b>&lt;p&gt;:</b> Add paragraphs of text.</li>
                    <li><b>&lt;a&gt;:</b> Create clickable links.</li>
                    <li><b>&lt;img&gt;:</b> Display images on your page.</li>
                </ul>
                <p>Use these tags creatively to structure your web pages!</p>
            </div>
        </div>

        <div class="revisionbackground">
            <div class="revision">
                <h3>🔁 Recap</h3>
                <p>Here's what you've learned so far:</p>
                <ul>
                    <li>HTML structures content on the web.</li>
                    <li>The basic tags for headings, paragraphs, links, and images.</li>
                    <li>How to create your first HTML page.</li>
                </ul>
                <p>Keep experimenting with these concepts to become a web development wizard! 🧙‍♂️</p>
            </div>
        </div>

        <div class="exercisesbackground">
            <div class="exercises">
                <h3>💡 Practice Exercises</h3>
                <p><b>Exercise 1:</b> Create a webpage with the following:</p>
                <ul>
                    <li>A title of your choice.</li>
                    <li>A heading introducing yourself.</li>
                    <li>A paragraph describing why you're excited to learn HTML.</li>
                </ul>
                <p><b>Exercise 2:</b> Add a link to your favorite website and an image that represents you.</p>
                <a href="./compiler.html" class="tryitbutton" target="_blank">Try It</a>
            </div>
        </div>
    </section>

    <section class="firstPage">
        <a href="https://www.w3schools.com/html/" class="nextbutton" target="_blank"> 🐾 Wanna learn more! let's go 💫</a>
    </section>
    <footer>
        <div class="footer-container">
            <p class="footer-text">© 2024 Made with ❤️ by <span class="highlight">Rohan Kumar</span>, <span class="highlight">Yashraj Chowhan</span>, and <span class="highlight">Suraj Kulkarni</span>.</p>
            <p class="footer-text">Empowering the world, one line of code at a time. 🚀</p>
        </div>
    </footer>
</body>
<script src="common.js"></script>
<script src="login.js"></script>
</html>