-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhtml.html
126 lines (121 loc) · 5.32 KB
/
html.html
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
<!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><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>
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
</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><h1> to <h6>:</b> Define headings of varying importance.</li>
<li><b><p>:</b> Add paragraphs of text.</li>
<li><b><a>:</b> Create clickable links.</li>
<li><b><img>:</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>
</html>