HTML 의이해 - 개요및텍스트태그 최현종 ( 서원대학교 )
HTML 의개요 웹문서란무엇인가? 인터넷에올려진문서 HTML : 다양한멀티미디어요소까지다룰수있는인터넷표준웹문서 웹브라우저란무엇인가? 웹문서를보기위한프로그램 대표적인웹브라우저 - 인터넷익스플로러 - 넷스케이프내비게이터 - 오페라 그림 1. 인터넷익스플로러
HTML 의정의 - Hyper Text Markup Language 의약자 - 하이퍼기능이있는마크업언어 (Markup Language) - 태그 (Tag) HTML 문서의기본구조 - 쓰임새에따라태그이름존재 - 태그마다속성 (properties) 존재 해당요소를좀더자세히설정가능 ( 형식 ) < 태그속성 1= 속성값 속성 2= 속성값 속성 n= 속성값 > <BODY BGCOLOR= yellow TEXT= blue >
4 1 2 3 1 <HTML> 태그와 </HTML> 태그현재작성하는문서가 HMTL 문서임을알려주기위한태그 HTML 의시작과끝에표시 2 <HEAD> 태그와 </HTML> 태그문서제작자나사용된언어, 문서에대한제목과관련된정보입력 3 <TITLE> 태그와 </TITLE> 태그문서의제목을지정하는태그브라우저맨윗부분의제목표시줄에표시 4 <BODY> 태그와 </BODY> 태그실제웹브라우저창에나타나는여러가지내용들을입력 그림 2. 예제
HTML 의기본태그익히기 문서배경과여백조절태그 ( 형식 ) <BODY 속성 = 속성값 > <BODY> 태그의속성 속성설명속성값 BACKGROUND 배경이미지. 작은이미지하나를지정하더라도브라우저화면에꽉차게채워짐 파일이름이나 URL BGCOLOR 배경색. 기본값은흰색 색상이름이나색상코드 TEXT 글자색. 기본값은검은색 색상이름이나색상코드 LEFTMARGIN 왼쪽여백 (IE와 NS 6.0 이상 ) 숫자 ( 픽셀단위 ) TOPMARGIN 상단여백 (IE와 NS 6.0 이상 ) 숫자 ( 픽셀단위 ) MARGINWIDTH 왼쪽여백 (NS 4.x) 숫자 ( 픽셀단위 ) MARGINHEIGHT 상단여백 (NS 4.x) 숫자 ( 픽셀단위 ) 예 ) <BODY BACKGROUND= bg2.gif TEXT= #0000FF>
줄을바꾸는 <BR> 태그 ( 형식 ) <BR> 문단을나누는 <P> 태그 ( 형식 ) <P> <P> 태그의속성 속성설명속성값 ALIGN 단락의정렬방법을조절. 속성지정을따로하지않을때의기본값은 left. 즉, ALIGN 속성을지정하지않으면텍스트들이왼쪽정렬됨 left, right, center 중선택 수평선을삽입하는 <HR> 태그 ( 형식 ) <HR ALIGN= center WIDTH= 500 > <HR> 태그의속성 속성설명속성값 ALIGN 수평선의정렬방법 left, right, center 중선택 COLOR 수평선의색상색상이름이나색상코드 SIZE 수평선의굵기숫자 ( 픽셀단위 ) WIDTH 수평선의가로길이 ( 너비 ) 픽셀값, % 값 NOSHADE 그림자없는평면느낌의수평선을만듦 ( 없음 )
주석 - 웹브라우저화면에는표시되지않는요소 - 나중에자신이작성한 HTML 소스를열어보았을때, 페이지내용을쉽게알아볼수있도록하는일종의설명글 ( 형식 ) <! 주석내용 --> 제목을나타내는 <Hn> 태그 ( 형식 ) <Hn> 제목 </Hn> / n= 속성값 ( 숫자 ) 기본태그로만든웹문서 그림 3. 예제
HTML 상식 여는태그와닫는태그로구성예 ) <P> HTML 은어렵지않아요 ~ </P> 대. 소문자의구별 X 문서의구조를쉽게이해하기위한들여쓰기사용예 ) 한칸이상의띄어쓰기는무시 여는태그와닫는태그의순서를지킴예 ) <B><FONT> 안녕하세요?</FONT></B> 그림 4. 예제
HTML을 작성하는 프로그램 텍스트 편집기 HTML 편집기 위지윅 편집기
HTML 의기초 1 텍스트태그 텍스트속성바꾸기 ( 형식 ) <FONT 속성 = 속성값 > 텍스트 </FONT> <FONT> 태그의속성 속성설명속성값 FACE 텍스트의글꼴선택글꼴종류중선택 COLOR 텍스트의색상지정색상이름이나색상코드 SIZE 텍스트의크기지정 1~7 까지의숫자 - FACE 속성예 ) <FONT FACE= 궁서체 > 빈집 </FONT> - COLOR 속성예 ) <FONT COLOR= red > 빈집 </FONT> - SIZE 속성예 ) <FONT SIZE= 2 > 빈집 </FONT> 여러개의 <FONT> 태그속성사용예 ) <FONT FACE= 궁서체 COLOR= red SIZE= 2 > 빈집 </FONT>
흘러가는텍스트태그 <MARQUEE> 태그 - 지시한방향으로글자나이미지가움직이도록하는태그 - ( 단, 익스플로러에서만지원 ) - ( 형식 ) <MARQUEE 속성 = 속성값 > 텍스트 </MARQUEE> <MARQUEE> 태그의속성 속성설명속성값 DEHAVIOR 스크롤형태 Scroll, slide, alternate DIRECTION 스크롤방향 Left, right, up, down ( 기본값은 left) SCROLLDELAY SCROLLAMOUNT 스크롤지연속도 ( 숫자가클수록속도가느려짐 ) 한번에스크롤되는픽셀수 ( 숫자가클수록속도가빨라짐 ) 숫자 (1/1000 초단위 ) 숫자 ( 픽셀값 ) BGCOLOR 스크롤영역의배경색색상이름이나색상코드 HEIGHT 스크롤영역의높이숫자 ( 픽셀값 ) WIDTH 스크롤영역의너비숫자 ( 픽셀값 ) LOOP 스크롤반복횟수 숫자, 또는 infinite( 무한반복 ) 기본값은 infinite
텍스트관련기타태그 글자모양을수정하는태그들 <B> 또는 <STRONG> : 텍스트를진하게표시 <I> 또는 <EM> : 텍스트를이탤릭체로표시 <U> : 텍스트에밑줄을표시 <SUP> : 위첨자표시 <SUB> : 아래첨자표시 <S> : 텍스트한가운데를지나가는가로선을표시 그림 5. 예제
기타태그 <ADDRESS> 홈페이지제작자정보중연락처나주소등을표시할때사용 <PRE> HTML 에서는빈칸을아무리많이입력해도한칸밖에인식을못하는데, <PRE> 태그를사용하면사용자가입력한만큼의여백이나줄바꿈을그대로인식하여브라우저에보여줌 ( 단, <PRE> 태그를사용하면텍스트의크기가약간작게나타남 ) 그림 6. 예제
목록으로텍스트정리 순서있는목록 : <OL> / <LI> 태그 각항목을순서대로나열 <OL> : 목록으로표시할내용의앞뒤에표시 <LI> : 각항목앞에표시 ( 형식 ) <OL> <LI> 항목 1 </LI> <LI> 항목 2 </LI> </OL> <OL> 태그의속성 그림 7. <OL> 태그 속성설명속성값 TYPE 각항목앞에붙이는숫자를영문자나로마자, 또는아라비아숫자로표시 ( 기본값은숫자 ) A, a, I, ⅰ START 각항목앞에붙는숫자의시작번호지정숫자
순서없는목록 : <UL> / <LI> 태그 각항목앞에불릿 (bullet) 을표시하여나열 순서가중요하지않을때사용 <UL> : 목록으로표시할내용의앞뒤에표시 <LI> : 각항목앞에표시 ( 형식 ) <UL> <LI> 항목 1 </LI> <LI> 항목 2 </LI> </UL> <UL> 태그의속성 그림 8. <UL> 태그 속성설명속성값 TYPE 각항목앞에붙는불릿의모양설정 ( 기본값은 disc) disc, circle, square
사전식목록 : <DL> / <DT> / <DD> 태그 전체적으론순서없는목록형태 목록항목이 제목 과 설명 부분으로구성 사전처럼제목과설명으로구성된목록을만들기위한태그 <DL> : 목록으로표시할내용의앞뒤에표시 <DT> : 항목의제목표시 / <DD> : 항목의설명표시 ( 형식 ) <DL> <DT> 제목 </DT> <DD> 설명 </DD> </DL> 그림 9. <DL> 태그