HTML Help - Image appears as a blank box in Chrome

aarthivg

aarthivg

@aarthivg-HH344f • Oct 23, 2024
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?
Like 0 Replies 8

Replies

Welcome, guest

Join CrazyEngineers to reply, ask questions, and participate in conversations.

Sign up Log in

CrazyEngineers powered by Jatra Community Platform

  • Kaustubh Katdare

    Kaustubh Katdare

    @thebigk • Oct 6, 2013

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

    rahul69

    @rahul69-97fAOs • 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!!😀
    0
  • aarthivg

    aarthivg

    @aarthivg-HH344f • Oct 6, 2013

    aarthi

    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>
    0
  • rahul69

    rahul69

    @rahul69-97fAOs • Oct 7, 2013

    aarthivg
    aarthi

    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!👍
    0
  • aarthivg

    aarthivg

    @aarthivg-HH344f • 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>
    0
  • rahul69

    rahul69

    @rahul69-97fAOs • 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>
    0
  • aarthivg

    aarthivg

    @aarthivg-HH344f • 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.
    0
  • rahul69

    rahul69

    @rahul69-97fAOs • 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>.😀
    0