4. Let’s see the architecture behind this Project!
Html Source Code CSS Source Code
5. Lets understand the HTML tags and
CSS used and implemented over this
whole project.
6. What tags are used in header?
• Icon Tag - < i class=“xyz” id=”abc” ></ i>,
generally used for logo or particular Symbol
•Head tag - <h1>Playlist</h1>
used for Brand Name
•Anchor Tag - <a href=“xyz.com”>My
Library</a>
used for links
•<button type=“search”> </button>
•Search Bar – Using div tag nd adding Css
to give it shape.
•Login Button - <button> ,<a>,<form>
7. •<header> - Defines a header for a document or
a section
•<nav> - Defines a set of navigation links
•<section> - Defines a section in a document
•<article> - Defines an independent, self-
contained content
•<aside> - Defines content aside from the
content (like a sidebar)
•<footer> - Defines a footer for a document or a
section
•<details> - Defines additional details that the
user can open and close on demand
•<summary> - Defines a heading for
the <details> element
Most basic tags that separates the
parts of a Webpage
8. What can Main Content area contains!
• <p> - paragraph contents
• <img> -Hero Image or even for logo
• <ul>,<li>- ordering the music playlist
• <button>--to Play
• <span> - better for inline styling
9. Lets explore some more Tags
•<meta> - defines metadata about an HTML,
page description, keywords, author, viewport
settings.
• <title> - tag defines the title of the page.
•<nav> - contains 2,3 anchor tags displays it
online
•<div>- divides particular stuff in between body
•<section>
•<!– Comments-- Comments - this never
displays.
• <link> - for adding Stylesheets or Bootstrap or
fontawsm links
• <ul>,<ol>,<li> -
10. Some Formatting tags
•<b>-bolds the text e.g.- bold
•<i> - italics the text - Italic
•<sup> - superscript e.g.- x²
•<sub> - subscript e.g.- O3
•<caption> - captions the table box
or a particular stuff
•<span> - inline organization and styling.
•<h1>, <h2>, <h3>, <h4>, <h5>,
<h6>
•<hr> - for creating Horizontal line.
•<br> - breaking lines or jumping
to next line.
12. •External CSS
<link rel="stylesheet" href="mystyle.css">
•Internal CSS
<head> <style> //styling code
</style></head>
•Inline CSS
<p style="color:red;">This is a
paragraph.</p>
Three Ways to Insert CSS
13. CSS Box Properties
•Color - gives color to text of box
div { color: Green;}
•Background-color - gives background color to text inside box
div { background-color: Tomato;}
•Padding margin
div {padding-top: 50px; padding-right: 30px; padding-bottom-
50px; padding-left: 80px; }
Or div {padding: 50px;
•Border-width
div { border: 1px solid red;}
•Border-color
div { border: 1px solid red;}
•Border-style
div { border: 1px solid red;}
Style can also be groove, double, dashed, dotted
bottom:
