Web_Engineering_Assignment_Clean.pptxfor college
- 1. Q1(i): HTML Element vs Tag • An HTML tag is a keyword surrounded by angle brackets like <p>. • An HTML element includes the tag, its content, and closing tag, e.g., <p>Text</p>.
- 2. Q1(ii): Hyperlink (New Tab) • <a href="https://example.com" target="_blank">Visit Example</a>
- 3. Q1(iii): Purpose of alt Attribute • The alt attribute provides alternative text for images. It helps in SEO and is displayed if the image fails to load.
- 4. Q1(iv): Semantic HTML Tags • <article>: Defines independent, self-contained content. • <section>: Groups related content together.
- 5. Q1(v): Purpose of <div> and <span> • <div> is a block-level container used for layout. • <span> is an inline container used for text styling.
- 6. Q1(vi): Function of class Attribute • The class attribute is used to apply CSS styles to HTML elements. • Example: .red { color: red; }
- 7. Q1(vii): Ordered List HTML • <ol> • <li>Item One</li> • <li>Item Two</li> • <li>Item Three</li> • </ol>
- 8. Q1(viii): Padding vs Margin in CSS • Padding is space between content and border. • Margin is space outside the border, separating elements.
- 9. Q1(ix): Code Interpretation • The element has both .container and #box styles. • #box overrides class: text becomes red, background lightgray.
- 10. Q1(x): Internal vs Inline CSS • Internal CSS is defined in the <style> tag in the head. • Inline CSS is written directly in the HTML element using the style attribute.
- 11. Q2: Webpage Layout (HTML + CSS) • Use semantic tags: <header>, <nav>, <section>, <footer>. • Example layout: • <header>Header</header> • <nav>Navigation</nav> • <section> • <div class='left'>Left Content</div> • <div class='right'>Right Content</div> • </section>
- 12. Q2: CSS Explanation • Use Flexbox or Grid for layout. Example CSS: • .container { display: flex; } • .left, .right { width: 50%; padding: 10px; } • Style header and footer with background and text alignment. • Explain each section's purpose: header for branding, nav for links, section for main content.
- 13. Q3: CSS Box Model • The CSS box model includes: • 1. Content – actual text or image • 2. Padding – space around content • 3. Border – line around padding • 4. Margin – space outside border • Example CSS: • div { • margin: 20px; • border: 2px solid black;