충남대학 농업과학대학 학과교육

충남대학 농업과학대학 학과교육 주안정보산업

순서 • 1교시 • 자주 사용되는 HTML 태그………..……….………..40’ • 홈페이지에서 수정할 파일 확인………………….….5’ • 2교시 • SFTP를 이용한 파일 다운로드………………..……..5’ • MS Front Page 이용한 홈페이지 수정………...…..35’ • SFTP를 이용한 파일 업로드…………………………5’ • 3교시 • 실습…………………………………………….……..45’

자주 사용되는 HTML 태그 • HTML 문서의 특징 • HTML이란 Hyper Text Markup Language의 약자 • 인터넷에서 정보를 보여주기 위한 하이퍼 텍스트를 만드는 표준적인 언어이며 홈페이지를 만들때 쓰이는 언어 • html문서는 각각의 명령어를 말하는 태그로 구성 • 태그는 대소문자 구분이 없음 • 단, 파일 이름은 소문자 • HTML 문자열 사이에 있는 하나 이상의 공백은 무시 • 태그가 중복 되지 않도록 주의 • HTML 태그를 잘못 사용해도 브라우저에서는 에러가 발생하지 않음 • 시작 태그와 종료 태그가 존재(<html>, </html>) • 반드시 종료 태그가 존재하는 것은 아님(<br>, <img>, <hr>)

자주 사용되는 HTML 태그 • HTML 문서의 구성<html> <head> <title>제목표시줄에 표시될 문서의 제목</title> </head> <body>본문의 내용</body></html> • <HTML> 태그 : HTML 문서 시작 • <HEAD> 태그 :정의 태그입니다. • <TITLE> 태그 :문서 제목 정의(브라우저 타이틀바에 표시됨). • </TITLE> 태그 :문서의 제목 끝. • </HEAD> 태그 :정의 태그 끝. • <body> 태그 : HTML 문서의 본문 부분 • </body> 태그 :본문 내용 태그 끝. • </HTML> 태그 : HTML 문서 마무리

자주 사용되는 HTML 태그 html head body

자주 사용되는 HTML 태그 • <font> • font tag는 글자를 제어하는 tag • 속성으로는 size, color, face 등 • size는 글자크기를 지정하는 속성(1~7까지의 값) • color 속성은 글자의 색상 제어 • face 속성은 글씨체 제어 • <br> • 보통의 문서를 작성할 때 enter기능을 하는 태그 • br 태그를 써주지 않으면 모든 문장이 브라우저의 넓이 까지 한줄로 나열 • br 태그는 종료 태그가 없음

자주 사용되는 HTML 태그 • <p> • Paragraph라는 뜻으로 문단을 구분할 때 쓰는 태그 • 앞의 문장과 한줄을 띈 후에 다음 문단을 시작하므로 한줄을 띄는 효과 • 속성으로는 align이 존재 • Align의 속성값으로는 left, center, right가 있음 • <pre> • HTML문서를 작성할 때 칸 띄우기는 한번밖에 적용되지 않음 • space bar가 한번밖에 안된다는 뜻 • 작성할때 여러칸을 띄웠다고 해도 브라우저 상에서는 한칸만 표시 • 이때 pre tag를 쓰면 유용 • pre란 preformatted의 약자로 공백이나 줄바꿈을 에디터에서 보는 그대로 브라우저 상에서 표시 가능

자주 사용되는 HTML 태그 • <i> <em> <var> <cite> • 글자를 이탤릭체로 표현 • <sub> • 글자를 아래 첨자로 표현 • <sup> • 글자를 위 첨자로 표현 • <strong> <b> • 두가지 태그가 모두 글자를 두껍게 표현 • 강조할 단어나 문장에 많이 사용 • <u> • 밑줄 그은 글자체로 표현

자주 사용되는 HTML 태그 •  • 본문의 주석을 달 때 사용하는 태그 • 작업을 하다 문서가 길어지면 자신이 만든 소스라고 해도 쉽게 알아보기 힘듦 • 따라서 주석을 닮으로 해서 쉽고 빠르게 어떤 작업이었는지 파악 가능 • 주석은 브라우저 상에 표시되지 않음 • 예html 소스

자주 사용되는 HTML 태그 • <img> • 속성중의 하나인 src 를 사용하여 문서에 그림을 삽입 • 기본 형태는 <img src= "경로나 파일명"> • 종료 태그는 없음 • 속성 • Src : 가장 기본이 되는 속성으로 이미지의 경로와 파일명을 지정 • Border : 테이블의 테두리의 두께를 지정 • width / height : 이미지의 폭과 높이 지정, 픽셀이나 퍼센트(%)로 설정 • Hspace : 이미지의 좌우 여백 설정 • Vspace : 이미지의 위, 아래 여백을 설정

자주 사용되는 HTML 태그 • Alt : 이미지의 설명을 지정할 수 있는 속성 • Align : 이미지를 표시할 경우 이미지와 글자와의 위치 관계 • top이미지의 상단과 글자의 윗 부분을 정렬 • middle이미지의 중심과 글자의 밑 부분을 정렬 • bottom이미지의 하단과 글자의 아래 부분을 정렬 • left이미지의 왼쪽에 문자를 정렬 • right이미지의 오른쪽에 문자를 정렬

자주 사용되는 HTML 태그 • <table> • 표를 나타내는 태그 • 단독으로 사용되지 않고 <tr>, <td>태그와 함께 사용 • <tr>은 행을 나타내는 태그 • <td>는 열을 나타내는 태그 • 하나의 <table>안에 여러 개의 <tr>, <td>태그가 존재할 수 있으나 <td>는 항상 <tr>태그 안에 존재해야 함

자주 사용되는 HTML 태그 <table> <tr> <td> </td> </tr> </table> • 위와 같이 작성하면 한칸짜리 표가 만들어지는데 이때 tr태그 사이에 td태그를 몇 개 더 써주면 가로로 칸이 더 생김 • Tr태그를 더 써주면 세로로 칸이 더 생김 • 쉽게 말해 표와 행은 화면에 보이지 않는 영역을 설정하는 것이고 셀이 모여 이뤄진 열이 화면에 보이는 것임

<table> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> </tr> </table> 자주 사용되는 HTML 태그

자주 사용되는 HTML 태그 • <table> 속성 • Align : 거의 모든 태그에 쓸수있는 속성 • table 태그에 삽입하면 문서내에서 테이블의 위치를 결정하며 tr 태그나 td 태그에 쓰이면 셀안의 문자들의 위치를 결정 • 속성값 : left(왼쪽정렬), center(가운데정렬), right(오른쪽정렬) • Border : 테이블의 테두리 두께 지정, 기본값 : 1 • Bordercolor : 테두리의 색상을 적용 • Bordercolorlight : table 테두리의 밝은 부분의 색상 지정 • Bordercolordark : table 어두운 부분의 색상을 지정

자주 사용되는 HTML 태그 • Bgcolor : 테이블의 배경색 지정 • Background : 테이블에 배경그림 지정 • Width : 테이블의 폭 설정 • Height : 테이블의 높이 설정 • Cellpadding : table 태그에만 쓰이는 속성, 셀과 셀안의 문자와의 여백 설정 • Cellspacing : table 태그에만 쓰이는 속성으로 셀과 셀사이의 여백 설정

자주 사용되는 HTML 태그 • <a> • 텍스트, 이미지 등에 링크를 적용 시킬 때 사용하는 태그 • 기본 형태는 <a href=“주소”>링크대상</a> • 속성 • href : hyper reference 의 약자로서 링크 할려고하는 문서명이나 다른 홈페이지의 URL을 지정할 수 있는 속성 • target : 문서를 열때 어떤 위치에 문서를 출력할지 지정해 주는 속성, 속성값으로는 _self, _top, _blank, _parent 등

자주 사용되는 HTML 태그 • 예제 <html><head><title>다른 문서에 링크 </title></head><body><a href=http://www.empas.com target=_blank>여기를 클릭</a>하면 새 창을 띄우면서 엠파스로 갑니다.<a href=http://www.yahoo.co.kr target=_self>여기를 클릭</a>하면 현재의 위치에서 야후가 나타납니다.</body></html>

수정 할 파일 확인 • 인터넷 익스플로러 실행 • 수정하고 싶은 페이지로 이동 • 웹페이지의 주소 확인 • 위 그림처럼 주소 맨 끝에 있는(?table=뒤에 있는 것이 파일 이름 • 실제 서버에 저장되는 것은 파일이름.htm

SFTP를 이용한 파일 다운로드 • 설치 및 접속 • 홈페이지 FTP접속 프로그램 Download클릭(연구소 홈페이지 자료실에 등록) • 설치프로그램 실행 • 프로그램 설치후 바탕화면에 생성되는 아이콘 • 를 실행 • 를 클릭

SFTP를 이용한 파일 다운로드 • 오른쪽과 같은 창이 뜨면 Host Name에 각 학과의 홈페이지 주소 입력, User Name에 학과 계정 입력후 Connect 클릭 • 비밀번호 입력 • 비밀번호 인증후 오른쪽과 같이 접속 • 화면 오른쪽에 있는 public_html로 이동

SFTP를 이용한 파일 다운로드 • 각 학과 계정 이름으로된 폴더로 이동 • 원하는 파일을 찾아서 오른쪽버튼 클릭하거나상단 도구 상자에있는 화살표버튼클릭 • 클릭후 다운로드 위치 결정

Front Page를 이용한 홈페이지 수정 • 소개 • MS사에서 개발한 웹에디터 • 나모, 드림위버 등과 함께 많이 사용되는웹 에디터 중 하나 • MS제품과의 완벽한 연동 가능 • Office 제품군과 함께 제공 (제품에 따라 다름) • 쉬운 인터페이스와 간단한 사용법으로 쉽게 사용 가능

Front Page를 이용한 홈페이지 수정 • 메뉴 • 파일 • 파일 열기 및 저장, 인쇄등 • 편집 • 잘라내기, 붙이기, 복사, 실행취소 • 보기 • 각종 도구상자 • 삽입 • 그림 및 각종 개체, 양식등 • 서식 • 글꼴, 배경색, 스타일 등 • 도구 • 맞춤법 검사 등 • 표 • 표 그리기, 삽입, 삭제 등

Front Page를 이용한 홈페이지 수정 • 도구상자 • 자주 사용되는 기능 • 파일 열기, 저장 • 인쇄, 미리보기, 브라우저에서 미리보기 • 잘라내기, 복사, 붙여넣기 • 그림, 하이퍼링크 추가 • 글꼴, 크기, 색상 변경 • 표 그리기, 지우기 • 정렬

Front Page를 이용한 홈페이지 수정 • HTML 문서 보기 • 기본 • WYSIWYG 방식의 편집창 • HTML • HTML 소스코드 • 미리보기 • 사용자가 입력한 HTML 미리보기

Front Page를 이용한 홈페이지 수정 • 텍스트 입력 • 일반 워드처럼 텍스트 입력 • ENTER는 문단 나누기 • SHIFT+ENTER는 줄 바꿈 • 문단을 나눴을 때는 소스코드에 <P>태그 추가 • 줄 바꿈일 때는 소스코드에 <BR> 태그 추가

Front Page를 이용한 홈페이지 수정 • 이미지 입력 • 삽입→그림 →그림파일 선택 • 파일 다이얼로그를 통해 그림파일 선택 및 페이지에 그림 파일 추가 가능 • 이미지 등록정보 • 입력된 이미지를 클릭후 오른쪽 버튼을 클릭후 그림 등록정보 클릭 • 이미지 크기 및정렬방법등을 손쉽게 설정 가능

Front Page를 이용한 홈페이지 수정 • 이미지 등록정보 • 오른쪽 그림과 같은 창이 뜸 • 배치 스타일에서 간단한 정렬방법 설정 • 레이아웃에서 세부 정렬방법 설정 • 크기에서 이미지 크기 조절 • 크기의 단위는 픽셀과 % 사용 가능 • 가로세로 비율은 유지하는 것이 좋음

Front Page를 이용한 홈페이지 수정 • 표 입력 • 표→삽입 →표 를 선택 하거나 표 그리기로 표 입력 가능 • 메뉴에서 표를 입력하면 표 삽입 창이 뜨면서 표의 행과 열 정렬방법, 테두리 등을 한번에 설정가능 • 표 그리기를 선택하면 마우스 포인터가 연필 모양으로 바뀌면서 마우스를 이용하여 직접 표 삽입 가능 • 행과 열을 마음대로 나눌 수 있음

Front Page를 이용한 홈페이지 수정 • 표 등록정보 • 표를 삽입한 후 표 위에서 오른쪽 버튼을 클릭하고 표 등록정보를 클릭하면 설정가능 • 표의 크기 너비, 여백, 배경색, 배경그림 등을 설정 가능 • 색상 설정시 기본 리스트에 있는 색 뿐만 아니라 사용자지정 클릭시 다양한 색상 선택 가능

Front Page를 이용한 홈페이지 수정 • 셀 등록정보 • 표의 한 칸을 이루고 있는 셀에 대해서 여러가지 설정을 변경 가능 • 표 등록정보와 마찬가지로 크기 너비, 여백, 배경색, 배경그림 등을 설정 가능

Front Page를 이용한 홈페이지 수정 • 하이퍼링크 • 텍스트 • 텍스트 입력 후 마우스로 블록을 지정한 다음 오른쪽 버튼을 클릭후 하이퍼 링크 클릭 • 하이퍼 링크 다이얼로그 창이 뜨면 주소 부분에 링크 시킬 주소를 입력 • 대상 프레임은 링크가열릴 대상을 지정하는것으로 같은 프레임,전체 페이지, 새창,상위 프레임등을 설정 가능

Front Page를 이용한 홈페이지 수정 • 이미지 • 먼저 이미지를 삽입하고 텍스트의 경우처럼 마우스 오른쪽 버튼 클릭후 하이퍼 링크 클릭 • 이미지의 경우 링크를 걸고 나면 간혹 이미지 테두리에 파란색 선이 생기는 경우가 있는데 이는 그림 등록정보에서 테두리 값을 0으로 설정하면 해결 가능

SFTP를 이용한 파일 업로드 • 업로드 • 수정할 파일을 다운받았던 폴더로 이동 • 수정이 완료된 파일을 업로드 • 상단 도구 상자에 있는 화살표버튼 클릭 • 클릭 후 업로드 할 파일 선택 • 파일 선택 후 업로드 버튼을누르면 업로드 완료 • 인터넷 익스플로러를 실행후 변경된 사항 확인

충남대학 농업과학대학 학과교육

충남대학 농업과학대학 학과교육

Presentation Transcript