1 / 100

이 름 : 정홍도 ( 과장 ) 팀 명 : 개발사업팀 일 자 : 2007.6.25

HTML 기초과정. 이 름 : 정홍도 ( 과장 ) 팀 명 : 개발사업팀 일 자 : 2007.6.25. 목 차. ◈ 1. 웹의 소개 ◈ 2. HTML 의 기초 문법 ◈ 3. HTML 의 기본 태그 ◈ 4. 테이블 태그의 사용 ◈ 5. 입력 양식. 1. 웹의 소개. 웹의 등장 간편하고도 통합적인 서비스 제공 다양한 멀티미디어 서비스 지원 오디오 , 이미지 , 동화상 , 텍스트 여러 분야에 적용 폭발적인 성장. 1. 웹의 소개. 인터넷 웹 서비스.

ion
Download Presentation

이 름 : 정홍도 ( 과장 ) 팀 명 : 개발사업팀 일 자 : 2007.6.25

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. HTML기초과정 이 름: 정홍도 (과장) 팀 명: 개발사업팀 일 자: 2007.6.25

  2. 목 차 • ◈ 1. 웹의 소개 • ◈ 2. HTML의 기초 문법 • ◈ 3. HTML의 기본 태그 • ◈ 4. 테이블 태그의 사용 • ◈ 5. 입력 양식

  3. 1. 웹의 소개 • 웹의 등장 • 간편하고도 통합적인 서비스 제공 • 다양한 멀티미디어 서비스 지원 • 오디오, 이미지, 동화상, 텍스트 • 여러 분야에 적용 • 폭발적인 성장

  4. 1. 웹의 소개 인터넷 웹 서비스

  5. 1. 웹의 소개 • 웹의 구조 • 클라이언트-서버(Client-Server) 구조 • 서버(Server) : 네트워크 상에서 상대편 컴퓨터가 정보를 요청할 때 정보를 제공하는 컴퓨터 • 클라이언트(Client) : 사용자 쪽에서 정보를 요청하는 컴퓨터

  6. 서버 서버 인터넷 클라이언트 클라이언트 클라이언트-서버 구조

  7. 웹 서비스의 구조

  8. 1. 웹의 소개 • 웹 브라우저 • 웹 상의 하이퍼텍스트 문서를 사용자에게 보여주기 위한 어플리케이션 • 하이퍼링크 및 멀티미디어 지원 • 다양한 인터넷 서비스의 제공 • 넷스케이프, 익스플로러, 오페라

  9. 마이크로소프트사의 로고 링크 모음 제목 표시줄 메뉴 표시줄 표준 단추 모음 주소 표시줄 문서 영역 상태 표시줄 인터넷 익스플로러의 화면 구성

  10. 2. HTML 문서의 구조 • 2.1 HTML 문서의 기본 구조 • 2.2 간단한 HTML 문서의 예

  11. 2.1 HTML 문서의 기본 구조 • HTML 태그 • 마크업 언어 : 태그를 이용하여 문서의 구조 및 모양을 정의 • 태그 : 문서의 구조와 형태를 표현하는 명령어 • “< >” 로 표현 • 태그 작성에 필요한 기본 사항들 • 태그는 시작 태그와 종료 태그로 구성된다 • 시작 태그 “<>”와 종료 태그 “</>”가 반드시 존재 • HTML 문서에서 사용되는 태그 형식

  12. 2.1 HTML 문서의 기본 구조 • 태그의 형식 • <태그> ∼ </태그> •  <태그 속성=값> ∼ </태그> •  <태그> • 태그의 예 •  <H1> 태그의 기본 속성 </H1>, <font>~</font>,<img>… •  <A HREF="test.html"> test 문서로 이동 </A> •  <BR>

  13. 2.1 HTML 문서의 기본 구조 • 태그의 이름은 대소문자를 구분하지 않는다 • <H1> <h1>, <TITLE> <title> • 여러 개의 공백문자들은 하나로 인식된다 • 공백문자들은 하나를 제외하고 모두 무시 • <예> <P> “HTML 문서에서는 공백을 무시한다.” </P> 결과 "HTML 문서에서는 공백을 무시한다.“

  14. 2.1 HTML 문서의 기본 구조 • 태그를 중첩하여 사용할 수 있다 • 먼저 사용한 태그가 나중에 사용한 태그를 포함하도록 종료 태그를 순서대로 지정  순서가 올바른 태그 사용 <H1> <H2> HTML은 구조적인 언어이다. </H2> </H1> 순서가 올바르지 못한 태그 사용 <P> <FONT SIZE="2">올바르지 못한 태그 </P></FONT>

  15. HTML 문서의 기본 구조 <HTML> <HEAD> <TITLE>문서의 제목 </TITLE> </HEAD> <BODY> 문서의 내용 </BODY> </HTML> HTML 문서의 시작 HTML 문서의 머리 부분 HTML 문서의 제목 HTML 문서의 몸통 부분 HTML 문서의 종료 2.1 HTML 문서의 기본 구조

  16. 2.2 간단한 HTML 문서의 예 • HTML 문서 작성 – test.html <HTML> <HEAD> <TITLE>간단한 HTML 문서 작성 예제</TITLE> </HEAD> <BODY> HTML 문서는 머리와 몸통의 두 부분으로 구성되어 있으며, 이를 정의하기 위하여 3개의 기본적인 태그가 이용된다. 본 예제는 이러한 기본 태그를 사용하여 작성한 것이다 </BODY> </HTML>

  17. 3. HTML의 기본 태그 • 3.1 개본 태그 (문서구조 태그) • 3.2 문자 서식 태그 • 3.3 단락 서식 태그 • 3.4 목록 태그 • 3.5 연결 태크 • 3.6 이미지 태크

  18. 3.1 기본 태그 • 문서 구조 태그 • 문서 구조를 정의하기 위한 기본 태그들 • <HTML> : HTML 문서의 시작을 의미하며, 동시에 HTML 문서 형식으로 작성되었음을 나타낸다. • <TITLE> : HTML 문서의 제목을 브라우저의 제목 표시줄에 나타낸다. • <HEAD> : 작성하려는 HTML 문서에 대한 설명을 나타낸다. • <BODY> : HTML 문서의 실제 내용을 포함한다.

  19. 3.1 기본 태그 • <BODY> 태그의 속성 • BACKGROUND = “이미지 파일명" : 배경으로 사용될 이미지 • 파일을 지정한다. • BGCOLOR = “색상명” 또는 “RGB 값" : 배경색을 지정한다. • TEXT = “색상명” 또는 “RGB 값" : 문자색을 지정한다. • LINK = “색상명” 또는 “RGB 값" : 링크로 설정한 글자의 • 색을 지정한다. • ALINK = “색상명” 또는 “RGB 값" : 링크된 문자를 클릭할 때 • 변화되는 색을 지정한다. • VLINK = “색상명” 또는 “RGB 값" : 링크를 사용한 후의 문자 • 색을 지정한다.

  20. 웹 문서에서 자주 사용되는 색상 색상명 RGB 값 BLACK(검정색) #000000 RED(빨간색) #FF0000 YELLOW(노란색) #FFFF00 GREEN(초록색) #008000 BLUE(파란색) #0000FF AQUA(하늘색) #00FFFF VIOLET(보라색) #EE82EE WHITE(하얀색) #FFFFFF 3.1 기본 태그 • 색상 지정에 사용되는 색상표

  21. 3.1 기본 태그 • 기본 태그를 이용한 간단한 예제 <HTML> <HEAD> <TITLE> HTML 문서의 BODY 부분 </TITLE> </HEAD> <BODY BACKGROUND = “BG.GIF" TEXT = “BLACK"> <CENTER> <BR> 안녕하세요 <P> <!-- 다음은 링크를 설정하는 내용이다 --> <A HREF = NEXT.HTML> 여기를 누르면 다음 화면으로 연결됩니다. </A> </CENTER> </BODY> </HTML>

  22. 3.1 기본 태그 • 예제 결과

  23. 3.1 기본 태그 • 주석 태그 • HTML 문서에 대한 부수적 설명, 해석 필요 시 사용 • 주석의 내용은 브라우저에서 출력되지 않는다 형 식 : <!-- 주석 내용 -->

  24. 3.1 기본 태그 형 식 : <Hn ALIGN = “LEFT" 또는 “RIGHT" 또는 “CENTER"> ∼ </Hn> n은 1부터 6가지의 숫자이다. • 제목 태그 <HTML> <HEAD> <TITLE> HTML 문서의 제목 부분 </TITLE> </HEAD> <BODY> <H1 ALIGN = “LEFT”> H1의 제목 크기 </H1> <H2 ALIGN = “CENTER”> H2의 제목 크기 </H2> <H3 ALIGN = “RIGHT”> H3의 제목 크기 </H3> <H4 ALIGN = “LEFT” > H4의 제목 크기 </H4> <H5 ALIGN = “CENTER”> H5의 제목 크기 </H5> <H6 ALIGN = “RIGHT”> H6의 제목 크기 </H6> </BODY> </HTML>

  25. 3.1 기본 태그 • 제목 태그 결과

  26. <B> : 굵은 문자(Bold)를 나타낸다. <I> : 이탤릭체(Italic)를 나타낸다. <TT> <SUP> <SUB> <BIG> <SMALL> <U> <S> : 굵은 문자(Bold)를 나타낸다. : 이탤릭체(Italic)를 나타낸다. : 타자기체(TypewriterText)를 나타낸다. : 윗첨자(SUPerscript)를 나타낸다. : 아래첨자(SUBscript)를 나타낸다. : 글자 크기를 현재 크기보다 크게 나타낸다. : 글자 크기를 현재 크기보다 작게 나타낸다. : 밑줄(Underline)을 나타낸다. : 취소선(Strike Through)을 나타낸다. 3.2 문자 서식 태그 • 글꼴 태그 • 문자들의 크기, 모양을 조절

  27. 3.2 문자 서식 태그 <HTML> <HEAD> <TITLE> HTML 문서의 글꼴 태그 </TITLE> </HEAD> <BODY> <B>굵은체</B> <I>이탤릭체</I> <TT>타자기체</TT> <P> 현재에<SUP>위첨자</SUP> <P> 현재에<SUB>아래첨자</SUB> <P> 현재보다<BIG>좀더 크게 <BIG>더욱 더 크게</BIG> 하기 </BIG> <P> 지금보다<SMALL>좀더 작게 <SMALL>더욱 더 작게</SMALL> 하기</SMALL> <P> <U>밑줄</U> <S>취소선</S> <P> <B> <I>굵은 이탤릭체</I> </B> </BODY> </HTML> • 글꼴 태그 예제

  28. 3.2 문자 서식 태그 • 글꼴 태그 예제 결과

  29. 3.2 문자 서식 태그 문자 크기의 지정 • <Hn> : 문서의 제목 크기 변경 • <Font> : 본문의 글자 크기 조절 • 1~7까지의 7단계로 구분 • 1이 가장 작고 7이 가장 크다 • 상대 크기 지정 형 식 : <FONT SIZE = “n” > ∼ </FONT> 형 식 : <FONT SIZE = “+n”또는 “-n” > ∼ </FONT>

  30. 3.2 문자 서식 태그 • <Font> 태그 예제 <HTML> <HEAD> <TITLE> HTML 문서의 글자 크기 </TITLE> </HEAD> <BODY> <FONT SIZE = "1"> FONT SIZE 1 </FONT> <FONT SIZE = "2"> FONT SIZE 2 </FONT> <FONT SIZE = "3"> FONT SIZE 3 </FONT> <FONT SIZE = "4"> FONT SIZE 4 </FONT> <BR> <FONT SIZE = "5"> FONT SIZE 5 </FONT> <FONT SIZE = "6"> FONT SIZE 6 </FONT> <FONT SIZE = "7"> FONT SIZE 7 </FONT> <BR> <FONT SIZE = "4"> FONT SIZE 4 </FONT> <FONT SIZE = "-2"> FONT SIZE 3에서 2단계 작아짐 </FONT><BR> <FONT SIZE = "4"> FONT SIZE 4 </FONT> <FONT SIZE = "+2"> FONT SIZE 3에서 2단계 커짐 </FONT> </BODY> </HTML>

  31. 3.2 문자 서식 태그 • <Font> 태그 예제 결과

  32. 3.2 문자 서식 태그 문자 색의 지정 • COLOR 속성을 이용 형 식 : <FONT COLOR= “색상명” 또는 “RGB 값” > ∼ </FONT> • 글자 색을 변경하는 예제 <HTML> <HEAD> <TITLE> HTML 문서의 글자 색 </TITLE> </HEAD> <BODY> <FONT COLOR = "BLUE" > BLUE </FONT> 파란색으로 표시 <BR> <FONT COLOR= "RED" > RED </FONT> 빨간색으로 표시 </BODY> </HTML>

  33. 3.2 문자 서식 태그 • 예제 결과

  34. 3.2 문자 서식 태그 • 문자의 흐름 효과 형 식 : <Marquee > ∼ </ Marquee> 특수 문자의 사용  < : &lt;  > : &gt;  & : &amp; “ : &quot; 공백 : &nbsp;

  35. 3.2 문자 서식 태그 • 입력한 대로 보여주기 • HTML 문서에서 입력한 한 번 이상의 공백과 스페이스를 그대로 표현 형 식 : <PRE> ∼ </PRE>

  36. 3.2 문자 서식 태그 특수문자의 사용 예 <html><body><pre> &lt;html&gt; &lt;head&gt;&lt;title&gt;특수문자 표현하기 &lt;/title&gt; &lt;/head&gt;&lt;body&gt; &lt;h1&gt; Escape 문자 예제&lt;/h1&gt; &lt;br&gt;&lt;p&gt;** Escape 문자 예제 ** &lt;br&gt; 화면에 html 코드를 보여줍니다.^^* &lt;/body&gt;&lt;/html&gt; </pre></body></html>

  37. 3.3 단락 서식 태그 • 줄바꿈 태그 • “Line Break”를 의미 형 식 : <BR> <HTML> <HEAD> <TITLE> HTML 문서의 줄바꿈 </TITLE></HEAD> <BODY> 줄바꿈 태그를 이용하면<BR> 줄이 바뀝니다.<BR> </BODY> </HTML>

  38. 3.3 단락 서식 태그 • <BR> 태그 예제 결과

  39. 3.3 단락 서식 태그 • 단락 태그 • <P> 태그 : 문단을 나누기 위한 태그 • <BR> 태그와의 차이 • 줄바꿈 + 한 줄의 공백 • <BR> 태그를 두 번 사용한 결과 • 복수의 <P> 태그는 한 번 사용한 결과와 동일 형 식 : <P>

  40. 3.3 단락 서식 태그 • 단락 태그 예제 <HTML> <HEAD> <TITLE> HTML 문서의 단락 태그사용</TITLE></HEAD> <BODY> 단락 태그를 사용합니다.<P> 단락을 만듭니다.<P> <P> <P> 단락 태그를 여러 번 써도 하나를 쓴 것과 같습니다. <BR> <BR>줄바꿈 태그를 두 번 쓰면 <P>단락 태그를 한 번 쓴 것과 같은 효과가 납니다. </BODY> </HTML>

  41. 3.3 단락 서식 태그 • 단락 태그 예제 결과

  42. 3.3 단락 서식 태그 괘선 태그 형 식 : <HR [속 성]> • 괘선 태그의 속성 • SIZE = “픽셀 수” : 수평선의 두께를 지정 한다. • WIDTH = “픽셀 수” 또는 “가로 폭에 대한 비율(%)” : 수평선의 길이를 지정한다. • ALIGN = “LEFT”또는 “CENTER”또는 “RIGHT” : 수평선의 위치를 지정한다. • NOSHADE = 입체감과 음영의 효과를 제거 (보통 선으로 표현) 한다.

  43. 3.3 단락 서식 태그 • 괘선 태그 예제 <HTML> <HEAD> <TITLE> HTML 문서의 괘선 태그 사용 </TITLE> </HEAD> <BODY> 보통 두께 1 <HR> 수평선 두께 5 <HR SIZE= "5" > 길이 150 픽셀 <HR WIDTH= "150" > 길이 80% <HR WIDTH= "80%" > 수평선 위치를 왼쪽으로 <HR ALIGN= "LEFT" WIDTH= "30%" > 입체감을 없앰 <HR NOSHADE> </BODY> </HTML>

  44. 3.3 단락 서식 태그 • 괘선 태그 예제 결과

  45. 3.3 단락 서식 태그 정렬 태그 • 가운데 정렬 형 식 : <CENTER> ∼ </CENTER> • 문단의 정렬 형 식 : <DIV ALIGN = “LEFT”또는 “RIGHT”또는 “CENTER”> ∼ </DIV>

  46. 3.3 단락 서식 태그 • 문단 정렬 예제 <HTML> <HEAD> <TITLE> HTML 문서의 정렬 태그 사용</TITLE> </HEAD> <BODY> <DIV ALIGN = "LEFT"> 왼쪽 정렬 </DIV> <P> <DIV ALIGN = "CENTER"> 가운데 정렬 </DIV> <P> <CENTER> 가운데 정렬 </CENTER> <P> <DIV ALIGN = "RIGHT"> 오른쪽 정렬 </DIV> <P> </BODY> </HTML>

  47. 3.3 단락 서식 태그 • 문단 정렬 예제 결과

  48. 3.3 단락 서식 태그 • 인용 태그 • 인용구를 작성할 경우 형 식 : <BLOCKQUOTE> ∼ </BLOCKQUOTE>

  49. 3.3 단락 서식 태그 인용 태그 예제 <HTML> <HEAD><TITLE>HTML 문서의 BLOCKQUOTE 태그</TITLE></HEAD> <BODY> Tim Berners-Lee의 견해는 다음과 같다. <BLOCKQUOTE> <P>Anyone who slaps a 'this page is best viewed with Browser X' label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network. </BLOCKQUOTE> 이는 WWW의 기본 철학을 잘 설명하고 있다. </BODY> </HTML>

  50. 3.4 목록 태그 • 목록 태그 • 시각적으로 짜임새 있는 문서 작성  <UL> : 번호가 없는 리스트 (Unordered List) - <LI> : 리스트 항목  <OL> : 번호가 있는 리스트 (Ordered List) - <LI> : 리스트 항목  <MENU> : 메뉴 리스트 - <LI> : 리스트 항목  <DIR> : 디렉토리 리스트 - <LI> : 리스트 항목  <DL> : 용어 리스트 (Definition List) - <LH> : 리스트 제목 - <DT> : 용어의 이름 - <DD> : 용어의 설명

More Related