Skip to content

HTML structure

Jump to bottom
Abel VB edited this page Aug 17, 2024 · 5 revisions

  1. <!DOCTYPE html>:

    • Function: Declares the document type and HTML version. It helps the browser render the document correctly.

  2. <html>:

    • Function: The root element of the HTML document. It contains all other HTML elements.

  3. <head>:

    • Function: Contains meta-information about the document, such as title, character encoding, and links to stylesheets or scripts.

  4. <meta charset="UTF-8"/>:

    • Function: Specifies the character encoding for the document, ensuring that text is correctly displayed.

  5. <title>:

    • Function: Sets the title of the document, which appears in the browser tab or title bar.

  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>:

    • Function: Configures the viewport for responsive design, ensuring the page scales correctly on different devices.

  7. <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">:

    • Function: Links to an external stylesheet, providing additional styling rules for the document.

  8. <meta name="description" content="Noticias sobre abel barbosa."/>:

    • Function: Provides a brief description of the page content, used by search engines for indexing.

  9. <meta name="keywords" content="noticias, abel, barbosa"/>:

    • Function: Specifies keywords related to the page content, helping search engines understand the topic.

  10. <meta name="author" content="rock studios"/>:

    • Function: Identifies the author of the document.

  11. <link rel="icon" type="image/png" href="https://abel8260.github.io/apploydv_portable/pv_e_fav.png">:

    • Function: Specifies the favicon, a small icon displayed in the browser tab.

  12. <meta property="og:title" content="apployd portable" />:

    • Function: Defines the title for social media sharing, using Open Graph protocol.

  13. <meta property="og:image" content="https://abel8260.github.io/apploydv_portable/apployd_og_img.png" />:

    • Function: Specifies the image to be used when the page is shared on social media.

  14. <style type="text/css">:

    • Function: Contains internal CSS rules that style the HTML elements on the page.

  15. <body>:

    • Function: Contains the main content of the HTML document that is displayed in the browser.

  16. <div class="painel-nav-1-recente">:

    • Function: A division element used for structuring and styling the "Popular" navigation section.

  17. <img src="./img_geral/popular.png" class="recente">:

    • Function: Displays an image within the "Popular" navigation section.

  18. <div class="painel-cards-1">:

    • Function: A container for the card elements, grouping them for styling and layout purposes.

  19. <div class="painel-nav-1">:

    • Function: A division within the card container used for additional styling and layout.

  20. <a href="http://www.webintoapp.com/store/149023/">:

    • Function: Creates a hyperlink to another web page or resource.

  21. <div class="card">:

    • Function: Represents an individual card within the card container, used for displaying content.

  22. <div class="card-div_geral-1">:

    • Function: A division within the card for organizing content, such as images and text.

  23. <div class="card-div_geral-1_sp1">:

    • Function: Contains the icon image within the card.

  24. <img src="./img_geral/port-5-ico.png" class="title-img-card">:

    • Function: Displays an icon image within the card.

  25. <div class="card-div_geral-1_sp2">:

    • Function: Contains additional text or image content within the card.

  26. <img src="./img_geral/port-5-text.png" width="100%" height="100%">:

    • Function: Displays an image within the card, set to fill its container.

  27. <div class="card-div_geral-2">:

    • Function: A division for additional content, such as a theme image within the card.

  28. <img src="./img_geral/port-5-theme.png" width="100%" height="100%">:

    • Function: Displays a theme image within the card.

  29. <div class="card-div_geral-3">:

    • Function: A division for the final part of the card, often used for ratings or additional information.

  30. <div class="card-div_geral-3_sp1">:

    • Function: Contains image elements for ratings or other visual elements within the card.

  31. <img src="./img_geral/port-5-stars.png" width="100%" height="100%">:

    • Function: Displays a star rating image within the card.

  32. <div class="card-div_geral-3_sp2">:

    • Function: Contains additional image elements or text, such as size information.

  33. <img src="./img_geral/trnspc-5-tam.png" width="100%" height="100%">:

    • Function: Displays additional image content within the card.

  34. </a>:

    • Function: Closes the hyperlink element.

  35. </div>:

    • Function: Closes the card, card content, and card section divisions.

  36. <div class="painel-nav-1-recente">:

    • Function: Another navigation panel, typically used for a different section, like "Games."

  37. <img src="./img_geral/GAMES.png" class="recente">:

    • Function: Displays an image related to the "Games" section.

  38. </div>:

    • Function: Closes the "Games" navigation panel.

  39. </div>:

    • Function: Closes the card container.

  40. </body>:

    • Function: Ends the body section of the document.

  41. </html>:

    • Function: Ends the HTML document.

Credits

This project was developed with assistance from ChatGPT by OpenAI. Special thanks for help with coding guidance and suggestions.

Custom the folder in windows: (click here)

Clone this wiki locally