교과목 주소 : 산동대학교 생물정보학
기사 디렉토리
여덟, 프로그래밍 기초와 웹페이지 제작
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 Programs
Programs 폴더 의 모든 항목 나열ls ls
현재 폴더에 있는 모든 콘텐츠의 세부 정보 나열
남자 명령
man
명령어는 리눅스에서 help 명령어 로 man을 통해 리눅스에서 명령어 도움말, 설정 파일 도움말, 프로그래밍 도움말 등의 정보를 볼 수 있다.man ls
ls 명령의 도움말 파일 보기
왼쪽 상단 에 "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=3
scale=number로 소수 자릿수 설정quit
bc 계산기를 종료하려면 quit를 입력하십시오.
중요한 단축키
Tab
키가 자동으로 완성됩니다 . [Tab] 키에는 "명령어 완성"과 "파일 완성" 기능이 있습니다.
전체 파일 이름이나 명령 이름이 기억나지 않을 때 처음 몇 글자를 입력하고 [Tab] 키를 누르면 자동으로 완성되거나 충분한 힌트가 제공됩니다. [Tab] 키를 잘 활용하면 많은 입력 오류를 피할 수 있습니다.
ls .bash
ls .bash를 입력하고 [Tab] 키를 두 번 누르면 .bash로 시작하는 모든 파일이 표시됩니다.Ctrl + C
작업을 종료합니다 .
Linux에서 잘못된 명령이나 매개변수를 입력하면 이 명령이나 프로그램이 계속 실행되는 경우가 있는데 이때 [CtrI]-c를 눌러 현재 명령이나 프로그램을 "정지"시킵니다.
디렉토리 및 경로
- 자세한 내용은 비디오를 참조하십시오. Linux Basic Commands-02 P136
- 기호는 특수 디렉토리를 나타내는 데 사용됩니다.
.
이 계층의 디렉토리(현재 디렉토리)
..
는 이전 계층의 디렉토리입니다.
-
이전 작업 디렉토리 "현재 사용자"가 있는
~
기본
/
폴더 루트 디렉토리 - 디렉토리 조작을 위한 몇 가지 명령
pwd
현재 디렉토리 표시
cd
디렉토리 변경
mkdir
새 디렉토리 생성
rmdir
빈 디렉토리 삭제
-
cp
복사 명령
cp 명령은 하나 이상의 소스 파일 또는 디렉토리를 지정된 대상 파일 또는 디렉토리로 복사하는 데 사용됩니다.
cp test.txt test/test2
test.txt 파일을 현재 디렉터리의 test 폴더에 있는 test2 폴더에 복사하고 이름은 변경하지 않습니다.
cp -r /test test3
test 폴더 아래의 모든 파일과 하위 디렉터리를 현재 디렉터리에 복사하고 이름을 test3 폴더로 바꿉니다.
-
rm
삭제 명령
rm 명령은 디렉토리에 있는 하나 이상의 파일 또는 디렉토리를 삭제할 수 있으며 디렉토리와 그 아래의 모든 파일 및 하위 디렉토리도 삭제할 수 있습니다.
rm -i test.txt
test.txt 파일을 삭제합니다. 삭제하기 전에 사용자에게 묻고 삭제를 확인하려면 y를 입력하고 삭제하지 않으려면 n을 입력합니다.
rmdir test
디렉토리 삭제 명령 rmdir을 사용하여 테스트 폴더를 삭제하려고 하면 오류 메시지가 반환되고 삭제할 수 없습니다! 비어 있지 않은 디렉토리를
rm -r test
삭제하려면 rm 명령과 -r 매개변수가 필요합니다.
mv 이동/이름 바꾸기 명령
- mv 명령은 파일 또는 디렉토리의 이름을 바꾸거나 한 디렉토리에서 다른 디렉토리로 파일을 이동하는 데 사용됩니다.
참고: mv와 cp의 결과는 다르고 mv는 파일을 "이동"하는 것으로 보이며 파일 수가 증가하지 않았습니다. 그리고 cp는 파일을 복사하고 파일 수가 증가합니다.
이동 :mv test.txt test
test.txt 파일을 테스트 폴더로 이동합니다. 대상이 디렉토리인 경우 소스 파일은 파일 이름을 변경하지 않고 그곳으로 이동됩니다.
이름 변경 :mv test.txt test1.txt
test.txt 파일의 이름을 test1.txt로 변경합니다. 대상이 디렉터리가 아닌 파일인 경우 원본 파일 이름이 대상 파일 이름으로 변경되고 동일한 이름의 기존 파일을 덮어씁니다 .
텍스트 파일 조회 명령
-
cat = 첫 줄에서 마지막 줄로
cat test.pdb
화면에서 파일의 첫 줄부터 마지막 줄까지 계속 스크롤합니다.
Ctrl+S
키: 스크롤 중지,Ctrl+Q
키: 스크롤 재개,Ctrl+C
키: 명령 종료 매개변수 "-n
"는 행 번호를 인쇄합니다. -
tac = 마지막 줄에서 첫 줄로
tac test.pdb
"cat"과 달리 화면에서 계속해서 파일의 첫 줄로 마지막 줄을 스크롤합니다. -
more = 페이지별로 앞으로/뒤로 탐색
more test.pdb
한 번에 한 화면씩 텍스트 표시 , 전체 화면일 때 중지. 키: 다음 화면의
Space
내용 표시 ; 키: 다음 줄의 내용 표시 ; 키: 이전 화면 의 내용 표시 ; 키: 종료Enter
B
Q
-
less = 페이지별로 앞으로/뒤로 찾아보기
less test.pdb
more 명령과 매우 유사합니다. 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/>
으로 정의할 수 있습니다 . 수평선 레이블은 빈 레이블이며 로 축약될 수 있습니다 .size
width
align
color
<hr/>
<p>This is a pencil.</p> <hr width="100" color="blue" align="left"/> <p>This is a pen.</p>
-
텍스트 형식 레이블 텍스트의 표시 형식은 (크기), (글꼴), (색상) 속성을
<font></font>
통해 정의할 수 있습니다 .size
face
color
<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>
사용하며 글머리 기호는 속성을 통해 " (사각형)", " (원)"으로 정의 할 수 있으며 기본값은 " ( 점 )"입니다. 각 항목은 하위 태그로 표시됩니다.type
square
circle
disc
<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" 입니다 . 각 항목은 하위 태그로 표시됩니다.1
a
i
<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
지정 하고, " (폭)"과 " (높이)"를 통해 그림의 표시 크기를 정의한다 . 이미지 태그는 빈 태그이며 로 축약할 수 있습니다 .width
height
<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>
정의합니다 . ◆ 속성은 선 너비를 정의 하고 속성 은 테이블 너비와 높이를 정의합니다.border
width
height
<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>
align
valign
<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)