본문 바로가기
원.더.풀 프로젝트/HTML,CSS

원더풀 프로젝트_HTML 4

by _JMY_ 2020. 2. 24.

 

#표에 그림 삽입하기

 

ex)

<html>
 <head>
   <title>table에 그림삽입</title></head>
 <body>
  <h3>table에 그림 삽입하기</h3><hr>
  <table border="2" align="center">
     <caption><strong>과일의 3종류</strong></caption>
   <thead>
    <tr>
      <th>사과(apple)</th>
      <th>바나나(banana)</th>
      <th>망고(mango)</th>
      <th>딸기(strawberry))</th>
    </tr>
   </thead>
   <tbody align="center">
    <tr>
      <td><img src="image\apple.png" title="apple.png"></td>
      <td><img src="image\banana.png" title="banana.png"></td>
      <td><img src="image\mango.png" title="mango.png"></td>
      <td><img src="image\strawberry.png" title="strawberry.png"></td>
    </tr>
    <tr>
      <td><img src="image\strawberry.png" title="strawberry.png">
      <td><img src="image\apple.png" title="apple.png"></td>
      <td><img src="image\mango.png" title="mango.png"></td>
      <td><img src="image\banana.png" title="banana.png"></td></td>
    </tr>
  </table>
 </body>
</html>

 

*결과

 

 

#하이퍼 링크 만들기

 

  • <a> 태그의 href 속성에 하이퍼링크 작성

 

  • 같은 웹 사이트에 있는 웹페이지 연결
<a href="picturepage.html"> 클린하면 사진 페이지로 이동합니다.</a>
  • 다른 웹 사이트의웹 페이지 연결
<a href="http:www.naver.com">naver</a>
<a href="http:www.daum.net">daum</a>
  • 이미지 하이퍼링크 만들기
<a href="http://www.naver.com">
	<img src="naver.png" alt="네이버사이트">
</a>

 

ex)

<html>
 <head>
   <title>a-tag</title></head>
 <body>
     <h3>a-Tag</h3><hr>
<a href="http:www.naver.com">naver</a><br>
<a href="http:www.daum.net">daum</a><br>
<a href="http:www.google.com">google</a><br>
 </body>
</html>

 

ex)

<html>
    <head>
      <title>a-tag</title></head>
    <body>
   <ol type="1">     <h3>a-Tag</h3><hr>
   <li><a href="http://www.naver.com">naver</a><br>
   <li><a href="http://www.daum.net">daum</a><br>
   <li><a href="http://www.google.com">google</a><br>
   </ol> 
   <h3>신문사이트</h3>
   <ul>
     <li><a href="http://www.etnews.com"><img src="image\iconetnews.png" alt=""></a></li>
     <li><a href="http://www.chosun.com"><img src="image\iconchosun.png" alt=""></a></li>
     <li><a href="http://www.dongailbo.com"><img src="image\dongailbo.gif" alt=""></a></li>
   </ul>
   <h3>여러 사이트</h3>
   <ol type="i">
       <li><a href="http://www.twitter.com">트위터</a></li>
       <li><a href="https://www.instagram.com">PC용 인스타그램</a>"</li>
       <li><a href="https://www.imdb.com">영화 아카이브 사이트</a></li>
   </ol>
   </body>
   </html>

 

*결과

 

# id 속성으로 앵커만들기

 

  • 긴 내용의 웹 페이지를 읽을 때, 사용자는 스크롤을 오르락 내리락 해야한다. 이런 어려움을 해결하기 위해 만든 '문서 내 특정 위치로 이동하는 링크'를 앵(anchor)라고 부른다. 
<a href="#앵커이름">

ex)

<!doctype html>
<html>
    <head>
        <title>id 속성으로 앵커만들기</title>
    </head>
    <body>
        <h3>겨울왕국 OST</h3>
        <hr />
        <ul>
            <li><a href="#let">Let it go</a></li>
            <li><a href="#show">Show yourself</a></li>
            <li><a href="#into">Into the unknown</a></li>

        </ul>
       <br><br><br><br><br><br><br><br><br><br><br>
        <h3 id="let">Let it go</h3>
        Let it go. Let it go.<br/>
        <h3 id="show">Show yourself</h3>    
        Show yourself. here I come.<br />
        <h3 id="into">Into the unknown</h3>
        Into the unknown.are you out there? do you see me? can you show me?<br />
    </body>
</html>

 

#iframe을 가지는 웹페이지

 

  • 별도의 웹 페이지 문서를 테이블, 이미지와 같은 객체처를 특정 위치에 삽입하는 기능.
  • iframe 중 링크를 프레임과 연결시켜서 프레임의 src 값을 바꾸는 역할도 할 수 있음.

 

ex)

<html>
 <head>
   <title>iframe을 가지는 웹페이지</title></head>
 <body>
     <h3>2개의 &it;iframe&gt;을 가집니다.</h3><hr>
     <iframe src="text10x_1025.html" width="300" height="200"></iframe>
     <iframe src="text11x_1025.html" width="300" height="200"></iframe><br>
     <iframe src="text9x_1025.html" width="300" height="200"></iframe>
</body>
<html>

 

 

 

 

'원.더.풀 프로젝트 > HTML,CSS' 카테고리의 다른 글

원더풀 프로젝트_CSS1  (0) 2020.03.21
원더풀 프로젝트_HTML 5  (0) 2020.03.14
원더풀 프로젝트_HTML 3(테이블 만들기/테이블 변형)  (0) 2020.02.17
원더풀 프로젝트_HTML 2  (0) 2020.02.12
원더풀 프로젝트_HTML 1  (0) 2020.02.03

관련글

댓글

티스토리툴바