[연구노트] 산동대학교 생물정보학-08 프로그래밍 기초 및 웹페이지 제작

교과목 주소 : 산동대학교 생물정보학

---

여덟, 프로그래밍 기초와 웹페이지 제작

8.1 리눅스 운영체제

• Linux 운영 체제 : 오픈 소스, 무료, 개방형 아키텍처, 강력하고 저렴한 구성(낮은 하드웨어 요구 사항)

• 현재 버전: redhat , suse , redflag-linux , ubuntu 등 하나를 선택하여 철저히 이해하는 것이 좋습니다 (선생님은 redhat을 사용합니다)

• 자세한 내용은 비디오를 참조하십시오. Linux 운영 체제 P134

• Linux 인터페이스 : 그래픽 인터페이스, 명령줄 인터페이스.

• Linux에 대한 Windows 원격 연결 :
  ◆ PuTTY : 명령줄 작업
  

  ◆ WinSCP : 윈도우 동작 - 파일 전송.
  

8.2 기본 리눅스 명령어

• 자세한 내용은 비디오를 참조하십시오. Linux Basic Commands-01 P135

ls 명령

• ls 명령 = Dos의 dir 명령
• ls현재 폴더 의 모든 콘텐츠 나열
• ls ProgramsPrograms 폴더 의 모든 항목 나열
• ls ls현재 폴더에 있는 모든 콘텐츠의 세부 정보 나열

남자 명령

• man명령어는 리눅스에서 help 명령어 로 man을 통해 리눅스에서 명령어 도움말, 설정 파일 도움말, 프로그래밍 도움말 등의 정보를 볼 수 있다.
• man lsls 명령의 도움말 파일 보기
  왼쪽 상단 에 "LS(1)"이 표시되고 "LS"는 설명서 이름을 나타내고 "1"은 설명서가 첫 번째 장에 있음을 나타냅니다.
  PgDn 페이지 다운, PgUp 페이지 업.
  q 또는 종료하려면 종료하십시오.

날짜 명령

• date명령은 시스템 시간과 날짜를 표시하거나 설정하는 것입니다.
• date현재 날짜와 시간을 기본 형식으로 표시
• date +%Y/%m/%d지정된 형식에 따라 "년/월/일" 표시
• date +%H:%M지정된 형식으로 "시:분" 표시

교정 명령

• cal현재 달의 달력 표시
• cal 10 2016지정된 달의 달력 표시: cal month year

기원전 명령

• bc 명령은 임의 정밀도 대화형 실행을 지원하는 계산기 언어입니다.
  +더하기, -빼기, *곱하기, /나누기, ^지수, % 나머지
• bc계산기를 입력하고 계산 버전 정보 표시
• 1+2*3수식을 입력하고 Enter 키를 누른 다음 계산을 수행합니다.
• scale=3scale=number로 소수 자릿수 설정
• quitbc 계산기를 종료하려면 quit를 입력하십시오.

중요한 단축키

• Tab키가 자동으로 완성됩니다 . [Tab] 키에는 "명령어 완성"과 "파일 완성" 기능이 있습니다.
  전체 파일 이름이나 명령 이름이 기억나지 않을 때 처음 몇 글자를 입력하고 [Tab] 키를 누르면 자동으로 완성되거나 충분한 힌트가 제공됩니다. [Tab] 키를 잘 활용하면 많은 입력 오류를 피할 수 있습니다.
  ls .bashls .bash를 입력하고 [Tab] 키를 두 번 누르면 .bash로 시작하는 모든 파일이 표시됩니다.
• Ctrl + C 작업을 종료합니다 .
  Linux에서 잘못된 명령이나 매개변수를 입력하면 이 명령이나 프로그램이 계속 실행되는 경우가 있는데 이때 [CtrI]-c를 눌러 현재 명령이나 프로그램을 "정지"시킵니다.

디렉토리 및 경로

• 자세한 내용은 비디오를 참조하십시오. Linux Basic Commands-02 P136
• 기호는 특수 디렉토리를 나타내는 데 사용됩니다.
  . 이 계층의 디렉토리(현재 디렉토리)
  ..는 이전 계층의 디렉토리입니다.
  -이전 작업 디렉토리 "현재 사용자"가 있는
  ~기본
  /폴더 루트 디렉토리
• 디렉토리 조작을 위한 몇 가지 명령
  pwd 현재 디렉토리 표시
  cd디렉토리 변경
  mkdir새 디렉토리 생성
  rmdir빈 디렉토리 삭제

• cp복사 명령
  cp 명령은 하나 이상의 소스 파일 또는 디렉토리를 지정된 대상 파일 또는 디렉토리로 복사하는 데 사용됩니다.
  cp test.txt test/test2test.txt 파일을 현재 디렉터리의 test 폴더에 있는 test2 폴더에 복사하고 이름은 변경하지 않습니다.
  cp -r /test test3test 폴더 아래의 모든 파일과 하위 디렉터리를 현재 디렉터리에 복사하고 이름을 test3 폴더로 바꿉니다.
  

• rm삭제 명령
  rm 명령은 디렉토리에 있는 하나 이상의 파일 또는 디렉토리를 삭제할 수 있으며 디렉토리와 그 아래의 모든 파일 및 하위 디렉토리도 삭제할 수 있습니다.
  rm -i test.txttest.txt 파일을 삭제합니다. 삭제하기 전에 사용자에게 묻고 삭제를 확인하려면 y를 입력하고 삭제하지 않으려면 n을 입력합니다.
  rmdir test디렉토리 삭제 명령 rmdir을 사용하여 테스트 폴더를 삭제하려고 하면 오류 메시지가 반환되고 삭제할 수 없습니다! 비어 있지 않은 디렉토리를
  rm -r test 삭제하려면 rm 명령과 -r 매개변수가 필요합니다.
  

mv 이동/이름 바꾸기 명령

• mv 명령은 파일 또는 디렉토리의 이름을 바꾸거나 한 디렉토리에서 다른 디렉토리로 파일을 이동하는 데 사용됩니다.
  참고: mv와 cp의 결과는 다르고 mv는 파일을 "이동"하는 것으로 보이며 파일 수가 증가하지 않았습니다. 그리고 cp는 파일을 복사하고 파일 수가 증가합니다.
  이동 : mv test.txt testtest.txt 파일을 테스트 폴더로 이동합니다. 대상이 디렉토리인 경우 소스 파일은 파일 이름을 변경하지 않고 그곳으로 이동됩니다.
  이름 변경 : mv test.txt test1.txttest.txt 파일의 이름을 test1.txt로 변경합니다. 대상이 디렉터리가 아닌 파일인 경우 원본 파일 이름이 대상 파일 이름으로 변경되고 동일한 이름의 기존 파일을 덮어씁니다 .
  

텍스트 파일 조회 명령

• cat = 첫 줄에서 마지막 줄로
  cat test.pdb화면에서 파일의 첫 줄부터 마지막 ​​줄까지 계속 스크롤합니다.
  Ctrl+S키: 스크롤 중지, Ctrl+Q키: 스크롤 재개, Ctrl+C키: 명령 종료 매개변수 " -n"는 행 번호를 인쇄합니다.

• tac = 마지막 줄에서 첫 줄로
  tac test.pdb"cat"과 달리 화면에서 계속해서 파일의 첫 줄로 마지막 줄을 스크롤합니다.

• more = 페이지별로 앞으로/뒤로 탐색
  more test.pdb한 번에 한 화면씩 텍스트 표시 , 전체 화면일 때 중지. 키: 다음 화면의
  Space 내용 표시 ; 키: 다음 줄의 내용 표시 ; 키: 이전 화면 의 내용 표시 ; 키: 종료EnterBQ

• less = 페이지별로 앞으로/뒤로 찾아보기
  less test.pdbmore 명령과 매우 유사합니다. PgDn 키: 다음 화면의 내용을 표시합니다. PgUp 키: 이전 화면의 내용을 표시합니다. Q 키: 종료합니다.

• head = 처음 몇 줄 표시(10)
  head test.pdb -n 6파일의 처음 6줄 내용을 표시합니다.
  기본적으로 head 명령은 파일의 처음 10줄을 표시합니다. 매개변수 "-n number"를 추가하여 첫 번째 숫자 라인을 표시합니다.

• tail = 마지막 몇 줄 표시(10)
  tail test.pdb -n 6파일의 마지막 6줄 내용을 표시합니다.
  기본적으로 tail 명령은 파일의 마지막 10줄을 표시합니다. 마지막 숫자 행을 표시하려면 "-n number" 매개변수를 추가하십시오.

텍스트 생성/수정

• vi 전체 화면 일반 텍스트 편집기
  vi 편집기는 편집 모드와 명령 모드를 지원하며 편집 모드에서는 텍스트 편집 기능을 완료할 수 있으며 명령 모드에서는 파일 작업 명령을 완료할 수 있습니다.
• 일반적으로 사용되는 내장 명령 :
  편집 모드에서 명령 모드로 전환 : Esc
  명령 모드에서 편집 모드로 전환 :
  현재 문자 뒤에 텍스트 추가: a
  줄 끝에 텍스트 추가: A
  현재 문자 앞에 텍스트 삽입: i
  및 행 시작 부분에 텍스트 삽입: I
:Wq명령 모드에서 저장 및 종료 작업 실행
  :W명령 모드에서 저장 작업 실행 명령
  :w!모드에서 강제 저장 작업 실행
  :q명령 모드에서 종료 vi 작업 실행
• vi mytest.txt새 일반 텍스트 파일을 만들고 vi 명령을 통해 편집기를 열어 파일 내용을 편집합니다.
• a기본적으로 명령 모드는 vi 편집기를 연 후 자동으로 입력됩니다 . 편집 모드 로 전환하려면 "a 키"를 누르십시오 .
• ESC입력 후 Esc 키를 누르면 편집 모드에서 명령 모드로 전환됩니다.
• :Wq입력: Wq, 저장하고 종료합니다.
• less mytest.txt" less " 명령 으로 방금 만든 일반 텍스트 파일을 읽습니다 . q종료 키.

---

8.3 Perl 언어 기초 시작하기

8.4 Perl 언어 기초 고급

• 자세한 내용은 다음을 참조하십시오. [학습 노트] Shandong University의 Bioinformatics - Perl 언어 기초 + 고급

---

8.5 프론트엔드 개발과 HTML 소개

● HTML—하이퍼텍스트 마크업 언어

• HTML은 Hyper Text Markup Language의 약자입니다.
• HTML은 프로그래밍 언어가 아니라 마크업 언어입니다.
• 마크업 언어는 마크업 태그의 집합입니다.
• HTML은 마크업 태그를 사용하여 웹 페이지를 설명합니다.

● HTML5—— 차세대 HTML은
2014년 10월에 새로운 기능과 함께 출시되었습니다.

• 드로잉을 위한 캔버스 요소
• 미디어 재생을 위한 비디오 및 오디오 요소
• 로컬 오프라인 저장소에 대한 더 나은 지원
• 새로운 특수 콘텐츠 요소
• 새로운 양식 컨트롤

● HTML 태그

• HTML 태그는 꺾쇠 괄호로 둘러싸인 키워드로 구성됩니다(예: <html>.
• <b>태그는 일반적으로 및 와 같이 쌍으로 제공됩니다 </b>.
• 태그 쌍의 첫 번째 태그는 여는 태그이고 두 번째 태그는 닫는 태그입니다.
• 키워드는 여는 태그와 닫는 태그 사이에 배치됩니다.
• 태그 사이의 키워드는 필요하지 않으며, 개행을 나타내는 태그와 같이 일부 태그에는 키워드가 없을 수 <br></br>있습니다 <br/>.
• 태그는 중첩될 수 있습니다. 즉, 한 쌍의 태그가 다른 쌍의 태그를 포함할 수 있습니다.
  <Tag1> <Tag2> </Tag2> </Tag1>✔
  <Tag1> <Tag2> </Tag1> </Tag2>✖
• 태그는 속성을 가질 수 있으며 <tag attr1="value1" attr2="value2">속성은 태그를 지정합니다.
• 태그로 작성된 파일은 이라는 접미사가 붙은 파일로 저장되며 .html메모장이나 브라우저에서 열 수 있습니다. 브라우저는 HTML 태그를 표시하지 않지만 태그를 사용하여 페이지의 내용을 설명합니다.

● HTML 문서의 구조

---

8.6 HTML의 일반적인 태그

• 자세한 내용은 동영상 참조: Common HTML Tags-01 P144

• 제목 태그 <h1></h1> :
  6단계, H 뒤의 숫자가 작을수록 제목 글꼴 크기가 커집니다.

  <h1>Hello</h1>
  <h2>Hello</h2>
  <h3>Hello</h3>
  

• 단락 레이블 <p></p> : 속성을
  통해 단락에 대한 "가운데(가운데)", "왼쪽(왼쪽)", "오른쪽(오른쪽)"을 설정할 수 있습니다 . 기본값 은 "왼쪽 " 입니다 .align

  <p align="center">This is a rubber.</p>
  <p align="right">This is a pencil.</p>
  <p>This is a pen.</p>
  

• 줄 바꿈 태그 <br/>
  줄 바꿈 태그는 단락 태그와 다릅니다.줄 바꿈 태그는 줄 바꿈만 하며 단락 사이의 간격을 늘리지 않습니다 .
  줄 바꿈 태그는 비어 있는 태그이며 로 축약할 수 있습니다 <br/>.

  <p>This is a rubber.</p>
  <p>This is a pencil.<br/> This is a pen.</p>
  

• 가로선 레이블 가로선의 스타일은 (높이), (너비), (정렬), (색상) 속성 <hr/>
  으로 정의할 수 있습니다 . 수평선 레이블은 빈 레이블이며 로 축약될 수 있습니다 .sizewidthaligncolor
<hr/>
  

  <p>This is a pencil.</p>
  <hr width="100" color="blue" align="left"/>
  <p>This is a pen.</p>
  

• 텍스트 형식 레이블 텍스트의 표시 형식은 (크기), (글꼴), (색상) 속성을 <font></font>
  통해 정의할 수 있습니다 .sizefacecolor
  

  <p>
    <font size="5" face="Verdana" color="green">This is a pencil.</font>
  </p>
  <p>This is a pen.</p>
  

• 텍스트 효과 태그는 <font></font>
<b></b> 볼드체, <i></i>이탤릭체, <u></u>밑줄체 및 <tt></tt>타자기입니다.
  <tt></tt>타자기 글꼴은 고정된 문자 너비 로 인해 시퀀스를 표시하는 데 특히 적합합니다 .
  

  <b> AIDTLI</b>
  <br/>
  <i> AIIDFL </i>
  <br/>
  <u> SSDTFY </u>
  <br/>
  <tt>
    AIDTLI <br/>
    AIIDFL <br/>
    SSDTEY <br/>
  </tt>
  

• 글머리 기호 레이블은 그래픽을 글머리 기호로<ul></ul>
<ul></ul> 사용하며 글머리 기호는 속성을 통해 " (사각형)", " (원)"으로 정의 할 수 있으며 기본값은 " ( 점 )"입니다. 각 항목은 하위 태그로 표시됩니다.typesquarecircledisc<li></li>
  

  <ul>
    <li>tea</ 1i>
    <li> coffee </li>
    <ul type="square">
      <li>mouse</li>
      <li>dog </li>
      <li>cat </li>
    </ul>
    <li> milk</li>
    <ul type="circle">
      <li>mouse</li>
      <li>dog </li>
      <li>cat </li>
    </ul>
  </ul>
  

• 글머리 기호 태그는 숫자를<ol></ol>
<ol></ol> 글머리 기호로 사용하며 글머리 기호를 type 속성을 통해 " ", " ", " " 및 기타 다른 번호 매기기 형식 으로 정의할 수 있으며 기본값은 "1" 입니다 . 각 항목은 하위 태그로 표시됩니다.1ai<li></li>
  

  <ol>
    <li>tea</ 1i>
    <li> coffee </li>
    <ol type="i">
      <li>mouse</li>
      <li>dog </li>
      <li>cat </li>
    </ol>
    <li> milk</li>
    <ol type="a">
      <li>mouse</li>
      <li>dog </li>
      <li>cat </li>
    </ol>
  </ol>
  

• 그림 태그는<img/>
  속성을 통해 그림의 위치를src ​​지정 하고, " (폭)"과 " (높이)"를 통해 그림의 표시 크기를 정의한다 . 이미지 태그는 빈 태그이며 로 축약할 수 있습니다 .widthheight
<img/>
  

  <img src="pen.jpg" width="100" height="60"/> 
  <br/>
  <img src="http://www.view.sdu.edu.cn/images/logo.jpg"/>
  

• 비디오 태그는 <video></video>
  속성을 통해 비디오 위치를 지정하고 재생 버튼과 같은 속성을 src정의하여 controls="controls"사용자에게 컨트롤을 표시autoplay="autoplay" 하고 속성을 정의하여 비디오를 자동으로 재생합니다 .

  <!-- 本地视频或网络视频地址 -->
  <video src="./movie.ogg" controls="controls" autoplay=" autoplay">
  your browser does not support the video tag
  </video>
  

• 하이퍼링크 태그는 <a></a>
  속성을 통해 링크 위치를href 지정하며 , 외부 URL 또는 본 웹사이트의 다른 웹 페이지로 연결될 수 있습니다. 속성을 정의하여 새 창에서 링크를 열 수 있습니다 .target="_blank"

  <!-- 链接到外部网页 -->
  <a href="http://www.sdu.edu.cn" target="_blank">  SDU </a>
  <br/>
  <!-- 链接到本地网页 -->
  <a href="menu.html">  menu </a>
  

• 테이블 태그 <table></table>
  ◆ <tr></tr>하위 태그를 통해 행을 정의하고 , <td></td>하위 태그를 통해 행 의 열을 정의하고, 하위 태그 를 통해 첫 번째 행 (자동으로 굵게 표시됨) 의 헤더 열을<th></th> 정의합니다 . ◆ 속성은 선 너비를 정의 하고 속성 은 테이블 너비와 높이를 정의합니다.
  borderwidthheight
  

  <table border="1" width="300" height="100">
    <tr>
      <th>type</th>
      <th>name</th>
    </tr>
    <tr>
      <td>dog</td>
      <td>mike</td>
    </tr>
    <tr>
      <td>cat</td>
      <td>marry</td>
    </tr>
  </table>
  

  ◆ 속성은 폼의 배경색을bgcolor="yellow" 정의할 수 있고, 속성은 폼의 배경 이미지를 정의할 수 있습니다 . ◆ 레이블에 속성을 추가하여 수평 정렬(기본적으로 왼쪽)과 수직 정렬 (기본적으로 중앙) 을 결정 하는 속성을 추가할 수 있습니다.background="bg.jpg"<tr></tr>alignvalign
  

  <table border="1" width="300" height="200" bgcolor="yellow">
    <tr>
      <th>type</th>
      <th>name</th>
    </tr>
    <tr align="center">
      <td>dog</td>
      <td>mike</td>
    </tr>
    <tr valign="top">
      <td>cat</td>
      <td>marry</td>
    </tr>
  </table>
  

  ◆ <td></td>레이블 에 colspan및 속성을 추가하여 셀을rowspan 병합 할 수 있습니다 . colspan은 병합된 열 , rowspan은 병합된 행 입니다 . colspan 및 rowspan의 속성 값은 병합된 행과 열의 수입니다 . 병합되는 셀은 한 번만 레이블이 지정됩니다 .<td></td>
  

  <table border="1" width="300" height="150" bgcolor="skyblue">
    <tr>
      <th>type</th>
      <th>name</th>
      <th>age</th>
    </tr>
    <tr align="center">
      <td colspan="2">dog</td>
      <td>3</td>
    </tr>
    <tr valign="center">
      <td rowspan="2">cat</td>
      <td>marry</td>
      <td>2</td>
    </tr>
    <tr align="center">
      <td>tom</td>
      <td>1</td>
    </tr>
  </table>
  

• 더 읽어보기: W3school

---

8.7 간단한 웹 페이지 디자인

• 자세한 내용은 비디오를 참조하십시오 : Designing Simple Web Pages-01 P146
  

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Homepage</title>
</head>
<body>
  <center>
    <h1>My Homepage</h1>
    <hr size="5" color="skyblue"/>
  </center>
  <table border="1" width="800" align="center">
    <tr>
      <td width="400" align="center">
        <img width="400" src="https://www.bing.com/th?id=OHR.OkavangoElephant_EN-CN0593145109_tmb.jpg" >
      </td>
      <td width="400" align="center">
        <video width="400" controls="controls" src="https://f.video.weibocdn.com/o0/kP4rMQC0lx07WKUsXgus01041200xtAN0E010.mp4?&Expires=1655143387&ssig=nMEjTVbnRf&KID=unistore,video"></video>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <p align="center">
          <font size="5" color="green">欢迎来到我的课程中心</font>
        </p>
        <p><b>课程中心有以下课程：</b></p>
        <ol>
          <li>生物信息学</li>
          <li>大数据与精准医疗</li>
          <li>计算机在生命科学中的应用</li>
        </ol>
        <p>
          <b>常用链接：</b>
          <i><a href="http://www.sdu.edu.cn" target="_blank">山东大学</a></i>
          <i><a href="#">维基百科</a></i>
        </p>
        <p>
          <b>联系我们：</b><br/>
          联系人：巩老师<br/>
          联系电话：12345678<br/>
          <!-- 给邮箱加超链接 -->
          联系邮箱：<a href="mailto:[email protected]">[email protected]</a><br/>
          联系地址：XXXXXXXXXX
        </p>
      </td>
    </tr>
  </table>
</body>
</html>

---

8.8 HTML과 CGI 간의 간단한 상호 작용

• 자세한 내용은 동영상 참조 : HTML 및 CGI 단순 상호 작용 P149

• 인터랙티브 웹 디자인 : HTML + perl CGI 프로그램
  
  

• HTML

  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>test</title>
  </head>
  <body>
      <form 
          action="./cig-bin/test.cgi" method="post" encType="multipart/form-data">
          <input name="yourname" size="40"/>
          <input type="submit" name="submitit" value="1"/>
      </form>
  </body>
  </html>
  

• 펄 CGI

  #!c:/Strawberry/perl/bin/perl.exe
  
  use CGI qw(:standard); 	# 引用 CGI 模块
  $cgi = new CGI;
  $getname = $cgi->param("yourname");
  print $cgi->header( -type=> "text/html");
  print "<p>Hello $getname!</p>";
  

• 웹 페이지와 CGI 간의 완벽한 협력을 실현하기 위해서는 APACHE httpd 서버의 메인 프로그램을 설치하고 public-html 및 cig-bin 폴더를 설정한 다음 웹 페이지와 해당 CGI 프로그램을 해당 폴더에 넣어야 합니다. APACHE의 외부 주소를 통해 대화형 웹 페이지를 성공적으로 실행하려면 CGI 파일 읽기 및 쓰기 권한을 설정하는 데 주의하십시오.

• 참조:
  Windows에서 Apache(httpd) 서버 설치 및 구성 소개
  , Apache(httpd) 설치 및 사용 방법(linux)

---