CrazyEngineers
  • aarthivg

    aarthivg

    MemberOct 6, 2013

    HTML Help - Image appears as a blank box in Chrome

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

    Classic Touch



  • Home
  • Contact us


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

    AdministratorOct 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

    MemberOct 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

    MemberOct 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>
    
    
    Are you sure? This action cannot be undone.
    Cancel
  • rahul69

    MemberOct 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!👍
    Are you sure? This action cannot be undone.
    Cancel
  • aarthivg

    MemberOct 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

    MemberOct 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

    MemberOct 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

    MemberOct 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