I am writing an HTML code for the sites.google.com.
I have found the code to wrap the text around the image but I am unable to display the image itself. The image is in google drive(share status is 'viewer for anyone with the link'). Attached below are the code and a snapshot of the error.
<!DOCTYPE html>
<html>
<head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=default'></script>
</head>
<body>
<h1>Coulomb's Law </h1>
<div><p style="float: right;">
<img src="https://drive.google.com/thumbnail?id=${1rd3VIZ4tjO4GKNZNSFs4nZr-md0z9jy9}&sz=w${width || 400px}-h${height || 400px}></p>
<!--img src="https://drive.google.com/file/d/1rd3VIZ4tjO4GKNZNSFs4nZr-md0z9jy9/view?usp=sharing" width="200px" height="200px" border="1px" allow="autoplay"--></p> </div>
Coulomb's law states that the electrical force between two charged objects is directly proportional to the product of the quantity of charge on the objects and inversely proportional to the square of the separation distance between the two objects.</p>
<p align="justify" style="color:black;font-size:18px;" >
In equation form, Coulomb's law can be stated as</p>
$$ {F = \frac{k* Q_1 * Q_2}{r^2} }$$
<!$$ {J(\theta) =\frac{1}{2m} [\sum^m_{i=1}(h_\theta(x^{(i)}) - y^{(i)})2 + \lambda\sum^n_{j=1}\theta^2_j} $$>
<p align="justify" style="color:black;font-size:18px;" >
where Q<sub>1</sub> represents the quantity of charge on object 1 (in Coulombs), Q<sub>2</sub> represents the quantity of charge on object 2 (in Coulombs), and d represents the distance of separation between the two objects (in meters). The symbol k is a proportionality constant known as the Coulomb's law constant.</p>
</body>
</html>
You have using an invalid HTML (and url).
<img src="https://drive.google.com/thumbnail?id=${1rd3VIZ4tjO4GKNZNSFs4nZr-md0z9jy9}&sz=w${width || 400px}-h${height || 400px}></p>
Use this instead:
<img src="https://drive.google.com/thumbnail?id=1rd3VIZ4tjO4GKNZNSFs4nZr-md0z9jy9&sz=w400px-h400px"></p>
Related
I'm trying to implement a pandas dataframe in to this HTML code.
So, instead of User in the Dear User row,
I can take a specific value from the last row of my data frame.
And instead of Users daily amount after the Reason: row I will get a specific reason from the last row of a data frame.
Sample Code:
msg.attach(MIMEText(
'''
<html>
<body>
<p><img src="cid:1" width="900" height="100"></p>
<b><h1 style="text-align: left;">Pay Attention!</h1></b>
<h3 style="text-align: left;">Dear User,</h3>
<p>There has been an anomaly in the following meaurement: </p>
<b><p>Users daily amount </p></b>
<h3>Reasons: </h3>
<p> - Increase in the amount of Information Request sent</p>
<p> - Unknown new rule firing </p>
<h3>Last 2 Weeks Activity</h3>
<p><img src="cid:0"></p>
</body>
</html>
''',
'html', 'utf-8'))
Hope I'm clear, Thanks a lot!
It is not entirely clear what you want to achieve, but as far as I understood, you want to pass a value from pandas dataframe to your html code. In this case, you can simply concatenate the strings.
user = df.iloc[-1][0] //index of value
html = '''
<html>
<body>
<p><img src="cid:1" width="900" height="100"></p>
<b><h1 style="text-align: left;">Pay Attention!</h1></b>
<h3 style="text-align: left;">Dear ''' + user + ''',</h3>
<p>There has been an anomaly in the following meaurement: </p>
<b><p>Users daily amount </p></b>
<h3>Reasons: </h3>
<p> - Increase in the amount of Information Request sent</p>
<p> - Unknown new rule firing </p>
<h3>Last 2 Weeks Activity</h3>
<p><img src="cid:0"></p>
</body>
</html>
'''
msg.attach(MIMEText(html, 'html'))
Hello first all thanks for your help I want to replace UPPERCASE with lowercase inside or between <> quotes or angle brackets.
Sample: replace Capital to lower
<img src="/images/Cars/Icon/CompactCars-icon.PNG" />
becomes
<img src="/images/cars/icon/compactcars-icon.png" />
or
<a href="/Carsales/Buy-Buxury-suvs.html">
<a href="/carsales/buy-luxury-suvs.html">
or
<HTML> to <html>
Replace just between <>
But not replace nothing inside:
<h2 class="article-title"><center>United States Cars For Sale</h2>
as you can see United States Car For Sale are inside <> and I don't want to replace that.
Sorry for the confusing I caused. I did not paste my code because it is part of my big assignment. Also, I do not sure what parts of code cause the problem. So I paste the parts of the code that contains these three buttons
I want to make these three button display horizontally( Which I think is default). However, the website shows them vertically. Could anyone tell me the reason behind it? what should I do to make them horizontally.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</div>
<div id="Comparing Energy" class="tab">
<h3 style="color:darkblue;"> Units for comparing energy (Gasoline and Enthanol) </h3>
<p class="Sansserif">BTU stands for British Thermal Unit, which is a unit of energy consumed by or delivered to a building. A BTU is defined as the amount of energy required to increase the temperature of 1 pound of water by 1 degree Fahrenheit, at normal atmospheric pressure. Energy consumption is expressed in BTU to allow for consumption comparisons among fuels that are measured in different units. [think-energy.net]</p>
<pre class="Sansserif"><span style="font-family:sans-serif;">Below are some BTU content of common energy units:
1 gallon of heating oil = 138,500 BTU
1 cubic foot of natural gas = 1,032 BTU
1 gallon of propane = 91,333 BTU
</span></pre>
<p class="Sansserif"><b>Let's compare the different energy amount between burn gasoline and ethanol</b></p>
<button onclick="expandable()"><b>Calculate</b></button>
<p id="inputinfo" class="Sansserif" style="display:none"> By entering the amount of gasoline, this program will perform the appropriate calculations and display the equivalent amount of energy it produces in BTU. Please input a number: </p>
<input id="btu" style="display:none" onkeyup="myDefault()">
<button id="energybutton" onclick="energy()" style="display:none;"><b>Submit</b></button>
<button id="wizardbutton" onclick="wizard()" style="display:none;"><b>Wizard</b></button>
<button id="slidebutton" onclick="simple()" style="display: none;"><b>Simple</b></button>
<p id="numb2" style="display:none">
<input type=radio name=myradio onclick=document.getElementById("btu").value=1>Small<br>
<input type=radio name=myradio onclick=document.getElementById("btu").value=4>Medium<br>
<input type=radio name=myradio onclick=document.getElementById("btu").value=6>Large<br>
</p>
<p id="BTU"></p>
<p id="defaultValue"></p>
<script>
function energy() {
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById('btu').value;
j = x * 115000
t = x*76700
text = " "+x+" gallon of gas produces "+j+" BTU "+x+" gallon of ethanol produces "+t+" BTU";
document.getElementById("BTU").innerHTML = text;
}
function myDefault() {
var x = document.getElementById('btu').value;
if (x <= 10)
document.getElementById("defaultValue").innerHTML = "A typical small one is 5";
else if ((x > 10) && (x <= 20))
document.getElementById("defaultValue").innerHTML = "A typical medium one is 15";
else if (x > 20)
document.getElementById("defaultValue").innerHTML = "A typical large one is 25";
else
document.getElementById("defaultValue").innerHTML = " ";
}
function wizard() {
var v = prompt("By entering the amount of gasoline, this program will perform the appropriate calculations and display the equivalent amount of energy it produces in BTU. Please input a number: ");
if (v != null) {
document.getElementById('btu').value=v;
}
}
function simple() {
document.getElementById('btu').style.display='none';
document.getElementById('numb2').style.display='block';
}
function expandable() {
document.getElementById('inputinfo').style.display='block';
document.getElementById('btu').style.display='block';
document.getElementById('energybutton').style.display='block';
document.getElementById('wizardbutton').style.display='block';
document.getElementById('slidebutton').style.display='block';
}
</script>
</div>
</body>
</html>
display: inline-block;
This should solve your problem.
Hard to say without the rest of your code present, but probably some other CSS is causing the buttons to render as block elements instead of their standard inline display mode.
You could write the following CSS rule:
#energybutton, #wizardbutton, #slidebutton {
display: inline !important;
}
And it would probably solve it, but that seems a little ugly and the !important is undoubtedly overkill. If you'd like to provide some more context I or someone else could provide a more elegant answer, but my hunch is this might work for you.
Edit:
Seeing your exit with more code the issue is obvious- in your expandable method you are changing the buttons to display: block -- this is why they are displaying with breaks between then. Instead, set the display property to inline or inline-block to achieve the desired effect.
Incidentally, it might be more robust to hide/show the buttons not directly by directly manipulating styles in JS, but instead by adding/removing a class with the desired associated CSS set.
Change the display of your buttons to 'inline' instead of 'none'.
First I would place all the buttons within a div so you can property CSS them.
<div class="title_of_div">
<button id="energybutton" onclick="energy()" style="display:none"><b>Submit</b></button>
<button id="wizardbutton" onclick="wizard()" style="display:none"><b>Wizard</b></button>
<button id="slidebutton" onclick="simple()" style="display: none"><b>Simple</b></button>
</div>
Then your CSS would look something like this:
.title_of_div a {
display: block;
float: left;
height: 50px; <!-- You enter your own height -->
width: 100px; <!-- You enter your own width -->
margin-right: 10px;
text-align: center;
line-height: 50px;
text-decoration: none;
}
I am new at all this and for the life of me I cannot get the text "In Stock Online" or "Out of Stock Online from http://www.walmart.ca/en/ip/large-kick-fetch-ball/6000105718024
I've tried multiple variations with no luck.
Should it not be =importxml("url","//span[#class='msg']") ?
This also doesnt work using Excel's xpathonurl function (an add-in)
Here is the html source code:
<div class="product-avail wgrid-3w6 wgrid-2w4 marg-r-0">
<div class="statuses">
<div class="shipping status">
<span class="icon-status checkmark"></span>
<span class="msg">In stock online</span>** </div>
<div class="shipping-alert status">
<span class="icon-status arrow" style="display: inline;"></span>
<span class="msg"><span class="edd">
See estimated delivery date</span></span> </div> </div> </div>`
Try this:
=importxml("url","//span[#class='msg']/text()")
As per xpath, if you want to retrieve the text value of the given element, you should use text() method.
Update:
The span with class=msg in the given URL has an empty value. So you can handle the #N/A as follows:
=IFERROR(IMPORTXML("http://www.walmart.ca/en/ip/large-kick-fetch-ball/6000105718024", "//span[#class='msg']"), "")
I have two files, XML and an HTML and need to extract data from these on certain patterns.
My XML file is pretty well formatted and I can use readline to read a line and search data between tags.
if($line =~ /\<tag1\>$varvalue\<\/tag1\>/)`
However, for my HTML, it has one of the worst code I have seen and the file is like:
<div class="theater">
<h2>
<a href="/showtimes/university-village-3" >**University Village 3**</a></h2>
<div class="address">
<i>**3323 South Hoover Street, Los Angeles CA 90007 | (213) 748-6321**</i>
</div>
</div>
<div class="mtitle">
<a href="/movie/dream-house-2011" title="Dream House" onmouseover="mB(event, 771204354);" >**Dream House**</a>
<span>**(PG-13 , 1 hr. 31 min.)**</span>
</div>
<div class="times">
**1:00 PM,**
</div>
Now from this file I need to pick data which is shown in bold.
I can use Perl regular expression to search data from this file.
RegEx match open tags except XHTML self-contained tags
http://www.codinghorror.com/blog/2009/11/parsing-html-the-cthulhu-way.html
Using regular expressions to parse HTML: why not?
When you are done reading those come back :)
Edit : and to actually solve your problem take a look at this module :
http://perlmeme.org/tutorials/html_parser.html
Some sample to parse the an html file :
#!/usr/local/bin/perl
use HTML::TreeBuilder;
$tree = HTML::TreeBuilder->new;
$tree->parse_file('C:\Users\Stefanos\workspace\HTML_Parser_Test\test.html');
#divs = $tree->find('div');
$tree->delete;
In this example I just used your tags as the main body of an .html file. The divs are stored in the #divs array. Since I have no idea which text you want to find, because ** is not a element I can't help you further..
P.S. I have never used this module but I just did it in 5 minutes so it is not so hard to parse the html file and find whatever you want..
Regex to match any specific tag and store of contents result into $1:
if ($subject =~ m!<tagname[^>]*>(.*?)</tagname>!s) {
# Successful match
}
Although you will soon realize the limitations of this approach when you have nested elements..
Replace tagname with actual tag.. e.g. in your case i, a, span, div although for div you will also get the contents of the first div which is not what you want..
Parsing XML and HTML using regular expressions is a fool's errand. There are many simple to use Perl modules for parsing HTML. Here is something using HTML::TokeParser::Simple. I've omitted the code to associate movies and showtimes with theaters (because I have no intention of building an appropriate input file):
#!/usr/bin/env perl
use strict; use warnings;
use HTML::TokeParser::Simple;
my $parser = HTML::TokeParser::Simple->new(handle => \*DATA);
my #theaters;
while (my $div = $parser->get_tag('div')) {
my $class = $div->get_attr('class');
next unless defined($class) and $class eq 'theater';
my %record;
$record{theater} = $parser->get_text('/a');
$record{address} = $parser->get_text('/i');
s{(?:^\s+)|(?:\s+\z)}{} for values %record;
push #theaters, \%record;
}
use YAML;
print Dump \#theaters;
__DATA__
<div class="theater">
<h2>
<a href="/showtimes/university-village-3" >**University Village 3**</a></h2>
<div class="address">
<i>**3323 South Hoover Street, Los Angeles CA 90007 | (213) 748-6321**</i>
</div>
</div>
<div class="mtitle">
<a href="/movie/dream-house-2011" title="Dream House" onmouseover="mB(event, 771204354);" >**Dream House**</a>
<span>**(PG-13 , 1 hr. 31 min.)**</span>
</div>
<div class="times">
**1:00 PM,**
</div>
<div class="theater">
<h2>
<a href="/showtimes/university-village-3" >**Some other theater*</a></h2>
<div class="address">
<i>**1234 South Hoover Street, St Paul, MN 99999 | (999) 748-6321**</i>
</div>
</div>
Output:
[sinan#macardy]:~/tmp> ./tt.pl
---
- address: '**3323 South Hoover Street, Los Angeles CA 90007 | (213) 748-6321**'
theater: '**University Village 3**'
- address: '**1234 South Hoover Street, St Paul, MN 99999 | (999) 748-6321**'
theater: '**Some other theater*'