@홈페이지를 만들자!! 꼬꼬들의 html!-(4)링크/기타

[꼬꼬]

오늘은 링크/메일/문자 특수효과 등을 배우겠습니다.

















*링크시키는 방법



링크시킨다는 건 클릭하면 다른 사이트로 이동하게 만들어 주는 것을 말합니다.




<a href="링크될주소">쓸내용</a>




라는 형식으로 써주면 됩니다.(a와 href사이를 한칸 띄어씀.)




<예>




입력: <a href="http://www.snu.ac.kr">서울대 홈페이지로!</a>





출력: 서울대 홈페이지로!(<=클릭해보세요...)















*새로운 창이 뜨면서 링크시키기




<a href="링크될주소" target=_blank>쓸내용</a>





<예>




<a href="http://www.yahoo.com" target=_blank>야후사이트로 이동!</a>



야후사이트로 이동!(<=클릭해보세요...)





<a href="http://cafe3.daum.net/Cafe-bin/Bbs.cgi/snudesignpds/lst" target=_blank>자료실로!</a>



자료실로!(<="디자인학부"카페 자료실로 갑니다.)
















*주소를 쉽게 옮겨 오려면...



예를 들어 "꼬꼬들의 html-(1)색상바꾸기"로 이동하려면.....



=>일단 "꼬꼬들의 html-(1)색상바꾸기"의 페이지를 열고 나서



그때 모니터 상단에 나오는 긴 주소(http://cafe2.daum.net/Ca

fe-bin/Bbs.cgi/.....)를 한번 클릭하면 자동으로 까맣게 선택됩니다.



오른쪽 마우스를 눌러 "복사"한 후 필요한 곳에 가서 "붙이기"를 하면

됩니다.



<예>




<font color=purple>지난회 보기</font>-----<a href="http://cafe3.daum.net/Cafe-bin/Bbs.cgi/snudesignbbs/qry/zka/B2-kCYVp/qqatt/^"><font color=fuchsia>(1)색상바꾸기</font></a>



지난회 보기-----(1)색상바꾸기















*같은 페이지 내에서 이동하기



"맨위로", "맨밑으로" 등의 이동을 말합니다.



<a name="자신이선택한낱말"></a>(두 꺾은 괄호사이엔 아무것도 안씀.)



이라는 내용을 어느 특정위치(도착점)에 써놓습니다.



"맨위로"라는 걸 만들려면 맨 꼭대기 쯤에 써놓으면 되겠죠.



그 다음엔 다른 곳(출발점)에다가



<a href="#자신이선택한낱말">쓸내용</a>



라고 써놓습니다.



이제 '쓸내용'을 클릭하면 도착지점으로 가버립니다.








쉽게 정리하자면,


도착점=>

<a name="아무런말"></a>



출발점=>

<a href="#아무런말">쓸내용</a>










<예>



<a name="꼬꼬야!"></a>



라는 것을 이 페이지 꼭대기에 써놓았습니다.

(물론 화면상에는 안 나타납니다.)




이제 여기에



<a href="#꼬꼬야!">맨위로 이동</a>



라고 써놓으면 다음과 같이 나타나죠.



맨위로 이동



클릭하면 맨위로 이동합니다.('꼬꼬야!'라는 글자를 찾아 이동하는

것이죠.... 클릭해서 이동한 후 모니터 상단의 주소부분을 살펴보세요.

끝부분이 ".../^#꼬꼬야!"로 되어 있을 겁니다.)



이제 이해가 되셨죠?



이와 같은 식으로 긴 페이지 내에서 맨위, 맨아래, 중간 목록으로 이동하게 만들 수 있습니다.





<예>



"*새로운 창이 뜨면서 링크시키기" 항으로 이동!




이미 <a name="꾸끼야!"></a>라는 내용을 해당부분에 몰래 적어놓았으니 이제 여기에




<a href="#꾸끼야!">'새로운 창이 뜨면서 링크시키기'항으로 갑세~!</a>


라고만 쓰면 밑엣것이 나오고 클릭하면 이동하겠죠...

(주소란 끝이 ".../^#꾸끼야!"로 되고요.)



'새로운 창이 뜨면서 링크시키기'항으로 갑세~!













*그림으로 링크시키기





<a href="링크될주소"><img src="그림주소"></a>



<예>

<a href="http://www.daum.net"><img src="http://cafe3.daum.net/Cafe-bin/Bbs.cgi/otokoonnacafepds/dwn/zka/B2-kBI-p/qqfdnum/7/qqfname/384.gif" alt="다음넷으로 가기!"></a>





(<=화살표를 갖다대면 글이 나타나고, 클릭하면 다음넷으로 이동합니다.)
















*marquee와 그림을 합칠 경우






<marquee behavior=alternate><img src="http://www.online.ee/~aaleo/anim/dogs/anipuppy.gif"></marquee>



















*이메일 보내기




<address><a href="mailto:이메일주소">쓸내용<a></address>




이 주소 입력 태그는 보통 이탤릭체로 표시되고


클릭하면 편지쓰기창이

뜹니다.




<예>




<ADDRESS><A HREF="mailto:totorone@hanmail.net">꼬꼬에게 이메일을!</A></ADDRESS>

꼬꼬에게 이메일을!

(<=저에게 이메일을 보내실 곳.)















*문자에 특수효과 주기



잘 보면서 연구해 보세요....







<예>


<div style="width:320; height:50; font-size:30pt; filter:glow(color=red, strength=8)">디자인학부!</div>

디자인학부!

<div style="width:320; height:50; font-size:30pt; filter:glow(color=red, strength=2)">디자인학부!</div>

디자인학부!

filter:glow는 배경색이 퍼지는 효과이고 strength는 그 퍼지는 정도입니다.



;(세미콜론)은 각 단위를 구분합니다.







<div style="width:320;height:50;font-size:30pt;filter:glow(color=#00ffff,strength=8)">여러분~</div>

여러분~

<div style="width:320;height:50;font-size:30pt;filter:glow(color=#00ffff,strength=3)">
여러분~</div>

여러분~

<SPAN style="COLOR:white;filter:shadow(color=red);height:10px"><FONT SIZE=+1>
컴퓨터는 돌아가요(5)~윈도우의 종말</span></FONT>



컴퓨터는 돌아가요(5)~윈도우의 종말



<SPAN style="COLOR:yellow;FILTER:shadow(color=violet);height:10px"><FONT SIZE=+1>
컴퓨터는 돌아가요(5)~윈도우의 종말</span></FONT>



컴퓨터는 돌아가요(5)~윈도우의 종말








여기서 filter:shadow는 그림자 효과겠죠...







<span style="color:pink;filter:shadow(color=black);height:8px"><font size=+2><marquee>전공선택 규정 또 바뀌었다!!!</span></marquee></font>



전공선택 규정 또 바뀌었다!!!




<span style="color:white;filter:shadow(color=blACK);height:7px"><font size=+1>그것도 발표 당일날 바뀌었다!</span></font>



그것도 발표 당일날 바뀌었다!



<span style="color:white;filter:shadow(color=blue);height:7px"><font size=+1>이번 신입생들은 어떤 친구들일까?</FONT></span>



이번 신입생들은 어떤 친구들일까?



<span style="color:yellow;filter:shadow(color=#22aaaa);height:8px"><font size=+2><marquee direction=right>우리 전공 갈리더라도 자주 모여서 놀자~!</FONT></marquee></span>



우리 전공 갈리더라도 자주 모여서 놀자~!









그럼 잘 연구해 보고 직접 활용해 보세요....




오늘은 이만...







제가 요즘 바쁜 일이 있는 관계로 앞으로 "꼬꼬들의 html"은 일주일에

한편 가량만 연재하겠습니다... 죄송...^_^;



지속적인 관심 부탁드립니다.












*지난회 보기------

(1)색상바꾸기

  (2)그림퍼오기

  (3)글자조정

  (4)링크/기타





맨위로 가기!

(밑의 "답장쓰기"를 클릭해보세요. 그러면 이 글의 html코드를

볼 수 있습니다.

맨위에 <a name="꼬꼬야!"></a>라고 써 있는게 보이죠?

바로 맨위로 이동할때 이것을 찾아 간 겁니다. 히히히...)