Why can't I insert HTML images? - html

I am a beginner who is learning HTML recently. I put the same HTML file and image in the same folder as below, but only the image icon is displayed and does not print out. Please help me.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-wid">
<title>Typing Text</title>
<img src="https://cdn-icons-png.flaticon.com/512/2889/2889312.png" alt= "img" width="1000", height="500">
<link herf="typr.css" rel="stylesheet">
</head>
<body>
<p id="dynamic" class="ig-text">
Learn To HTML
</p>
<p class="sm text" > LAilac
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-wid">
<title>Typing Text</title>
<img src="https://cdn-icons-png.flaticon.com/512/2889/2889312.png" alt= "img" width="1000", height="500">
<link herf="typr.css" rel="stylesheet">
</head>
<body>
<p id="dynamic" class="ig-text">
Learn To HTML
</p>
<p class="sm text" > LAilac
</p>
</body>
</html>


Try this code:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-wid">
<title>Typing Text</title>
<link herf="typr.css" rel="stylesheet">
</head>
<body>
<img src="https://cdn-icons-png.flaticon.com/512/2889/2889312.png" alt= "img" width="1000", height="500">
<p id="dynamic" class="ig-text">
Learn To HTML
</p>
<p class="sm text" > LAilac
</p>
</body>
</html>
The reason is because you didn't move your <img> tag inside the <body> tag.


Move the <img> tag inside the <body> tag. You placed it in the <head> section.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-wid">
<title>Typing Text</title>
<link herf="typr.css" rel="stylesheet">
</head>
<body>
<img src="https://cdn-icons-png.flaticon.com/512/2889/2889312.png" alt= "img" width="1000", height="500">
<p id="dynamic" class="ig-text">
Learn To HTML
</p>
<p class="sm text" > LAilac
</p>
</body>
</html>

Related

Embedding non-native HTML file in iframe tag

This is an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<iframe width="200" height="200" src="https://www.dl.dropboxusercontent.com/pages.html/dl=1"></iframe>
</body>
</html>
I want the tag to work as a file

tailwind css is not working in my threejs website

I am using threejs website with webpack and to style my website I am using Tailwind CSS and I tried to configure it and this not working in my browser
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="style.css" rel="stylesheet" >
<title>Globe animation</title>
</head>
<body>
<div class="flex">
<div class="w-1/2">
<h1>Globe</h1>
</div>
<div class="w-1/2" id="canvasContainer">
<!-- Threejs canvas globe -->
<canvas class="webgl"></canvas>
</div>
</div>
</body>
</html>

HTML on HTML lIke ReactJs JSX?

How to include the content on an html file, that is on the same folder, on the body of an other html file.
index.html | Ex:
<!DOCTYPE HTML>
<html>
<head>
<meta property="mymeta" content="Lot of meta" />
<title>Some cool title</title>
...
</head>
<body>
! Include content.htm here !
</body>
</html>
content.htm | Ex:
<div></div>
<h1></h1>
<img src="https://404.com" />
...

You can either use <embed> tag. more info here:
<!DOCTYPE HTML>
<html>
<head>
<meta property="mymeta" content="Lot of meta" />
<title>Some cool title</title>
...
</head>
<body>
<embed type="text/html" src="content.html" width="500" height="200">
</body>
</html>
or you can use <iframe>:
<!DOCTYPE HTML>
<html>
<head>
<meta property="mymeta" content="Lot of meta" />
<title>Some cool title</title>
...
</head>
<body>
<iframe src="content.html" width="500" height="200">
</body>
</html>

Problem with bigger than sign on my landing page

i try to wrap my page head in a header an while i use on my page appears a ">". I can overlapp it with a picture or something but why i appears anyway ?
<!DOCTYPE html>
<html lang="de">
<head>
<title>Wilkommen</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="main.css" />
</head>
<body>
<!--Kopfzeile mit Navigation-->>
<header id="header">
<img src="images/logo_placeholder.png" alt="logo" class="logo">
</header>
</body>
</html>

You have an extra > in your comment <!--Kopfzeile mit Navigation-->>

WKWebview sometimes display img just a half

this a normal
this img display just a half
the WKWebview into tableViewCell.when WKWebview didfinishload ,then update tableviewcell height.sometimes the img display a half,i'm sure the cell height is right.
<!DOCTYPE HTML>
<meta name='viewport' content='width=device-width, initial-scale=1' charset=''/>
<body>
<p>
<img src="http://resources.ovuwork.com/userfiles/static/upload/image/20160926/1474890263272044686.png"
title="1474890263272044686.png"
style="width:100%"
alt="space_index_img_space.png"/>
</p>
</body>
<!DOCTYPE HTML>
<meta name='viewport' content='width=device-width, initial-scale=1' charset=''/>
<body>
<p>
<img src="http://resources.ovuwork.com/userfiles/static/upload/image/20160926/1474890263272044686.png"
title="1474890263272044686.png"
style="width:100%"
alt="space_index_img_space.png"/>
</p>
</body>
HTML content:
<!DOCTYPE HTML>
<meta name='viewport' content='width=device-width, initial-scale=1' charset=''/>
<body>
<p>
<img src="http://resources.ovuwork.com/userfiles/static/upload/image/20160926/1474890263272044686.png"
title="1474890263272044686.png"
style="width:100%"
alt="space_index_img_space.png"/>
</p>
</body>