Presentation is loading. Please wait.

Presentation is loading. Please wait.

게임웹사이트운영 [3] 블록과 목록.

Similar presentations


Presentation on theme: "게임웹사이트운영 [3] 블록과 목록."— Presentation transcript:

1 게임웹사이트운영 [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]

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> 맵으로 이동 하면 화면 이동

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


Download ppt "게임웹사이트운영 [3] 블록과 목록."

Similar presentations


Ads by Google