HTML Help - Image appears as a blank box in Chrome

@aarthivg-HH344f

Updated: Oct 23, 2024

Views: 1.1K

Just today, I have started to learn html and css coding. I tried to insert an image using html code:

<html>
<style>
p
{text-align:center;
}
u1
{list-style-type:none;
margin:0;
padding:0;
}
li
{display:inline;
}
</style>
<body>
<title>Classic Touch</title>
<p><font size="6">Classic Touch</p>
<br>
<br>
<u1>
<font size="4">
<li><a href="#home">Home</a></li>
<li><a href="#contact Us">Contact us</a></li>
</u1><br><br>
<p1>Classic Touch reflects the vision of its founders, to provide piecework of

functionality, quality, and exceptional design to the retail market. Whether

contemporary or traditional, every collection expresses their passion to

transformation in nature combined with gentle nuances to detail.
Classic Touch’s expanding lines of designer products lustrously articulated and

infused with pizzazz have metamorphosed our wholesale company into a name synonymous

with expert craftsmanship. The beautification and verve achieved by fusing a vibrant

color palette is a result of team spirit, creativity, and integrity.
By combining innovative style, modern artisanal sensibility, and customer first

focus Classic Touch has become the interpretation of superiority in the lines of

home, gift, and table decor</p1>
<br>
<img scr="style1.jpg" width="304" height="228">
</body>
</html>

But, I am getting the output as follows:
upload_2013-10-7_10-51-58

Can you guys help me, where I am going wrong?

Replies

Howdy guest!

Dear guest, you must be logged-in to participate on CrazyEngineers. We would love to have you as a member of our community. Consider creating an account or login.

Replies

Kaustubh Katdare

Administrator • Oct 6, 2013

@#-Link-Snipped-# - Does the image exist inside the same folder as your HTML file?

Are you sure? This action cannot be undone.
Cancel
rahul69

Member • Oct 6, 2013
@#-Link-Snipped-# in the bold line :
```
<img scr="style1.jpg" width="304" height="228">
```
I think it should be <img src instead of scr
Correct it and it should work!!😀
Are you sure? This action cannot be undone.
Cancel

aarthivg

Member • Oct 6, 2013

how to align the login and cancel tab as center for username and password tab.

<html>
<style>
body
{background-color:#980000;
background-repeat:no-repeat;
background-position:right top;
}
p
{text-align:center;
background-color:white;
}
u1
{list-style-type:none;
margin:0;
padding:0;
background-color:white;
}
li
{display:inline;
}
</style>
<body>
<title>Classic Touch</title>
<p><font size="6">Classic Touch</p>
<br>
<form name="login">
<div align="right">
<font size="3">
Username<input type="text" name="aarthivg"/><br>
Password<input type="password" name="Ce#123"/><br>
<input type="button" onclick="check(this.form)" value="Login"/><br>
<input type="reset" value="Cancel"/>
</div>
</form>
<script language="javascript">
function check(form)
{
if(form.userid.value == "myuserid" && form.pswrd.value == "mypswrd")
{
window.open('https://www.google.com')
}
else
{
alert("Error")
}
}
</script>
<br><br>

<u1>
<font size="4">
<li><a href="#home">Home</a></li>
<li><a href="#contact Us">Contact us</a></li>
</u1><br><br>
<p1>Classic Touch reflects the vision of its founders, to provide piecework of

functionality, quality, and exceptional design to the retail market. Whether

contemporary or traditional, every collection expresses their passion to

transformation in nature combined with gentle nuances to detail.
Classic Touch’s expanding lines of designer products lustrously articulated and

infused with pizzazz have metamorphosed our wholesale company into a name synonymous

with expert craftsmanship. The beautification and verve achieved by fusing a vibrant

color palette is a result of team spirit, creativity, and integrity.
By combining innovative style, modern artisanal sensibility, and customer first

focus Classic Touch has become the interpretation of superiority in the lines of

home, gift, and table decor</p1>
<br>
<img src="style1.jpg" align="center" width="304" height="228">
</body>
</html>

Are you sure? This action cannot be undone.

Cancel

rahul69

Member • Oct 7, 2013

aarthivg

how to align the login and cancel tab as center for username and password tab.

<html>
<style>
body
{background-color:#980000;
background-repeat:no-repeat;
background-position:right top;
}
p
{text-align:center;
background-color:white;
}
u1
{list-style-type:none;
margin:0;
padding:0;
background-color:white;
}
li
{display:inline;
}
</style>
<body>
<title>Classic Touch</title>
<p><font size="6">Classic Touch</p>
<br>
<form name="login">
<div align="right">
<font size="3">
Username<input type="text" name="aarthivg"/><br>
Password<input type="password" name="Ce#123"/><br>
<input type="button" onclick="check(this.form)" value="Login"/><br>
<input type="reset" value="Cancel"/>
</div>
</form>
<script language="javascript">
function check(form)
{
if(form.userid.value == "myuserid" && form.pswrd.value == "mypswrd")
{
window.open('https://www.google.com')
}
else
{
alert("Error")
}
}
</script>
<br><br>

<u1>
<font size="4">
<li><a href="#home">Home</a></li>
<li><a href="#contact Us">Contact us</a></li>
</u1><br><br>
<p1>Classic Touch reflects the vision of its founders, to provide piecework of

functionality, quality, and exceptional design to the retail market. Whether

contemporary or traditional, every collection expresses their passion to

transformation in nature combined with gentle nuances to detail.
Classic Touch’s expanding lines of designer products lustrously articulated and

infused with pizzazz have metamorphosed our wholesale company into a name synonymous

with expert craftsmanship. The beautification and verve achieved by fusing a vibrant

color palette is a result of team spirit, creativity, and integrity.
By combining innovative style, modern artisanal sensibility, and customer first

focus Classic Touch has become the interpretation of superiority in the lines of

home, gift, and table decor</p1>
<br>
<img src="style1.jpg" align="center" width="304" height="228">
</body>
</html>

There can be more than one ways, one simple way is to use margin style (ie right margin) of appropriate length.

Here is a tip (ignore if u already know this)😀

Tip: A good way to learn HTML from existing web pages is to check out an element using "inspect element". Right click on that element and then choose "inspect element"

Good Luck!👍

Are you sure? This action cannot be undone.

Cancel

aarthivg

Member • Oct 7, 2013

rahul69
There can be more than one ways, one simple way is to use margin style (ie right margin) of appropriate length.

Thanks @#-Link-Snipped-#. You are helping me alot.
I tried using margin style, Unfortunately I can able to only "cancel" tab not the "login" tab.
upload_2013-10-8_10-47-46

<html>
<style>
body
{background-color:#980000;
background-repeat:no-repeat;
background-position:right top;
margin-right:100px;
margin-left:100px;
}
p
{text-align:center;
background-color:white;
}
form
{margin-top:10px;
margin-left:50px;
margin-right:50px;
}
p3
{margin-right:50px;
}
u1
{list-style-type:none;
margin-top:100px;
padding:0;
background-color:white;
}
li
{display:inline;
}
</style>
<body>
<title>Classic Touch</title>
<p><font size="6">Classic Touch</p>
<br>
<u1>
<font size="4">
<li><a href="#home">Home</a></li>
<li><a href="#contact Us">Contact us</a></li>
<form name="login">
<div align="right">
<font size="3">
Username<input type="text" name="aarthivg"/><br>
Password<input type="password" name="Ce#123"/><br>
<p3>
<input type="button" onclick="check(this.form)" value="Login"/><br>
<input type="reset" value="Cancel"/>
</p3>
</div>
</form>
<script language="javascript">
function check(form)
{
if(form.userid.value == "myuserid" && form.pswrd.value == "mypswrd")
{
window.open('https://www.google.com')
}
else
{
alert("Error")
}
}
</script>
</u1><br><br>
<p1>Classic Touch reflects the vision of its founders, to provide piecework of

functionality, quality, and exceptional design to the retail market. Whether

contemporary or traditional, every collection expresses their passion to

transformation in nature combined with gentle nuances to detail.
Classic Touchâ€™s expanding lines of designer products lustrously articulated and

infused with pizzazz have metamorphosed our wholesale company into a name synonymous

with expert craftsmanship. The beautification and verve achieved by fusing a vibrant

color palette is a result of team spirit, creativity, and integrity.
By combining innovative style, modern artisanal sensibility, and customer first

focus Classic Touch has become the interpretation of superiority in the lines of

home, gift, and table decor</p1>
<br>
<img src="style1.jpg" align="center" width="304" height="228">
</body>
</html>

Are you sure? This action cannot be undone.

Cancel

rahul69

Member • Oct 7, 2013

aarthivg

Thanks @#-Link-Snipped-#. You are helping me alot.
I tried using margin style, Unfortunately I can able to only "cancel" tab not the "login" tab.
upload_2013-10-8_10-47-46

<html>
<style>
body
{background-color:#980000;
background-repeat:no-repeat;
background-position:right top;
margin-right:100px;
margin-left:100px;
}
p
{text-align:center;
background-color:white;
}
form
{margin-top:10px;
margin-left:50px;
margin-right:50px;
}
p3
{margin-right:50px;
}
u1
{list-style-type:none;
margin-top:100px;
padding:0;
background-color:white;
}
li
{display:inline;
}
</style>
<body>
<title>Classic Touch</title>
<p><font size="6">Classic Touch</p>
<br>
<u1>
<font size="4">
<li><a href="#home">Home</a></li>
<li><a href="#contact Us">Contact us</a></li>
<form name="login">
<div align="right">
<font size="3">
Username<input type="text" name="aarthivg"/><br>
Password<input type="password" name="Ce#123"/><br>
<p3>
<input type="button" onclick="check(this.form)" value="Login"/><br>
<input type="reset" value="Cancel"/>
</p3>
</div>
</form>
<script language="javascript">
function check(form)
{
if(form.userid.value == "myuserid" && form.pswrd.value == "mypswrd")
{
window.open('https://www.google.com')
}
else
{
alert("Error")
}
}
</script>
</u1><br><br>
<p1>Classic Touch reflects the vision of its founders, to provide piecework of

functionality, quality, and exceptional design to the retail market. Whether

contemporary or traditional, every collection expresses their passion to

transformation in nature combined with gentle nuances to detail.
Classic Touchâ€™s expanding lines of designer products lustrously articulated and

infused with pizzazz have metamorphosed our wholesale company into a name synonymous

with expert craftsmanship. The beautification and verve achieved by fusing a vibrant

color palette is a result of team spirit, creativity, and integrity.
By combining innovative style, modern artisanal sensibility, and customer first

focus Classic Touch has become the interpretation of superiority in the lines of

home, gift, and table decor</p1>
<br>
<img src="style1.jpg" align="center" width="304" height="228">
</body>
</html>

Try this code, if it works for u:

<html>
<style>
body
{background-color:#980000;
background-repeat:no-repeat;
background-position:right top;
}
p
{text-align:center;
background-color:white;
}
#login
{
margin-right:100px;
}
#cancel
{
margin-right:100px
}
u1
{list-style-type:none;
margin:0;
padding:0;
background-color:white;
}
li
{display:inline;
}
</style>
<body>
<title>Classic Touch</title>
<p><font size="6">Classic Touch</p>
<br>
<form name="login">
<div align="right">
<font size="3">
Username<input type="text" name="aarthivg"/><br>
Password<input type="password" name="Ce#123"/><br>
<input type="button" id="login" onclick="check(this.form)" value=" Login "/><br>
<input type="reset" id="cancel" value="Cancel"/>
</div>
</form>
<script language="javascript">
function check(form)
{
if(form.userid.value == "myuserid" && form.pswrd.value == "mypswrd")
{
window.open('https://www.google.com')
}
else
{
alert("Error")
}
}
</script>
<br><br>

<u1>
<font size="4">
<li><a href="#home">Home</a></li>
<li><a href="#contact Us">Contact us</a></li>
</u1><br><br>
<p1>Classic Touch reflects the vision of its founders, to provide piecework of

functionality, quality, and exceptional design to the retail market. Whether

contemporary or traditional, every collection expresses their passion to

transformation in nature combined with gentle nuances to detail.
Classic Touchâ€™s expanding lines of designer products lustrously articulated and

infused with pizzazz have metamorphosed our wholesale company into a name synonymous

with expert craftsmanship. The beautification and verve achieved by fusing a vibrant

color palette is a result of team spirit, creativity, and integrity.
By combining innovative style, modern artisanal sensibility, and customer first

focus Classic Touch has become the interpretation of superiority in the lines of

home, gift, and table decor</p1>
<br>
<img src="style1.jpg" align="center" width="304" height="228">
</body>
</html>

Are you sure? This action cannot be undone.

Cancel

aarthivg

Member • Oct 7, 2013

rahul69
Tip: A good way to learn HTML from existing web pages is to check out an element using "inspect element". Right click on that element and then choose "inspect element"

Good Luck!👍
Thanks for your Tip. I tried to understand the coding of various web pages. But It was quite difficult to understand. Anyway I have long way to go.

Next, I tried to create a layout. I used table tag for creating a layout. I ended up successfully. But, I am curious to know, is it possible to create a layout with out using table tag.

Are you sure? This action cannot be undone.
Cancel
rahul69

Member • Oct 8, 2013

aarthivg
Thanks for your Tip. I tried to understand the coding of various web pages. But It was quite difficult to understand. Anyway I have long way to go.

Next, I tried to create a layout. I used table tag for creating a layout. I ended up successfully. But, I am curious to know, is it possible to create a layout with out using table tag.
Actually the recommended way to create the layout is to use the <div> tag. The purpose of <table> tag is to create tables, so u can use <div>.😀

Are you sure? This action cannot be undone.
Cancel