I'm making a small website for one of my classes, I want to put 2 gifs and 2 images in one table 2x2 for some reason they just show up as tiny red boxes, The css on the page creates a red border so I'm assuming all that's showing is the css.
<html>
<head>
<title> HYPE! HYPE! HYPE! HYPE! HYPE! HYPE! HYPE! HYPE! HYPE! </title>
<meta name="description" content ="Website for the game mirrors edge 2" />
<meta name="author" content="---" />
<meta name="copyright" content="©2015" />
<!-- specify a base formatting style sheet file-->
<link rel="stylesheet" type="text/css" href="base.css" />
<!-- specify a local formatting style sheet for this page-->
<style>
body {background-color : light-grey; color : silver;}
</style>
</head>
<body>
<table>
<caption> Mirrors edge 2 </caption>
<tr>
<td> Home </td>
<td>Commments</td>
<td>Story</td>
<td>What we know</td>
<td>Hype!</td>
<td>List of Characters</td>
<td>The Studio</td>
</tr>
</table>
<header> <h2> I can't wait </h2>
<p>It's going to be so good</p>
</header>
<h1> GET STOKED </h1>
<table>
<caption> HYPE </caption>
<tr>
<td><img src"hype1.gif"></img></td>
<td><img src"hype2.gif"></img></td>
</tr>
<tr>
<td><img src"faith3.jpg"></img></td>
<td><img src"logo.jpg"></img></td>
</tr>
</table>
<h3> My Sub sub heading </h3>
<br />
my text my text my text
</br>
Return
</body>
</html>
If they are showing up as error boxes inside the table, the URLs of the images are probably incorrect. Check and ensure the images are correctly named and in the same folder as the HTML file.
Related
I have recently begun studying html, im trying to make a small crappy website, and when I copy full path and then paste it into the browser it just gives me a blank screen. Im sorry if this is simple, but nothing I do seems to change it.
code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title><strong>Stanislav Stanislavich</strong></title>
</head>
<table>
<tr>
<td>
<img src="Doomer3.jpeg" alt="Sad_Slav_Boi.jpeg">
</td>
<td>
<li>Just your average IT nerd in Eastern Europe</li>
</td>
</tr>
</table>
<hr>
its just not appearing, a blank screen.
You are missing a <body> tag.
Everything you want to display on the page, goes in the <body> tag. Like this:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title><strong>Stanislav Stanislavich</strong></title>
</head>
<body>
<table>
<tr>
<td>
<img src="Doomer3.jpeg" alt="Sad_Slav_Boi.jpeg">
</td>
<td>
<li>Just your average IT nerd in Eastern Europe</li>
</td>
</tr>
</table>
<hr>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🔥Mayur's Personal Site</title>
<style>
body{
background-color: #eaf6f6;
}
hr{
background-color: white;
border-style: none;
}
</style>
</head>
<body>
<img src="mayurrr.png" alt="mayuresh profile picture">
<h1>Mayuresh Bhosale</h1>
<p><i><strong> Student of Sanjivani College of Engineering, Kopargaon. </strong></i></p>
<p>Hi I am Mayuresh from Aurangabad. I am pursuing my B.tech from Sanjivani College of Engineering, Kopargaon.
<br>I am learning Web Development from udemy.</p>
<hr>
<h3>Education</h3>
<table border="1">
<thead>
<th>Year</th>
<th>School/College</th>
</thead>
<tr>
<td>2007-2017</td>
<td>Maharashtra Public School, Aurangabad</td>
</tr>
<tr>
<td>2017-2019</td>
<td>Sarosh Junior College, Aurangabad</td>
</tr>
<tr>
<td>2019</td>
<td>Sanjivani College of Engineering, Kopargaon</td>
</tr>
</table>
<hr>
<h3>Hobbies</h3>
<ol type="I">
<li>Photography </li>
<li>Playing Games </li>
<li>Listening to Music </li>
</ol>
<p>Contact Me</p>
</body>
</body>
</html>
this is the code!
If I try to add table and in that one row then website gets blank.This same happened when I tried to add background colour to horizontal rule in style tag. Did anyone faced same problem when learning HTML and css?
Now I have added exact same code which is not executing properly.
Your table is inside a ul element, and it's the only child element of that ul. That's invalid HTML. A ul has to contain li elements.
Just erase the ul opening and closing tag.
There are many possible reasons for a code to run blank on a computer. In some cases it might be because you haven't closed <body> or </head> tags properly (or maybe you have duplicates). In other cases however, it might have to do with your computers storage capacity. Check if your storage capacity says something like "0 bytes available" or a very low number. If this is the case you can clean up system files and you should be good.
The following html intepreted wrongly.
Using debug tool of chrome, the <head> appears inside the <body>.
Why is that happening ?
Code:
<!DOCTYPE html>
<html>
<hed>
<meta charset="utf-8"/>
<link href="_css/style.css" rel="stylesheet" />
<title>Position test</title>
</hed>
<body>
<div class="block">
<p>this p inside a div</p>
</div>
<table>
<tr>
<td><p>this p inside td</p></td>
<td></td>
</tr>
</table>
<div class="table">
<p>this p inside a div displayed as a table</p>
</div>
</body>
</html>
Result:
https://zoharch.github.io/position/index.html
Because you have a error in the head tag
<hed> should be <head>
</hed> should be </head>
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link href="_css/style.css" rel="stylesheet" />
<title>Position test</title>
</head>
<body>
<div class="block">
<p>this p inside a div</p>
</div>
<table>
<tr>
<td><p>this p inside td</p></td>
<td></td>
</tr>
</table>
<div class="table">
<p>this p inside a div displayed as a table</p>
</div>
</body>
</html>
Your spelling is not correct for head. you wrote hed.
it will be:
<head></head>
It happens because the <hed> tag (misspelling of <head>) is not recognized, so the browser treats it as starting a hed element of unknown type. Since no such element is allowed in a head element, the browser implies the start of a body element, containing all the rest in the document. Before this, it implies an empty head element.
In most situations, this does not really matter, since the division of an HTML document to head and body elements is syntactical and “philosophical”. The meta, link, and title element work normally in practice, even though the browser treats them as being inside body. But of course you should correct the misspellings of the <head> and </head> tags.
it should be like this just copy paste this head and it will be OK :)
<head>
<meta charset="utf-8">
<link href="_css/style.css" rel="stylesheet">
<title>Position test</title>
</head>
I am trying to use an inline style
The template is simple and is responsive in the browser but is not when I send it to my phone. The image runs off the page and does not scale to the viewport.
Here is the code:
In the img tag I put an inline style.
style="display:block; width:auto; height:100%:"
Where am I going wrong?
I am sending it to an android phone using gmail. Here is the ENTIRE page:
!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta charset="utf-8" /> <title>Best Holiday Wishes</title> </head> <body> <!-- Begin Content --> <div style="width:100%; height:auto; margin:0 auto;"> <img src="literacy2pointzero.com/images/03.jpg"; style="display:block; width:auto; height:100%:" alt="Holiday Wishes" /> </div> <!-- End Content --> </body> </html>
Try giving these properties.
Style="Max-width:100%;width:100%\9;height: auto;"
It will make the image shrink and resize to its max size.
try this with your image
<img src="http://www.literacy2pointzero.com/images/03.jpg" style="max-width:100%; height: auto;" width="100%" height="auto" alt="Holiday Wishes" />
but the problem might be your viewport tag. Try this one:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
Without more info, below is best I can do. It is based off a similar issue in Outlook. It may not work though depending on how your sending email client renders the width property of an image (e.g. Outlook removes percentages and creates a defined value regardless of what you have in the HTML).
First - use a table, it is more stable in email clients. Second by having 3 columns with a defined middle one, you are able to fake the CSS max-width style allowing it to shrink to screen size, but never go past what was defined in the TD tag. ALSO make sure to add the full URL when referencing src or href in emails.
See below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="utf-8" />
<title>Best Holiday Wishes</title>
</head>
<body> <!-- Begin Content --> <table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td></td>
<td width="600" align="center"><img width="100%" src="http://www.literacy2pointzero.com/images/03.jpg"; style="display:block;" alt="Holiday Wishes" /></td>
<td></td>
</tr>
</table> <!-- End Content --> </body> </html>
I did ask a similar question not too long ago, but I found some new information on the topic and I think that I can explain a bit better now.
I have two puzzle pieces, both are transparent .pngs (except the actual pieces):
Here's the code that I'm using to display my two pieces right now -
<body>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<img src="http://i.imgur.com/UPYw2i4.png">
</td>
<td>
<img src="http://i.imgur.com/7rkQ0hz.png">
</td>
</tr>
</table>
</div>
The images are beside each other, but not interlocking like they should. I know that this is supposed to happen, because who wants overlapping pictures. So my question is, how do I have them overlap?
The puzzle isn't meant to be built, it's meant to be pre-built and the pieces appear at different times using opacity, if that makes any sense.
Any direction would be awesome, as I'm new to this (having a blast learning though).
Here is an example of a "fancier" solution using the Jquery UI draggable widget:
http://plnkr.co/edit/BYDyqjBLUOXFcuPvqWvx?p=preview
html
<head>
<meta charset="utf-8" />
<title><!-- Title here --></title>
<link data-require="jqueryui" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="jqueryui" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script src="script.js"></script>
</head>
<body>
<img src="http://i.imgur.com/UPYw2i4.png" class="draggable">
<img src="http://i.imgur.com/7rkQ0hz.png" class="draggable">
</body>
</html>
JS
//js
$(function(){
$( ".draggable" ).draggable();
});
This allows you to grab and move each piece with the mouse. Had to use plnkr...because like you, i could not figure out for the life of me how to save a JSFiddle.
You cannot do this with a tableset. The columns won't overlap properly. Even if you could pull it off, you can't expect it to work across all browsers.
You could easily accomplish this with DIVs and CSS. There you have complete control over placement.
I was able to produce the desired result with some CSS Magic
<body>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<img src="http://i.imgur.com/UPYw2i4.png">
</td>
<td>
<img src="http://i.imgur.com/7rkQ0hz.png" class="merge">
</td>
</tr>
</table>
</div>
</body>
CSS
.merge
{
position:relative;
right:92px;
top:4px;
}