태그명령어모음 ▶marquee: 왼쪽으로 움직이게 하는 명령어 ▶direction: 움직임의 방향을 결정 ▶scrollamount: 움직임의 속도결정(스크롤의 보폭) ▶loop: 얼마만큼 반복해 줄것인가를 결정케함 ▶@: 글씨를 눕혀보이고자 할때 ▶behavior=alternate: 움직이다 멈춤을 결정케함 ▶width: 가로폭결정 ▶height: 세로폭결정 ▶font: 글꼴지정 ▶font size: 글씨 크기결정 ▶font color: 글씨 색 결정 ▶font face: 글씨체 결정 ▶background: 배경 그림 결정 ▶bgcolor: 바탕색 결정 ▶src: 경로/주소 ▶img: 그림삽입 ▶embed: 동영상,사운드 삽입 ▶align=top: 정렬 위로 ▶align=center: 정렬 중앙 ▶align=bottom: 정렬 아래 ▶br: 엔터 한번 효과 ▶p: 엔터 두번 효과 ▶(hr)..(/hr): 수평선 그리기 ▶(u)..(/u): 밑줄 긋기 ▶(b)..(/b): 굵은 글씨체 만들기 ▶(ol)..(/ol): 목록 태그 ▶(sub)..(/sub): 아래 첨자 ▶(sup)..(/sup): 윗 첨자 ▶(pre)..(/pre): 실제 그대로 브라우저 화면에 반응케함 ▶alt: 그림설명 ▶(table)..(/table): 표를 만들기 위한 태그 ▶border: 테두리 두께 결정 ▶(td)..(/td): 셀의 내용지정 ▶(tr)..(/tr): td를 사용할때 시작과 끝남 결정 ▶bordercolor: 테두리 색결정 ▶cellspacing: 셀과 테두리와의 간격 결정 ▶cellpadding: 셀과 셀에 입력된 데이터의 사이간결 결정 ▶rowspan: 세로줄을 합치게 함 ▶colspan: 가로줄을 합치게 함 ▶html: html문서의 시작 ▶head: html문서의 머리 ▶(title)..(/title): html문서의 제목과 끝 ▶(body)..(/body): html문서의 본문과 끝 ▶/html: html문서의 끝 ▶(a)..(/a): 하이퍼 텍스트 연결(링크) ▶glow: 필터속성중의 하나 ▶shadow: 필터속성중의 하나 ▶alpha: 필터속성중의 하나 ▶glow: 필터속성중의 하나 ▶blur: 필터속성중의 하나 ▶wave: 필터속성중의 하나 ▶xray: 필터속성중의 하나 ▶invert: 필터속성중의 하나 ▶gray: 필터속성중의 하나 ▶(style=filter:fliph()).. (/span): 그림의 좌우바꾸기 ▶(span style=filter:fliph();height:1px;)...(/span):글씨의좌우바꾸기 ▶(span style=filter:flipv();height:1px;):글이나그림상하바꾸기 ▶bordercolorlight: 테두리의 위쪽모서리색 지정 ▶bordercolordark: 테두리의 아래쪽모서리색 지정 ▶(frameset)..(frameset): 프레임을 어떻게 나눌지 결정 ▶frameset cols: 창을 좌우로 나눔 결정 ▶frameset rows: 창을 상하로 나눔 결정 ▶(applet)..(/applet): 자바 애플릿 삽입 ▶(script)..(/script): 자바 스크립트 삽입 1단계 : html기본용어 설명 html은 hyper text markup langu1age라고 불리고 있는 언어로서 태그 등을 이용하여 하이퍼 텍스트 형식의 문서를 만드는 것입니다. 우리가 html로 이루어진 문서를 웹 브라우저에서 볼 수 있는 것은 웹 브라우저에서 html태그를 해석하고 전송되는 데이터를 그래픽과 함께 보여주는 기능을 가지고 있기 때문입니다. 현재 웹브라우저로 널리 사용되고 있는것은 인터넷 익스플로러 4.x, 5.x와 넷스케이프 커뮤티케이터 4.x버젼입니다. 하이퍼텍스트란 ? 하이퍼텍스트는 웹의 기본원리로써 웹을 서로 연결하고 있는 하이퍼링크의 기능을 대표하고 있다고 할 수 있습니다. 웹 브라우저를 이용해서 인터넷에 접속해 보면 문자들이 보이는데 그 중에서 색상이 다른 문자가 표시되어 있습니다. 여기에서 마우스 포인터를 색이 다른 문자에 가져다 놓으면 화살표 모양의 마우스 포인터가 손 모양으로 변하는 것을 볼 수 있는데, 이때 마우스의 왼쪽 버튼을 누르면 다른 웹 문서로 이동합니다. 이때 마우스 포인터로 누른 색이 다른 문자가 바로 하이퍼텍스트입니다. 즉, 일반적인 문자와는 달리 다른 문서에 링크되어 있는 문자를 하이퍼텍스트라고 말하는 것입니다. 우리가 흔히 사용하고 있는 윈도우용 프로그램에서 도움말을 검색할 때 마우스만을 이용해서 문서를 이리저리 이동하는 것을 바로 하이퍼텍스트라고 말할 수 있습니다. www이란 ? www는 world wide web의 약자로, 전세계 속에 퍼져 있는 인터넷 내의 정보들을 연결해 주는 것입니다. 간단히 말하면 거미줄처럼 연결된 전세계의 통신망을 이용해서 네트워크에 연결된 모든 이는 정보를 제공해 줄 수도 있고, 또 그 정보들을 이용할 수가 있습니다. 홈페이지란 ? 홈페이지라는 것은 인터넷을 통해 개인이나 단체가 web으로 제공하는 html문서를 웹 브라우저로 보았을때 처음에보이는 html문서를말합니다. 그러나 요즘에는 이것뿐만 아니라 웹 브라우저를 통해 볼 수 있는 html로 작성된 문서를 통틀어 홈페이지라고 부르고 있습니다. 초창기의 홈페이지는 주로 텍스트 위주였지만, 인터넷의 속도가 빨라지고, 전용선을 사용하는 이용자들이 많아지면서 그래픽 위주의 홈페이지로 변해가고 있습니다. 그래서 홈페이지를 만들고자 하는 개인 사용자들은 html만을 알아서는 안되고 그래픽 프로그램도 기본적으로 사용할 줄 알아야만 멋진 홈페이지를 만들 수 있는 것입니다. html 이란 ? html은 조금 전에도 설명했듯이 'hyper text markup language'의 약자로 하이퍼 텍스트 형식의 파일을 브라우저에서 볼 수 있도록 하기 위한 언어입니다. html의 표현은 명령 부분을 <, >로 묶어 나타내는데 이것을 태그(tag)라고 합니다. 태그를 사용하여 작성한 문서가 html문서가 되며, 확장자는 *.html이라고 지정하는데 윈도우 사용자는 *.htm으로 지정됩니다. 이런 확장자가 지정되어 있으면 브라우저는 html문서로 인식합니다. 브라우저 ? 브라우져(Browser)란 html문서를 인터넷 상에서 보여 주는 소프트웨어입니다. 브라우저의 종류에는 mosaic이나 netscape, internet explorer 등이 있습니다. 브라우저도 계속 버젼업이 되고 있어 기능도 점차 다양해지고 있습니다. 현재 가장 많이 사용하고 있는 웹 브라우저는 익스플로러입니다. 넷스케이프와 경쟁관계로 우위를 가리기 위해 시장 쟁탈전이 뜨겁습니다. url ? url(uniform resource locator)은 간단히 말하면 인터넷의 주소를 나타냅니다. 자신이 살고 있는 집의 주소가 있듯이 인터넷에서도 자신만의 주소를 가지고 있습니다. 만일 친구의 집을 찾아가고자 하는데 주소가 없다면 어떻게 찾아갈 수 있을 까요? 수많은 집들가운데 친구의집을 찾아간다는것은 정말로 어려운일입니다. 이때 친구의 주소가 있다면 쉽게 찾아갈 수 있을 것입니다. 즉, 어떤 홈페이지의 주소를 바로 'url'이라고 하는 것입니다. 2단계 : html 태그 공부하기 (예제로 공부하기) html 기본 html 문서의 타이틀 html 문서의 몸통부분 주석 문서의 제목 제목의 정렬 글자의 크기 글자의 상대크기 기본 글자의 크기지정 글자의 색지정 - 참고자료 : 색상표, 색상표2 줄바꿈 줄바꿈 금지 예약 줄바꿈 단락 인용 괘선 입력한대로 보여주기 가운데로 정렬 문단의 정렬 깜박거림 물리적 스타일 태그 논리적 스타일 태그 주소 지정 특수문자 공백문자 자동으로 이동하기 언어를 지정 용어 리스트 줄바꿈이 없는 용어 리스트 번호가 없는 리스트 원하는 마크로 바꾸기 번호가 있는 리스트 여러 type 의 리스트 숫자 지정 메뉴 리스트 디렉토리 리스트 이미지 이미지 삽입 이미지의 문자 위치 이미지의 위치 이미지의 여백주기 이미지의 크기조절 이미지의 테두리선 하이퍼링크 html문서의 연결 이미지로 링크 특정 위치로 링크 html소스 보여주기 이미지 맵 테이블 실습 테이블 예제실습 1 테이블 예제실습 2 행의 정의 셀 만들기 테이블의 헤더 빈 셀 만들기1 빈 셀 만들기2 셀 합치기1 셀 합치기2 제목 넣기1 제목 넣기2 테이블을 왼쪽과 오른쪽에 정렬하기 테이블을 가운데로 정렬하기 테이블 테두리선의 두께 조절 셀과 셀사이에 여백주기 문자와 셀사이에 여백주기 테이블의 가로폭 조절1 테이블의 가로폭 조절2 테이블의 높이 조절 테이블의 크기 조절하기 문자 위치 지정하기1 문자 위치 지정하기2 문자 위치 지정하기3 테이블 안에 색깔 넣기1 - 참고자료 : 색상표 테이블 안에 색깔 넣기2 셀 안에서 줄바꿈 금지 표의 외곽선 형식의 지정 프레임 실습 세로 분할(픽셀수나 웹 브라우저에 대한 픽셀로 나누어진 프레임) 가로 분할(픽셀수나 웹 브라우저에 대한 비율(%)로 나누어진 프레임) 세로와 가로 복합 분할 프레임의 크기 변경 금지 스크롤 바 프레임의 여백 프레임의 테두리선 없애기 타겟 지정하기 특수한 타겟이름Ⅰ 특수한 타겟이름Ⅱ 특수한 타겟이름Ⅲ 특수한 타겟이름Ⅳ 기본 HTML문법 html1.htm html2.htm html3.htm html4.htm HTML 고급문법 html5.htm html6.htm html7.htm html8.htm 다이나믹 HTML CSS (Cascading Style Sheet) 3단계 : 나모웹에디터 공부하기(http://www.starthomepage.com/namo/namo.htm) 4단계 : 포토샾 공부하기 5단계 : 페인트샾 공부하기 6단계 : 자바스크립트 공부하기 7단계 : 플래시 공부하기 참고사이트 보기 8단계 : 리눅스 공부하기 9단계 : VI 편집기 사용법 ========================================================= 1. HTML 이란 무엇인가? HTML이란? Hyper Text Markup Language의 약자. 인터넷에서 정보를 보여주기 위한 하이퍼텍스트를 만드는 표준적인 언어이다. 즉 홈페이지를 만들 때 쓰이는 언어입니다. HTML 문서는 각각의 명령어를 말하는 TAG로 이루어져 있습니다. 그러므로 TAG란 홈을 만드는 벽돌이라고 보면 됩니다. * 쉽게말해 인터넷을 통해 볼 수 있는 문서를 만들 때 사용되는 프로그래밍 언어 * 인터넷에서 접할 수 있는 모든 웹 페이지들은 HTML로 작성된다. * 태그(TAG)는 HTML에서 사용하는 명령어이다 HTML TAG는 "<" 와 ">" 사이에 들어가게 됩니다. 예) , 형식 : --------- 으로 시작 tag와 종료 tag로 구성되며 그 사이에 내용이 들어가게 됩니다. 즉, <태그명> 태그 명령에 의해 수행할 문장이나 문서 2. 홈페이지를 만들기 위해 필요한 프로그램. - windows 메모장, 워드패드와 같은 간단한 텍스트 프로그램 - 에디트플러스(EditPlus)2.11 SR-1 (한글판) - 위지윅 프로그램: (드림위버, 나모웹에디터, 프론트페이지) 메모장과 같은 텍스트 에디터로 HTML을 작성하면 tag를 직접 써줘야 하는 불편이 있는 반면 소스를 깔끔하게 보기 좋게 만들 수 있으며 tag에 금방 익숙해 져서 남들이 만든 HTML문서의 구조도 쉽게 파악할 수 있게 됩니다. 위지윅(WYSIWYG) 이란..? "What You See Is What You Get"의약자로 말그대로 "당신이 보는 것이 당신이 얻는 것"이란 뜻이다. tag를 직접 쓰지 않고 위지윅 프로그램을 사용하여 보통 아래아 한글에서 문서를 작성하듯 문서를 작성하면 자동으로 tag를 만들어주고 웹드라우저에서 보는 것과 같은 화면을 보여줍니다. 그러므로 tag에 익숙하지 않은 초보자들도 HTML문서를 쉽게 만들 수 있습니다. 요즘은 위지윅 프로그램의 성능이 아주 좋아져서 전문가들도 많이 사용하고 있으며, 대표적인 프로그램으로는 드림위버나 나모웹에디터, 프론트 페이지 등이 있다. 그 밖에 문서를 예쁘게 꾸미기 위해서 그래픽 프로그램등이 쓰입니다.