홈페이지 만들기. Cyber 공간에서 자신이 갖고 있는 정보 나 관심사를 다른 사람들에게 체계적으 로 공개하거나, 시간과 장소에 구애 받지 않고 정보화 시대에 발맞춰 자신을 어필 할 수 있음.

Presentation on theme: "홈페이지 만들기. Cyber 공간에서 자신이 갖고 있는 정보 나 관심사를 다른 사람들에게 체계적으 로 공개하거나, 시간과 장소에 구애 받지 않고 정보화 시대에 발맞춰 자신을 어필 할 수 있음."— Presentation transcript:

1 홈페이지 만들기

2 Cyber 공간에서 자신이 갖고 있는 정보 나 관심사를 다른 사람들에게 체계적으 로 공개하거나, 시간과 장소에 구애 받지 않고 정보화 시대에 발맞춰 자신을 어필 할 수 있음

3 필요한 도구와 프로그램 메모장이나 워드패드 HTML 문서 작성을 위해 필요 가장 기본적인 방법이면서 가장 중요함 홈페이지 업로드를 위한 프로그램 (ex)Alftp ※ 전용 에디터 나모 인터렉티브사의 ‘ 나모 웹에디터 ’ MS 사의 ‘ 프론트 페이지 ’ 매크로 미디어사의 ‘ 드림위버 ’

4 HTML 이란 ? Html(Hypertext Markup Language) : 월드 와이드 웹상에서 하이퍼텍스트로 기술되 는 웹 문서 태그로 이루어져 있음 기본적인 순서 작업도구 설정 저장할 폴더 만들기 입력하기 저장하기 확인하기

5 HTML 문서의 특징 대소문자의 구별이 없다 하나이상의 Space, Enter, Tab 은 무시된 다. ( 별도의 태그 존재 ) 확장자는 반드시 ‘ *.html ’ 로 저장한다. File 이나 Directory 명은 반드시 영문자로 작성한다.

6 HTML 문서의 구성 ※ 저장할 때는 반드시 ‘ *.html ’ 의 형식으로 저장할것

7 배경 및 글자색 Enter 는 무시된다. 그렇다면 … ? ( 뒷장 )

8 배경그림 그림 파일들은 따로 ‘ img ’ 같은 폴더를 만들어 저장해 두 고 경로를 지정해 주는 것이 홈페이지 만들기에 편리

9 글자크기, 글자색

10 문단나누기

11 이미지삽입

12 표 (table) 작성하기 HTML 은 기본적으로 텍스트나 이미지의 배치에 제한이 많아 자유로운 활용이 불 가능하다. 테이블을 이용하면 홈페이지를 바둑판 식 배열처럼 질서 정연하게 구성을 할 수 있고, 이미지와 텍스트들을 보다 효율적 으로 관리 할 수 있다.

13 간단한 표 작성하기 (1) 태그명설명 TR 표의 한 줄에 해당하는 부분을 묶는 태 그로 사용됨 TD 표의 셀 하나에 들어갈 부분을 묶는 태 그로 사용됨 TH 지정된 행의 셀 제목 부분을 묶는 태그 로 사용되고, 태그로 나타낸 내 용에 비해 글자가 강조되어 나타남

14 간단한 표 작성하기 (2) 안에 데이터가 들어 있지 않은 경우, 셀 하나가 뭉게 지는 현상이 발생한다. 그렇다면 어떻게 해야 할까 ?

15 표에 관련된 간단한 옵션 (1) 셀에 이미지 삽입하기 원하는 셀 위치에 이용해서 삽입한 다. Ex) 셀과 셀 사이에 여백지정 cellpadding : 셀 안의 글자들을 기준으로 원하는 픽 셀만큼 간격유지 할 때 cellspacing : 셀과 셀 사이의 경계선 두께 Ex)

16 표에 관련된 간단한 옵션 (2) 색상지정 경계선과 표에 색을 삽입 Ex) 그림 삽입 삽입과는 다름 Ex)

17 표에 관련된 간단한 옵션 (3) 셀 합치기 - colspan( 가로 ),rowspan( 세로 )

18 링크 걸기 링크 – 이용자가 원하는 곳에 한번의 클릭만으로 빠 르게 위치를 이동 시킬 수 있도록 하는 것

19 프레임 나누기 화면을 2 개 이상 분할하면, 각 영역은 독립된 것처럼 다른 정보들로 구성됨 각각의 분할된 영역이 바로 프레임이다. 두개의 프레임으로 나눌 경우 전체 3 페이지로 구성됨 분할될 프레임들의 정보를 담아놓는 문서 왼쪽의 정보만을 담아놓는 문서 오른쪽의 정보만을 담아놓는 문서

20 분할될 프레임들의 정보를 담아놓는 문서 – 프레임셋 문서 cols 로 나눈 뒤 두 가지 인 수를 적으면 세로로 두 칸이 나누어 진다는 것이다. ( 인 수 : 자신이 원하는 크기. 픽 셀단위, 퍼센트 가능 ) ※ rows : 세로 나누어진 화면에 대해 자 신이 알기 쉬운 이름을 부여 한다.

21 각각의 정보만을 담은 문서 이렇게 세 페이지를 만든 후에 ‘ all.html ’ 을 실행

22 프레임에 관련된 간단한 옵션 스크롤바 없애기 프레임 경계 없애기

23 프레임에 링크 설정하기 - target target = “ 프레임 name 명 ” 지정된 프레임 name 값에 결과화면 보여주기 target = “ _blank ” 링크 되는 HTML 문서들을 모두 새 창에서 보여주기 target = “ _top ” 모든 프레임 화면을 무시하고 새로운 HTML 문서를 불러 옴 target = “ _parent ” 프레임의 상위 프레임 셋에 페이지를 불러 옴

24 name 명 이용한 target 의 예제 (1) 프레임 셋에서 원하는 이름으로 정해 준다.

25 name 명 이용한 target 의 예제 (2) 링크 걸때 원하는 창에 나타나도록 지정

26 name 명 이용한 target 의 예제 (3)

27 FTP 를 통한 천마계정 업로드 FTP 로 chunma.yu.ac.kr 에 자신의 학번 과 비밀번호를 입력하여 접속 ‘ htdocs ’ 라는 폴더를 만들어 그 안에 홈 페이지 작성한 것을 업로드 ‘ http://chunma.yu.ac.kr/~ 학번 ’ 을 통하여 확인할 수 있다.

28 참고자료 HTML CSS & JavaScript ( 제우미디어 EB 팀 기획 / 박경식, 이규화 공저, 제우미 디어 ) http://www.tagkorea.pe.kr/ 다수의 태그관련 동호회 까페