I finally finished a website and published it to heroku, but I noticed a strange thing, all emojis turned into strange symbols:
When I used to launch the html file on my pc, this is what I would get
But after it finally started working on heroku, this is what I would get:
I don't know how to fix this, and there is nothing that I found online that can help. This is the html part that I have:
<div class="description">
<p>
🍬 Well, I see you have discovered Candy Lounge! 🍬
</p>
<p>
What makes us special?
</p>
<p>
🎉 We host loads of Giveaways! 🎉
</p>
<p>
🎮 We have GameNights 🎮
</p>
<p>
🙂 We have a very friendly owner , very friendly and helping staff 🙂
</p>
<p>
🔢 We have a counting channel and we are trying to be the top on the leaderboard! 🔢
</p>
<p>
🍭 Loads of roles for you to collect 🍭
</p>
<p>
👐 Decision of the week! 👐
</p>
<p>
👥 Open for partners 👥
</p>
<p>
🐸 Memes 🐸
</p>
<p>
🎨 A channel for you to post your own amazing and creative art! 🎨
</p>
<p>
🎵 A channel for you to post your own great and perfect songs! 🎵
</p>
<p>
🎬 A place for you to advertise your own server and grow your own community 🎬
</p>
<p>
🎤 Loads of voice channels so we can hear your amazing voices 🎤
</p>
<p>
This is not just a normal server. its a family friendly server where you can have fun and get to know more people!
</p>
<p>
🔗https://discord.gg/DEvtq2k🔗
</p>
</div>
How do I turn these symbols into the actual emojis?
you have to add <meta charset="UTF-8"> in order for your emojis to display consistently across various browsers.
UTF-8 character encoding method is used to convert your typed characters into machine-readable code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="description">
<p>
🍬 Well, I see you have discovered Candy Lounge! 🍬
</p>
<p>
What makes us special?
</p>
<p>
🎉 We host loads of Giveaways! 🎉
</p>
<p>
🎮 We have GameNights 🎮
</p>
<p>
🙂 We have a very friendly owner , very friendly and helping staff 🙂
</p>
<p>
🔢 We have a counting channel and we are trying to be the top on the leaderboard! 🔢
</p>
<p>
🍭 Loads of roles for you to collect 🍭
</p>
<p>
👐 Decision of the week! 👐
</p>
<p>
👥 Open for partners 👥
</p>
<p>
🐸 Memes 🐸
</p>
<p>
🎨 A channel for you to post your own amazing and creative art! 🎨
</p>
<p>
🎵 A channel for you to post your own great and perfect songs! 🎵
</p>
<p>
🎬 A place for you to advertise your own server and grow your own community 🎬
</p>
<p>
🎤 Loads of voice channels so we can hear your amazing voices 🎤
</p>
<p>
This is not just a normal server. its a family friendly server where you can have fun and get to know more people!
</p>
<p>
🔗https://discord.gg/DEvtq2k🔗
</p>
</div>
</body>
</html>
Related
For a school project, I need to use a grid. I want to change the position of some articles with text. Can anyone help me? I don't understand how columns work and how to make article 1 the biggest one for example. See my image where I explain how the articles need to be positioned.
.
For example, the second article needs to be displayed, and then the first one.
.product-text {
display: grid;
grid-template: [row1-start] "grid-area2 grid-area1 grid-area3" 50% [row1-end]
/* [row2-start] "grid-area6" 25% [row2-end] */
/* [row3-start] "grid-area5" 25% [row3-end] */
/* [row4-start] "grid-area1" 25% [row4-end] */
/33%;
}
.story {
grid-area: grid-area1;
color: #B12293;
}
.problem {
grid-area: grid-area2;
color: #2297B1;
}
.use {
grid-area: grid-area3;
color: #44CB5F;
}
.users {
grid-area: grid-area4;
color: #4452CB;
}
.expectations {
grid-area: grid-area5;
color: #CB444C;
}
.future {
grid-area: grid-area6;
color: #593E3F;
}
<section class="product-text">
<article class="story">
<p><strong> Story about the innovation: </strong> </p>
<p>The development of our product began in 2016. We created this company with love and passion. </p>
<p>We wanted to create a thing were people can see the data of shoes. To be specific runnin shoes. </p>
<p>With this data we can help a lot of people to determine which type of running shoes they need </p>
<p>We worked for 3 years on this innovation, with a lot of testing we came with the right product. </p>
</article>
<article class="problem">
<p><strong> What problem does this solve? </strong> </p>
<p>The type of shoes you have, do have a lot of impact on how you run. With this innovation you can </p>
<p>choose the best shoes made for you, so you can be the best of yourself. </p>
<p>Poeple can set their own personal records when running the right type of shoes. </p>
<p>Btw, It is way better for your feet when walking on the right type of shoes. You won't get any blisters. </p>
</article>
<article class="use">
<p> <strong> How to use this innovation? </strong> </p>
<p>There is a treadmill with sensors and a computer connected when using this. </p>
<p>A person puts on some running shoes and will walk a couple of times up and down. </p>
<p>The computer connected will collect data and there you will see how you place your foot and shoe. </p>
<p>On the computer it will suggest if you need softer or harder shoes based on the algoritm</p>
</article>
<article class="users">
<p> <strong> Who will use this innovation?</strong> </p>
<p>A lot of people can use this innovation. The age is most of the time between 15-60.</p>
<p>Since running is a populur type of sport, we will have a lot of clients. </p>
<p>We have some collabs in the future with celebrities. This way we can promote this product. </p>
<p>This month we will have a collab with a famous Canadian singer. </p>
<p>We will update very soon when we have more information. </p>
</article>
<article class="expectations">
<p> <strong> What can be expected from our company?</strong> </p>
<p>Anyone can walk in our store to use the innovation. We will kindly massure your shoes and which type you need. </p>
<p>With in 10 minutes we have all the data you need to buy the perfect shoes. </p>
<p>Our employies are always there for you and can answer anything. So you won't have any questions. </p>
<p>On our contact page you can see the opening times and much more. </p>
</article>
<article class="future">
<p> <strong> What is the future of this innovation? </strong> </p>
<p>We are constantly trying to improve this product. With the help of our programmers, we can make it more accurate. </p>
<p>Since our product is getting bigger and bigger, we will open more locations in and outside of The Netherlands.</p>
<p>This way, more people can massure there foot and shoes to buy the best shoes for them. </p>
<p>In 5 years, the company will be 5 times larger from our calculations.</p>
</article>
</section>
Writing the grid-are-templates clean will solve it for you already (see the grid-area-templates in the CSS part):
.product-text {
display: grid;
grid-auto-rows: 1fr; /* makes the rows equal height */
grid-template-areas:
"grid-area2 grid-area1 grid-area3"
"grid-area2 grid-area1 grid-area3"
"grid-area5 grid-area1 grid-area3"
"grid-area5 grid-area1 grid-area4"
"grid-area5 grid-area1 grid-area4"
"grid-area5 grid-area1 grid-area4"
"grid-area5 grid-area6 grid-area6";
}
.story {
grid-area: grid-area1;
color: #B12293;
}
.problem {
grid-area: grid-area2;
color: #2297B1;
}
.use {
grid-area: grid-area3;
color: #44CB5F;
}
.users {
grid-area: grid-area4;
color: #4452CB;
}
.expectations {
grid-area: grid-area5;
color: #CB444C;
}
.future {
grid-area: grid-area6;
color: #593E3F;
}
/* added by editor for visualisation purpose */
article {
border: 2px dashed red;
}
<section class="product-text">
<article class="story">
<p><strong> Story about the innovation: </strong> </p>
<p>The development of our product began in 2016. We created this company with love and passion. </p>
<p>We wanted to create a thing were people can see the data of shoes. To be specific runnin shoes. </p>
<p>With this data we can help a lot of people to determine which type of running shoes they need </p>
<p>We worked for 3 years on this innovation, with a lot of testing we came with the right product. </p>
</article>
<article class="problem">
<p><strong> What problem does this solve? </strong> </p>
<p>The type of shoes you have, do have a lot of impact on how you run. With this innovation you can </p>
<p>choose the best shoes made for you, so you can be the best of yourself. </p>
<p>Poeple can set their own personal records when running the right type of shoes. </p>
<p>Btw, It is way better for your feet when walking on the right type of shoes. You won't get any blisters. </p>
</article>
<article class="use">
<p> <strong> How to use this innovation? </strong> </p>
<p>There is a treadmill with sensors and a computer connected when using this. </p>
<p>A person puts on some running shoes and will walk a couple of times up and down. </p>
<p>The computer connected will collect data and there you will see how you place your foot and shoe. </p>
<p>On the computer it will suggest if you need softer or harder shoes based on the algoritm</p>
</article>
<article class="users">
<p> <strong> Who will use this innovation?</strong> </p>
<p>A lot of people can use this innovation. The age is most of the time between 15-60.</p>
<p>Since running is a populur type of sport, we will have a lot of clients. </p>
<p>We have some collabs in the future with celebrities. This way we can promote this product. </p>
<p>This month we will have a collab with a famous Canadian singer. </p>
<p>We will update very soon when we have more information. </p>
</article>
<article class="expectations">
<p> <strong> What can be expected from our company?</strong> </p>
<p>Anyone can walk in our store to use the innovation. We will kindly massure your shoes and which type you need. </p>
<p>With in 10 minutes we have all the data you need to buy the perfect shoes. </p>
<p>Our employies are always there for you and can answer anything. So you won't have any questions. </p>
<p>On our contact page you can see the opening times and much more. </p>
</article>
<article class="future">
<p> <strong> What is the future of this innovation? </strong> </p>
<p>We are constantly trying to improve this product. With the help of our programmers, we can make it more accurate. </p>
<p>Since our product is getting bigger and bigger, we will open more locations in and outside of The Netherlands.</p>
<p>This way, more people can massure there foot and shoes to buy the best shoes for them. </p>
<p>In 5 years, the company will be 5 times larger from our calculations.</p>
</article>
</section>
I'm working with email content that has been formatted in html. What I have found is that email addresses are often formatted similarly to html tags. Is there a way to selectively escape strings in html code, but render others as-is?
For example, email addresses are often formatted as "Guy, Some <someguy#gmail.com>" How can I escape this, which python sees as an html tag, but leave <br></br><p></p>, etc. intact and render them?
edited
I'm dealing with raw emails that have been preserved as text. In the following example, I want all of the html tags to render normally. However, it also tries to render email addresses that are stored in the following format someguy#gmail.com and then it gives me an error. So my challenge has been to find all of the email addresses, but leave the html tags alone.
<p>From: Guy, Some <someguy#gmail.com></p><br>
<br>
<p>Sent: Friday, January 21, 2022 2:16 PM</p><br>
<br>
<p>To: Another Guy <anotherguy#gmail.com></p>
<br>
<p>Subject: Really Important Subject</p>
<br>
<p> <br>Good morning,
<br>This is sample text<br> </p>
<br>
<p>Thanks for all your help!!!
<br>
<p> </p>
You can use html < and > to make <> inside html document if you're passing this email tags from django then you've to use safe so it will rendered as pure html code like this
"Guy, Some {{email|safe}}"
EDIT
before rendering your html you can extract all emails with <email> for example
import re
data = '''
<p>From: Guy, Some <someguy#gmail.com></p><br>
<br>
<p>Sent: Friday, January 21, 2022 2:16 PM</p><br>
<br>
<p>To: Another Guy <anotherguy#gmail.com></p>
<br>
<p>Subject: Really Important Subject</p>
<br>
<p> <br>Good morning,
<br>This is sample text<br> </p>
<br>
<p>Thanks for all your help!!!
<br>
<p> </p>
'''
emails_to_parse = re.findall('[A-z]+#[A-z]+.[A-z]+', data) # this will return ['someguy#gmail.com', 'anotherguy#gmail.com']
emails_to_remove = re.findall('<[A-z]+#[A-z]+.[A-z]+>', data) # this will return ['<someguy#gmail.com>', '<anotherguy#gmail.com>']
for i in emails_to_parse:
for j in emails_to_remove:
data = data.replace(j,i)
print(data)
above code gives this output
<p>From: Guy, Some someguy#gmail.com</p><br>
<br>
<p>Sent: Friday, January 21, 2022 2:16 PM</p><br>
<br>
<p>To: Another Guy someguy#gmail.com</p>
<br>
<p>Subject: Really Important Subject</p>
<br>
<p> <br>Good morning,
<br>This is sample text<br> </p>
<br>
<p>Thanks for all your help!!!
<br>
<p> </p>
I'll suggest to look at this post
A little background about what I am trying to do— As of recent I have started to read Jon Ducketts “HTML&CSS” book which I am enjoying thoroughly. I finished HTML and now am beginning the CSS side of the book.
What I am trying to accomplish is making a website that shows everything the book has covered and essentially have a navigation bar to give users easier access to go throughout my website to learn about topics that are not yet clear to them (myself).
The problem is that while I am trying to style my text color it isn’t changing color and for the life of me I cannot figure out why.
Is the problem within my link with the wrong file paths I specified in the head or is it a problem with how I have my classes set up in HTML and CSS?
My CSS code is at the bottom of the page that I tried to create classes with. Since you need a “10 reputation” to post photos I’ll be writing my HTML / CSS file name and folder path here.
Name- newWebsiteFinalCSS.css
Folder Path- C:\Users\MyName\Desktop\Website
Name- newWebsiteFinal.html
Folder Path- C:\Users\MyName\Desktop\Website
.headingcolors {
color: red;
}
.p {
color: red;
}
<!doctype>
<html>
<head>
<title>Final HTML CSS Website</title>
<link type="text/css" href="Website/newWebsiteFinalCSS.css" rel="stylesheet">
</head>
<!-- This section i want to create a link to different topics within my own website so it is easier to go throughout the site and
only look at things you want to be reasearching about if you come across a problem with a topic about HTML or CSS. -->
<header class="topnav">
Home
Text
Lists
Links
Images
Tables
Forms
Extra Markup
</header>
<!-- insert navigation bar here -->
<body>
<h1 id="top" class="headingcolors"> Welcome to my first Web Page created with HTML & CSS </h1>
<p>//// During the process of making this website, I will be showing you how I learned to do simple webpage making with very easy to understand the code. This code includes languages called HyperText Markup Language (otherwise known as HTML), and a styling
language called Cascading Style Sheets (otherwise known as CSS). This website was made possible by reading a book called <i>HTML&CSS; design
and build websites</i> by Jon Duckett. I am a fan of Jon Duckett's book and it made me feel excited to read something that was so interesting and brought color to such a fundamental topic of learning a computer language. This website will be a work in
progress with perfecting every single topic covered in HTML as well as styling my webpage and making it a professional looking website that any CEO or businessman would be interested in reading. I hope you enjoy browsing casually throughout my website and enjoying some of the topics as much as I did learning about them! ////</p>
<h2 id="text" class="p">Texts</h2>
<p>This is some text, hopefully i can figure out how to add color.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<h3 id="lists" class="p">Lists</h3>
<p>This is some text, hopefully i can figure out how to add color.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<h4 id="links" class="p">Links</h4>
<p>This is some text, hopefully i can figure out how to add color.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<h5 id="images" class="p">Images</h5>
<p>This is some text, hopefully i can figure out how to add color.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<h6 id="tables" class="p">Tables</h6>
<p>This is some text, hopefully i can figure out how to add color.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<h7 id="forms" class="p">Forms</h7>
<p>This is some text, hopefully i can figure out how to add color.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<h8 id="extramarkup" class="p">Extra Markup</h8>
<p>This is some text, hopefully i can figure out how to add color.</p>
Top of Webpage
</body>
</html>
<link type="text/css" href="Website/newWebsiteFinalCSS.css" rel="stylesheet">
is relative to the html file.
If the html file is in C:\Users\MyName\Desktop\Website.
Then the link is pointing at C:\users\MyName\Desktop\website\Website\newWebsiteFinalCSS.css
It should be
<link type="text/css" href="newWebsiteFinalCSS.css" rel="stylesheet">
I'm busy making my own website. I have the following as a homepage but I get the warning. Element 'title' occurs too few times. I would also like to know how you can do word rap, I want the text to fit neatly in the web browser window. It is not an error only a warning but I would like to know what it means.
<head>
<link href="CSS/StyleSheet1.css" rel="stylesheet" />
</head>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>FORM</title>
<link href="../CSS/StyleSheet1.css" rel="stylesheet" />
</head>
<body>
<table style="height: 92px; float: left;" >
<tbody>
<tr>
<td>Form</td>
</tr>
<tr>
<td style="text-align: left;">Contact Details</td>
</tr>
<tr>
<td>About</td>
</tr>
<tr>
<td>Musical Hereos </td>
</tr>
</tbody>
</table>
<p> <span style="text-decoration: underline;"><strong>MY TEACHING PHILOSOPHY:</strong></span></p>
<p> I would like to take this opportunity to introduce myself and what I do for a</p>
<p> living. I'm a music teacher specializing in Music Theory education, I also teach</p>
<p> Guitar to a lesser extent.</p>
<p> </p>
<p>I have been teaching since 2014 and in these last couple of years, I have learned a few things.</p>
<p>There is no reason Innate to a child that decides music ability. No child or person is born with</p>
<p>some sort of gift where the other is not. Being 'Tone Deaf' is a myth, if a teacher tells a child he</p>
<p>cannot do music then it speaks more to the teacher's inability than the child's ability.</p>
<p> </p>
<p>Music, for the most part, is just another trade. If a child is taught well and puts in the hours he or</p>
<p>she can become proficient in his or her instrument. I don't believe in talent, I believe in hard work.</p>
<p> </p>
<p>When natural born 'talent' has little to do with music, what has a profound effect on the progress of</p>
<p>the musician is the attitude and the work ethic. Children who are motivated and especially those who</p>
<p>motivate themselves will succeed where those who are stubborn and lazy will not.</p>
<p> </p>
<p>I teach both Guitar and Music Theory, I can teach both the Rock and Classical styles. I also insist that </p>
<p>my students do Music Theory as part of their training as it is important for there continued development.</p>
<p>I was raised on the rock music of the early 2000's. The pop-punk genre was a big part of my childhood. </p>
<p>I eventually graduated from popular music and found the wonderful world of classical music. My love for </p>
<p>the guitar grew further as I fell in love with this fascinating part of the guitar world. I eventually </p>
<p>came to know the great Andres Segovia and what he meant for the development of </p>
<p>the guitar as instrument.</p>
<p> </p>
<p>The guitar to me is the most beautiful of instruments, in all of it's forms it fascinates me. The electric version just </p>
<p>as much as the acoustic version. With the electric version there is a power to move you that is simply tremendous.</p>
<p> </p>
<p>All music gets us to move, that is why music and dance have such a rich history together, but with the electric guitar,</p>
<p>it is even more the case. When you stand in the crowd in front of those wall of Marshalls and you can feel the speaker cabinets</p>
<p>literally move the air around you. You feel the air thumping against you chest it moves you on a primitive, visceral level. When</p>
<p>the gods decided to add electricity to the guitar, music was made anew.</p>
<p> </p>
<p>The acoustic guitar in both it's steel and nylon string variants fascinates me on another level. The acoustic guitar</p>
<p>to me has a purity of tone. It also has a richness in harmonics, that is why a guitar can sound wonderful even when only few </p>
<p>notes are played.
<p> </p>
<p>The acoustic guitar is the instrument set between a piano and a violin. With it's six strings </p>
<p>it can play chords in a manner resembling the piano somewhat, but when it comes to dynamical qualities it resembles the violin.</p>
<p>You can do vibrato just like a violin and you can even do bends which is unique to the guitar. All of this gives you </p>
<p>an instrument with some siilarities with others and still enough things particular to it, to make it unique.</p>
<p> </p>
</body>
</html>
<head>
<link href="CSS/StyleSheet1.css" rel="stylesheet" />
</head>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>FORM</title>
<link href="../CSS/StyleSheet1.css" rel="stylesheet" />
</head>
You should merge duplicated head section. The parser do not see <title> tag in the first one. Also notice <head> must be child of <html>.
for word wrap add in css
style="word-wrap: break-word;"
I can not open the hyperlink of "elixirs" and "detailed directions", I do not why ,they are all in a file.
<html>
<head>
<title>Head First Lounge</title>
</head>
<body>
<h1>Welcome to the New and Improved Head First Lounge</h1>
<img src="drinks.gif">
<p>
Join us any evening for refreshing <a href=“elixir.html”>elixirs</a>,
conversation and maybe a game or two of
<em>Dance Dance Revolution</em>.
Wireless access is always provided;
BYOWS (Bring your own web server).
</p>
<h2>Directions</h2>
<p>
You'll find us right in the center of downtown Webville.
If you need help finding us, check out our <a href = “directions.html”>detailed directions</a>.
Come join us!
</p>
</body>
</html>
Just put single quotes ' on every href
try this
<html>
<head>
<title>Head First Lounge</title>
</head>
<body>
<h1>Welcome to the New and Improved Head First Lounge</h1>
<img src='drinks.gif'>
<p>
Join us any evening for refreshing <a href='elixir.html'>elixirs</a>,
conversation and maybe a game or two of
<em>Dance Dance Revolution</em>.
Wireless access is always provided;
BYOWS (Bring your own web server).
</p>
<h2>Directions</h2>
<p>
You'll find us right in the center of downtown Webville.
If you need help finding us, check out our <a href = 'directions.html'>detailed directions</a>.
Come join us!
</p>
</body>
</html>