top of page
Writer's picturecompnomics

HTML code to create a simple Bio-Data

Updated: Mar 31



This code creates a basic timetable with subjects for each day and time slot. You can customize it further by:

  • Adding a header row for each day

  • Changing the background color of specific blocks

  • Adding periods for each subject

  • Including teachers' names









<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Bio Data</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }

    .bio-container {
      border: 1px solid #ddd;
      padding: 20px;
      width: 500px;
      margin: 0 auto;
    }

    .bio-heading {
      font-size: 20px;
      text-align: center;
      margin-bottom: 10px;
    }

    .bio-label {
      font-weight: bold;
      display: block;
      margin-bottom: 5px;
    }

  </style>

</head>

<body>

  <div class="bio-container">

    <h2 class="bio-heading">My Bio Data</h2>
    <p class="bio-label">Name:</p>
    <p>John Doe</p>
    <p class="bio-label">Age:</p>
    <p>25</p>
    <p class="bio-label">Occupation:</p>
    <p>Software Engineer</p>
    <p class="bio-label">Education:</p>
    <p>Bachelor of Science in Computer Science</p>
    <p class="bio-label">Skills:</p>

    <ul>
      <li>Programming (Python, JavaScript)</li>
      <li>Web Development</li>
      <li>Problem Solving</li>
      <li>Communication</li>
    </ul>

    <p class="bio-label">Interests:</p>

    <ul>
      <li>Hiking</li>
      <li>Reading</li>
      <li>Playing guitar</li>
      <li>Traveling</li>
    </ul>
  </div>

</body>

</html>


This code creates a well-structured and styled webpage displaying bio-data information. Here's a breakdown of the code:


1. DOCTYPE and Basic HTML Structure:

  • <!DOCTYPE html>: This line declares the document type as HTML, instructing the browser on how to interpret the code.

  • <html> tag: This is the root element of the HTML document, encompassing the entire webpage structure.

  • <head> tag: This section contains meta information about the webpage that isn't directly displayed but is important for browsers and search engines.

  • <meta charset="UTF-8">: Defines the character encoding as UTF-8, allowing for proper display of various characters.

  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag optimizes the webpage for different screen sizes by setting the viewport to the width of the device and initial zoom level to 100%.

  • <title>My Bio Data</title>: Sets the title of the webpage, displayed in the browser tab.

  • <style> tag: This section defines styles that will be applied to the webpage elements.

2. Styling the Bio-Data (within <style> tag):

  • The code defines various CSS classes to style different elements of the bio-data section:

  • .bio-container: Styles the main container holding the bio-data information, including border, padding, width, and centering it horizontally within the webpage.

  • .bio-heading: Styles the heading "My Bio Data", including font size, text alignment, and margin.

  • .bio-label: Styles the labels for each bio-data entry, including font weight, displaying them as block elements, and adding some margin.

3. Body Section:

  • <body> tag: This section contains the visible content displayed on the webpage.

  • <div class="bio-container">: This div element with the class "bio-container" creates a container for the bio-data content. The styles defined earlier using the class are applied to this container.

  • Within the container, the code uses semantic HTML elements to structure the bio-data:

  • <h2>: Defines a level-2 heading "My Bio Data" using the class "bio-heading" for styling.

  • <p> elements with class "bio-label": These create styled paragraphs for each bio-data label (Name, Age, etc.).

  • <p> elements: These display the corresponding bio-data information (John Doe, 25, etc.).

  • Unordered lists (<ul> and <li>) with no specific classes: These format the skills and interests sections for better readability.

  • The code effectively separates content (<p>) from presentation (<style> with classes) using CSS, making the HTML more maintainable.


Remember to replace the sample subjects and timings with your specific timetable information. You can also adjust the CSS to match your desired style and branding.


You can also check the other Bio-Data Example using HTML, CSS and Table Tag.


7,072 views3 comments

Recent Posts

See All

3 Comments

Rated 0 out of 5 stars.
No ratings yet

Add a rating
Guest
Jun 09
Rated 4 out of 5 stars.

good

Like

Guest
Jun 09
Rated 4 out of 5 stars.

bad

Like

Guest
Jun 09
Rated 4 out of 5 stars.

bad

Like
bottom of page