: 준비학습 : 학습내용 장. 인터넷이해하기 02 장. 홈페이지를만들기전에
: 장. 인터넷이해하기 학습내용인터넷이란도메인명과 URL 웹페이지동작원리웹문서제작표준언어의변천과정웹브라우저소개
인터넷이해하기 인터넷이란? 인터넷이란? 망 (Network) 들의망, 망들의결합체
인터넷이해하기 인터넷이란? 1969 미국방성알파넷 (ARPANET) 등장 1972 이메일탄생 1974 인터넷 (Internet) 용어처음사용 1975 TCP/IP 개발, 시운전개시 1979 USENET 구축 (net* 뉴스그룹생성 ) 1983 Apple, LISA 컴퓨터 (GUI 탑제최초 PC) 발표 1991 팀버너스리에의해 WWW 개발 1993 상용인터넷서비스개시 1994 넷스케이프네비게이터 1.0 발표 1995 본격상업화, 대중화, 정보고속화
인터넷이해하기 인터넷이란? WWW : 문자, 이미지등을포함한문서를제공 FTP : 파일송수신서비스 E-Mail : 메일서비스 Usenet : 뉴스그룹서비스 Telnet : 원격지접속 Chatting : 채팅서비스
인터넷이해하기 도메인명과 URL [WWW와 HTML] www(world-wide-web) HyperText HyperLink HTML(Hyper-Text Markup language) <Tag> 로구성 확장자 htm, html
인터넷이해하기 도메인명과 URL [IP 주소와도메인명 ] IP 주소 : 컴퓨터고유넘버 도메인명 (Domain Name): 서버이름 DNS(Domain Name Server): 도메인이름을 IP 주소로변경하기위해사용된다. 사용자 PC 의웹브라우저 DNS 웹서버
인터넷이해하기 도메인명과 URL [ 기관의성격코드 ] COM : company, 영리를목적으로하는업체 NET : network, 네트워크관리기구 EDU : education, 교육기관 GOV : government, 정부기관 MIL : military, 군사기관 ORG : organization, 비영리기관
인터넷이해하기 도메인명과 URL [ 국가코드 ] Kr 대한민국 Jp 일본 Uk 영국 De 독일 Tw 대만 Ru 러시아 Fr 프랑스 Ca 캐나다
인터넷이해하기 도메인명과 URL [KrNIC 도메인기관코드 ] Ac : academy, 교육기관 Co : company, 영리를목적으로하는업체 Go : govermment, 정부기관 Ne : network, 네트워크관리기구 Or : organization, 비영리기관 Re : research, 연구기관
인터넷이해하기 도메인명과 URL [URL] Uniform Resource Locator 형식 예 프로토콜 :// 호스트주소 [ 포트번호 ]/ 파일의전체경로 / 파일이름 http://www.mbc.co.kr/news/news7.htm
인터넷이해하기 도메인명과 URL [ 프로토콜 ] 네트워크에서사용하는인터넷표준규약 TCP/IP : 프로토콜의하나 인터넷에참여하기위해서준수해야할규칙 HTTP(HyperText Transfer Protocol) 프로토콜 : http, gopher, wais, ftp, news, mailto, telnet
인터넷이해하기 도메인명과 URL [ 포탈사이트 ] 포탈은으리으리한집의현관이나정문또는터널의입구를가리키는말이다. 최근웹사이트의관문 ( 關門 ) 이라는의미를갖는새로운용어로사용되고있다. 사용자들이웹에접속할때제일먼저나타나거나가장많이머무르는사이트로웹서핑을시작하는주요사이트를의미한다.
인터넷이해하기 도메인명과 URL [ 스팸메일 ] 허락받지않고아무에게나마구잡이로살포하는상업적광고메일 일명 UCE(Unsolicited Commercial E-mail) Junk( 잡동사니 ) 메일이라고도한다. 스팸메일은전자우편주소를가진사람에게무차별적으로배달되어원치않는사람들에게많은시간과비용낭비를초래한다.
[ 이메일 ] 형식 인터넷이해하기 도메인명과 URL 사용자ID@ 인터넷서비스업체의컴이름 Lucy922@dreamwiz.com Lucy922@samsung.co.kr Lucy922@unitel.co.kr 계정 (Account) SMTP : 보내는메일서버 POP3 : 받는메일서버 (Post Office Protocol3)
인터넷이해하기 도메인명과 URL [FTP 사이트 ] File Transfer Protocol의약자 FTP 프로그램 : Ws-Ftp, CuteFtp, LeapFtp 웹브라우저로개인계정에업로드하는법 ftp:// 사용자아이디 : 비밀번호 @ 호스트 Full 주소
인터넷이해하기 도메인명과 URL [ 유즈넷 (USENET)] 게시판에서주제별토론및회의를하는곳주제별로분류된일련의 뉴스그룹 으로구성뉴스그룹이름 Han.announce : 모든한국유즈넷독자대상 Han.test : 뉴스포스팅시험 ISP 별뉴스서버 (NNTP) 신비로 news.shinbiro.com 유니텔 news.unitel.co.kr
인터넷이해하기 도메인명과 URL [ 분야별한글뉴스그룹목록A] Han.binaries : binary 파일을게시팔수있는그룹 Han.comp.lang : 컴퓨터언어 Han.comp.os : Operating System Han.comp.periphs : 컴퓨터주변장치 Han.comp.sys : 컴퓨터시스템 Han.comp.www : 인터넷 Han.net : 네트워크 Han.news : 유즈넷 ( 뉴스그룹 )
인터넷이해하기 도메인명과 URL [ 분야별한글뉴스그룹목록B] Han.arts : 예술 Han.rec : Recreation Han.school : 학교 Han.sci : 과학 Han.sco : 사회 Han.soc.religion : 종교 Han.talk : 토론 Han.misc : 기타그룹
인터넷이해하기 도메인명과 URL [ 플러그인 (Plus-In)] 인터넷익스플로러와같은웹브라우저를도와웹브라우저자체의기능인것처럼만들어주는도우미프로그램이다. 분명히다른회사에서만들었고, 따로설치를해주어야하지만웹브라우저내에서움직이기때문에외부프로그램이라는인식을할수없을정도이다. 매크로미디어의쇽웨이브와플래시가그대표적인예다.
인터넷이해하기 웹페이지동작원리 [ 클라이언트측페이지동작원리 ] 3. 해석 1. Request( 요청 ) 2. Response( 응답 ) LINUX or Window 20 00 Client(Local Computer) 사용자 PC Web Server(Remote Computer) 서버
인터넷이해하기 웹페이지동작원리 [ 서버측페이지동작원리 ] 1. Request( 요청 ) 5. 해석 ㄴ 00 LINUX or Window 20 Client(Local Computer) 사용자 PC 4. 응답 Web Server(Remote Computer) 서버 2. 해석 일반 HTML 문서 3. 변환 IIS(ASP.DLL)
인터넷이해하기 웹페이지동작원리 구분 클라이언트측페이지 서버측페이지 문서정적페이지 (static page) 동적페이지 (dynamic page) 처리방식 통신방식 해석위치 웹사이트운영면 활용분야 제작기술 수동적, 고정적 클라이언트에서고정페이지를전송받는단방향통신 클라이언트측 내용을변경하려면일일이편집해야하므로비효율적. 내용이변하지않는일반문서 HTML, CSS, 자바스크립트 사용자의입력을실시간으로처리 서버와클라이언트사이의양방향통신 서버측 내용이추가되어도문서를재편집할필요가없어효율적. 내용이수시로변하는게시판, 설문조사, 회원가입, 검색엔진등 PHP, ASP, JSP
인터넷이해하기 웹문서제작표준언어의변천과정 SGML(Standard Generalized Markup Language) 1986 년 ISO 에서지정한문서처리표준의하나이며, 프로그래밍언어는아니다. HTML(Hyper Text Markup Language) 1989 년도에 CERN 에있던팀버너스리가개발. 웹에서사용하는표준언어로 HTML 4.0 은 HTML 의최신버전이다. XML(eXtensible Markup Language) 1996 년 W3C 에서제안하였으며 SGML 의장점과 HTML 의장점을수용하여만든언어다. XHTML (Extensible Hypertext Markup Language) VRML(Virtual Reality Modeling Language)
인터넷이해하기 웹문서제작표준언어의변천과정 구분 태그사용 문서의재사용 HTML SGML XML 사용자정의불가능, 제한적 사용자정의가능, 무제한적 불가능가능가능 사용자정의가능, SGML 보다는제한적 응용분야 단순한구조의문서및내용이길지않은문서 방대한내용과구조를요하는기술적인문서 SGML 과동일웹상의교환문서 문서작성 간단하고용이함논리구조작성의어려움 매우복잡함 SGML 을단순화시켜편리하게작성가능 문서검색 효과적인검색이어려움 정확한검색가능문서구조에대한검색가능 SGML 과동일 링크 출력형식언어 HTML HyTime XLL CSS DSSSL XSL
인터넷이해하기 웹브라우저 [ 종류 ] NCSA의모자이크오페라소프트웨어 (Opera Software) 의 Opera 마이크로소프트의인터넷익스플로러 AOL의넷스케이프네비게이터선마이크로시스템의 Hot Java
인터넷이해하기 웹브라우저 구분 메뉴 단축키 사이트동시접속 [ 파일 새로만들기 창 ] Ctrl + N 링크문서새창으로열기 - Shift+ 링크클릭 원하는단어를찾을때 [ 편집 이페이지에서찾기 ] Ctrl + F 자주방문하는사이트등록 [ 즐겨찾기 즐겨찾기에추가 ] Ctrl + B 원본문서다시읽어오기 [ 보기 새로고침 ] F5 주소창바로가기 - ALT + D 페이지다운 - Space 페이지업 - Shift + Space 현재페이지저장 [ 파일 다른이름으로저장 ] - 이미지파일저장팝업메뉴 [ 다른이름으로그림저장 ] - 링크주소복사 팝업메뉴 [ 바로가기복사 ] - 소스보기 [ 보기 소스 ] - 즐겨찾기메뉴관리 [ 파일 가져오기및내보내기 ] - 환경설정 [ 도구 인터넷옵션 ] -
인터넷이해하기 정보검색 [ 정보검색법 ] 검색엔진을이용한검색방법데이터베이스사용방법원하는사이트로바로접속하는방법
[ 문제접근방법 ] 인터넷이해하기 정보검색 문제를분석하고이해한다. 단서를찾아정리한다. ( 고유명사, 구유리 ) 문제해답을찾기위한접근방법을결정한다. ( 검색엔진, 데이터베이스, 기타방법 ) 검색결과에서문제에가장근접하게링크된정보가요약된사이트로이동한다. 정답을확인한다.
[ 검색엔진이란?] 인터넷이해하기 정보검색 검색엔진은사용자가요구하는정보를 검색로봇 을이용하여정보를찾아제공한다. 검색로봇의 DB 구축으로인한네트워크트래픽이발생하므로서버의성능이저하되는단점도있다.
인터넷이해하기 정보검색 [ 검색엔진의종류 ] 주제별검색 : yahoo.com 단어별검색 : altavista.com 전문데이터베이스 프로그램검색 : Download.com 영화전문검색 : imdb.com 음악정보검색 : worldwidemusic.com
: 2 장. 홈페이지를만들기전에 학습내용홈페이지제작목적과제작과정홈페이지제작관련기술들홈페이지제작에필요한준비물어떤웹에디터를사용할것인가? 에디터플러스설치와환경설정
홈페이지를만들기전에 홈페이지제작목적과과정 [ 홈페이지제작목적 ] 자기만족및개인홍보기업홍보및물건판매정보공유인터넷프로그래밍의이해
홈페이지를만들기전에 홈페이지제작목적과과정 [ 홈페이지제작과정 ] 기획단계 홈페이지를제작하기전에제작목적, 주제, 대상층등을명확히정해야한다. 제작단계 홈페이지기획이끝나면실제로홈페이지를제작한다. 배포와관리, 평가단계 홈페이지제작이완료되면이제자신의홈페이지를홍보할차례다. 하이홈, 네이버등의계정을받아홈페이지를올린다. 또한홈페이지를올린후원하는대로제작되었는지, 효용성등을체크해본다.
홈페이지를만들기전에 홈페이지제작목적과과정 [ 대상층과서비스제공방식 ] 항목전체적인구성용도유형주요고객 설명텍스트위주, 그래픽위주학술연구, 교육학습, 개인, 오락, 여가생활공공기관, 교육용, 상업용, 개인용계층, 연령, 배경, 관심분야, 기술, 이용능력수준
홈페이지를만들기전에 홈페이지제작관련기술 웹프로그래밍분야 HTML CSS 자바스크립트 CGI, ASP, PHP, JSP 웹디자인분야 일러스트레이터 포토샵 플래시
홈페이지를만들기전에 홈페이지제작준비물 ( 필수 ) 준비물정의종류 우리가사용할도구 웹에디터 홈페이지문서를제작하는툴 메모장, 에디트플러스, 나모, 드림위버등 에디트플러스 웹브라우저 홈페이지문서를보여주는툴 인터넷익스플로러, 넷스케이프네비게이터, 오페라등 인터넷익스플로러 계정 홈페이지공간을할당해주고홈페이지파일을올릴수있도록서비스해주는업체에가입하는것 네이버, 드림위즈, 네티앙, 하이홈등 네이버
홈페이지를만들기전에 홈페이지제작준비물 ( 선택 ) FTP 전용프로그램웹서버이미지제작툴애니메이션제작툴
홈페이지를만들기전에 무료계정제공사이트 제공회사 사이트주소 제공용량 네이버 http://www.naver.com 25M 컴내꺼 http://www.com.ne.kr 50M 하이홈 http://www.hihome.com 50M 드림위즈 http://www.dreamwiz.com 5M 네이트 http://www.nate.com 12M 신비로 http://www.shinbiro.com 10M 네띠앙 http://www.netian.com 20M 한미르 http://www.hanmir.com 20M 오마이포탈 http://www.ohmyportal.com 100M 홈피 http://www2.hompy.com 20M
홈페이지를만들기전에 어떤웹에디터를사용할것인가 [ 웹에디터의종류 ] 소스위주의웹에디터 메모장 에디터플러스 홈사이트 편집위주의웹에디터 나모 드림위버
홈페이지를만들기전에 어떤웹에디터를사용할것인가 [ 소스위주의웹에디터 ] 종류 설명 메모장 흰색배경에검은색글자로만소스를코딩하므로간단한소스의경우문제없지만복잡한소스를코딩할경우불편하다. 에디트플러스 홈사이트 홈페이지소스를구성하고있는태그, 속성, 값의색상을다양하게구별하여표시하므로복잡한소스를코딩하더라도원하는곳을쉽게찾아볼수있어편리하다. 에디터플러스와같이태그, CSS, 자바스크립트소스의색상을다양하게표현해주므로소스편집이훨씬수월하다. 특히태그속성자동생성기능이나위자드 (Wizard) 기능이막강하여복잡한태그도쉽게생성, 편집할수있다.
구분장 / 단점내용 홈페이지를만들기전에 어떤웹에디터를사용할것인가 [ 편집위주의웹에디터 ] 나모 장점 - 국산품이라우리나라정서에맞고메뉴가한글로구성되어있어쉽게배울수있다. - 초보자들도쉽게자바스크립트를사용할수있도록자바스크립트마법사를제공한다. - 나모자체로이미지를간단히편집할수있다. 단점 - HTML 소스가지저분하게생성되는편이다. 드림위버 장점 - 초보자들도쉽게자바스크립트를사용할수있도록비헤비어 (Behavior) 를제공한다. - HTML 소스가깔끔하게생성되는편이다. - 같은매크로미디어제품군인플래시애니메이션과연동하기편리하다. 단점 - 외국제품이라우리나라정서에맞지않고메뉴가영문으로되어있어배우기어렵다.
홈페이지를만들기전에 에디트플러스설치와환경설정 [ 에디트플러스의특징 ] http://editplus.co.kr/kr/download.html 쉐어웨어로 30일평가판이다. 구문강조기능을지원한다. 자체내장브라우저를제공한다. 자체 FTP를제공한다.