Jump to content

Search the Community

Showing results for tags 'html'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 840 results

  1. Hi, I am new in this forum and firstly, I wanted to say thank you for such great community. I have started to learn CSS. I see it is really challenging. I wrote down a HTML/CSS code for a rollover button. I like to combine this with UIkit Toggle function that I can hide/unhide text or portion of a website, but I could not come up with any solution. I pasted my HTML and CSS code below. I hope you guys can let me know how to modify my code to be able to hide/unhide things, when I click on it. I really appreciate your help. HTML: <a href="" class="button">everyone</a><br> CSS: .button { background: #fff; color: #000; padding: 2px 12px 6px 50px; position: relative; text-decoration: none; } .button::before { border: 1px solid #000; content: ""; left: 1px; position: absolute; top: 12px; height: 8px; width: 8px; } .button:hover, .button:active { font-weight: bold; } .button:hover::before, .button:active::before { background: #000; top: 8px; left: -4px; height: 19px; width: 19px; } Best, Amir
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>First Website</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="First Website" /> <meta name="keywords" content="JK,Testing" /> <meta name="robots" content="index,follow" /> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <table border="2" cellspacing="0" cellpadding="12" width="100%" bgcolor="black" height="15%"> <tr align="left" valign="top"> <th> <table align="center-left" border="2" cellspacing="0" cellpadding="0" width="13%"> <tr align="left" valign="top"> <th align="center"><font color="white">LOGO</font></th> </tr> </table> <table align="center" border="0" cellspacing="5" cellpadding="10" width="47%" > <tr align="center" valign="top"> <th align="Center"><a href="#"><font color="white">home</font></a></th> <th align="Center"><a href="#"><font color="white">label</font></a></th> <th align="Center"><a href="#"><font color="white">label2</font></a></th> <th align="Center"><a href="#"><font color="white">label3</font></a></th> <th align="Center"><a href="#"><font color="white">labellabel</font></a></th> </tr> </table> <table align="right" border="0" cellspacing="5" cellpadding="5" width="7%" > <tr align="center" border="2" cellspacing="5" cellpadding="10" width="5px" bgcolor="white"> <th align="Center"><a href="#"><font color="black">facebook</font></a></th> <th align="Center"><a href="#"><font color="black">instagram</font></a></th> </tr> </table> </th> </tr> </table> <table align="center" border="1" cellspacing="5" cellpadding="5" width="50%"> <tr> <th> <label for="gallery">My Open Sketchbook</label> </th> </tr> </table> <table align="center" border="2" cellspacing="5" cellpadding="5" width="100%" height="450px" > <tr align="left" valign="left" background="website2.JPG"> <th> </th> </tr> </table> <table align="center" border="1" cellspacing="5" cellpadding="5" width="100%" height="110px" bordercolor="#233067"> <tr align="center" valign="center"> <th> <th> <label for="Comm"><a href="#">Commissions</a></label> / <label for="Vote"><a href="#">Voting</a></label> / <label for="Term"><a href="#">Terms & Conditions</a></label> </th> </th> <th align="right"> </th> </tr> </table> <!-- --> <!--1--> <!-- --> <!-- --> <table align="left" width=45% border="0"> <tr align="left" valign="left"> <th> <table align="left" width=18% border="1"> <th> <label for="myfav">My Favorites</label> </th> </table> <th> </tr> </table> <table align="left" width=18% border="0"> <tr align="left" valign="left"> <th> <table align="left" width=13% border="1"> <th> <label for="myfav"><th nowrap>The Classroom Favorites</label> </th> </table> </th> </tr> </table> <table align="right" width=18% border="0"> <tr align="right" valign="right"> <th> <table align="Center" width=8% border="1"> <th> <label for="myfav"><th nowrap>Your Favorites</label> </th> </table> </th> </tr> </table> <table align="right" width="19%" border="0"> <th> <tr> </tr> </th> </table> <!--Resizing Error--> <!-- --> <!--2--> <!-- --> <table align="left" width="45%" border="0"> <tr align="left" valign="left"> <th> <!-- width cannot be more than 19% ? --> <table background="tablebg.jpg" align="left" width="18%"height=350px border="1"> <th> <label for="myfav">My Favorites</label> </th> </table> <th> </tr> </table> <table align="left" width="18%" border="0"> <tr align="left" valign="left"> <th> <table background="tablebg.jpg" height="350px" align="left" width=18% border="1"> <th> <!-- th nowrap --> <label for="myfav"><th nowrap>The Classroom Favorites</label> </th> </table> </th> </tr> </table> <table align="right" width="18%" border="0"> <tr align="right" valign="right"> <th> <table background="tablebg.jpg" height="350px" align="Center" width="18%" border="1"> <th> <label for="myfav">Your Favorites</label> </th> </table> </th> </tr> </table> <table align="right" width="19%" border="0"> <th> <tr> </tr> </th> </table> <!-- --> <!-- --> <!-- --> <!-- --> </body> </html> Hey, this is just me being silly web developing wise. Though, this might explain how to fix original HTML. 3 tables same row ~ If any is interested. Not sure if this is something even tried to be fixed.
  3. Hi all, I’m learning to code and building a site to push my learning along. However, I am having a frustrating issue. On my site I would like to have search functionality, but for the search to be completed on a different URL. I understand this requires query parameters, but I'm a bit lost. For example, if my site is “www.mysite.com” I would like a user to be able to input their city (could be any city in the world) and then select an option from a dropdown menu, say ‘running’ or ‘cycling’ and then the combination of the two querys added together and executed on “www.fitnessbuddies123xyz.com” (for example) and if someone had added a listing for a fitness buddy on “www.fitnessbuddies123xyz.com” and the string matched a URL on that site then the results would appear. My current HTML is below: Firstly, I have a text box: <input type="text" class="form-control-lg form-control" id="inputText12" placeholder="City"> And then there is a drop-down menu, with three set options: <select class="form-control form-control-lg" id="exampleFormControlSelect1"> <option>Running</option> <option>Cycling</option> <option>Walking</option> </select> I then have a button: <a href="url" class="btn btn-lg btn-block btn-primary">Search</a> Any help on how I can create the query string for the text box and dropdown menu and then execute on an external URL would be much appreciated. Thanks in advance!
  4. My HTML page is having password input field when I try to input values to the password input field then the page becomes unresponsive after entering more than 30 to 40 characters. Below is the code which I am using. This issue I am having in all web browsers. Even if I change the minimum length and all other like lower, upper, number and symbol value to 50 then also the same problem persist. I am new to javascript, Kindly do the needful. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> /* Style all input fields */ input { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; } /* Style the submit button */ input[type=submit] { background-color: #4CAF50; color: white; } /* Style the container for inputs */ .container { background-color: #f1f1f1; padding: 20px; } /* The message box is shown when the user clicks on the password field */ #message { display:none; background: #f1f1f1; color: #000; position: relative; padding: 20px; margin-top: 10px; } #message p { padding: 10px 35px; font-size: 18px; } /* Add a green text color and a checkmark when the requirements are right */ .valid { color: green; } .valid:before { position: relative; left: -35px; content: "✔"; } /* Add a red text color and an "x" when the requirements are wrong */ .invalid { color: red; } .invalid:before { position: relative; left: -35px; content: "✖"; } </style> </head> <body> <p>Try to submit the form.</p> <div class="container"> <form action="/action_page.php"> <label for="usrname">Username</label> <input type="text" id="usrname" name="usrname" required> <label for="psw">Password</label> <input type="password" id="psw" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required> <input type="submit" value="Submit"> </form> </div> <div id="message"> <h3>Password must contain the following:</h3> <p id="letter" class="invalid">199 <b>lowercase</b> letter</p> <p id="capital" class="invalid">199 <b>capital (uppercase)</b> letter</p> <p id="number" class="invalid">199 <b>number</b></p> <p id="length" class="invalid">Minimum <b>199 characters</b></p> </div> <script> var myInput = document.getElementById("psw"); var letter = document.getElementById("letter"); var capital = document.getElementById("capital"); var number = document.getElementById("number"); var length = document.getElementById("length"); // When the user clicks on the password field, show the message box myInput.onfocus = function() { document.getElementById("message").style.display = "block"; } // When the user clicks outside of the password field, hide the message box myInput.onblur = function() { document.getElementById("message").style.display = "none"; } // When the user starts to type something inside the password field myInput.onkeyup = function() { // Validate lowercase letters var lowerCaseLetters = new RegExp('(?:[a-z].*){' + 199 + '}', 'g') if(myInput.value.match(lowerCaseLetters)) { letter.classList.remove("invalid"); letter.classList.add("valid"); } else { letter.classList.remove("valid"); letter.classList.add("invalid"); } // Validate capital letters var upperCaseLetters = new RegExp('(?:[A-Z].*){' + 199 + '}', 'g') if(myInput.value.match(upperCaseLetters)) { capital.classList.remove("invalid"); capital.classList.add("valid"); } else { capital.classList.remove("valid"); capital.classList.add("invalid"); } // Validate numbers var numbers = new RegExp('(?:[0-9].*){' + 199 + '}', 'g') if(myInput.value.match(numbers)) { number.classList.remove("invalid"); number.classList.add("valid"); } else { number.classList.remove("valid"); number.classList.add("invalid"); } // Validate length if(myInput.value.length >= 199) { length.classList.remove("invalid"); length.classList.add("valid"); } else { length.classList.remove("valid"); length.classList.add("invalid"); } } </script> </body> </html>
  5. I want to make a form with 3 dropdown which opens specific pages according to the input on HTML. How can I do that ?
  6. Hello guys, I´m currently creating a website and have to use some kind of a switch button (in iOS-Style). I already implemented the switch button, however I want the user to switch with the button between two upcoming photo galleries. Because documentation in the www is lacking, I would need your support. Because I´m pretty unexperienced in website coding, I used the W3school switch button (https://www.w3schools.com/howto/howto_css_switch.asp) I hope you could help and I´m sorry for being such unexperienced but having high demands.
  7. Dear, I would like to put an image in a <ol> list. But the w3c validator say that we cannot put an image as a child. How i can do ? i try with figure but no way :/ This not a screening issue, it's just for the validation Thanks in advance, Error: Element img not allowed as child of element ol in this context. (Suppressing further errors from this subtree.) From line 60, column 3; to line 60, column 104 >.</li>↩ <img class="ombre" src="http://www.actunet.org/astuces/win10/images/44-2.jpg" alt="Syst&egrave;me" />↩ <ol> <li>Allez dans le mneu <b>D&eacute;marrer</b>.</li> <li>Cliquez sur la roue crant&eacute;e <b>Param&egrave;tres</b>.</li> <figure> <img src="http://www.actunet.org/astuces/win10/images/44-1.jpg" alt="D&eacute;marrer et param&egrave;tres" > <figcaption>Fig.1 - Parametres</figcaption> </figure> <li>dans <i>Param&egrave;tres</i>, cliquez sur <b>Syst&egrave;me</b>.</li> <img class="ombre" src="http://www.actunet.org/astuces/win10/images/44-2.jpg" alt="Syst&egrave;me" /> <p>Vous souhaitez le th&egrave;me sombre ? <a href="http://www.actunet.org/astuces/win10/42-activerthemesombre.php" target=_blank>cliquez ici.</a> <li>Dans le menu de gauche, cliquez sur <b>Notifications et actions</b>.</li> <img class="ombre" src="http://www.actunet.org/astuces/win10/images/44-3.jpg" alt="Notifications & actions" /> <li>D&eacute;cochez la case : <b>Afficher les notifications dans l'&eacute;cran de v&eacute;rrouillage</b>.</li> <img class="ombre" src="http://www.actunet.org/astuces/win10/images/44-4.jpg" alt="Decocher les notifications" /> <p>Les notifications seront &agrave; partir de maintenant masqu&eacute;e lors que l'&eacute;cran de verrouillage sera activ&eacute;.</p> </ol>
  8. This is a weird request, been battling with the idea and the how, hoping for some help. I have a list of keys which need to sent out to each visitor who enters a site. the keys are currently on an Excel sheet, the keys must move sequentially down the list (Not repeat the above key) I thought of doing this with a form (like a gravity form) the problem is they dont allow you to read of the entries sequentially and show it on the screen that doesnt really work. happy to have the codes as an array, just the method of passing it out. if anyone knows of the code which can help me, i will be forever in your debt.
  9. Stella


    Hello. This is my first steps of learning html but i have a problem. Attacked you'll find the code and the file that i have the image. It doesn't appears to the browser. Am I doing smth wrong? Thank you!
  10. Hi Guys. This is my first post here so apology in advance (if forum rules being ignore or posted into wrong category). I am trying to display elements on div hover. I had watched a lot of tutorials and practice a lot but still i am struggling with my problem that's why i come here so maybe someone (a Hero) help me. Even sort of direction mean a lot for me Explanation: Actually i am trying to create a something like Character Selector UI in case if you're looking some reference. I want to display hidden content at class="outputr1". If i hover img 1 then it show only hover content 1. And if i hover img 3 then it show hover content 3 and so on. I also want when i hover any div then it should stay active as difficult unless i hover other div like img 1, 2 or 3. it took a month but still i haven't figure it out howto achieve this. what i am missing? <!DOCTYPE html> <html> <head> <title>Display Hidden Content OnhoverEvent</title> <style> body { padding: 50px 10px; margin: 0 auto; max-width: 900px; } .hide { display: none; } .myDIV:hover + .hide { display: block; color: red; } </style> </head> <body> <div class"outputr1"> I want to display Hidden/hover content here </div> <br><br> <div class="myDIV"><img src="1.png" width="100px" height="100"> <div class="hide"> Hover content 1 </div> </div> <div class="myDIV"><img src="2.png" width="100px" height="100"> <div class="hide"> Hover content 2 </div> </div> <div class="myDIV"><img src="3.png" width="100px" height="100"> <div class="hide"> Display Hover content 3 </div> </div> <div class="hide"> I am Hover Content but i don't want this to display.</div> </div> </body> </html> Sorry about my good English. I am really new to this stuff so i am spending most of my quarantine time in web development skills
  11. acegoal07


    i need help i cant get my dark mode to change the colour of my nav bar if anyone can help me with this it would be great
  12. Stella

    HTML images

    Hello. This is my first steps of learning html but i have a problem. Attacked you'll find the code and the file that i have the image. It doesn't appear to the browser. Am I doing something wrong?
  13. <!DOCTYPE html> <html lang = "en"> <!--This is my first comment in my index page--> <head> <meta charset="utf-8"> <link rel="stylesheet" href="greentea.css"> <a href= "greentea.html"></a> </head> <header> <h1>Teaz Nuts</h1> </header> <!--This is the body of my page--> <body> <nav> <ul> <li><a href= "greentea.html"> Home </a></li> <li><a href="about.html">Login</a></li> <li><a href="Product.html">Product</a> </li> <li><a href="New User Signup.html">New User Signup</a></li> </ul> </nav> <main> <div class = "hippiegirl"> <image src = "hippiegirl.jpg" alt = "tranquility"></image> </div> <p>The properties of green tea are many and varied. Especially during an epidemic<br> we all need to be aware of what tea can do for us. Along with its antibiotic properties, it also<br> can cleanse the spirit and wash away our tensions. </p> </main> <footer> <br>&copy; <a href="mailto:jackcole861@gmail.com">Click to email Jack Cole</a> </footer> </body> </html> This is my css .hippiegirl { position:absolute; left:0; top:0; width:400%; height:auto; opacity:0.6; } body{ background-color: lightgreen; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /* Change the link color to #111 (black) on hover */ li a:hover { background-color: #111; }
  14. Hi im trying to make my site scroll and I cant seem to figure out why, all web pages appear with no scroll bar, and im wondering if its due to the template or the styles sheet. Findus.html
  15. hi everyone, i am basically new to this forum so i didn't really know where to post this question, basically what happened i made a site. on this site is a particular commenting system where i used php ajax on the jquery way, my teacher saw my website and wanted to test something so he left a comment with <b>exampe</b> and his comment turned out to be bold text. to me and the safety of my site it is a dangerous thing as peope are required to leave their email in the form (not shown in actual comment but saved in the db) he also said that with his knowlege he could use <script>alert(document.cookie)</script> to make me use his cookie to log in to phpmyadmin, esentially granting him acces to all my databases. now is my question "how can i use htmlentities() on ajax?" he suggested "$comment = htmlentities( $_POST['comment'] );"but since all of my fields are written like this: $commentId = isset($_POST['comment_id']) ? $_POST['comment_id'] : ""; $comment = isset($_POST['comment']) ? $_POST['comment'] : ""; $commentSenderName = isset($_POST['name']) ? $_POST['name'] : ""; $date = date('Y-m-d H:i:s'); there is no way i can figure out where to put it... these are my php files, take a loo if you wish, but i removed my db.php database password and replaced my database name in the form (for security reasons) (you may lso see comments.php as index.php since i already had index so i renamed it to something else comment-add.php comment-list.php comments.php comment-add.php comment-list.php comments.php db.php
  16. html,body{ padding:0; margin:0; background:whitesmoke; } .cont{ position:relative; width:100%; padding:0; margin:0; text-align:center; } .calsi{ width:350px; padding:0; margin:100px auto; text-align:center; background:#d82ed8; box-shadow:0px 0px 6px 0px #0006; } .calsi h1{ font-size:40px; font-family:calibri; font-weight:bold; color:white; text-transform:cepitalize; padding:8px 0px; text-align:center; width:100%; background:#222; margin:0 auto; } #inp{ position:relative; width:100%; padding:8px 0px; text-align:center; font-size:16px; font-family:arial; font-weight:normal; color:#222; outline:none; border:none; background:white; } .btns{ position:relative; width:100%; padding:10px 0px; } .btns button{ border:none; outline:none; width:50px; height:50px; font-size:30px; color:#222; vertical-align:middle; border-radius:5px; background:white; margin:10px 5px; display:inline-block; } button{ border:none; outline:none; width:100px; height:50px; font-size:20px; color:#222; border-radius:5px; vertical-align:middle; background:white; margin:10px 5px; display:inline-block; } <div class="cont"> <div class="calsi"> <h1>Calculator</h1> <input type="text" id="inp" placeholder="Enter Value..." readonly=""> <div class="btns"> <button onclick="AT_add(1)">0</button> <button onclick="AT_add(1)">1</button> <button onclick="AT_add(2)">2</button> <button onclick="AT_add(3)">3</button> <button onclick="AT_add(4)">4</button> <button onclick="AT_add(5)">5</button> <button onclick="AT_add(6)">6</button> <button onclick="AT_add(7)">7</button> <button onclick="AT_add(8)">8</button> <button onclick="AT_add(9)">9</button> <button onclick="AT_add('+')">+</button> <button onclick="AT_add('-')">-</button> <button onclick="AT_add('/')">/</button> <button onclick="AT_add('*')">*</button> </div> <button onclick="exe()">=</button> <button onclick="cancel()">⌫</button> <button onclick="cls()">c</button> </div> <script>var val=document.getElementById("inp"); function AT_add(v){ val.value+=v; } function cls(){ val.value=""; } function exe(){ val.value=eval(val.value); } function cancel(){ val.value=val.value.substr(0,val.value.length-1); }</script> ApakaTechnology@128953.html
  17. Hey, sorry for the stupid question, but when i use this: <picture> <source srcset="imgage.webp" type="image/webp"> <img src="/image.png"/></picture> The browser that supports both will load both or just the webp? Thank you.
  18. Hi! I teach high school and I had a student making up an assignment last week that was from the beginning of February. We have discovered that HTML forms are not the same. I have emailed 2x and I get no response. What other updates have been made? We noticed the HTML 5 section is gone. What else have we missed? and most importantly, has the test been updated? My kids take the test in April 2020 and we started studying in August 2019 so I am concerned about the updates and we don't know what to study now. Please help!!!
  19. Hi, I'm not a massively proficient coder and I'm trying to find a way to list selected options in the configurator price section? I was thinking I could use some custom HTML but I'm not sure where to start. I have attached an image showing what I'd like to do. Is this possible or will it need to be completely custom coded? Any ideas would be massively helpful. Here's the current state of the page - https://gof.co.uk/test-configurator/ Thanks, Jack
  20. Hello, I'm a total novice to HTML and am currently working on a really basic page: The user inputs a name into a form, and then based on their input, the page displays a series of images. Each character of the name corresponds to a different image output. i.e. the name "Joy" would output the image corresponding to J, the image for O, and the image for Y, in that order. My initial idea for this was to store the value of each character of the name into an array, and then sequentially output the corresponding images. However, I can't seem to find a way to store the input into an array, let alone one character at a time. Any help would be much appreciated!
  21. Hi, I was wondering how I could 'copy' the way w3 schools website menu from scrolling up and disappearing? I am using w3css for my projects. I was wondering if the feature I mentioned can be done using w3css. Thanks, Ben
  22. Tarun


    i have created one php file and html file and connected to each other. But here i want a help reqards to php. Details mentioned below: This is my HTML file: <form method="post" action="contact.php"> <textarea name="message"></textarea> <input type="submit"> </form> This is my PHP file: <?php if($_POST["message"]) { mail("your@email.address", "Form to email message", $_POST["message"], "From: an@email.address"); } ?> Here i want to know is if i want to add another textarea say it as name in HTML, so can you help me with the PHP coding, as i have tried with adding the another text area in PHP to retrieve data to my email, but i am not able to receive that.
  23. Hi I want to take the HTML exam, but I don't know anyone who know html except me. I have no teacher or adult who knows about HTML other than me. Only my mom and she isn't certified to know this. So can I do it with out a supervisor?
  24. Dear all, I am writing here because I am pretty stuck with this issue in my website I have a quite straightforward one page layout with 5 sections and a nav bar with links to sections. I have managed to put links to the sections, but when I click on those links it does not bring me to the section title but somewhere in the section, near its bottom. The code I am using is the following: <a class="dropdown-item" href="#DF"> where #DF is the id of the section. Do you know a way to link exactly at the section title? Your help is kindly appreciated. Thank you very much.
  • Create New...