Web Analytics Made Easy - Statcounter
SVET PROGRAMIRANJA

CREATE YOUR LOGO - HOME

​DOCTYPE html>
<html>
  <head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/main.css"/>

     <meta charset="UTF-8" />
     <title>Create Your Logo</title>
  </head>
  <body>
    <div class="container">

      <!-- Header -->
      <div class="header d-flex flex-column text-center">
        <nav class="nav-container navbar-expand-lg primary d-flex flex-row p-2 align-items-end "> 
          <!-- Items -->
          <div class="collapse navbar-collapse" id="topNavBar">
            <ul class="nav navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#" >
                        <span class="full-text" aria-hidden="true">&nbsp;
                            Home
                        </span>
                    </a>
                   
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">
                        <span class="full-text" aria-hidden="true">&nbsp;
                             About
                        </span>
                    </a>
                    
                </li>
                <li class="nav-item dropdown ">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown"  href="#" id="navbarDropdownMenuLink">
                        <span class="full-text" aria-hidden="true">&nbsp;
                              Logo examples
                        </span>                        
                    </a>
                    <ul class="dropdown-menu " aria-labelledby="navbarDropdownMenuLink">
                        <li class="dropdown-item">
                               <a href="">
                                    <span class="full-text" aria-hidden="true">&nbsp;
                                         Business
                                    </span>
                               </a>
                        </li>
                        <li class="dropdown-item">
                               <a href="">
                                   <span class="full-text" aria-hidden="true">&nbsp;
                                        Education
                                   </span>
                               </a>
                         </li>
                        <li class="dropdown-item">
                               <a href="">
                                   <span class="full-text" aria-hidden="true">&nbsp;
                                          Sport
                                   </span>
                               </a>
                         </li>
          
                    </ul>
                 </li>
            </ul>
          </div>
        </nav>
        
        <!-- Title and subtitle-->
        <h1 class="text-center">Create Your Logo</h1>
        <p class="text-center">Create a simple logo in seconds..</p>
        <!-- Form for entering the name of the company or your name-->
        <form>  
              <input type="text" id="logoname" name="logoname"><br>
              <input type="submit" class="btn btn-danger" value="Submit Button">
         </form>
      </div> <!-- Header - end-->
      
      <!-- Middle part of page -->
      <div class="d-flex flex-column content">
        <!-- Colored ribbon with steps to create a logo -->
        <div class="ribbon d-flex flex-row justify-content-around">
          <div class="p-2 field">
            <h1>1. Choose a name</h1>
            <p>Enter your name or the name of your company logo</p>
         </div>
         <div class="field">
            <h1>2. Choose a logo</h1>
            <p>Select the logo that the application was created at the start and if you want to make your own changes to it</p>
         </div>
         <div class="field">
            <h1>3. Download logo</h1>
            <p>Save the logo under your profile and download the file</p>
         </div>
       </div><!-- Colored ribbon with steps to create a logo - end-->
        
        <!-- Examples of created logo -->
        <div class="logo_example d-flex flex-column justify-content-around">
            <h1 class="p-2">Primeri kreiranih logo-a</h1>
            <div class=" d-flex flex-row justify-content-around">
                  <img src="images/logo_prim_1.png" class="rounded" alt="Computer">
                  <img src="images/logo_prim_2.png" class="rounded" alt="Need">
                  <img src="images/logo_prim_3.png" class="rounded" alt="Svet programiranja">
            </div>
         </div><!-- Examples of created logo - end-->
      </div> <!-- Middle part of page - end -->
      
       <!-- Footer -->
      <div class="footer d-flex flex-column">
         <div class="d-flex flex-row justify-content-around">
             <div class="d-flex flex-column linkovi">
                  <a href="http://rctpupin.edu.rs/">RCT Pupin</a>
                  <a href="https://petlja.org/">Petlja</a>
                  <a href="https://izprogramiranja.weebly.com/">Svet programiranja</a>
          </div>
          <div class="d-flex flex-column linkovi text-white text-center">
                  <a href="https://dms.rs/">DMS</a>
                  <a href="https://www.w3schools.com/">W3School</a>
                  <a href="https://getbootstrap.com/">Bootstrap</a>
          </div>    
        </div>
        <p class="text-center text-white">© Copyright 2020 Ime Prezime</p>
      </div><!-- Footer - end -->
    </div>
  </body>
</html>

Suggestion for improvement of this page

​Here are specific suggestions for improving accessibility, SEO optimization, user feedback, and input validation for your "Create Your Logo - Home" page:
  1. Accessibility:
ARIA Labels or RolesAdd ARIA roles and labels to enhance accessibility for assistive technologies:
<nav class="nav-container navbar-expand-lg primary d-flex flex-row p-2 align-items-end" role="navigation" aria-label="Main Navigation">
  <!-- Other code remains the same -->
</nav>

<h1 class="text-center" aria-level="1" role="heading">Create Your Logo</h1>
<p class="text-center" aria-label="Subtitle for logo creation">Create a simple logo in seconds..</p>

<form aria-labelledby="logoForm">
  <label for="logoname" class="visually-hidden">Enter your logo name</label>
  <input type="text" id="logoname" name="logoname" aria-required="true" placeholder="Enter your logo name" />
  <input type="submit" class="btn btn-danger" value="Submit" />
</form>
 2. SEO Optimization:
Meta Descriptions and KeywordsInclude a meta description and keywords in the <head> section:
<meta name="description" content="Create your own logo in just a few steps. Easy to use application with customizable options for businesses, education, and more.">
<meta name="keywords" content="logo creation, design your logo, customizable logos, business logos, educational logos, logo examples">
3. User Feedback:
Confirmation MessageImplement a confirmation message after the logo name submission. You can use JavaScript to handle this:
<script>
  document.querySelector('form').addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent form submission
    const logoName = document.getElementById('logoname').value;
    
    if (logoName) {
      alert(`Thank you! Your logo name "${logoName}" has been submitted.`);
      // Optionally, you can clear the input field
      document.getElementById('logoname').value = '';
    } else {
      alert('Please enter a logo name before submitting.');
    }
  });
</script>
4. Validation:
JavaScript Input ValidationAdd JavaScript validation to ensure users enter a valid logo name:
<script>
  document.querySelector('form').addEventListener('submit', function(event) {
    const logoName = document.getElementById('logoname').value.trim();

    if (logoName.length < 3) {
      event.preventDefault(); // Prevent form submission
      alert('Logo name must be at least 3 characters long.');
    } else {
      // Proceed with form submission or confirmation message
      alert(`Thank you! Your logo name "${logoName}" has been submitted.`);
    }
  });
</script>

Summary

By incorporating these suggestions, you'll significantly enhance the accessibility, SEO, user interaction, and input validation for your logo creation website. This will help ensure a better experience for all users, including those with disabilities, as well as improve search engine visibility.

Complete code:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/main.css"/>

    <meta charset="UTF-8" />
    <meta name="description" content="Create your own logo in just a few steps. Easy to use application with customizable options for businesses, education, and more.">
    <meta name="keywords" content="logo creation, design your logo, customizable logos, business logos, educational logos, logo examples">
    <title>Create Your Logo</title>
</head>
<body>
    <div class="container">
        <!-- Header -->
        <div class="header d-flex flex-column text-center">
            <nav class="nav-container navbar-expand-lg primary d-flex flex-row p-2 align-items-end" role="navigation" aria-label="Main Navigation"> 
                <div class="collapse navbar-collapse" id="topNavBar">
                    <ul class="nav navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="#"><span class="full-text" aria-hidden="true">Home</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#"><span class="full-text" aria-hidden="true">About</span></a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdownMenuLink">
                                <span class="full-text" aria-hidden="true">Logo examples</span>                        
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <li class="dropdown-item"><a href="#"><span class="full-text" aria-hidden="true">Business</span></a></li>
                                <li class="dropdown-item"><a href="#"><span class="full-text" aria-hidden="true">Education</span></a></li>
                                <li class="dropdown-item"><a href="#"><span class="full-text" aria-hidden="true">Sport</span></a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
            <h1 class="text-center" aria-level="1" role="heading">Create Your Logo</h1>
            <p class="text-center">Create a simple logo in seconds..</p>
            <!-- Form for entering the name of the company or your name -->
            <form id="logoForm" aria-labelledby="logoForm">
                <label for="logoname" class="visually-hidden">Enter your logo name</label>
                <input type="text" id="logoname" name="logoname" aria-required="true" placeholder="Enter your logo name" />
                <input type="submit" class="btn btn-danger" value="Submit" />
            </form>
        </div> <!-- Header - end -->
        
        <!-- Middle part of page -->
        <div class="d-flex flex-column content">
            <div class="ribbon d-flex flex-row justify-content-around">
                <div class="p-2 field">
                    <h1>1. Choose a name</h1>
                    <p>Enter your name or the name of your company logo</p>
                </div>
                <div class="field">
                    <h1>2. Choose a logo</h1>
                    <p>Select the logo that the application was created at the start and if you want to make your own changes to it</p>
                </div>
                <div class="field">
                    <h1>3. Download logo</h1>
                    <p>Save the logo under your profile and download the file</p>
                </div>
            </div> <!-- Colored ribbon with steps to create a logo - end -->
            
            <!-- Examples of created logo -->
            <div class="logo_example d-flex flex-column justify-content-around">
                <h1 class="p-2">Primeri kreiranih logo-a</h1>
                <div class="d-flex flex-row justify-content-around">
                    <img src="images/logo_prim_1.png" class="rounded" alt="Computer logo example">
                    <img src="images/logo_prim_2.png" class="rounded" alt="Need logo example">
                    <img src="images/logo_prim_3.png" class="rounded" alt="Svet programiranja logo example">
                </div>
            </div> <!-- Examples of created logo - end -->
        </div> <!-- Middle part of page - end -->
        
        <!-- Footer -->
        <div class="footer d-flex flex-column">
            <div class="d-flex flex-row justify-content-around">
                <div class="d-flex flex-column linkovi">
                    <a href="http://rctpupin.edu.rs/">RCT Pupin</a>
                    <a href="https://petlja.org/">Petlja</a>
                    <a href="https://izprogramiranja.weebly.com/">Svet programiranja</a>
                </div>
                <div class="d-flex flex-column linkovi text-white text-center">
                    <a href="https://dms.rs/">DMS</a>
                    <a href="https://www.w3schools.com/">W3School</a>
                    <a href="https://getbootstrap.com/">Bootstrap</a>
                </div>    
            </div>
            <p class="text-center text-white">© Copyright 2020 Ime Prezime</p>
        </div><!-- Footer - end -->
    </div>

    <script>
        document.getElementById('logoForm').addEventListener('submit', function(event) {
            const logoName = document.getElementById('logoname').value.trim();

            if (logoName.length < 3) {
                event.preventDefault(); // Prevent form submission
                alert('Logo name must be at least 3 characters long.');
            } else {
                alert(`Thank you! Your logo name "${logoName}" has been submitted.`);
                document.getElementById('logoname').value = ''; // Clear the input field
            }
        });
    </script>
</body>
</html>
Algoritmi
Matrice
Java
Linkovi
​Politika Privatnosti
Kontakt

© 2021 by Slobodan svetprogramiranja.com

Sva prava zadržana
SVET PROGRAMIRANJA