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>
Related
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
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>
I have the following HTML files
INDEX.HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>This is a frameset with OBJECT in the HEAD</title>
</head>
<frameset cols="50%,50%">
<frame src="bianca.html" name="bianca"></frame>
<frame src="second.html" name="second"></frame>
</frameset>
</html>
BIANCA.HTML
<!-- In bianca.html -->
<html>
<head>
<title>Bianca's page</title>
</head>
<body>
...the beginning of the document...
<p id="test">
<script type="text/javascript">
console.log(window.parent.bianca.document.getElementById("test"));
console.log(window.parent.second.document.getElementById("test1"));
</script>
...the rest of the document...
</p>
</body>
</html>
SECOND.HTML
<!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>
<h1 id="test1">From second frame</h1>
</body>
</html>
The output(as logged in the console)is :
<p id="test">...</p>
undefined
Why is the second line undefined, however if i change the order of the frames in index.html as:
<FRAME src="second.html" id="second" name="second"></FRAME>
<FRAME src="bianca.html" id="bianca" name="bianca">
then correct output(as expected) is logged. Why is it not working in the first case?
I want to use a grails layout to define a common layout for all pages in the application. Currently it looks something like this:
<!DOCTYPE html>
<html lang="dk">
<head>
<meta charset="UTF-8">
<title><g:layoutTitle default="Title"/></title>
<asset:stylesheet src="css/default.css"/>
</head>
<body>
<header><h1><g:layoutTitle default="Title"/></h1></header>
<main></main>
<footer></footer>
</body>
<asset:javascript src="jquery-3.4.1.min.js"/>
</html>
Some views may require additional stylesheets or scripts over the defaults provided in the layout, but if I simply add these to the view, they do not appear:
<%# page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html lang=\"dk\">
<head>
<meta name="layout" content="index" />
<asset:stylesheet src="css/additional.css"/>
</head>
<body>
<main>${content}</main>
</body>
<asset:javascript src="js/extra.js"/>
</html>
Is there no simple clean way to do this?
Check out: http://docs.grails.org/3.1.1/ref/Tags/layoutBody.html
Example decorated page:
<html>
<head>
<meta name="layout" content="myLayout" />
<script src="myscript.js" />
</head>
<body>Page to be decorated</body>
</html>
Example decorator layout:
<html>
<head>
<script src="global.js" />
<g:layoutHead />
</head>
<body><g:layoutBody /></body>
</html>
Results in:
<html>
<head>
<script src="global.js" />
<script src="myscript.js" />
</head>
<body>Page to be decorated</body>
</html>
I am playing vide in ipad it is working fine but i want that when user enter done button player should close any idea how to do this. i am using following code.
<!DOCTYPE html>
<head>
<meta charset=”utf-8″>
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<title>My Video</title>
<link rel=”apple-touch-icon” href=”icon.png” />
<style>
body {margin:0;}
</style>
</head>
<body>
<video width=”1024″ height=”750″ controls=”true”>
<source src=”videos/test.m4v” />
</video>
</body>
</html>
You can find FULL CODE here
<!DOCTYPE html>
<head>
<meta charset=”utf-8″>
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<title>My Video</title>
<link rel=”apple-touch-icon” href=”icon.png” />
<script>
function onClickDone(){
document.getElementById('myvideotag').pause();
document.getElementById('myvideotag').style.display = "none";
}
</script>
<style>
body {margin:0;}
</style>
</head>
<body>
<button onclick="onClickDone()">Done</button>
<video id="myvideotag" width=”1024″ height=”750″ controls=”true”>
<source src=”videos/test.m4v” />
</video>
</body>
</html>