1 / 22

김순현 tnsgus239@gmail 군산대학교 통계컴퓨터과학과 정보과학기술 연구실 2013. 01. 07

H T M L. HTML 의 기초. 김순현 tnsgus239@gmail.com 군산대학교 통계컴퓨터과학과 정보과학기술 연구실 2013. 01. 07. 목차. HTML 이란 ? HTML 문서의 구조 HTML 의 태그 HTML 의 기본태그 글자 크기 관련 태그 글자 모양 관련 태그 글자 출력 형식 지정 태그 문단 또는 블록에 관한 태그 목록 관련 태그. HTML(1/2). HTML 문서로 서비스 제공. 자료요청. 정의 : H yper T ext M arkup L anguage

malaya
Download Presentation

김순현 tnsgus239@gmail 군산대학교 통계컴퓨터과학과 정보과학기술 연구실 2013. 01. 07

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. H T M L HTML의 기초 김순현 tnsgus239@gmail.com 군산대학교 통계컴퓨터과학과 정보과학기술 연구실 2013. 01. 07

  2. 목차 • HTML이란? • HTML문서의 구조 • HTML의 태그 • HTML의 기본태그 • 글자 크기 관련 태그 • 글자 모양 관련 태그 • 글자 출력 형식 지정 태그 • 문단 또는 블록에 관한 태그 • 목록 관련 태그 IST (Information Sciences & Technology) Laboratory

  3. HTML(1/2) HTML 문서로 서비스 제공 자료요청 • 정의:Hyper Text Markup Language • 인터넷 상에서 홈페이지를 제작하기 위한 언어 중 가장 근본이 되는 언어 IST (Information Sciences & Technology) Laboratory

  4. HTML(2/2) • HTML의 특징 • 태그: HTML문서의 기본요소로 문서의 구조와 형태를 표현하는 명령어 • 태그의 형태 <태그>~~</태그> <태그 속성=“값”>~~</태그> <태그> • 확장자“*.html”, “*.htm” • 태그는 대 소문자를 구별하지 않음 • HTML문서는 공백이 두 개 이상 존재 시, 하나로만 인식 • 문서상 줄을 넘겨도 이를 인식하지 못함 • 속성들의 순서는 없음 IST (Information Sciences & Technology) Laboratory

  5. HTML 문서의 구조(1/2) • <HTML> • 모든 HTML문서는 <HTML>태그로 시작하여 </HTML>태그로 끝남 • <HEAD> • 문서의 머리말에 해당하는 태그 • <TITLE> : 문서의 제목을 설정하기 위한 태그 • <BODY> • 문서의 본문에 해당하는 정보를 표시하기 위한 태그 • 속성: BACKGROUND, BGCOLOR, TEXT, LINK, ALINK, VLINK IST (Information Sciences & Technology) Laboratory

  6. HTML 문서의 구조(2/2) IST (Information Sciences & Technology) Laboratory

  7. HTML의 기본태그(1/2) • 특수문자 • 특수문자를 표시하려면 “&”기호로 시작 • “&#”기호 다음에 ASCII 코드의 10진수 숫자를 표시 • “&” 기호 다음에 특수문자에 해당하는 영문 표기를 기술 • 주석문 • <!-- --> • <BR> • 줄 넘김, </BR>불 필요 • <HR> • 선 긋기 • 속성=SIZE, WIDTH, ALIGN, NOSHADE, COLOR IST (Information Sciences & Technology) Laboratory

  8. HTML의 기본태그(2/2) IST (Information Sciences & Technology) Laboratory

  9. 글자 크기 관련 태그(1/2) • <Hn> • 제목에 해당되는 글자를 나타냄 n=1~6, 반비례, 자동으로 줄을 넘긴다. • <FONT> • 사용자 임의로 글자크기 조절가능,SIZE= “1~7”, 비례, 기본글자크기3에서 +숫자,-숫자 • <BIG>/<SMALL> • 앞의 글자 크기보다 하나 크거나 작게 표시. IST (Information Sciences & Technology) Laboratory

  10. 글자 크기 관련 태그(2/2) IST (Information Sciences & Technology) Laboratory

  11. 글자 모양 관련 태그(1/4) • <ACRONYM> :약자를 정의하기 위한 태그 • <ACRONYM TITLE =“마우스를 가져갔을 때 표시할 원문”>웹브라우저에 표시할 약자 </ACRONYM> • <ADDRESS>:주소 글자 모양으로 표시 • <B>:강조된 글자모양 표시 • <CITE>:인용문 글자 모양 표시 • <CODE>:프로그램 코드 모양 표시 • <DEL>:삭제된 글자 모양 표시 • <EM>:강조된 글자 모양 표시 • <DFN>:정의된 글자 모양 표시 • <I>:이탤릭 글자 모양 표시 • <INS>:추가된 글자 모양 표시 • <KBD>:키보드 글자 모양 표시 IST (Information Sciences & Technology) Laboratory

  12. 글자 모양 관련 태그(2/4) <SAMP>:예제 글자 모양 표시 <STRIKE>, <S>: 취소 또는 삭제된 글자 모양 표시 <STRONG>: 강조된 글자 모양 표시 <SUB>: 아래 첨자 모양의 글자로 표시 <SUP>:위 첨자 모양의 글자로 표시 <TT>:타자 글자 모양 표시 <U>: 밑줄 문자 모양 표시 <VAR>: 변수 이름을 정의하기 위한 모양 표시 <FONT>태그의 기타속성1. FACE : <FONT FACE = “글꼴 이름”>…<FONT>운영체제에 설치된 “Windows”>”FONTS”에 있는 글꼴의 파일 이름을 값으로 설정2. COLOR : <FONT COLOR=“#RGB또는 색상의 영문 표기”>…</FONT> ,<BODY>태그의 BGCOLOR 속성과 같다. IST (Information Sciences & Technology) Laboratory

  13. 글자 모양 관련 태그(3/4) IST (Information Sciences & Technology) Laboratory

  14. 글자 모양 관련 태그(4/4) IST (Information Sciences & Technology) Laboratory

  15. 글자 출력 형식 지정 태그(1/2) • <BLOCKQUOTE> • 문서 내에서 인용구를 표시할 때 사용하는 태그 • <PRE> • <PRE>…</PRE>사이에 기술된 내용을 그 형태 그대로 표시함 • 태그들은 자신의 기능을 수행 • <XMP> • <PRE>와 같은 기능이지만 추가적으로 태그들도 글자로 처리됨 IST (Information Sciences & Technology) Laboratory

  16. 글자 출력 형식 지정 태그(2/2) IST (Information Sciences & Technology) Laboratory

  17. 문단 또는 블록에 관한 태그(1/2) • <P> • 한 문단을 나타내는 태그 • <P ALIGN=“CENTER, LEFT, RIGHT”>…<P> • 닫는 태그 없이 HTML 문서의 문단 끝에 기술 가능 • 중복 불가 • 자동 줄 바꿈 후 한 줄의 공백을 더 만듬 • <DIV> • 문서 내에서 영역을 설정하여 그 영역이 표시될 위치 즉, 정렬을 설정할 때 사용 • <DIV ALIGN=“LEFT, CENTER, RIGHT:>…<DIV> • <CENTER> • 문장을 가운데 정렬하기 위한 태그 IST (Information Sciences & Technology) Laboratory

  18. 문단 또는 블록에 관한 태그(2/2) IST (Information Sciences & Technology) Laboratory

  19. 목록 관련 태그(1/3) • <UL(Unordered List)> • 목록을 표시할 때“순서”라는 개념이 없는 표시, 단지 “●”으로 구분됨 • <OL(Ordered List)> • 번호가 있는 목록 • ”1”부터 시작하여 1씩 증가함 • 속성 <OL START = “시작 번호”>:첫 번째 항목의 번호를 지정, 기본 값은 “1” • <LI(Lists)> • 각각의 항목을 구분할 때 표시 • 닫는 태그가 없음 • 속성 <LI TYPE=“ disc, circle, square”> • “disc”→ “●”, ”circle” →“○”, ”square” →”■” • 속성 <LI TYPE=“A”, ”a”, “I”, “i“, “1”> • 속성 <LI VALUE=“새로운 번호(숫자)”> : 해당 항목에서 새로운 번호로 시작 IST (Information Sciences & Technology) Laboratory

  20. 목록 관련 태그(2/3) • <DL(Definition List)> • 단어의 정의를 나타내는 목록을 표시 • <DT>정의할 단어 • <DD>정의내용 • <DT>,<DD>는 닫는 태그 없음 IST (Information Sciences & Technology) Laboratory

  21. 목록 관련 태그(3/3) IST (Information Sciences & Technology) Laboratory

  22. 감사합니다 Yang_ka@kunsan.ac.kr 군산대학교 정보통계학과 정보과학기술 연구실 2012.01.03 김순현 tnsgus239@gmail.com 군산대학교 통계컴퓨터과학과 정보과학기술 연구실 2013.01. 07

More Related