Download presentation
Presentation is loading. Please wait.
1
게임웹사이트운영 [3] 블록과 목록
![게임웹사이트운영 [3] 블록과 목록](http://slidesplayer.org/slide/16380449/95/images/1/%EA%B2%8C%EC%9E%84%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8%EC%9A%B4%EC%98%81+%5B3%5D+%EB%B8%94%EB%A1%9D%EA%B3%BC+%EB%AA%A9%EB%A1%9D.jpg "게임웹사이트운영 [3] 블록과 목록")
2
블록 태그 폴더명:w2 폴더명:w2 파일명:ex7.html 파일명:ex6.html <html>
<head> <title>블록 태그</title> </head> <body> <h1>블록 태그 실습</h1> <p> 오늘 교수님이 이렇게 말씀하셨다. </p> <blockquote> 웹은 정말 짱 재밌지? </blockquote> 모두 열라 웃었다. </body> </html> <html> <head> <title>블록 태그</title> </head> <body> <h1>블록 태그 실습</h1> <p> 오늘 교수님이 이렇게 말씀하셨다. 웹은 정말 짱 재밌지? 모두 열라 웃었다. </p> </body> </html>
3
ex7.html 결과
4
목록 만들기 <li> </li> : 항목을 지정
<ul> </ul> : 항목에 기호 붙이기 <ol> </ol> : 항목에 번호 붙이기 <li>사과</li> <li>배</li> <li>귤</li> <ul> <li>사과</li> <li>배</li> <li>귤</li> </ul> <ol> <li>사과</li> <li>배</li> <li>귤</li> </ol>
5
목록 실습 폴더명:w2 파일명:ex8.html <ul> <li>사과</li>
</p> <p> <h2>ol 사용</h2> <ol> </ol> </body> </html> <html> <head> <title>목록 실습</title> </head> <body> <h1>목록 실습</h1> <p> <h2>그냥 li만 사용</h2> <li>사과</li> <li>배</li> <li>귤</li> </p> <h2>ul 사용</h2>
6
결과
7
실습 폴더명:w3 파일명:test1.html <img src=“…”> 블록태그 사용 <br>도 사용
8
폴더명:w3 파일명:ex1.html [실습5] [map1.html] [map2.html] [map3.html]
![폴더명:w3 파일명:ex1.html [실습5] [map1.html] [map2.html] [map3.html]](http://slidesplayer.org/slide/16380449/95/images/8/%ED%8F%B4%EB%8D%94%EB%AA%85%3Aw3+%ED%8C%8C%EC%9D%BC%EB%AA%85%3Aex1.html+%5B%EC%8B%A4%EC%8A%B55%5D+%5Bmap1.html%5D+%5Bmap2.html%5D+%5Bmap3.html%5D.jpg "폴더명:w3 파일명:ex1.html [실습5] [map1.html] [map2.html] [map3.html]")
9
다른 웹사이트 연결 URL http://www.naver.com/index.html
프로토콜 표시 웹 사이트 이름 루트폴더로부터의 절대경로
10
다른 웹 사이트 링크 <a href=“http://링크 주소”>링크명</a>
11
실습 – 링크 만들기 폴더명:w3 파일명:link.html <h1> 태그 <h3> 태그 목록만들기
기능 이용
12
페이지에서 링크 연결 같은 페이지 내에서 링크 연결 하기 <a id=“목적지이름”>내용</a> :
<a href=“파일명#목적지이름”>내용으로 가기</a> <a id=“chai”>중국차 2,000원</a> : <a href=“index.html#chai”>중국차 가격은</a>
13
[실습] link2.html(ex1.html을 복사하여 사용)
<a href=“link2.htm#map”>맵으로 이동</a> 복사하여 추가 link2.html <h2><a id="map">맵 소개</a></h2> 맵으로 이동 하면 화면 이동
![[실습] link2.html(ex1.html을 복사하여 사용)](http://slidesplayer.org/slide/16380449/95/images/13/%5B%EC%8B%A4%EC%8A%B5%5D+link2.html%28ex1.html%EC%9D%84+%EB%B3%B5%EC%82%AC%ED%95%98%EC%97%AC+%EC%82%AC%EC%9A%A9%29.jpg "<a href= link2.htm#map >맵으로 이동</a> 복사하여. 추가. link2.html. <h2><a id= map >맵 소개</a></h2> 맵으로 이동. 하면 화면 이동.")
14
<a href=“링크” target=“_blank”>링크이름</a>
새 윈도우로 링크 걸기 새 창으로 링크 화면 뜨도록 하려면 <a href=“링크” target=“_blank”>링크이름</a> <a href=“ target=“_blank” title=“네이버 사이트를 연결해줍니다”>링크명</a>
15
새 창으로 띄우기 link.html의 연결들을 새창으로 뜨도록 수정
16
index.html에 링크 옮기기
17
링크 연결 추가 실습을 index.html과 링크 연결 000 me image w3 w2 index.html me. html
w3.html me. html ex1.html map1. html map1.jpg test2html map2. html map2.jpg map3.jpg link.html map3. html link2.html
Similar presentations
![2004년 예비신자 오리엔테이션 2004년 3월 13일 (토) 오후 8시 천주교 수원교구 상촌성당 [티없이 깨끗하신 성모성심]](/87/14226490/big_thumb.jpg "2004년 예비신자 오리엔테이션 2004년 3월 13일 (토) 오후 8시 천주교 수원교구 상촌성당 [티없이 깨끗하신 성모성심]>")
