|
1.HTML 문법 구조 및 기본 태그 실습
텍스트 파일 편집기
*메모장 : 시작->프로그램->보조프로그램->메모장 (다른 편집기가 없는 경우 사용한다.)
*EditPlus2 : http://www.editplus.com/kr에서 다운로드 받아서 설치한다.
다중 문서 편집, 태그와 속성에 다른 색상을 사용 하므로 오류를 찾아내기 쉽다.
인터넷 문서 형식 HTML
인터넷의 표준 문서인 HTML은 확장자는 html 또는 htm인 Text파일이며, 일반적인 문장 외에 태그(Tag)라는 특별한 문자가 포함 되어 있다. 태그는 일종의 명령어로서 문장의 색상이나 크기를 바꾸기도 하며, 그림이나 음성, 동영상을 문서에 포함시키게도 한다.
태그는 <> 문자로 되어 있고, 대개는 행동을 시작하는 태그와 행동을 종료하는 태그 쌍으로 되어 있다. 또한 태그 내부에는 구체적인 행동을 지시 하는 속성이라는 것이 있다.
HTML문서의 일반적인 형식
<HTML>
<HEAD><TITLE>문서제목</TITLE></HEAD>
<BODY>
문서의 내용
</BODY>
</HTML> |
|
<HTML> ... </HTML> : 이문서가 HTML문서임을 나타냄
<HEAD> ... </HEAD> : 문서의 정보를 표현한다.
<BODY> ... </BODY> : 실제 문서의 내용이다.
※ 참고:HTML에서 여러자의 공백과 Enter는 모두 공백 1자로 처리 되므로 공백은 로 Enter는 <BR>태그를 이용 하여야 한다.
|
기본 태그
|
구분 |
태그 |
기능 |
|
문장의 표현 |
<B>...</B>
<I>...</I>
<U>...</U>
<S>...</S>
<FONT>...</FONT> |
진하게
기울림
밑줄
취소선(가운데선)
글자의 크기나 색상, 글꼴을 바꿀때 사용한다. |
|
단락 및 줄바꿈 |
<BR>
<P>...</P>
<DIV>...</DIV>
<H1>...</H1>
: :
<H6>...</H6> |
줄바꿈 - 종료 태그는 없다.
문단의 시작과 끝 - 종료 태그는 생략 될 때도 있다.
문단의 영역을 지정
문서의 제목을 표현하도록 고안된 태그
<H1>이 가장 크고 <H6>이 가장 작은 크기이다.
|
|
그림 및 소리 |
<IMG>
<[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-BGSOUND>
<EMBED></EMBED>
<HR> |
문장중에 그림 삽입 - 별도의 그림 파일을 문서에 포함시킨다.
소리나 음악을 삽입 동영상이나 소리, 음악등을 문서에 포함 시킨다.
수평선 |
|
목록 |
<OL><LI>...</OL>
<UL><LI>...</UL> |
번호가 있는 목록
번호가 없는 목록 |
|
하이퍼링크 |
<A>앵커문자</A> |
다른문서로 연결시키는 하이퍼 링크 |
|
속성 설명 |
|
문단 정렬 속성
<P><H#><DIV> |
align=center
align=left
align=right
align=justify |
외부 파일 참조 및 포함
<A><IMG> |
src="포함시킬 파일명(url)"
href="참조할 파일명(url)" |
|
글자꾸미기
<FONT><BODY> |
color=색상명,
bgcolor=배경색
size=크기,
text=기본글자색
face=글꼴 |
가로폭 테두리
<IMG><HR> |
width=가로폭,
height=서로높이
border=테두리두께 | |