In html programming class I tried to make an html file and display two images. For any reason me and my teacher can't determine, there is one image which isn't being displayed.
Could you please let me know why this is happening?
<!DOCTYPE html>
<html Lang="es">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<img scr="https://www.sublimetext.com/images/windows_48.png" />
</div>
<div>
<img src="https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_284x96dp.png">
</div>
</body>
you have misspelled src, you have scr
it should be <img src="https://www.sublimetext.com/images/windows_48.png" />
Related
I am working on a project where I make a recipe site. Within my odin-recipes directory I have my index.html, index.css, and two directories(recipes & photos). I am trying to use photos from my photos directory to display on index.html but it displays as shown below. Am I able to use photos from within another directory or is it best practice to also have a copy of the photo at the same level as index.html? This is my current full index.html code:
<!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>Odin Recipes</title>
<link rel="stylesheet" href="index.css">
</head>
<!-- resize div start -->
<div style="min-width: 960px; margin: 0 auto;">
<body>
<div class="header">
<h1>Odin Recipes</h1>
</div>
<div class="recipe-list">
<span class="spaghetti"><p>Spaghetti Aglio</p></span>
<span class="gyudon"><p>Gyudon (Beef Bowl)</p></span>
<span class="caldereta"><p>Caldereta</p></span>
</div>
<div class="images">
<span> <img src="/photos/spaghettiAglio1200x1800.jpeg"> </span>
<span> <img src="/photos/gyudon1200x1800.jpeg"> </span>
<span> <img src="/photos/caldereta1200x1800.jpeg"> </span>
</div>
</div>
<!-- resize div end -->
</body>
</html>
The way you describe your file structure you need to erase the first / in all your filepaths (in the src attribute of the img tags, and probably also in the href attributes of the links) to get a correct relative filepath to the "photos" and "recipies" folders which are at the same level as your HTML file.
That would for example be <img src="photos/spaghettiAglio1200x1800.jpeg">
I'm displaying an HTML overlay on a 1920x1080 stream.
Im trying to create a simple HTML page that has a centered image that shows on top but whenever i display it it's somewhere on the bottom right side.
This is my code, I rather not use CSS if that's an option
What am i missing?
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<center>
<img src="https://s10.gifyu.com/images/once-30-sec-5-min-99.gif" alt="Computer man" style="width:400px;height:100px;padding-bottom: 350;padding-right: 200px">
</center>
<script>
</script>
</body>
</html>
I don't think you can create a fixed resolution only using HTML
but you can put styles in the HTML image tag with maximum height and with instead of linking it to a CSS page
<!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>Document</title>
</head>
<body>
<img href="address of image" style="width=100%; height:100%">
</body>
</html>
hey guys is there a way I can make a text fit perfectly with an image like that of Netflix
https://www.netflix.com/ng/title/81067760 i already have the image but making the text fit exactly and also not covering the image is just impossible for me right now
this is my code for the image
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<body style="background-color: #323232">
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<picture>
<source class="mov" media="(max-width: 599px)" srcset="https://image.tmdb.org/t/p/original<%=Details.poster_path%>" >
<img class = "d-block w-100 img" src = "https://image.tmdb.org/t/p/original<%=Details.backdrop_path%>">
</picture>
<div class = "details">
<h1><%=Details.title %></h1>
<p><%=Details.release_date%></p>
<h2><%=Details.description%></h2>
</div>
</head>
</body>
</html>
question is how do i make the div class of details fit with the image i just need to replicate the the big image and how the text is aligned vertically to the left of the screen like that of Netflix. Check this link out https://www.netflix.com/ng/title/81067760
Hope it's more clear now thanks...
I'm not sure what netflix element you are trying to replicate, but I can show you how to align the images vertically with the .details class.
Start by wrapping a div class='container' around both the picture and div class='details' elements.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<body style="background-color: #323232">
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<div class='container'>
<picture>
<source class="mov" media="(max-width: 599px)" srcset="https://image.tmdb.org/t/p/original<%=Details.poster_path%>" >
<img class = "d-block w-100 img" src = "https://image.tmdb.org/t/p/original<%=Details.backdrop_path%>">
</picture>
<div class = "details">
<h1><%=Details.title %></h1>
<p><%=Details.release_date%></p>
<h2><%=Details.description%></h2>
</div>
</div>
</head>
</body>
</html>
Add the following line to the top of styles.css
.container {
display: flex;
align-items: center;
}
Flexbox is great for this kind of thing. Read up here
Let me know if that helps.
Maybe z-index property is the property that can help you.
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
This is one of the ways to allow text to cover the image. Sorry, if I hadn't understand you correctly.
Trying out the image blog application to understand floatprpertiy of CSS. As the link is accurate from Flickr Photo Website, the webpage is unable to render the images.
Tried to look up w3schools for syntax of img tag of HTML.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="photos.css">
<meta charset="utf-8">
</head>
<body>
<img src="https://flic.kr/p/qh8u7t">
<img src="https://flic.kr/p/nZybCW">
<img src="https://flic.kr/p/odUZLT">
<img src="https://flic.kr/p/pnzXJv">
<img src="https://flic.kr/p/qyz47B">
<img src="https://flic.kr/p/q2PmdR">
<img src="https://flic.kr/p/nM4vbe">
<img src="https://flic.kr/p/fvVSdn">
<img src="https://flic.kr/p/drtH69">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" />
<img src="https://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/>
</body>
even though both the image are showing when I try to save the code its showing an error.
Can anyone help me with it.
Thank you
The only error in your HTML I see, is the missing closing HTML-Tag. Perhaps your "Code Academy" environment is very "picky" and sensible to these kind of errors a classic browser would ignore.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" />
<img src="https://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/>
</body>
</html>