|
|
|
|
| |
 4.HTML
문자표현 |
| HTML의 문자 표현방법은 물리적인 스타일과 논리적인 스타일이 있다. |
1)물리적 스타일
글자체에 대해 절대적인 문자를 지정하게 된다.
|
태그
|
설명
|
|
<B>
|
형식
|
<B> 글자 </B>
|
|
기능
|
문자를 굵은 글씨체로 표현
|
|
<I>
|
형식
|
<I> 글자 </I>
|
|
기능
|
문자를 이탤릭체로 표현
|
|
<TT>
|
형식
|
<TT>글자 </TT>
|
|
기능
|
문자를 타자를 친 것처럼 표현
|
|
<U>
|
형식
|
<U>글자</U>
|
|
기능
|
문자를 밑줄 문자로 표현
|
|
<BIG>
|
형식
|
<BIG>글자</BIG>
|
|
기능
|
문자를 주변 문자보다 크게 표현
|
|
<SMALL>
|
형식
|
<SMALL>글자</SMALL>
|
|
기능
|
문자를 주변 문자보다 작게 표현
|
|
<SUB>
|
형식
|
<SUB>글자</SUB>
|
|
기능
|
문자를 아래 첨자 문자로 표현
|
|
<SUP>
|
형식
|
<SUP>글자</SUP>
|
|
기능
|
문자를 윗첨자 문자로 표현
|
예제
|
<html>
<head>
<title>example4</title>
</head>
<body>
<b>internet</b>
<i>internet</i>
<tt>internet</tt>
<u>internet</u>
<big>internet</big>
<small>internet</small>
<sub>internet</sub>
<sup>internet</sup>
</body>
</html>
|
|
|
| |
2)논리적 스타일
지정한 스타일을 브라우저에 맞게 출력해 준다.
|
태그
|
설명
|
|
<EM>
|
형식
|
<EM>글자</EM>
|
|
기능
|
문자를 이탤릭체로 표현
|
|
<STRONG>
|
형식
|
<STRONG>글자</STRONG>
|
|
기능
|
문자를 굵은 글자로 표현
|
|
<CITE>
|
형식
|
<CITE>글자</CITE>
|
|
기능
|
문자를 인용구처럼 표현
|
|
<CODE>
|
형식
|
<CODE>글자</CODE>
|
|
기능
|
문자를 영어 타자체로 표현
|
|
<SAMP>
|
형식
|
<SAMP>글자</SAMP>
|
|
기능
|
문자를 CODE 태그와 비슷하게 표현
|
|
<KBD>
|
형식
|
<KBD>글자</KBD>
|
|
기능
|
문자를 키보드로 입력받은 것처럼 표현
|
|
<VAR>
|
형식
|
<VAR>글자</VAR>
|
|
기능
|
문자를 변수의 이름이나 특정한 위치에서 치환이 필요할 경우에 사용, 주로 이태릭체나 밑줄로
표현
|
|
<DFN>
|
형식
|
<DFN>글자</DFN>
|
|
기능
|
문자로 어떤 것을 정의할 경우에 사용하는데 주로 이태긱체로 표현
|
|
<AU>
|
형식
|
<AU>글자</AU>
|
|
기능
|
저자의 이름을 표현할 때 사용
|
|
<BLINK>
|
형식
|
<BLINK>글자</BLINK>
|
|
기능
|
문자가 깜박거림
|
예제
|
<html>
<head>
<title>example5</title>
</head>
<body>
<em>internet</em><p>
<strong>internet</strong><p>
<cite>internet</cite><p>
<code>internet</code><p>
<samp>internet</samp><p>
<kbd>internet</kbd><p>
<var>internet</var><p>
<dfn>internet</dfn><p>
<au>internet</au><p>
<blink>internet</blink>
</body>
</html>
|
|
|
3)글자 크기 지정
<basefont size=n color="#rrggbb" face="글자체 지정"> 문서 전체에
영향
<font size=n color="#rrggbb" face="글자체 지정"> 상대적인크기
지정 |
|
 |
| 5.HTML의
하이퍼링크지정 |
HTML이 갖고 있는 장점은 문서 내부의 다른 부분이나 혹은 다른 문서와 텍스트나 이미지들 간에 링크를
만들 수 있다는 점이다.
브라우저에서는 이러한 텍스트나 이미지 부분을 색채나 밑줄등을 이용하여 표현하고 그 곳을 하이퍼텍스트링크라 한다.
HTML에 있어서 하이퍼텍스트와 관련한 유일한 태그는 앵커을 의미하는 <A>태그이다.
<a href="http://www.naver.com>네이버</a>
<a href="mailto:ruru@hanmil.net>e-mail</a>
url 사용법
|
프로토콜
|
URL
|
|
HTTP
|
http://www.hitel.net
|
|
FTP
|
ftp://ftp.sun.ac.kr
|
|
Gopher
|
gopher://gopher.dacom.co.kr
|
|
Usenet
|
news:comp.lang.c
|
|
전자우편
|
mailto:sdw@kyungho.or.kr
|
|
본인 컴퓨터
|
file:///c:html/index.html
|
|
|
|
| 6.HTML의
이미지/사운드 지정 |
|
1)이미지
대부분의 웹 브라우저는 문서 내부에 텍스트와 함께 이미지를 출력할 수 있다. 출력이 가능한 그래픽 파일의
확장자는
XBM,GIF,JPEG등이 있다.
다른 확장자의 그래픽 파일을 보려면 외부 프로그램이 설치되어 있어야 한다.
|
<img src="이미지 파일명" align="top/bottom/middle"
width=픽셀수/백분율
height=픽셀수/백분율
border=픽셀수 이미지 테두리 지정
vspace=픽셀수 이미지 위,아래 간견
hspace=픽셀수 이미지 좌,우 간견
alt=대체문자> 텍스트만
출력되는 브라우저일 경우 나타날 문자
|
2)오디오 비디오 파일
-링크를 이용한 방법
비디오 파일은 AVI 확장자만 지원하므로 MOV,MPEG 파일을 수행하려면
외부 프로그램을 설치해야 한다.
예)<a href="사운드/비디오 파일">....</a>
-외부 프로그램을 이용한 처리
<embed src="오디오/비디오 파일명
autostart=false/true
width=가로폭
height=높이>
autostart=true자동으로 실행,false 아이콘 버튼 클릭시 수행 |
|
|
| 7.문서
연결하기 |
한 문서 안에서 경로 설정하기
<a href=#A>A로 가기</a>
href → 하이퍼텍스트 연결로 이동하고자 하는 곳의 위치를 지정하게 됩니다.
URL이 들어갈 수 있고, NAME 속성에 의해 지정된 곳의 이름이 들어 갈 수도 있습니다.
<a name="A>연결할 문서 이름</a>
name → 하이퍼텍스트로 연결할 HTML 문서의 특정 위치에 표식을 만들고
싶을 때
사용하게
됩니다. |
|
|
|
|
|
