Joshua Nato's team blog

Activity 18: Research HTML

Joshua Nato's photo
Joshua Nato
·

4 min read

Basic HTML Elements:

  • Headings: <h1> to <h6> are used for headings of different levels, with <h1> being the largest and <h6> the smallest.

  • Paragraph: <p> is used to create a paragraph of text.

  • Lists:

    • Unordered List: <ul> creates a list with bullet points. Each list item is defined using <li>.

    • Ordered List: <ol> creates a numbered list. Each list item is defined using <li>.

  • Table: <table> creates a table. <tr> defines a table row, <th> defines a table header cell, and <td> defines a table data cell.

  • Form: <form> is used to create a form for user input. It contains various input elements like <input>, <textarea>, <select>, etc.

  • Div: <div> is a generic container element used to group other elements together for styling or scripting purposes.

  • Images: <img> is used to embed an image in the webpage. It requires the src attribute to specify the image source and the alt attribute to provide alternative text for accessibility.

  • Canvas: <canvas> is an element used for drawing graphics. It requires JavaScript to interact with it.

  • Video: <video> is used to embed a video in the webpage. It requires the src attribute to specify the video source and the controls attribute to display video controls.

  • YouTube: An <iframe> is used to embed a YouTube video. The src attribute points to the YouTube embed URL.

  • Drag and Drop: The draggable attribute is used to make an element draggable. The ondrop and ondragover events are used to handle the drop event.

Semantic HTML:

  • Header: <header> represents the introductory content of a page or section. It often contains the website's logo, navigation menu, and page title.

  • Footer: <footer> represents the footer content of a page or section. It often contains copyright information, contact details, and links to related content.

  • Article: <article> represents a self-contained piece of content, like a blog post, news article, or forum comment.

  • Section: <section> represents a thematic grouping of content, like a chapter in a book or a set of related articles.

  • Nav: <nav> represents a section of the page that links to other pages or sections of the current page.

Semantic HTML helps to improve the structure and organization of your webpage, making it easier for both search engines and screen readers to understand the content.

HTML Head Section

  • <meta> tags define the character set and viewport for responsive design.

  • Title is set as "Basic HTML Elements".

  • CSS styles are added within the <style> tag to style the canvas and drag-and-drop area.

2. Header and Navigation (<header> and <nav>)

  • The header contains an <h1> with a welcome message.

  • A navigation bar (<nav>) includes a list (<ul>) with links to different sections of the page: About, Services, and Contact.

3. About Us Section (<section id="about">)

  • Contains an <h2> header and a paragraph <p> describing the company’s services and goals.

4. Services Section (<section id="services">)

  • Displays:

    • A list (<ul>) of the services offered.

    • An ordered list (<ol>) of popular products.

    • A product table (<table>) showing product IDs, names, and prices.

5. Contact Us Section (<section id="contact">)

  • A form with three fields: Name (text input), Email (email input), and Message (textarea). The form is submitted via POST, although the action is currently set to "#" (no backend action specified).

6. Media Section (<section id="media">)

  • Image Example: A placeholder image from an external URL is displayed using an <img> tag.

  • Canvas Example: A canvas element is drawn using JavaScript. The canvas has a width of 200px and height of 100px. The script uses the CanvasRenderingContext2D API to write the text "Activity" inside the canvas.

  • Video Example: A video player using <video> tag with two possible sources (mp4 and ogg formats). If the user's browser supports these formats, the video can be played.

7. Drag and Drop Section (<section id="drag-drop">)

  • A drag-and-drop area created using a <div> with a dashed border.

  • The allowDrop(event) function prevents the default behavior to enable dropping.

  • The drop(event) function handles the dropped data, appending it as a paragraph inside the dropArea.

  • A simple footer with a copyright message.

Key Concepts Covered:

  • HTML Structure: Demonstrates headers, sections, lists, tables, forms, and multimedia elements.

  • Canvas Drawing: Example of using the canvas to display text.

  • Drag-and-Drop: JavaScript functionality to handle drag-and-drop events.

  • Media Embedding: Embedding images, videos, and handling multimedia elements like video playback.

Output : Simple Web Page

The simple webpage, likely the homepage of a company website.

  • The website is titled "Welcome to My Web Page."

  • It features a navigation menu with links to "About," "Services," and "Contact."

  • The "About Us" section describes the company as being dedicated to providing quality services and products, with customer satisfaction and innovation as their primary goals.

  • The "Our Services" section lists "Consulting," "Product Development," and "Customer Support" as the company's offerings.

https://github.com/JoshuaNato/Act18