it is based on the education of html

1. TPIP-1
PRESENTED BY:
Maheshwari
Mahitha
Manisha M Karabishti
Mansi Zodge
Mohammad Hafsa Kursheed
Mohammed Seyyed Safwan
Mohideen Nazim

2. HTML

3. Presentation Logic
• Fundamentals
• HTML
• CSS
• Bootstrap
• JavaScript
Advanced:
• Angular
Business Logic
• Java -- Spring
Oracle / My SQL
Database
UI Layer API Layer

4. HTML History
• The Internet
• The WorldWide Web
a. HTML ( HyperText Markup Language)
b. URI / URL
c. HTTP (HypertextTransfer Protocol)

5. Anatomy of an HTML Document
• doctype - declaration of standards compliance
• html - Root element
• head - Document metadata
-> Used by browsers and search engines
• body - Document data
-> Displayed to the users by the client browser

6. Simple code for HTML page…

7. Tags
SingleTags (VoidTags) :
Some common single tags include:
• <img>: For embedding images.
• <meta>: For metadata about the document.
• <link>: For linking external resources.
• <input>: For form inputs.
• <br>: For a line break.
• <hr>: For a thematic break (horizontal line).

8. Paired tags :
• <p>...</p>: For paragraphs.
• <h1>...</h1> to <h6>...</h6>: For headings.
• <div>...</div>: A generic container.
• <span>...</span>: For inline text.
• <a>...</a>: For hyperlinks.

9. Semantic Tags:
Semantic tags convey the meaning of the type of content they surround. Some common semantic tags in HTML5
are :
• <header> : Represents a container for introductory content or a set of navigational links. Typically contains
the website logo, website name and main navigation.
• <nav>: Represents a section of navigation links, either within the current document or to other documents
• <main> : Represents the main content of a document. There should be only one <main> element per page,
and it should be unique from content that is repeated across a set of documents such as site navigation header,
or footer.
• <article>: Represents a self-contained composition in a document, which is intended to be independently
distributable or syndicated, like a blog post or news story.
• <section> : Represents a standalone section of a document, like tabs, tabbed content, or any content that
stands alone and can be independently understood.
• <aside> : Represents content that is tangentially related to the main content, like a sidebar or a pull quote
• <footer>: Represents the footer of a document or a section, typically containing information about the
author, copyright information or related documents.
• <figure> and <figcaption> : The <figure> element represents content like diagrams, photos, or code
listings while the <figraption>

10. Non-SemanticTags:
Non semantic tags don't give any information about the content's type or
structure.They are generic containers. Some common non-semantictags include:
• <div>: A block-level generic container. It doesn't impart any semantic meaning
on its own
• <span>: An inline generic container. Like the <div> tag, it doesn't impart any
semantic meaning
• <i> : Historically used to italicize text, but in modem web development, it's
often used for icons.
• <b> : Historically used to bolden text, but in modem web practices, bolding is
often achieved with CSS.
When developing web pages, it's beneficial to use semantic tags whenever
possible because they provide better SEC, accessibility, and readability However,
non-semantic tags like <div> and <span> still have their place for styling and
scripting purposes where semantic tags might not be necessary or appropriate.

11. HTML Login page…

12. Selectors
•Group Selectors
•Child Selectors
•Adjacent Sibling Selectors

13. CSS

14. Border Styles…

15. Box Model & Layers Effect…

17. Justify Content Style…

18. Flex Model…

19. Grid Model…