학교수업/웹프로그래밍

[웹프] 0314

Ynghan 2023. 3. 14. 16:45

iframes

Target for a Link

<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example">
</iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

 

IFrame src Property

<!DOCTYPE html>
<html>
<body>

<iframe id="myFrame" src="/default.asp"></iframe>

<p>Click the button to change the value of the src attribute in the iframe.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("myFrame").src = "https://wwf.org";
}
</script>

</body>
</html>

 

iframe의 한계
:

<!DOCTYPE html>
<html>
<body>

<h2>HTML Iframes</h2>
<p>You can also use the CSS height and width properties to specify the size of the iframe:</p>

<iframe width="560" height="315" src="https://www.youtube.com/embed/DRcVKXctvXo" 
title="YouTube video player" frameborder="0" 
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
allowfullscreen></iframe>

</body>
</html>

유튜브는 신뢰할 수 있지만 이상한 사이트를 iframe에 넣으면 해킹 당할 가능성이 있다.

Links, Colors and Bookmarks

HTML은 하이퍼텍스트를 지원한다.

target 속성은 연결된 문서를 열 위치를 지정합니다.

  • _self : 내 위치
  • _blank : 새로운 탭
<!DOCTYPE html>
<html>
<body>

<h2>The target Attribute</h2>

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a> 

<p>If target="_blank", the link will open in a new browser window or tab.</p>

</body>
</html>
  • _parent
  • _top

HTML Links - Use an Image as a Link

<!DOCTYPE html>
<html>
<body>

<h2>Image as a Link</h2>

<p>The image below is a link. Try to click on it.</p>

<a href="default.asp"><img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;"></a>

</body>
</html>

Links - Different Colors

<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>

hover : 맴돌다.

Link button

<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>

link : visited 안된것

Create a Bookmark in HTML

엄청 중요해짐!

<!DOCTYPE html>
<html>
<body>

<p><a href="#C4">Jump to Chapter 4</a></p>
<p><a href="#C10">Jump to Chapter 10</a></p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C10">Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 18</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 19</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 20</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 21</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 22</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 23</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>

<h2 id="C4">Chapter 4</h2> 

  • C4 : 북마크

 

Images, Image Maps

Image Maps

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

Shape

  • rect
  • circle
  • poly
  • default

On-line image map generator
: https://www.image-map.net/

 

Free Online Image Map Generator

Easy free online html image map generator. Select an image, click to create your areas and generate html your output!

www.image-map.net

 

 

 

저작자표시

'학교수업 > 웹프로그래밍' 카테고리의 다른 글

Bootstrap: CSS Framework  (0) 2023.06.16
Graphics  (0) 2023.06.16
[0323~0328] 웹프  (0) 2023.03.23
[웹프] 0316~0321  (0) 2023.03.16
[웹프] 0307  (0) 2023.03.07

'학교수업/웹프로그래밍'의 다른글

  • 현재글[웹프] 0314

관련글

티스토리툴바