/r/HTML
A place to learn and ask questions on HTML, CSS, and general front end development.
Requesting help
If you are requesting help, please ensure you're providing code with your post. You can also copy your code to an online editor:
Useful links
Related subreddits
/r/HTML
53,020 Subscribers
Help with HTML
I’m having to create an html website for one of my grad courses (I’m in an M.A. program for Japanese translation, but we’re having to do a crash course in some coding stuff. It’s not fun lol).
I’m doing okay with the build so far, but I’m having some minor issues with putting text over a banner and making a banner image skinner?
Would anyone be willing to look at my code and see what’s going on?
18:08 UTC
Beginner
How to insert photo in html?
13:16 UTC
.avi video Format on Html HELP
Can anyone help me I'm trying to integrate a video via its video tag but since the format is .avi and I need to leave it with this format I can't find a player that integrates this. Someone who has the solution
12:00 UTC
Repeated content through a site
Hi there,
Since my post got deleted on r/Seo (without any indication why...), I'll try my luck over here.
I'm trying to improve the Seobility.net score of a website we build.
I seem to get a lot of comment on a specific contact-block that is on a lot of pages. It's just a container with a bit of text to encourage people to fill in the, also present, form if they want more information.
This form is somewhat depending on the page. If you fill out the form, our customer gets an e-mail with your details, and the page where you filled out the form. So he knows what product you were looking at.
Seobility does not seem to like this, as this is considered "Content that appears on several pages".
I guess a (floating) button that either opens a popup or redirects you to a central contact-page would be best practice? But I didn't make this design.
Is there a way to have "content on several pages" without it being a problem? It was a <section> with <h2> as a title, but I replaced those with a regulare <div> and no headings to make it clear it isn't part of the regular content.
08:43 UTC
Does adding H1 and H2 tags like that work from crawlability & SEO point of view?
In the following code, H2 tag is added under <div> and <headline-with-label> field. Tools like Screaming Frog is highlighting that the page is missing an H2 tag, even though it has been added this way. How does it different from adding Heading tags in tag from SEO point of view?
<div class="content-wrapper-details"><headline-with-label headline="test\<sup>®\</sup> test-heading" headline-semantic-tag="h2" headline-size="heading-2" label="test\<sup>®\</sup> Test"></headline-with-label>
</div></div></div08:00 UTC
Html text code question
Why does anchored text goes down in the second line? I want it to be like the first line where it's right next to the text in a continuous line. Appreciate the help.
07:59 UTC
Cant load background picture
I am trying to put a background picture on a website this is the tag im using on my style sheet and its not working can someone please help me.
body{
background-image: url('zelda1.jpg');}
05:41 UTC
Unable to print borders on each page in HTML
Hello,
I have spent hours and hours and can't figure out how to get page borders on each page when printed in PDF. The below code produces the below output. Is there anyway I can have borders on each of the A4 page that is printed.
Also how do I extend the table to have outline all the way bottom of the page in page 2. I have tried my best to explain. Please do reach out if you need any clarifications.
<meta content="text/html; charset=utf-8" http-equiv="content-type" /><meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<html style="border: 2px solid #ff0000; border-bottom: 2px solid #ff00a6;">
<div class="pcs-template">
<div id="header" class="pcs-template-header pcs-header-content"></div>
<div class="pcs-template-body">
<div style="border: px solid #ff0000;">
<div style="text-align: center;"><img style="font-family: Calibri;" height="90" width="" alt="" src="imagelink" /></div>
<font face="Calibri"><br /></font>
<table style="width: 100%; table-layout: fixed;" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="border-right: px solid #ffffff; border-top: 2px solid #000000; padding: 1px 5px; background-color: #ffffff; font-weight: normal; border-bottom: 0 px #000000;">
<label style="margin-bottom: 0px; display: block; text-align: center;" id="tmp_billing_address_label" class="pcs-label">
<b><font face="Calibri">Tax Invoice</font></b>
</label>
</th>
</tr>
</thead>
</table>
<div style="width: 100%;">
<table cellspacing="0" cellpadding="0" style="width: 100%; table-layout: fixed; word-wrap: break-word; border-top: 2px solid #000000;" class="invoice-detailstable">
<thead>
<tr>
<th style="width: 50%;"></th>
<th style="width: 50%;"></th>
</tr>
</thead>
<tbody>
<tr>
<td style="border-right: 2px solid #000000; vertical-align: top;">
<font face="Calibri">
<font size="2">
<span style="width: 45%; padding: 1px 5px; display: inline-block; vertical-align: top;" class="pcs-label"><b>Invoice No.:</b></span>
<span style="width: 45%; padding: 1px 5px; display: inline-block; vertical-align: top;" id="tmp_entity_number">%InvoiceNumber%</span>
<span style="width: 45%; padding: 1px 5px; display: inline-block; vertical-align: top;" class="pcs-label"><b>Invoice Date:</b></span>
<span style="width: 45%; padding: 1px 5px; display: inline-block; vertical-align: top;" id="tmp_ref_number">%InvoiceDate%</span>
<span style="width: 45%; padding: 1px 5px; display: inline-block; vertical-align: top;" class="pcs-label"><b>Your PO No.:</b></span>
<span style="width: 45%; padding: 1px 5px; display: inline-block; vertical-align: top;" id="tmp_entity_date">${invoice.cf_your_po_no}</span>
</font>
</font>
<span style="font-size: small; font-family: Calibri;"> </span>
<span class="pcs-label" style="font-size: small; font-family: Calibri; width: 45%; padding: 1px 5px; display: inline-block; vertical-align: top;"><b>Our Offer No.:</b></span>
<span style="font-size: small; font-family: Calibri;"> </span>
<span id="tmp_entity_date" style="font-size: small; font-family: Calibri; width: 45%; padding: 1px 5px; display: inline-block; vertical-align: top;">${invoice.cf_our_offer_no}</span>
<span style="font-size: small; font-family: Calibri;"> </span>
<span class="pcs-label" style="font-size: small; font-family: Calibri; width: 45%; padding: 1px 5px; display: inline-block; vertical-align: top;"><b>Payment Due Date:</b></span>
<span style="font-size: small; font-family: Calibri;"> </span>
<span id="tmp_due_date" style="font-size: small; font-family: Calibri; width: 45%; padding: 1px 5px; display: inline-block; vertical-align: top;">%DueDate%</span>
<span style="font-size: small; font-family: Calibri;"> </span>
<span class="pcs-label" style="font-size: small; font-family: Calibri; width: 45%; padding: 1px 5px; display: inline-block; vertical-align: top;"><b>Payment Terms:</b></span>
<span style="font-size: small; font-family: Calibri;"> </span>
<span id="tmp_due_date" style="font-size: small; font-family: Calibri; width: 45%; padding: 1px 5px; display: inline-block; vertical-align: top;">%PaymentTerms%</span>
</td>
<td style="vertical-align: top;">
<font face="Calibri">
<font size="2">
<span style="width: 45%; padding: 1px 5px; display: inline-block; vertical-align: top;" class="pcs-label"><b>Your Reference:</b></span>
<span style="width: 45%; padding: 1px 5px; display: inline-block; vertical-align: top;">%Salutation% %FirstName% %LastName%</span>
<span style="width: 45%; padding: 1px 5px; display: inline-block; vertical-align: top;" class="pcs-label"><b>Our Reference:</b></span>
<span style="width: 45%; padding: 1px 5px; display: inline-block; vertical-align: top;" id="tmp_salesperson_name">Mr. Kartik Morar</span>
<span style="width: 45%; padding: 1px 5px; display: inline-block; vertical-align: top;" class="pcs-label"><b>Place of Supply:</b></span>
<span style="width: 45%; padding: 1px 5px; display: inline-block; vertical-align: top;" id="tmp_payment_terms">%PlaceOfSupply%</span>
<span style="width: 45%; padding: 1px 5px; display: inline-block; vertical-align: top;" class="pcs-label"><b>Delivery:</b></span>
<span style="width: 45%; padding: 1px 5px; display: inline-block; vertical-align: top;" id="tmp_payment_terms">${invoice.cf_delivery}</span>
<span style="width: 45%; padding: 1px 5px; display: inline-block; vertical-align: top;" class="pcs-label"><b>Vehicle Reg No.:</b></span>
<span style="width: 45%; padding: 1px 5px; display: inline-block; vertical-align: top;" id="tmp_payment_terms">${invoice.cf_vehicle_reg_no}</span>
<span style="width: 45%; padding: 1px 5px; display: inline-block; vertical-align: top;" class="pcs-label"><b>Special Note:</b></span>
<span style="width: 45%; padding: 1px 5px; display: inline-block; vertical-align: top;" id="tmp_payment_terms">${invoice.cf_special_note}</span>
</font>
</font>
</td>
</tr>
<tr>
<td style="border-right: 2px solid #000000; border-top: 2px solid #000000; border-bottom: 2px solid #000000;vertical-align: top;">
<font face="Calibri">
<font size="3">
<span style="width: 100%; padding: 1px 5px; display: inline-block; vertical-align: top;" class="pcs-label"><b>Bill To:</b></span>
</font>
</font>
</td>
<td style="border-top: 2px solid #000000; border-bottom: 2px solid #000000;vertical-align: top;">
<font face="Calibri">
<font size="3">
<span style="width: 100%; padding: 1px 5px; display: inline-block; vertical-align: top;" class="pcs-label"><b>Ship To:</b> </span>
</font>
</font>
</td>
</tr>
<tr>
<td style="border-right: 2px solid #000000; vertical-align: top;">
<font face="Calibri">
<font size="2">
<span style="width: 100%; padding: 1px 5px; display: inline-block; vertical-align: top;" class="pcs-label">%CustomerName%</br> %CustomerBAddress%</br> %CustomerBCity%</br> %CustomerBState%</br> %CustomerBCountry%</br> %CustomerGSTINLabel% - %CustomerGSTIN%</span>
</font>
</font>
</td>
<td style="vertical-align: top;">
<font face="Calibri">
<font size="2">
<span style="width: 100%; padding: 1px 5px; display: inline-block; vertical-align: top;" class="pcs-label">%CustomerName%</br> %CustomerBAddress%</br> %CustomerBCity%</br> %CustomerBState%</br> %CustomerBCountry%</br> %CustomerGSTINLabel% - %CustomerGSTIN%</span>
</font>
</font>
</td>
</tr>
</tbody>
</table>
</div>
<!-- <div style="clear: both;"></div> -->
<table style="border-top: px solid #000000; border-bottom: 2px solid black; width: 100%; table-layout: fixed; clear: both;" class="pcs-itemtable" id="itemTable" cellspacing="0" cellpadding="0">
<thead>
<tr style="height: 17px;">
<th
valign="bottom"
style="padding: 5px 5px 2px; word-wrap: break-word; width: 5%; text-align: center; font-weight: normal; border-right: 2px solid #000000; border-bottom: 2px solid #000000; border-top: 2px solid #000000;"
class="pcs-itemtable-header"
>
<font face="Calibri">
<font size="2"><b>Sr No.</b> </font>
</font>
</th>
<th valign="bottom" style="padding: 5px 7px 2px; word-wrap: break-word; width: 30%; font-weight: normal; border-right: 2px solid #000000; border-bottom: 2px solid #000000; border-top: 2px solid #000000;" class="pcs-itemtable-header">
<b><font size="2" face="Calibri">Item Name & Description</font></b>
</th>
<th
valign="bottom"
style="padding: 5px 7px 2px; width: 10%; word-wrap: break-word; font-weight: normal; border-right: 2px solid #000000; border-bottom: 2px solid #000000; border-top: 2px solid #000000;"
class="pcs-itemtable-header"
id="pcs-itemtable-header"
>
<b><font size="2" face="Calibri">HSN/SAC</font></b>
</th>
<th
valign="bottom"
style="padding: 5px 7px 2px; width: 11%; word-wrap: break-word; text-align: center; font-weight: normal; border-right: 2px solid #000000; border-bottom: 2px solid #000000; border-top: 2px solid #000000;"
class="pcs-itemtable-header"
>
<b><font size="2" face="Calibri">Qty</font></b>
</th>
<th
valign="bottom"
style="padding: 5px 7px 2px; width: 11%; word-wrap: break-word; text-align: center; font-weight: normal; border-right: 2px solid #000000; border-bottom: 2px solid #000000; border-top: 2px solid #000000;"
class="pcs-itemtable-header"
>
<b><font size="2" face="Calibri">Rate</font></b>
</th>
<th valign="bottom" align="right" style="padding: 5px 7px 2px; width: 80px; word-wrap: break-word; text-align: center; font-weight: normal; border-bottom: 2px solid #000000; border-top: 2px solid #000000;" class="pcs-itemtable-header">
<b><font size="2" face="Calibri">Amount</font></b>
</th>
</tr>
</thead>
<tbody id="lineitem">
<tr style="height: 20px;">
<td valign="top" style="text-align: center; border-right: 2px solid #000000; border-bottom: px solid #000000; padding: 1px 5px; word-wrap: break-word;" class="pcs-item-row">
<font face="Calibri"><font size="2"> %SiNo% </font> </font>
</td>
<td style="border-right: 2px solid #000000; border-bottom: px solid #000000; padding: 1px 5px; word-wrap: break-word;" valign="top" class="pcs-item-row" id="tmp_item_name">
<font face="Calibri">
<font size="2">
<b>%ItemName%</b><br />
Part No.: %ItemSKU%<br/>
%ItemDescription% <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
This is a test line <br/>
</font>
</font>
</td>
<td style="text-align: center; border-right: 2px solid #000000; border-bottom: px solid #000000; padding: 1px 5px; word-wrap: break-word;" valign="top" class="pcs-item-row" id="tmp_item_qty">
<font face="Calibri"><font size="2"> %HSNOrSACValue% </font> </font>
</td>
<td valign="top" style="text-align: center; border-right: 2px solid #000000; border-bottom: px solid #000000; padding: 1px 5px; word-wrap: break-word;" class="pcs-item-row" id="tmp_item_qty">
<font face="Calibri"><font size="2"> %ItemQty% </font> </font>
</td>
<td valign="top" style="text-align: center; border-right: 2px solid #000000; border-bottom: px solid #000000; padding: 1px 5px; word-wrap: break-word;" class="pcs-item-row" id="tmp_item_rate">
<font face="Calibri"><font size="2"> %BaseCurrencySymbol% %ItemRate% </font> </font>
</td>
<td valign="top" style="text-align: center; border-bottom: px solid #000000; padding: 1px 5px; word-wrap: break-word;" class="pcs-item-row" id="tmp_item_amount">
<font face="Calibri"><font size="2"> %BaseCurrencySymbol% %ItemAmount% </font> </font>
</td>
</tr>
</tbody>
</table>
<div style="width: 100%;">
<div style="width: 50%; padding: 4px 4px 3px 7px; float: left;">
<div style="margin: 10px 0 5px;">
<div style="padding-right: 10px;">
<font face="Calibri"><font size="2"><b>Our GSTIN No.:</b></font> </font>
</div>
<font face="Calibri">
<font size="3">
<span>
%CompanyGSTIN%
</span>
</font>
</font>
<div style="padding-right: 10px;">
<font face="Calibri"><font size="2"><br><b>Total in Words:</b></font> </font>
</div>
<font face="Calibri">
<font size="2">
<span>
%TotalInWords%
</span>
</font>
</font>
</div>
<div style="clear: both; margin-top: 20px; width: 100%;">
<div id="tmp_terms_label" class="pcs-label">
<font face="Calibri"><font size="1"><b>Terms and Conditions:</b></font> </font>
</div>
<div style="white-space: pre-wrap; word-wrap: break-word;" class="pcs-terms"><font size="1" face="Calibri">%TermsAndCondition%</font></div>
</div>
</div>
<div style="width: 43.6%; float: right;" class="pcs-totals">
<table style="border-left: 2px solid #000000;" class="pcs-totaltable" id="itemTable" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td style="border-bottom: 2px solid #000000 ;padding: 4px 7px 0px; text-align: right;" valign="middle">
<font face="Calibri"><font size="2">Sub Total:</font> </font>
</td>
<td id="tmp_subtotal" valign="middle" style="width: 110px; padding: 4px 7px 0px; text-align: right;border-bottom: 2px solid #000000">
<font face="Calibri"><font size="2">%BaseCurrencySymbol% %InvoiceSubTotal%</font> </font>
</td>
</tr>
<tr>
<td style="padding: 4px 7px 0px; text-align: right;border-bottom: 2px solid #000000" valign="middle">
<font face="Calibri"><font size="2">Shipping Charge:</font> </font>
</td>
<td id="tmp_subtotal" valign="middle" style="width: 110px; padding: 4px 7px 0px; text-align: right;border-bottom: 2px solid #000000">
<font face="Calibri"><font size="2">%BaseCurrencySymbol% %ShippingCharge%</font> </font>
</td>
</tr>
<tr>
<td style="padding: 4px 7px 0px; text-align: right;border-bottom: 2px solid #000000" valign="middle">
<font face="Calibri"><font size="2">Total Taxable Amount:</font> </font>
</td>
<td id="tmp_subtotal" valign="middle" style="width: 110px; padding: 4px 7px 0px; text-align: right;border-bottom: 2px solid #000000">
<font face="Calibri"><font size="2">%BaseCurrencySymbol% %TotalTaxableAmount%</font> </font>
</td>
</tr>
</tbody>
<tbody id="taxItems">
<tr style="height: 10px;">
<td style="padding: 4px 7px 0px; text-align: right;border-bottom: 2px solid #000000" valign="middle" align="right">
<font face="Calibri"><font size="2">%TaxName%: </font> </font>
</td>
<td valign="middle" style="width: 110px; padding: 4px 7px 0px; text-align: right;border-bottom: 2px solid #000000">
<font face="Calibri"><font size="2">%BaseCurrencySymbol% %TaxValue%</font> </font>
</td>
</tr>
</tbody>
<tbody>
<tr style="height: 10px;">
<td style="padding: 4px 7px 0px; text-align: right;border-bottom: 2px solid #000000" valign="middle" align="right">
<font face="Calibri"><font size="2"><b>Total:</b></font> </font>
</td>
<td valign="middle" style="width: 110px; padding: 4px 7px 0px; text-align: right;border-bottom: 2px solid #000000">
<font face="Calibri"><font size="2"><b>%BaseCurrencySymbol% %InvoiceTotal%</b></font> </font>
</td>
</tr>
<tr style="height: 10px;">
<td style="padding: 4px 7px 0px; text-align: right;border-bottom: 2px solid #000000" valign="middle" align="right">
<font face="Calibri"><font size="2">Payment Made:</font> </font>
</td>
<td valign="middle" style="width: 110px; padding: 4px 7px 0px; text-align: right;border-bottom: 2px solid #000000">
<font face="Calibri"><font size="2">%PaymentMade%</font> </font>
</td>
</tr>
<tr style="height: 10px;">
<td style="padding: 4px 7px 0px; text-align: right;" valign="middle" align="right">
<font face="Calibri">
<font size="2"><b>Balance Due:</b> </font>
</font>
</td>
<td id="tmp_balance_due" valign="middle" style="width: 110px; padding: 4px 7px 0px; text-align: right;">
<b><font size="2" face="Calibri">%BaseCurrencySymbol% %InvoiceBalance%</font></b>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td style="border-bottom: 2px solid #000000;" colspan="2"></td>
</tr>
</tbody>
<tbody>
<tr>
<td style="text-align: center; padding-top: 5px;" colspan="2">
<div style="min-height: 100px;">
<font face="Calibri"><font size="2"> <b>For, V&K Recycling Co. </b></font> </font>
</div>
</td>
</tr>
<tr>
<td style="text-align: center; border-bottom: 2px solid #000000;" colspan="2">
<font face="Calibri">
<font size="2"><label style="margin-bottom: 0px;" class="pcs-totals"><b>Authorized Signatory</b></label> </font>
</font>
</td>
</tr>
</tbody>
</table>
</div>
<div style="clear: both;"></div>
</div>
</div>
</div>
</div>
</html>
22:38 UTC
Html to opml
Hi guys, I am trying to import web articles into Workflowy, an online outline app, but so far I haven't found a perfect method. I like a lot the Clip2WF bookmarklet by Rawbitz, but that method is good for small articles with no subcategories. However I am trying to import something like this article, but I found no valid online html to opml converter (apparently opml is the only format supported by workflowy to properly structure text material).
Do you know any solutions?
20:52 UTC
Every time I refresh my page, certain divs go right to the top?
I have a base.html file that has a navbar. feed.html extends base.html. In my block content I have a main-container filled with content. Why when I refresh my website, it just goes to the top? I am using cookies but this happens no matter whag the use chooses. Any help? Can provide my code if needed
19:21 UTC
How to Create a Responsive Periodic Table of Elements Using HTML and CSS only?
18:14 UTC
HTML Not Rendering On Work Laptop But Will on Personal
One of our employees in our company is having an issue. She is emailed an HTML email template from another user that creates it and then is supposed to open it, render the images, and paste those into a text bank to send them out to distribution lists.
She is on Windows and I am on Mac. When she opens the HTML attachment, it shows a broken image for her and she can't view it. When she sends it to me, I am able to open it just fine and everyone else in our company can too. We both use Chrome to open it. I forwarded it to my personal Windows computer and can open it fine as well.
I tried two different browsers, cleared her cache on Chrome/Edge, had her open it in notepad, paste it in a new notepad and save it with a different name.html, save it to her desktop, changed the default app for opening html files, same issue.
I even had her install Notepad ++ and download the preview plugin, she still cannot see it. Unfortunately, the software she uses does not allow a toggle for the text bank to change to code and back to text like this so if she pastes raw code, it saves it as raw text with tags.
Her text bank is missing this feature ^
If the text bank supported code, I would have her open the email in notepad ++ or notepad, paste the HTML and save it. For some reason, it requires her to render the email template and c/p the images.
This is what it looks like for her. I noticed the path was when she was trying to preview it in the email but I had her save it to her downloads/desktop and same issue.
For now, her workaround is to email it to her personal Windows computer and set it up. If she created the HTML, I would understand that she didn't map her images to the correct folder on her local machine, but these image links are already up on a server. The user that creates these is offsite at another company.
Any suggestions would be appreciated.
16:21 UTC
What is the best way to convert a pdf to html
We are moving systems and to do that i need the html of an invoice / quote what would be the best way to convert a pdf into html code?
Ps. I did ask ChatGPT but he sucks at this
edit: I am a Python developer and I don't know anything about HTML
12:10 UTC
created custom items using HTML in Elementor Form Widget, however when user submits I am not capturing the data. Please help..
Hello, I created a custom form using elementor forms widget. For each item instead of using the premade items (I.E. Email), I used the "HTML" selection.
I then used HTML to create each section of the form. However, when the end user makes their selections and fills their information it, It is not captured when submitted. Here is the webpage with the form. https://developmentandengineering.com/apply/
Can anyone help me so that the data input by end user is captured? I am not sure what I am missing.
05:56 UTC
Full-Stack Developer (Worth It?)
Just giving a little background again, I'm going to be going for my Computer Science degree and I plan to intern at some point to a company like Roblox or Google (more so going for Roblox). But my point is, although I'll be looking into learning a different language soon, is it a waste of time to learn full-stack development in that regard?
Thank you all again for your time!
22:04 UTC
Need help with my first HTML project
Let me start by saying im completely new to html and coding in general. I spent two days working on this, but i cant get it to work and I don't know how to find the answer online.
I have this page setup. In the first container, I want to show my 'python script' (I know it's not completely correct, its just text). In the bottom container I want to mimic a python interpreter, with an actual working script that will run when the button is pressed. The script is saved locally on my laptop. Also, this entire webpage will be hosted locally. How can I get it to run the code?
Also, I dont know if I have to consider specific things to change when I want it to be used on a mobile device?
Thanks so much in advance to anyone willing to help
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Python 3.12</title>
`<style>`
`body {`
`background-color: #2c2c2c;`
`font-family: monospace;`
`white-space: pre-wrap;`
`color: #2c2c2c;`
`margin: 0;`
`padding: 0;`
`}`
`h1.title {`
`text-align: left; /* Align the title to the left */`
`font-size: 50px;`
`color: #c7c5c5; /* light grey */`
`margin-top: 0;`
`margin-left: 50px; /* Align the title with the left margin of the container */`
`}`
`.container {`
`background-color: #c7c5c5;`
`width: 700px;`
`padding: 20px 20px 20px 20px;`
`margin-top: 10px; /* Center the container */`
`margin-left: 50px;`
`border-radius: 8px;`
`border: none;`
`height: 900px; /* Fixed height for the outer container */`
`display: flex;`
`flex-direction: column;`
`}`
`.top-container {`
`background-color: #c7c5c5;`
`padding: 0;`
`margin: auto;`
`margin-bottom: 10px; /* Space below the top container */`
`border-radius: 8px;`
`font-size: 16px;`
`width: 650px;`
`font-family: monospace;`
`overflow: hidden; /* Prevents overflow outside the container */`
`}`
`.seperator {`
`border-bottom: 1px solid #2c2c2;`
`margin-bottom: 10px;`
`}`
`.bottom-container {`
`background-color: #c7c5c5;`
`height: 700px; /* Fixed height */`
`padding: 0px;`
`border-radius: 8px;`
`overflow-y: auto; /* Enables scrolling */`
`white-space: pre-wrap; /* Preserve line breaks */`
`font-size: 16px;`
`font-family: monospace;`
`}`
`button {`
`padding: 10px 10px;`
`font-size: 20px;`
`cursor: pointer;`
`margin-top: 0px;`
`background-color: #c7c5c5;`
`color: #3b823d;`
`border: 3px solid #3b823d;`
`border-radius: 0px;`
`font-weight: bold;`
`width: 100px;`
`}`
`button:hover {`
`background-color: 'blue';`
`}`
`textarea {`
`width: 100%;`
`height: 450px;`
`margin-top: 0px;`
`font-family: 'Courier New', monospace; /* Monospace font for code */`
`background-color:#edebeb;`
`border:none;`
`padding: 10px;`
`font-size: 14px;`
`color: #2c2c2c;`
`white-space: pre-wrap;`
`word-wrap: break-word;`
`}`
`textarea::-webkit-scrollbar {`
`width: 5px;`
`margin-left: 5px;`
`}`
`textarea::-webkut-scrollbar-track {`
`background-color: #f1f1f1;`
`}`
`textarea::-webkit-scrollbar-thumb {`
`background-color: #888;`
`border-radius: 5px;`
`}`
`</style>` </head>
<body>
`<div class="wrapper">`
`<h1 class="title">Happy birthday love</h1>`
`<div class="container">`
`<button onclick="runScript()">► Run</button>`<div class="top-field-container">
<textarea readonly>
import datetime
import requests
import time
birthday = datetime.date(2024, **, **)
***_can_code = False
def AttemptToImpress():
`if today == birthday and no ***_can_code:`
`print("***")`
`print("****")`
`response = input("(yes/no): ").strip().lower()`
`while response != "yes":`
`print("406 Not Acceptable. Please try again")`
`response = input("(yes/no): ").strip().lower()`
`if response == "yes":`
`print()`
`print("***")`
`print()`
`print("***")`
`print()`
`print("***")`
`print()`
`print("***")`
`print("***")`
`print("***")`
`response = input("(yes/no): ").strip().lower()`
`while response != "yes":`
`print("***.")`
`time.sleep(3)`
`print("***")`
`print("***")`
`response = input("(yes/no): ").strip().lower()`
`print("***")`
`print_ascii_art()`
`time.sleep(3)`
`print("***")`
`print("***")`else:
`print("Oeps.")`</textarea>
`</div>`
`<div class="bottom-container" id="python-output">`<textarea>
# Python output will appear here
</textarea>
`</div>`
`</div>`
`</div>`
`<script>`
`function runScript() {`
`fetch('/run-script')`.then(response => response.text())
.then(data => {
alert(data);
});
}
`</script>`</body>
</html>
21:07 UTC
Why my code not working?
just started programing. Thought it was going to be easy
19:41 UTC
How to Create a Responsive Scientific Calculator Using HTML CSS and JavaScript | JV Codes
18:08 UTC
Checkboxes using HTML and CSS
I am having trouble placing the text next to the checkboxes. Help is very much appreciated!
In my .html:
<h2> <em> To-do List </em> </h2>
<div class="checkbox">
<ul>
<li>
<label>
<input type="checkbox" name="">
<p> Item 1 </p>
<span> </span>
</label>
</li>
<li>
<label>
<input type="checkbox" name="">
<p> Item 2 </p>
<span> </span>
</label>
</li>
</ul>
</div>In my .css:
.checkbox{
display: flex;
position: relative;
padding: 15px;
border-bottom: 1px;
}
li{
list-style: none;
}14:31 UTC
Spam request. Even when form has multiple safety guards.
A few day ago i changed from wordpress forms to html forms because we needed to implement salesforce better.
Now i get a ton of spam through that form. I already implemented multiple honeypot fields. Recaptcha V2 invisible. And even denied entries with the company name "google". Yet spam with the company name "google" gets trough.
I even deactivated the form in the frontend and the side never was crawaled or indexed. And i still get spam.
Anyone knows any other idea?
11:14 UTC
I need help!
/* First image with fade-in effect */
.pic1 {
position: absolute;
z-index: 1;
bottom: 0;
right: 0;
width: 1455px;
height: 175px;
opacity: 0;
border: 3px solid #F5A7B8;
animation: fadeInBlack 1s forwards;
}
@keyframes fadeInBlack {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* Second image (HyunjinIcon) with fade-in effect */
.pic2 {
position: absolute;
z-index: 2;
bottom: 10px;
left: 5px;
width: 145px;
height: 160px;
border: 1px solid #F5A7B8;
opacity: 0;
object-fit: cover;
animation: fadeInHyunjin 1s forwards;
}
@keyframes fadeInHyunjin {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* Text container with typing + fade-in effect */
.text-container {
padding-left: 20px;
margin-top: 50px;
position: absolute;
z-index: 3;
bottom: 0;
left: 175px;
width: calc(100% - 175px);
height: 175px;
display: flex;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
overflow: hidden;
}
.text {
color: white;
font-size: 30px;
font-family: 'Courier New', Courier, monospace;
opacity: 0;
width: 0;
max-width: calc(100% - 10px);
white-space: nowrap;
overflow: hidden;
animation: fadeInText 2s ease-in, typeWriter 4s steps(40) 2s forwards;
}
@keyframes fadeInText {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes typeWriter {
0% { width: 0; opacity: 1; }
100% { width: 100%; opacity: 1; }
}
/* GIF image styling */
.gif-image {
position: absolute;
z-index: 4;
top: 50px;
left: 750px;
width: 300px;
height: auto;
opacity: 1;
visibility: visible;
transition: opacity 1s ease-out;
}
/* Continue button styling */
.change-text-button {
position: absolute;
z-index: 5;
bottom: 20px;
right: 20px;
color: white;
cursor: pointer;
opacity: 0;
padding: 12px 24px;
background-color: #F5A7B8;
border-radius: 5px;
border: none;
color: white;
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Adds depth */
transition: all 0.3s ease;
}
.change-text-button:focus {
outline: 3px solid #f27e99;
}
.change-text-button:hover {
background-color: #ec3b6e;
transform: scale(1.05);
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
}
/* Info square for Hyunjin's information */
.info-square {
background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9));
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.5);
border-radius: 10px;
position: absolute;
z-index: 6;
top: 100px;
left: 50%;
transform: translateX(-50%);
width: 400px;
height: 250px;
background-color: rgba(0, 0, 0, 0.7);
display: none;
padding: 20px;
border-radius: 10px;
overflow: hidden;
margin-top: 40px;
}
.info-square img {
position: absolute;
top: 10px;
left: 10px;
width: 125px;
height: 125px;
border-radius: 50%;
object-fit: cover;
}
.info-square .badge-img {
position: absolute;
top: 150px;
left: 10px;
width: 125px;
height: 125px;
object-fit: cover;
border-radius: 5px;
}
.info-text {
position: absolute;
top: 10px;
left: 150px;
color: white;
font-size: 18px;
line-height: 1.5;
padding-left: 10px;
padding-top: 20px;
}
/* Find Bang Chan button (hidden initially) */
.change-text-button#find-bang-chan-button {
position: absolute;
z-index: 7;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
cursor: pointer;
opacity: 0; /* Initially hidden */
padding: 12px 24px;
background-color: #F5A7B8;
border-radius: 5px;
border: none;
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.change-text-button#find-bang-chan-button:hover {
background-color: #ec3b6e;
transform: scale(1.05);
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
}<button class="change-text-button" id="change-text-button" onclick="changeText()">Continue</button>
<!-- Find Bang Chan button (hidden initially) --><button class="change-text-button" id="find-bang-chan-button" onclick="findBangChan()">Find Bang Chan</button>
<!-- Info square (hidden initially) --> <div class="info-square" id="info-square"> <!-- Image of Hyunjin's portrait --> <img src="images/HyunjinMugshot.png" alt="Hyunjin Icon"><!-- Image of Police Badge -->
<img src="images/PoliceBadge.png" alt="Police Badge" class="badge-img">
<div class="info-text">
Full Name: Hwang Hyunjin<br>
DOB: 20-3-2000<br>
Height: 5'10<br>
Weight: 65kg<br>
Sex: Male<br>
Occupation: District 9 Junior Officer<br>
Police Officer of 7 years
</div>How do I get the "Find Bang Chan" button to appear only after the text changes to "Ask the Chief of Police more about it. His name is Bang Chan."
Also, how do I make it so that its impossible for all buttons to be pressed until the opacity is 1.
10:44 UTC
How to get a floatie image to open up a contact form when clicked?
Hi! I hope this is the right place to post this. I've tried r/css as well. I had an idea for my blog where I have a floatie image that says "Mail me", which when you click on it will open a small window with a contact form. However, I just can't figure out where to even start. Does anyone have any advice? So far I have the floatie image working, but how to add the intended function to it is beyond me.
12:54 UTC
Learn how to integrate JavaScript with Tailwind CSS by building an accordion
05:40 UTC
What is the sizing mechanism of HTML+CSS?
I'm building a declarative terminal UI framework, just like HTML+CSS. The problem is I don't know how to compute the size of each element.
In HTML+CSS, you can assign width and height with a linear expression ??px+ ??%. I want to implement the similar mechanism in my framework.
To be more specific, I want to define the following sizing policy:
- Linear:
??px + ??%, relative to the parent's size - Content: determined by the content of the element
- Stretch: stretching to fill the remaining space inside the parent
I think the key is to determine the size of "Content", since other sizes are easy to determine as long as the size of the parent or the brothers are determined. However, there is a problem that, for an element like <p> in HTML, if the width is squeezed, the height will stretch. The whole process is something like, determining the width first, and then computing the height. But I cannot find a well-defined way to describe such mechanism. There are cyclic dependencies.
Can someone teach me about the sizing mechanism of HTML+CSS?
03:16 UTC
How to choose default value of select element depending on a varible
I'd like the selected value to be decided by a php varible set on the previous page
Here is my code:
<label for="cars">Brand:</label>
<select id="brand" name="brand"><option value="Febi">Febi</option><option value="Gates">Gates</option><option value="audi" >Audi</option><option value="bmw">Bmw</option><option value="Bosch">Bosch</option><option value="SKF"selected>SKF</option><option value="luk">LUK</option><option value="EBC">EBC</option> <option value="lucas">Lucas</option> <option value="powerflex">Power Flex</option> <option value="Toyota">Toyota</option> <option value="other">Other</option> </select>Many thanks
01:13 UTC
I Need Help Making Boxes
I'm trying to put the text into the blue box (box.png). What should I do? Please and thank you!
19:04 UTC
Using AI to help
I'm basically asking to see if others also use AI to assist them in this way, although it does kind of feel like "cheating" to me. I've grown fond of Microsoft Copilot recently, and every time I finish some sort of HTML/CSS project, I'll plug the HTML markup into Copilot and ask it to essentially "clean up" my code, and sometimes it catches errors or bugs that I wouldn't of saw because of either how cluttered my code was, or just due to the fact that their can be syntax errors but because HTML is just a markup language it still appears as it should.
Thanks again for everyones input!
16:33 UTC
10 Free Responsive Navigation Bar Menus in HTML CSS & JavaScript
Responsive navigation bars are essential useful in the development of websites that can adjust the layout between devices and screens. Below is an interesting collection of 10 great stunning free navigation bar menus to make your web designs attractive and functional.
1. Responsive navigation simple menu bar
This minimalist menu bar implemented with HTML CSS is thin as a filter and freely scales for any device. By cantering attention on text it makes it ideal for websites with simple design or personal websites and blogs.
Free Source Code: Responsive navigation simple menu bar
2. Responsive Navigation Drop Down Menu with Submenu
Using dropdowns that appear when the user clicks on them or hovers the cursor on them, this menu is an HTML, CSS, and JavaScript based organized and stylish navigation menu. Is effective for different categories or sections of a website.
Free Source Code: Responsive Drop Down Menu
3. Navigation Bar with Dark and Light Mode Only
Make your webpage more trendy with this menu to toggle between light and dark mode quickly. Created with HTML, CSS and JS it is practical and at the same time looks modern.
Free Source Code: Navigation Bar with Dark and Light Mode
4. Sticky Navigation Menu Bar
Give your viewers easy navigation with this sticky menu that remains somewhere fixed at the viewing area as users scroll through the page. Suitable for sites with a lot of content, this HTML, CSS and JavaScript navbar makes important link easily accessible.
Free Source Code: Sticky Navigation Menu Bar
5. Animated Rubber-like menu Bar
Engage your site visitors with this exciting and jittery elastic animation bar menu. HTML and CSS coded, it is perfect for creative and/or entertainment related websites.
Free Source Code: Elastic Animation Bar Menu
6. Navigation Bar with Indicator
Instead of a static bar, there is a colourful menu bar that visually pinpoints the active section here, with an animated slider depicting the section in focus. It is developed using HTML CSS, and JavaScript; it is not only operational but classy as well.
Free Source Code: Navigation Bar with Indicator
7. Responsive Mega Menu
Use this mega menu that opens to reveal links when much content has to be categorized. Being an HTML, CSS and JavaScript design it fits well for eCommerce websites and news portals.
Free Source Code: Responsive Mega Menu
8. Hover Animation Navigation Menu
Enhance your site with some of the best hover effects that change your menus into beautiful works of art. If the final look proposed by HTML and CSS rendered below is too austere for a portfolio or agency website, too neutral or not professional enough, then there is no reason to look elsewhere for a simple design that brings together everything that is necessary.
Free Source Code: Hover Animation Navigation Menu
9. Navigation Bar with Page Scroll to Every Section interesting
Enjoy the easy to use scroll down bar on this single page site, the menu below will aid your navigation effortlessly. It is created using HTML and CSS and is well suited to portfolios, landing, and showcase sites.
Free Source Code: Navigation Bar with Page Scroll
10. Full screen overlay navigation menu bar
This Hulu fullscreen overlay menu will be a striking modern statement for your channel. It can be created using HTML and CSS, is optimized for mobile, and will give your websites that pop it deserves.
Free Source Code: Full screen overlay navigation menu bar
Conclusion
Here are 10 free responsive navigation bar menus that are not only beautiful, but also functional and flexible for your site. Select the one that helps you align with your design objectives and keep your audiences engaged with smooth accessibility!
14:58 UTC
Need help with css
Hello i have this html and css code. currently it got 8 images sliding 360 degree i want to have another 8 images but showing in the back instead of the same image reflected. I provided two blocks of code first HTML second CSS. Thansk in advance!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- === style sheet ==== -->
<link rel="stylesheet" href="style.css">
<title>3D Image Slider</title>
</head>
<body>
<div class="slider">
<span style="--i:1;"><img src="images/img1.jpg"></span>
<span style="--i:2;"><img src="images/img2.jpg"></span>
<span style="--i:3;"><img src="images/img3.jpg"></span>
<span style="--i:4;"><img src="images/img4.jpg"></span>
<span style="--i:5;"><img src="images/img5.jpg"></span>
<span style="--i:6;"><img src="images/img6.jpg"></span>
<span style="--i:7;"><img src="images/img7.png"></span>
<span style="--i:8;"><img src="images/img8.png"></span>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to right, #2c5364, #0f2027);
overflow: hidden;
}
.slider {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: rotate 30s linear infinite;
}
@keyframes rotate {
0% {
transform: perspective(1000px) rotateY(0deg);
}
100% {
transform: perspective(1000px) rotateY(360deg);
}
}
.slider span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: center;
transform-style: preserve-3d;
transform: rotateY(calc(var(--i) * 45deg)) translateZ(350px);
}
.slider span img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
object-fit: cover;
transition: 2s;
}
.slider span:hover img {
transform: translateY(-50px) scale(1.2);
}08:04 UTC
I'm a total noob so this might be dumb to ask...
anyone please tell me why the CSS is not reflecting on the html?
edit: THANKS FOR THE HELP 🙏🏻🙇🏻
19:18 UTC