DAY 1: INTRODUCTION TO HTML
HTML (HyperText Markup Language) is the standard language used to create webpages.
It defines the structure of the webpage using various tags and elements.
Basic Structure of an HTML Document:
Example:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
------------------------------------------------------------
HEAD TAG CONTENTS
------------------------------------------------------------
The <head> tag contains metadata and files linked to the webpage.
1. <link />
Used to link external CSS files.
Example:
<link rel="stylesheet" href="[Link]" />
2. <meta />
Used for SEO, description, keywords, charset, etc.
Example:
<meta charset="UTF-8" />
3. <base />
Defines default URL/path for links.
Example:
<base href="[Link] />
4. <title></title>
Sets the title of the web page.
5. <style></style>
Internal CSS inside <head>.
Example:
<style>
body { background: lightyellow; }
</style>
6. <script></script>
Used to add JavaScript.
Example:
<script>
alert("Welcome!");
</script>
7. <noscript></noscript>
Displays message if JavaScript is disabled.
8. <command></command>
Represents command that a user can invoke.
------------------------------------------------------------
DAY 2: HTML MEDIA TAGS
------------------------------------------------------------
IMG TAG:
<img src="[Link]" height="200" width="200" alt="Sample Image" title="Image Title" />
VIDEO TAG:
<video src="movie.mp4" height="300" width="400" controls autoplay muted
poster="[Link]"></video>
AUDIO TAG:
<audio src="song.mp3" controls></audio>
------------------------------------------------------------
MARQUEE TAG
------------------------------------------------------------
<marquee direction="left" scrollamount="5" bgcolor="pink" behavior="alternate">
Scrolling Text
</marquee>
Attributes: direction, height, width, scrollamount, behavior, loop, onmouseover, onmouseleave
------------------------------------------------------------
HTML LISTS
------------------------------------------------------------
1. Ordered List:
<ol>
<li>HTML</li>
<li>CSS</li>
</ol>
2. Unordered List:
<ul>
<li>Apple</li>
<li>Mango</li>
</ul>
3. Definition List:
<dl>
<dt>HTML</dt>
<dd>Markup Language</dd>
</dl>
------------------------------------------------------------
ANCHOR TAG <a>
------------------------------------------------------------
Used to create hyperlinks.
Example:
<a href="[Link] target="_blank">Visit Google</a>
Attributes:
href -> URL
target -> _self, _blank
------------------------------------------------------------
INPUT TAG (VERY IMPORTANT)
------------------------------------------------------------
Types:
text, number, email, file, radio, checkbox, date, time, color, range, password
Example Form:
<form>
Name: <input type="text">
Password: <input type="password">
<button>Submit</button>
</form>
------------------------------------------------------------
CSS FULL NOTES
------------------------------------------------------------
CSS — Cascading Style Sheets — used to style webpages.
------------------------------------------------------------
TYPES OF CSS
------------------------------------------------------------
1. Inline CSS:
<h1 style="color:red; background:black;">Hello</h1>
2. Internal CSS:
<style>
h1 {
color: blue;
font-size: 40px;
}
</style>
3. External CSS:
In file: [Link]
p{
color: purple;
}
Linked using:
<link href="[Link]" rel="stylesheet">
------------------------------------------------------------
CSS SELECTORS
------------------------------------------------------------
Tag Selector:
h1 { color: red; }
ID Selector:
#box { background: yellow; }
Class Selector:
.box { border: 2px solid red; }
------------------------------------------------------------
BORDER PROPERTIES
------------------------------------------------------------
border: 5px solid red;
Styles: solid, dotted, dashed, groove, double
------------------------------------------------------------
TEXT TRANSFORM
------------------------------------------------------------
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
------------------------------------------------------------
MARGIN & PADDING
------------------------------------------------------------
margin → Outer space
padding → Inner space
margin: 20px;
margin: 10px 20px;
padding: 15px;
padding: 10px 30px;
------------------------------------------------------------
SHADOWS
------------------------------------------------------------
text-shadow: 2px 2px 5px red;
box-shadow: 2px 2px 10px black;
------------------------------------------------------------
TRANSFORM PROPERTY
------------------------------------------------------------
transform: rotate(30deg);
transform: scale(1.2);
transform: translateX(50px);
------------------------------------------------------------
HTML5 SEMANTIC TAGS
------------------------------------------------------------
<header>
<footer>
<section>
<article>
<nav>
<aside>
Example Layout:
<header>My Website</header>
<nav>Menu</nav>
<section>
<article>Content</article>
</section>
<footer>Footer</footer>
------------------------------------------------------------
END OF NOTES
------------------------------------------------------------