[음악 연주] DAVID J 마란 : 좋아, 다시 오신 것을 환영합니다. 이 CS50입니다. 이 주 일곱의 끝입니다. 그리고 그 폐품의 종말 문제에서 사냥 사를 설정 당신은 기억 할 수있다. 전부를 회수하고 직원의 그 JPEG 파일, 당신이 원하신다면 당신은 도전했다 많은 자신을 촬영하는 당신이 할 수있는 그 사람의. 우리는 제출의 전체 무리를 얻었다 지난 몇 주 동안, 사실, 꽤 많은 권리 정오 전에 오늘, 그 중 일부는, 여기에 그들이다 애넌 버그 라니 보이는 말야 ... 여기 발견 여기에 근무 시간에 홀, 하나 닉과 로웰 하우스. 여기 라몬는 휴대 전화에 잡히지입니다. 이 CS50 점심에 있었​​다. 이 제이슨과 Skyping했다 창조적 인 동급생, 누가 그에게 이런 식으로 전화를 걸었다. 우리는 이것이 무엇인지 모른다. 

[웃음] 

DAVID J 마란 :하지만 즉 기가 바이트 가치가있다. 여기 장, 누가 말 그대로 무대를 도망 한 촬영되는 일을 방지 할 하루,하지만 결국 붙 잡혔다. 여기에 닉입니다. 여기에 닉입니다. 여기에 닉입니다. 그리고 여기에 앨리슨 아래로 필드에 있습니다. 그리고 Zamyla도 발견되었다 볼룸 경쟁에서. 그래서 우리는 통과합니다 이 사진은 파악 누구 제출 한 가장 초기 및 보상 하나의 멋진 상품 등 사양에 약속했다. 그리고 우리는 또한 약 드리겠습니다 포함 된 공간. 

announcements-- 그래서 점심의 커플 다시 1:15 PM에 이번 금요일입니다. 당신이 우리와 함께하고 싶다면, 여기에 해당 URL에 답장. 제이슨 하나를 여기에 다시 나타납니다 년의 섹션의 몇 다시, 어떤 일이 할로윈에 가을. 그리고 실제로, 그는 같은 옷을 입고 특정 년 호박. 이 섹션을 볼 경우 자신의 일에서 2011 섹션의 여덟, 당신이 궁금해하는 경우, CS50.tv에서, 나는 생각한다 이 해였다있는 그의 공기 펌프가 작동했다. 

당신은 다음을 볼 경우 2012 년과 유사한 부분, 당신은 많은 수축이 제이슨을 볼 수 있습니다 소송은 더 이상 작용하지 않기 때문에, 어떤 말을 만입니다 금요일, 당신이하려는 경우 데 이븐와 호박을 개척하고자 그리고 게이브와 다른, 머리에 답장 cs50.harvard.edu 주소. 그것은 큰 즐거움이 될 것입니다. 데 이븐, 우리는 말했다 새겨 져있어 그의 삶의 모든 호박. 브라질 가브리엘은 결코 없습니다 할로윈 호박 조각. 그는 배운다 그래서 그들과 함께있을 수. 

세미나, meanwhile-- 그래서 당신은 빨리 배울 수 있습니다 에 대한 어떤 기대가됩니다 최종 프로젝트, 이는 본질적으로 졸이다 것 디자인 및 구현 관심의 프로젝트에 가장 승인을 조건이기는하지만 여러분, 당신의 교육 동료의지도. 의 끝으로 학기, 우리는 수 소개 옵션 클래스입니다 세미나,의 조교와 하버드에 의해 주도 직원, 전체 코스의 친구 다양한 주제에 캠퍼스, 그 접선 있습니다 과정의 기본 강의 하지만 그럼에도 불구하고 적용, 재미, 그리고 잠재적 인 최종 프로젝트에 대한 다른. 

예를 들어, 첫 번째, 당신이 원하신다면 이 해당 URL에, 머리를 등록합니다. 그리고 이것은의 라인업입니다 혼자 올해의 세미나. 그러나 우리는 수십 깨닫는다 년 과거의 세미나, 모두의 세미나 메뉴에 연결되어 물론 웹 사이트의 옵션을 선택합니다. 당신에 대해 생각하고 그래서 경우 당신의 안락 지역을 넘어 또는 새로운 기술을 따기, 예를 들어, 아이폰 프로그래밍 스위프트, 새로운 언어와 애플 리케이션 애플 또는 목표 - C에서 또는 안드로이드는 앱 또는 프로그래밍 [? 큐?] 전구, 또는 항목 중 여기에 더 때문에 검진 등록 페이지가 부족합니다. 

그래서 우리는 시작에 결론 HTTP를 찾고 월요일. 너무 빨리 refresher-- HTTP, 하이퍼 텍스트 전송 프로토콜. 하지만 정말 무엇을 의미 하는가? 정말 무엇을 의미 하는가? 그게 손인가? 나는 당신이 당신의 머리를 긁적 거 알아요. 하지만 당신은 HTTP가 무엇인지 제시 할? 

청중 : 어떻게 컴퓨터 [들림] 통신. DAVID J 마란 : 나는 마지막 부분을 놓쳤다. 컴퓨터 먹게됐다 통신하는 방법 

청중 : 인터넷 서버. DAVID J 마란 : 인터넷과 소용이 서버, 구체적으로는, 웹 서버. 리콜 때문에, 한 무리있다 인터넷 서비스, 일부의 당신은 채팅 사이에 매일 아마 사용 및 메시지, 채팅, 웹, 이메일, 등을들 수있다. 그리고 HTTP는 단지입니다 프로토콜 웹 브라우저 그 와 통신 할 때 말하는 웹 서버, 반대의 경우도 마찬가지. 그리고에서 아날로그 인간의 세계는, 수 있습니다 나는 몇 가지를 흔들어 내 손을 확장 다른 사람의 그 또는 그녀 확장하여 인정 자신의 손뿐만 아니라. 그래서 그냥 프로토콜입니다, 규칙의 집합. 

그리고 그 규칙은 참으로 무엇인가? 음, 그냥 아래로 비등 앞뒤로 메시지 전송, 우리는 여기에 묘사 된 것처럼. 그리고 몇 가지 방법에있다 이는 당신이이 메시지를 보낼 수 있습니다. 그리고 아마도 가장 일반적으로는 GET으로 알려져있다. 그리고 우리는 대조를 볼 수 있습니다 이 긴 전에. 

그러나 브라우저에서 GET 요청 서버에 바로 다음과 같습니다. 그것은 박았 텍스트의 무리이다 가상 봉투의 내부. 그 봉투의 외측에 세부의 몇 조각을 이동합니다. 무엇에 갈 필요가 봉투는, 그래서, 말하자면 같은 요청을 얻기 위해서는 웹 서버 나에게서이? 그래. 

청중 : 당신의 IP 주소. 

DAVID J 마란 : 내 IP 주소 에서 필드에, 말하자면, 그리고 물론, 받는 사람의 IP 주소입니다. 하지만 웹 패킷의 경우, 우리는 좀 더 자세하게 필요 그것은 단지에 충분한 아니다 서버에 봉투를 보내, 해당 서버는 수 있기 때문에 다른 유형의 듣기 인터넷 트래픽의. 그래서 다른 우리가해야합니까 받는 사람의 IP 외에? 그래? 

청중 :이 TCP인가? DAVID J 마란 : 좋은. TCP-- 

청중 : 주소. 

DAVID J 마란 : 주소, 또는 호출의 포트로. 닫기하지만, TCP 포트 번호입니다. 그리고 이들의 무리가있다. 그러나 확실하게 가장 익숙해야 결국 기본이되는 것입니다, 80 일 하나는 웹 트래픽에 사용. 그리고 다른 친숙한 하나는 곧 443이 될 것입니다 이는 보안 웹에 사용되는 교통, https로 시작하는 URL. 

그래서이 간다 무엇인가 그 봉투의 내부. 그리고 얻을 / 그냥주는 의미 내가 기본 웹 페이지를 참조하십시오. 나에게 하드의 루트를 줘 해당 웹 서버에 드라이브. 그리고 희망, 웹 OK,로 응답합니다 서버 단, 전화 번호 (200), 모든, 그래, 말 대회 참으로 OK입니다. 다음 페이지입니다. 웹 페이지의 종류는 것입니다 텍스트 일​​ 수 있지만,보다 구체적으로는, HTML, 이는 우리가 뒷면에 뛰어들에 대한 것입니다. 그리고 도트 도트는 도트 수단, 여기에 HTML입니다. 그리고 그게 어디 우리 오늘 이야기를 데리러 실제로, HTML을 작성 하이퍼 텍스트 마크 업 언어, 어떤 언어가되는 웹 페이지가 기록됩니다. 그것은 프로그래밍 언어 아니다. 아무런 기능이 없다 또는 루프 또는 조건. 이것은 마크 업 언어이다, 뿐만 아니라 오늘 다시 참조 즉, 사용자가 지정 할 수 있습니다 구조와 스타일을 적용하는 방법 심미적으로 웹 페이지. 

그래서 이것은 하나 만 페이지 우리 정말 간단히 경우 월요일에, 바라 보았다. 그리고 몇 가지주의 두드러진 특징. 열린 각도가 많이있다 브래킷과 가까운 각도 브래킷. 그 각도 사이에서 괄호는 단어입니다. 그리고 우리는 시작하는거야 그 단어 태그를 호출. 그래서 열린 브래킷 머리 닫힌 브래킷 머리 개방과 폐쇄 태그입니다, 또는 시작과 끝 태그 각각 HTML 요소, 우리가 전화 할게로, 머리를했다. 그리고 같은 전문 용어가 적용됩니다 HTML에 등 몸에. 

그리고 어떤 좋은 것은이다 HTML-- 실제로, 우리는거야 거기에 정말 약간의 시간을 보내고, 당신은 대부분 단지 알아낼 것이기 때문에 무엇을 제공하는 때가 실제로 구체적인 문제가 당신이 그것을 찾을 수 solve--합니다 브라우저는 꽤 바보입니다. 그냥 달리하지를 싫어합니다 것 당신이 그것을 말해 무엇 computer--. 그리고 당신이 열려있는 경우 맨 위에 브래킷 HTML 거기에, 그 본질적 다만 의미, 헤이, 브라우저, 여기 HTML로 작성된 웹 페이지가 온다. 

그것은 오픈 브래킷을 볼 때 다만 의미 머리,, 이봐, 브라우저, 여기에 머리를 제공, 또는 내 웹 페이지의 맨 위 부분. 그것은 폐쇄 브래킷을 볼 때 다만 이봐, 의미 머리,, 즉, 머리를합니다. 뭔가 다른 대기. 그리고 다른 그 무언가가있다 분명히 몸이 될 것이다. 그리고 당신은 태그, 등이없는 경우 당신은 그냥 인사, 쉼표, 세계를 그건 그냥 원시 텍스트가 될 것 그 궁극적으로 화면에 표시됩니다. 

이제, 당신도 알 수 있습니다 여기에 들여 쓰기. 당신은 아마 추측 할 수 어떻게 우리가 그것을 stylizing하고 있습니다. 내가 태그를 열 때마다, 말하자면, 나는 들여. 그리고 때마다 나는 닫습니다 태그, I 유엔 들여 쓰기, 중괄호 정신에는 변함이. 그리고 그 이상, 나는 종류 해요 내 판단을 사용. 내가 타격 귀찮게하지 않았다 공지 사항 그 제목 태그의 내부에 입력합니다. 왜? 글쎄, 난 그냥 보았다 결정 나에게 작은 청소기, 인간, 단지 그 일을 귀찮게하지합니다. 그래서 다시, 거기에 몇 가지 판단은 호출 같은 C 또는 언어가있다. 

그러나 너무주의 사항이 들여 쓰기는 정신 모델에 빌려 준다, 하지를 복잡하게 이상합니다. 그러나 나무, 맞죠? 당신은 웹을 생각하면 페이지, 분명히 기록 이와 같이, 인 등 잘, 그런 식으로 들여 쓰기 당신은 거의 오픈 브래킷 생각할 수 HTML 폐쇄 브래킷 태그의 경계를한다 노드의 루트 가계도 나무의 스타일에서 스타일 노드 우리는 지난 금요일 보았다. 

그리고 실제로, 우리는 바로 여기에있다 우리는 DOM, D-O-M, 문서 전화 할게 무엇 개체 모델, 말하는 멋진 방법 그 HTML을 대표하는 나무. 그리고 HTML가 가지고있는 것을 알, 우리는 말할 것이다 가계도, 두 아이 같은. 왼쪽 머리입니다. 오른쪽에 기관이다. 

단지 어리석은 생각 운동으로, 머리는 물론, 얼마나 많은 아이가 이러한 구조에있어서? 그래서 한, title-- 우리가 가지고있는 이유입니다 제목에 머리에서가는 화살표. 그래서에서 그 사람처럼이다 가계도는 한 자손을했다. 그리고 제목 자체는 수 너무 아이를 말할 수. 

HTML이 있다고하자 안녕하세요, 쉼표, 그 아래의 세계. 그리고 나는 단순히 내에서 그려했습니다 대신 사각형의 타원형 단지 그하더라도 의미 전달하는 이는 말하자면, 트리에서 노드의, 그것은 일종의 근본적으로 다르​​다. 이 태그 아니다. 또는 더 적절하게, 그것은 요소 아니다. 당신이 경우 그것은 단지 텍스트 노드입니다. 그러나이 완전히 아르 임의의 인간의 규칙. 이것은 단지 지금 방법입니다 집계로 내가 정액을 나타내는 문서를 호출합니다. 

그리고에서 제외하고, 일 등 슈퍼 왼쪽 상단 모서리, 대괄호 느낌표 문서 형 HTML,이, 태그처럼 보인다 하지만 바보 코너 케이스 곳입니다 그 그냥 거기, 복사 및 붙여 브라우저를 표시합니다 이 HTML 버전 5입니다. 세계는 무엇을 변화 유지 페이지 코드의 첫 번째 줄 수 있어야합니다. 이것은 단지 버전 5를 의미한다. 그래서 꽤 않습니다 다른 사람처럼 보인다. 

그 너무 좋아, 당신은 지금 감사합니다 말했다 이 공정이 바보 문신 사람이 있어요. 

[웃음] 

DAVID J 마란 : 좋아, 지금 실제로 다이빙의하자 이와 일을 넣습니다. 당신은 그 마지막 시간을 기억합니다 나는 CS50 어플라이언스를 열어 나는 같은 짓을 개방의 gedit 간단. 그리고 난에 파일을 저장 내 desktop-- 아무 special-- hello.html있다. 

그래서 내가 그렇게하자 again-- hello.html를 누릅니다. 그리고 지금은이 파일에, 내가 갈거야 가서 복제 우리 단지 안됐어 문서 형식 HTML은 다음 나는 갈거야 열린 브래킷 HTML 폐쇄 브래킷을한다. 그리고 나서 선제에 갈거야 열고 태그를 닫습니다. 왜? 그냥 나중에 잊지 마세요. 그것은 개방처럼, 단지 좋은 습관이다 그리고 한 번에 모두 닫기 중괄호. 

그리고 무슨 일이 다음에 온거야? 당신은 문신 생각할 수 있습니다. 

청중 : 머리. 

DAVID J 마란 : 머리. 그리고 여기에서, 나는 제목을했다, 나는 생각한다. 그리고 제목, 임의로이었다 안녕하세요, 세계 닫기 제목입니다. 그리고 여기에 아래로, 몸의 course-- 우리는 body 태그를 닫습니다. 그리고 단지 다소 중복, 나는 아래로 여기에 같은 일을했다. 

그래서 나는이 웹 페이지이라고 주장한다. 이것은 뭔가 그 이제 웹에서 살 수있는, 도 물론 있지만, 그것은 말 그대로 지금 내 바탕 화면에 살고. 그러나 실제로, 내가 gedit를 최소화하는 경우, 내 바탕 화면의 아이콘을 볼 수 있습니다. 이 장비가 있다고해도, 당신은 맥 OS에서이 작업을 수행 할 수 텍스트 편집기없이 또는 메모장과 윈도우. 

그리고 내가 가서 더블 클릭 심지어, 그리고 선택해 아니라,의를하자 때문에 그 선택하지 크롬은 개방 아니에요. 이제 가서 크롬을 열 수 있습니다. 다음 명령-O 열기를 할 그리고 내 바탕 화면으로 이동 해당 파일을 엽니 다. 브라우저가 해석하는 방법 때문이다 HTML, 위에서 아래로는, 왼쪽에서 오른쪽으로. 이봐, 브라우저가 여기에 HTML입니다. 여기에 머리입니다. 여기에 제목입니다. 여기에 몸입니다. 그리고 사실,이 방법입니다 그것은 그 웹 페이지를 렌더링합니다. 

그러나 URL을 확인할 수 있습니다. 당신의 없음이 특정을 끌어 없었다 지금 당신의 노트북에 페이지, 심지어 내부 당신의 그 URL을 통해 기기, 파일 때문에 : //는 사실의 표시 내 파일 시스템 내 하드 드라이브, 하지 당신. 그래서이 모든 것을 유용하지 않습니다. 

의 지금으로 이동하자 실제 웹 서버를 사용. 그리고 CS50 어플라이언스를 밝혀 단지 환경​​ 곳보다 더 당신은 C 코드를 작성하고 컴파일 할 수 있습니다 당신이하고 있었던 것 같은 그것을 실행합니다. 또한 의해 구성된 직원은 일반적인 웹을 대표하는 인터넷의 서버, 당신이 지불 할 수 하나 소위 클라우드에서 나 하나. 

그리고 실행중인 표준 무료 오픈 소스 소프트웨어, 예를 들어, 뭔가 아마도라는 아파치, 여전히 가장 인기있는 웹 세계에서 서버 소프트웨어 수천 개의 웹 사이트가 현재 사용하는. 그리고 그것은 또한도있다 MySQL은 같은 소프트웨어, 이는 데이터베이스 서버 인 우리는 결국 얻을 거라고, 어떤 말을 만입니다 나는 치료를 시작할 수 있습니다 전체 깃털 서버로 내 기기 제가 다른 곳에서 못 내요. 그냥 내 자신의 노트북에 살고 개발과 편리함 목적. 

그럼 가서하자 이 활용. 나는 앞서 갈거야 및 터미널 창을 엽니 다. 그리고 앞서 갈거야 및 처음 난, 실제로 move-- 내 바탕 화면으로 이동하는 것. 내가 LS 할 경우, hello.html있다. 그리고 나는 갈거야 앞서 및 사용 시작 우리가했습니다 새로운 디렉토리 오늘 이전에 사용되지 않습니다. 

hello.html-- 나는 이동하는거야 가상 hosts--에 대한 ../vhosts에 다음 future--과에서 해당에 대한 자세한 로컬 호스트라는 디렉토리에, 거의에게 주어진 별명은있다 어떤 컴퓨터가 맥, PC의 여부, 리눅스 컴퓨터 다음 또는 특히 디렉토리에 그 우리, 직원은 이미 때를 위해 만든 당신은라는 제품을 다운로드 공공. 그리고 그 이름은, 아무것도 알 수 있듯이 나는 이론적으로,이 폴더에 넣어 지금이 될 것입니다 공공, 적어도 사람들에게 직접이있는 사람 내 컴퓨터에 연결. 

그래서 지금 내가 가서하자 같은 디렉토리에 CD를 할 그래서 나는 무엇을 볼 수 있습니다 에 가서 ls를 입력. 그리고 사실, 그건 거기에 유일한 것. 나는 지금이 넣어 가지고 있기 때문에 주장 디렉토리 안에 hello.html 파일 디렉토리의 공공 내부라고 디렉토리의 내부라는 로컬 호스트 라는 가상 호스트, 어떤 CS50 직원 덕분에 로 사전 구성되어 있습니다 웹 서버의 루트, 지금은 희망이 작업을 수행 할 수 있습니다. 

나는 새 탭을 열거야. //을 : 그리고 파일을하지 갈거야. 나는 실제 사용하는거야 HTTP / localhost를하는 다시, 별명이다 내 자신의 서버. 그리고 나는에 갈거야 무슨 파일 이름, 단지 명확하게? 이 이야기는 아마 어디거야? hello.html. 

즉 그래서, 지금이 원하는 내 컴퓨터, 내 자신의 장비이며, 그것이 실제 서버의 것처럼. 별명은 localhost입니다. 그러나 로컬 호스트의 생각 등 Facebook.com google.com, 뭐든간에. 그냥 내 로컬 이름입니다. 그리고 내가 원하는 마지막은에 하드 드라이브의 루트는, 그래서, 말하자면 또는 웹 서버의 루트, 다음 슬래시 ERGO과 파일 이름 hello.html. 

나 축소를 입력하고 Enter 키를 누르십시오 보자. 그리고 실제로 지금 내 웹 페이지가있다. 그래서 약간 다릅니다. 그리고 그것은 단지 실망으로합니다. 이것은 이전 버전입니다. 나를 위로 글꼴을 축소 할 수 있습니다. 이것은 오래된. 이 새로운 기능입니다. 그러나 근본적으로 무슨 일이야 이제 HTTP를 사용하고 있다는 점이다. 

의이 조금 더 명확 나 만들어 보자, 좀 더 복잡한, 당신이됩니다. 나 오른쪽 하단에 가자 내 기기의 모서리. 그리고이 모든 것을 알 수 시간은 숫자가있었습니다. 즉, 고유 한 주소입니다 당신의 CS50 어플라이언스의. 그것은 개인 주소입니다 172.16에 의해 묵시적으로, 이는 단지 만 물리적으로 의미 이 웹 서버에 액세스 할 수 있습니다. 모든 것이 방화벽되고 잘 나머지 보호 이 때문에 세계의 주소. 

내가 가면 이제하지만주의 나의 기기에이 주소, 하지만 맥 OS--에 나는 갈거야 여기에 돌아갑니다. 이 지금 내 맥입니다. 지금은 개방하고 여기에 크롬이 버전. 그리고 HTTP에 갈거야 : //172.16.25 / 나는 rest-- (133) 잊어 버려. 

그래서 난 내 맥에서 방문하는거야 그 IP 주소를 입력 /hello.html. 그리고 지금은 내 맥에서 볼 내 CS50 어플라이언스 것을, 사람이다 IP 주소는 점이다 번호, 실제로 작동하고 인터넷에서 웹 서버 등을 포함한다. 그것은에 좋은 쉬운이 없습니다 Facebook.com과 같은 이름을 기억, 그러나 HTTP 사용하고 분명히, 비록 크롬 종류의 세계를 단순화한다 우리하지만 HTTP 우리를 표시하지. 그러나 이것은 참으로 정확히이다. 크롬은 그냥 몇 가지 사항을 저장 요즘 키 입력. 그리고 우리가 지금 무엇을보고합니다. 

그래서 잘 할. 그러나 그것은 꽤 실망 페이지입니다. 내가 가서 일을하자 지금은 조금 다르다. 그래서 날의 gedit로 돌아가 보자. 대신 인사의가, 세계는의 이미지를 만들어 보자. 그리고 나는 나 가자 before--에서 주장 내 로컬 호스트 디렉토리 공개에. 그리고 내가 가서 복사하자 오늘부터 파일의 전체 무리 내 드롭 박스 폴더에서 여기에. 

내가 LS를 입력하면 이제 봐 모든 파일에서 나는 배포했다고 오늘의 사전에 코스의 웹 사이트, 하나는 여전히 hello.html이다. 그래서 하나가있다. 그리고이 바보를 기억 마지막 외엔 cat.jpg에서. 그래서 저를 포함 해보자 내 웹 페이지의 내부 cat.jpg. 

나는 앞서 갈거야 와, cat.jpg을 저장합니다. 나 크롬으로 돌아 가자. 그리고 저를 확대하자 글꼴 이제 다시로드합니다. 아차,이 어디에 넣어? Standby-- 나는 여전히 이전을 내 바탕 화면의 개방에서 버전. 그래서 내, 내 가상 호스트로 가자 localhost를 내 공개 및 hello.html. 그래서 지금 내가 가서하자 몸의 내부 cat.jpg 말 내가 원하는 곳이 될 표시 및 다시로드합니다. 물론, 이것은 올바르지 않습니다. 

그래서 브라우저에게 조금 말할 필요 더 신중하게 내가하고 싶은 것을. 단순히 이름이 입력 분명 충분하지 않습니다. 그래서 다른 있다는 것을 기억 태그, 이미지, 짧은 IMG. 그건 그냥 인간 때문에이야 유형 전체 단어를 좋아하지 않는다. 그리고 우리는 = "cat.jpg를"소스를 할 수 있습니다. 

그리고 지금 내가 할거야 여기에 한 가지 다른. 심지어 모든하지만 우리 태그는 지금까지 가질 이 개념을 가지고 있었다 시작 태그와 종료 태그, 정말하지 않습니다 이미지에 대한 의미, 권리? 이미지 중 하나가 아닌지있다. 그래서 인간은 온 간단한 규칙을 가진 최대. 당신은 태그가 때 할 수있는 두 시작과 같은 것 외엔에 종료 그것은 그래서 그냥 speak--하기 위해, 비어있을 수 태그 내부에 슬래시를 넣어 맨 마지막에. 이제 내 브라우저로 다시 가자. 다시로드 젠장, 뭔가 잘못 누르십시오. 당신은 아마 본 적이 때때로 웹, 경우에도 그것은 당신의 잘못되지입니다. 그것은 웹 서버의 잘못이다. 무엇 송가이 시사? 그것은 깨진. 이미지가 속한 곳이다. 그래? 

청중 :하지만하지 않습니다 이미지에 액세스 할 수 있습니다. 

DAVID J 마란 : 그것은하지 않습니다 이미지에 액세스 할 수 있습니다. 즉, 또는 더 나쁜, 어쩌면 심지어는 존재하지 않습니다. 우리가 진단을 할 수 있는지 보자. 마지막에서 기억을 되살려 그 크롬, 어플라이언스, 또는 Mac 또는 PC에, 당신은 개발자 메뉴로 이동 및 개발자 도구로 이동 옵션, 아마 당신이했습니다 별로 또는 지금 사용. 그리고 네트워크로 이동하는 경우 하고 페이지를 다시로드, 의 실제로 HTTP를 살펴 보자 이루어지고있다 요청. 

hello.html 인 것 같습니다 참으로 OK, 따라서 (200). 그러나 cat.jpg는 403입니다. 그래서 404이 아니다. 파일은 아마 존재한다. (403)는 금지 된 것을 의미한다. 그래서 조금 혼란 스럽다. 난 다시 갈거야 내 터미널 창에. 나를 여기까지 확대 할 수 있습니다. 그리고 나를 LS를 할 수 있습니다. 그 같은 파일이있다. 

이제 나를 LS-L을하자, 당신은 아마했습니다있는 파일을 보시려면 이전에 사용 크기 또는 어쩌면 타임 스탬프. 그리고 우리의 전체 무리를 참조 압도적 인 정보를 제공합니다. 그러나 몇 가지 세부 사항을 알 수 있습니다. 여기에 hello.html이에있어 여기에 행 여기 cat.jpg입니다. 그리고 그것은되는 단지 어플라이언스의 JPEG의 강조 표시하여 사용자 친화적 인 이 같은 자주색. 하지만 다른 어떤 것은 옆에 다른 파일 크기와 파일명? 

청중 : [들리지]. DAVID J 마란 : 네, 거기에 의 여기 두 개 더 R. hello.html이 진행 것에 주목하라. 그래서 이름 밝혀 이 디렉토리 대중은 중요하다. 이 디렉토리에 아무것도 공개하기위한 것입니다. 그러나 충분한 아니다 그냥 거기에있는 파일을 삭제합니다. 또한 변경해야 파일 모드 의 권한을 변경 파일 적극적으로하지 않음에 기본 설정 수, 이는 단지 내가 읽을 수 있다는 것입니다 내가 주인되고, 그 물품. 나는 전 세계 모든 사람들에게 원하는 말하자면, 내 파일을 읽을 수 있습니다. 단지 그것을 볼 의미 읽으십시오. 

그리고 참으로 당신은 문제에 볼 수 있습니다 일곱 설정, 그게 무슨 이러한 R의 평균입니다. 이 두 가지 R의 평균은 모든 사람을 보자 다른 세계도, 그것을 읽고 특히 지금 그것은이 디렉토리에 있습니다. 그래서이 문제를 해결하는 가장 간단한 방법이다 내 프롬프트로 이동 및 변경 chmod를 할 모드하고는, 모두, + 연구를 수행 모든 사람이 읽기에 대한 모든 플러스 R, 다음 cat.jpg를 누릅니다. 아무것도 일어날 것없는 일반적으로 좋은 일을 의미한다. 지금 again-- 그래서 LS-L 의는 cat.jpg 살펴 보자. 그리고이 권한 변경 한 것으로 보인다. 로 제쳐두고, 당신이 만드는 경우 실수하고, 예를 들면, 그냥 내가 에세이를 안다고하지 않는 너의 ... 만든 공개적으로 사고 액세스, 당신이 반대를 할 수-R chmod를. 솔직히하지만, 그것은해야하지 공용 디렉토리에 어쨌든는 우려가 있다면. 

그래서 이제 다시 가자 내 브라우저를 다시로드합니다. 그리고 클릭거야 작은 고스트 버스 터즈 기호는 그 부분을 취소합니다 화면은 그래서 우리는 새로운 요청을 볼 수 있습니다. 그리고 실제로, 여기 이전부터 Grump 고양이. 하지만 더 중요한 것은, 기술적으로,이 수 (200), 어떤 우리가 확인을 가지고 의미합니다. 좋아, 그래서 잘 할 전부입니다. 그러나 우리는 제작하지 않을 웹 사이트의 가장 좋은, 도 우리는 너무 열심히하려고 예정 웹 사이트의 좋은 호텔을 오늘합니다. 그러나의 적어도 일을 할 수 있도록 덜컹 거리는 전에 슈퍼 익숙한 몇 가지 다른 태그 끕니다. 그래서 난 그냥 여기에 고양이를 원하지 않는 가정합니다. 실제로이 원하는 가정 고양이는 무언가에 링크. 

나는 수도, 예를 들어 이 같은 뭔가. 대한 앵커 HREF에 대한 하이퍼 참조 equals-- 그리고 그냥 뭔가를 할 수 있도록 www.google.com 가까운 같은 대괄호를 인용. 그리고 지금 고양이를 검색합니다. 닫기 앵커 태그. 그래서 이것은 단지 한 종류가 있습니다 의 근본적으로 새로운 세부 사항. 물론 태그는 다르다. 이 앵커의 이름이다 HREF 또는 하이퍼 참조. 

하지만 더 중요한 것은, 거기에 여기에이 구문 기능입니다. 이것은 우리가 호출 시작합니다 것입니다 하지 태그,하지만 속성. 그리고 속성은 무엇인가입니다 태그의 동작을 수정합니다. 그리고이 속성, href를 수단 이 앵커의 동작을 수정 , 그것을 클릭있어 때 너무 여기이 URL로 이동합니다. 그리고 물론, 그 URL은 구글이다. 

한편, 어떤이는 될 것 여기에 텍스트? 그게 될 것 어떤 사람이 실제로 밑줄로 본다 링크, 아주 간단. 그럼 이것을 시도 할 수 있습니다. 내가 그것을 저장할 수 있습니다. 나는 hello.html 여전히 해요. 그러나 온라인 버전으로, 당신은 볼 것이다 우리는 실제 파일 이름은 미리 준비된. 내가 가서 다시 보자. 그리고 지금은 매우있어 여전히 실망 페이지. 하지만 가리키면 저기 그리고, 조금 작습니다 하지만 ... 당신은 아래에서 볼 수 있습니다 화면의 왼쪽 구석, 그것은 참 google.com거야. 나는 그것을 클릭하면, 그것은 것입니다 나에게 실제 구글에 길을 터. 

그러나 기회 여기를 주목 단지 옆으로 착취. 그리고 우리는 다른 돌아올 것이다 오래 전에 보안 문제를 해결합니다. 이 이분법 거기 때문에 당신이 가서 당신이 무슨 말을 어디 사이에, 당신처럼 뭔가를 할 수 이 겁니다 http://www.google.com. OK, 지금은 다시로드하는 경우 해당 페이지를 저장 한 후, 나는 Google에 갈거야 것 같습니다. 그러나 이유가 없다 I 바로 구글에 가야? 사실과 같이 갈 수 badguy.com은 여기 페이지를 다시로드. 그리고주의 사항, 여전히 구글처럼 보인다. 그리고 날카로운 해요 경우에만 여기에 마우스를 충분히 나는 그것이도에 무슨 참조 할 다른 위치로 이동합니다. 

만약 당신이 왔다면 이메일, 특히 페이팔에서 하나, 또는 겉으로는 페이팔에서 묻는 것은 로그인합니다 귀하의 계정에,이 왜 당신은 결코해야 이제까지 이메일에있는 링크를 클릭, 솔직히, 이메일에있는 링크를 제공합니다. 당신이 알고있는 경우에 당신은 실제가 페이팔 또는 은행에 돈을 미국 또는 피델리티 또는의 웹 사이트, 수동에 입력. 그것이 얼마나 쉽게 보이기 때문에 제시로 사람을 속여 무엇 링크처럼 보인다. 그러나 실제로 수 절대적으로 어디서나 이동합니다. 

그리고 훨씬 더있다 이보다 더 위협. 사실, 이것은 비트가 접선의 지금, 그러나 1 최고의 것들 중 내가 지금까지 본 이는 이후 폐쇄 된 사람을 이끄는 사람이다 이 말할 수 그래서 난 ..., 에 로그인하려면 여기를 클릭 계정, 은행 계좌. 그리고 이것은 서구의 은행이었다. 

그래서 사람이 샀다. 그리고보고 조금 쉽게 모노 폭 글꼴은 확대 30 피트 프로젝터에. 그러나 작은 글꼴에의 할 때 당신이 수신하고 전자 메일, 이 bankofthewest.com처럼 보인다, 하지 bankofthevvest.com, 어떤 사람이 구입 $ 10 지불했다. 그리고 다음이로 주도 나쁜 웹 사이트의 상응. 

그리고 실제로 우리가 할 수있는 너무 ... 볼 내가 실제 웹 사이트로 이동하면이 겁니다, bankofthewest.com, 다시, 지난번 리콜 이 자신의 웹 페이지 인 경우 그와 당신은 어떻게 작동하는지에 관해서 궁금 당신은 확실히 갈 수 크롬의 개발자 도구. 그리고 당신은 모두를 볼 수 있습니다 HTML은 잘이 포맷. 

그러나 더 많은 지점, 당신의 닫을 수 있도록 cam-- 당신은보기 갈 수 이런것 개발자 소스보기. 왜 난 그냥 복사하지 마십시오 이 모든 그리고 I 내 작은 gedit를 창으로 갈 수 있습니다 여기에 내 자신의 웹 페이지를 확인합니다. hello.html이를 저장합니다. 그리고 아마이는 휴식 것입니다 보통이 쉽지 않다 때문이다. 그러나 나는 내 자신의 페이지를 다시로드 지금 경우 , CS50 어플라이언스와 히트 다시로드 내 자신의 OK, 몇 가지 물건을 끊었다. 하지만 필요에 아주 가까이 있어요 내 자신의 은행 웹 사이트, 맞죠? 이 모든 HTML-- 

[웃음] 

DAVID J 마란 : --i 사실상, 당신하지 않았다 누군가가 거기에있다 알고있는 사람 실제로 너무 이러한 링크를 클릭합니다. 그래서 명확하게, 몇 가지 물건을 끊었다. 그러나이 이어질 것 토론에 우리, 불필요하게 지금까지와 같은 어떤 CSS는 CSS 스타일 시트는있다 및 방법을 실제로 다른 HTML 파일을 다운로드 및 JPEG은 GIF 파일을 파일이 웹 사이트는 사용 될 수 있습니다. 그러나 모든 accomplishable입니다. 하지만 정말 아래로 비등 이러한 아주 간단한 휴리스틱. 

그래서 지금의 단지를 통해 대충 훑어 보자 HTML의 다른 예를 몇 당신에게 감각을 줄 수 있습니다 당신이 달리 무엇을 할 수 있는지. 예를 들어,이 list.html이다. 나는 웹 페이지를 만들고 싶었다 가정 쿼드 주택의 목록. 나는 순서가에 대한 UL 태그를 사용할 수 있습니다 목록 다음 목록 항목 아이 다음,에 시달리고 또는 목록 반복 문제의 주택을 rather--. 

나는이를 열 경우에,이 해 보자. 의는 hello.html하지 가자, 하지만 list.html합니다. 젠장. 나는이 문제를 해결하려면 어떻게해야하나요? 그것은 바로, 이전과 같은 문제입니까? 그래서 내가 chmod-- oops--을하자 chmod를 + list.html의 R. 그리고 지금은 내 브라우저에 가면 및 새로 고침을 클릭, 거기이다. 그래서 만약 당신이하고 싶었 한 경우 글 머리 기호 목록은, 당신은 그렇게 할 수 있습니다. 당신은 슈퍼 멋진하고 확인하려면 정렬 된 목록,하지 정렬되지 않은 목록, , OL에 그 변경 페이지를 다시로드하고, 이제 브라우저는 당신을 위해 번호를합니다. 

우리는 다른 무엇을 할 수 있습니까? 음, others--의 몇 가지 경우 당신은 text--의 긴 단락을 가지고 예를 들어, 일부 이런것 같은 라틴어 텍스트 당신은 별도의 단락에서 원하는, 열려있는 페이지, 단락 태그에 가까운 쪽. 그리고 또 다시 그것을 할. 그리고 지금은이 파일을 열 경우, paragraphs.html, 음,이 성가신지고 있습니다. 그래서 지금 그냥 다시 가자 내 프롬프트, + R의 R 스타 chmod를 .html-- 좋은 작은 와일드 카드 말하자면. 이 모든 문제를 해결해야한다 나에게 이러한 문제. 이제 다시 보자. 세 단락이있다. 

그리고 지금의 앞서 가자 그리고 다른 하나를 엽니 다. 어떻게 테이블에 대한? 당신은 테이블의 모습을 알 수 있습니다 좀 더 복잡한. 그러나 동일한 idea-- 야 열린 태그를 열고 태그, 개방, 개방, 열기, 닫기 태그를 열고 태그입니다. 그리고 이러한 정치 일 그 경계 테이블은 분명히있다 두께가 될 것 1-- 어떤 그 의미 하든지 .. 테이블 행, 테이블 셀의 데이터를 의미한다. 그리고 내 브라우저에 가면 여기 table.html로 이동 당신이 뭔가를 볼 수 있습니다 이 같은 끔찍한. 그러나 우리는 지점에 도착합니다 여기서 우리가 실제로 할 수있는 보다 일이 더 예뻐합니다. 

그러니 지금은 규정 할 수 있습니다. 이상의 태그 큼있다. 그리고 HTML은 데리러 훌륭합니다 때문에, 솔직히, 모든 당신이 할 필요가 기존의 웹 페이지를 보면됩니다 있는 당신은 잘 알고. 그리고 당신은 아, 방법, 같은거야 그들은 예술이했다. 

또는 당신은 온라인으로 찾아 볼 수 있습니다 HTML의 작동 방법에 대한 자원, 당신은이 있다는 것을 볼 수 있습니다 다른 태그의 전체 어휘. 그러나 간단한 정신 모델 혼자 열려는 거의 모든 태그 정말, 그것을 폐쇄되어야한다 자신을 가르 칠 충분 않습니다 HTML 후 이해 태그 이러한 기본 개념 속성과 적격성 및 우리가 이야기 한 것을, 우리가 열릴 수 있습니다 닫는 아무것도 그래서 우리는 브라우저를 혼동하지 마십시오. 그래서 지금이 보자 더 흥미로운 수준 실제 이동하여. 그리고 이제 나의 Mac으로 가자 여기에, google.com에. 그리고 지금 notice--의이 작업을 수행 할 수 있습니다. 나는에 가서 징 해요 설정, 검색 설정. 나는이 짜증나는 순간을 해제 할 수 결과 일이 곳이 바로 사용자의 입력에 반응을 시작합니다. 의 지금이 오래된 학교를하자 우리가 실제로 무슨 일이 일어나고 있는지를 참조하십시오. 

그래서 저장거야 내 여기에 구글 설정. 지금은 갈거야 notice-- 고양이처럼 뭔가를 검색합니다. 그리고 그것은 여전히​​ 자동차를 짓 여기에 완료,하지만 일을 기준으로 사람들은 과거에 입력 한. 그러나 무슨 일이 일어날 알 수 있습니다. 

순간의 URL에서 이것이다, 그냥 google.com. 그리고 기술적으로, 그것은 슬래시입니다. 구글은 단지 문자를 저장하는 것 우리가 표시되지 않는. 그들은 단지 우리에게 HTTPS를 보이고있다 우리가 걸 슈퍼 안심 할 수 보안 또는 암호화 된 페이지에서. 

그래서 내가 가서 고양이를 검색 할 수 있습니다. 지금이 정말 있어요 빨리 압도적. 이 URL의 길이 봐. 그러나 그것은 밝혀이 물건의 대부분이 URL에 꽤 쓸모가 없다. 나는 삭제하기 시작하는거야 이해가 안 가지. 나는 고양이를 참조하십시오. 나는 고양이를 이해합니다. 고양이는 다시이 왜 모르겠어요. 난 정말 모르겠어요 이 말도 무슨. 그래서 난 그냥 계속거야 강조 표시하고 물건을 삭제 있음을 이해하지 않습니다, 그냥이에 URL을 증류. 

이제 다시 한번 입력하자. 구글이 여전히 작동 것 같습니다. 그래서 어떤 이유로, 그들은을 추가하고 자신의 URL의 부도에 물건을 많이합니다. 그러나이 반드시 필요한 것은 아니에요. 그래서 이것에 대해 좋은 무엇입니까? 글쎄, 내가 가서하자 크롬의 경위를 엽니 다. 그것을위한 작은 마우스 바로 가기가있다. 

네트워크 탭으로 이동합니다. 그리고 지금 나를 다시 보자 이 페이지를 한 번 더. 그리고 Shift 키를 보유하고 있습니다. 옆으로, 브라우저와 같은 캐시 또는 저장하는 경향이 단지 효율성의 이익을 위해 정보를 제공합니다. 그러나 일반적으로 들고 Shift를 모든 것을 강제로 다시로드 처음부터 시작합니다. 그리고 그게 내가 여기서 뭘 원하는거야. 

그리고이 모든 것을 알 수 단지 등장 행. 그것은 특정 웹에 그것을 밝혀 페이지를 하나의 파일이있을 수 있습니다 involved-- hello.html-- 또는이 이 경우에서와 같이, 52 일 수있다. 내가 방문 할 때 google.com, 분명히, 브라우저 (52) 별도의 HTTP 요청을 맞이할. 그 이유는 무엇입니까? 

음, 안에 무엇이보고 이 웹 페이지까지 위쪽. 텍스트 만이 아니라, 하지만 실제 이미지가있다 오른쪽에 이상 고양이. 화려한 로고는 왼쪽에서 여기까지있다. 이 아이콘의 모든있다 마이크 등. 조각의 많은 건물,있다 블록, 스크래치 조각, 당신이 경우에, 이 웹 페이지로 이동합니다. 그리고 브라우저는 무엇을 따라하고있다 , 첫 번째 파일을 받고있는 여기에서이 행은, 본질적이다 HTML의 맨 위에 반복 아래로, 찾고, 왼쪽에서 오른쪽으로 이미지 태그 또는 다른 태그 같은 것들 즉 다른 파일을 언급하고, 그것은 그들을 볼 때, 가고를 가져옵니다 HTTP를 통해, 가능한 전체 봉투 은유, 다음에 표시 웹 페이지에서의 적절한 위치. 

내가 집중하지만 여기에 주목 첫 번째 던져, 검색 고양이, 실제로는 HTTP 1.1을 사용하고, 그 알 수 있습니다. 그리고 불행하게도, 구글 지금 버전 39에서 크롬 입니다 아래 더밍 물건 종류 및 우리에게 실제 헤더를 표시하지. 그러나 실제로 전송 된 것은 요청입니다 슬래시하지 않는,하지만 / 검색? Q = 고양이. 

지금, 왜 중요한가? 글쎄, 난 추론하는거야 이에서 해당 만약 당신이 구글 이 양식, 왜 쿼리를 지원합니다 난 내 자신의 검색을 구현​​하지 않는 CS50을위한 엔진,하지만 단지 앞 단, 단지 그래픽 사용자 인터페이스. 그리고 우리는 백 엔드를 아웃소싱하는 것, 실제 검색은 구글에 발생합니다. 

그래서이 방법을 할 수 있습니까? 글쎄, 내가 여기의 gedit로 가자. 그리고 내가 가서 열어 보자 최대,의 말 새 파일을 보자. 그리고이 저장거야 일시적으로 검색 0.html있다. 그리고 결국, 우리는 빠른거야 제가하는 일은 하나 미리 준비했다. 

그리고 나는 갈거야 신속하게 문서의 형식을 채찍 HTML 열린 브래킷 HTML 대괄호의 HTML. 다음 나는 머리를 할거야 가까운 머리 개방 제목 CS50 대신 구글 검색의 검색. 여기에 아래로 내가 가진거야 몸 아래로 여기에 가까운 몸. 지금은 CS50 검색이 필요합니다. 실제로,의하자 점진적으로이를 구축 할 수 있습니다. 내가 가서이를 닫고거야 실제로 내 공용 디렉토리에 넣어. 그래서 나에게 단 하나의 순간을 제공합니다. 내가 갈거야 검색 0.html-- 일시적으로 search.html에 호출. 나는 그것을 + r에 search.html에 chmod를하려고 해요. 그리고 지금은 그것을 열거야. 모든 권리, 즉 빨리 그래서. 그러나, 목표는 단순히이었다 지점으로 우리를 얻을 수 이 텍스트를 갖는 라는 search.html에 파일. 아직보고 너무 많이하지. 사실, 나는 내 브라우저로 이동 한 경우 그게 다예요 search.html에로 이동합니다. 그러나 당신은 무엇을 알고 있는가? 나는 조금 애호가가 될 수 있습니다. 나는이 있다는 것을 책에서 읽은 제목 태그 (H1)이라고합니다. 그리고 앞서 갈거야 및 개폐 H1과 가까운 H1을 사용합니다. 페이지를 다시로드. 그리고 지금은, 더 크고 더 대담의 모든 흥미로운 것을, 하지만 적어도 그것은 구조적으로 더 흥미로운. 하지만 지금은 내가 다른 태그를 소개하겠습니다. 폼 태그 거기에서 그것은집니다. 그리고 나를 태그를 닫습니다 수 있습니다. 그리고 거기의 밝혀 입력 된 태그 그 타입이라는 속성을 갖는 필드의 데이터 유형은, 당신이됩니다. 그리고 텍스트를 입력 될 것입니다. 그 값은 것입니다 CS50 검색합니다. 닫기 태그입니다. 그리고 어떤 개념은없는 것으로거야 열고 별도의 태그와 닫는. 

내가 여기에 돌아가 봅시다 , 계속 재로드 기능을 참조하십시오. 흥미로운 얻기. 이 텍스트 필드의 것 같습니다. 그리고 실제로, 나는 싶지 않았다 아직 값을 넣어. 내가 여기에 돌아가서 실제로하자 간단하게하기 위해이 값을 제거. 값 대신, 내가 뭘 원 이 일을주는 이름이었다. 그리고, 그것이 무엇인지 모르는 그래서 나는 다시 그에게 올 것이다. 

그러나 아래에, 내가 원하는 입력 유형을 할 = 제출합니다. 그리고이 값은 CS50 검색됩니다. 그리고 우리는 내가 왜 볼 수 있습니다 이에 값을 옮겼다. 내가 다시로드 할 때, 지금 갖고있는 것 같다 내 자신의 검색의 시작 엔진, 슈퍼 끔찍한, 솔직히하지만, 그건 에서가 아니라 멀리 던져 무엇 구글의 기본 페이지처럼 보인다. 

지금 여기, 내가 입력 할 수 있습니다 고양이는 희망 검색을 클릭합니다. 그러나 나는 아주, 아직 안 끝났어 내가 구현하지 않았기 때문에, 분명히, 데이터베이스. 나는 크롤링되지 않은 검색 결과에 대한 웹. 그래서 나는 Google에 그 아웃소싱 할 필요가있다. 그래서 이걸 어떻게해야합니까? 

모든 I의 음, 첫 번째 추가 조치 필요 내 양식 태그에 속성이 http://www.google.com/search입니다. 그리고 나는 알고 만 가지고에서 밀접하게보고 유추 자신의 URL의에서. 그리고 지금 추측을. 어떻게해야이 텍스트 필드에 아마 우리가 어디서 왔는지에 따라 호출 이전부터? 

청중 :? Q. 

DAVID J 마란 : Q. 그리고 우리는 실제로 질문을하지 않아도 알고 보니,하지만 q는 참으로입니다 표시, 쿼리 아마로에 대한 질문 기본값은, 그건해서 무엇 래리와 세르게이 년 전에 함께했다. 그래서 지금 제가이 페이지를 다시로드 할 수 있습니다. 그것은 모든 다른를 보이지 않는다. 하지만 지금은 어떤 일이 일어 났는지. 

나는 고양이의 클릭으로 입력하면 찾아 가자 CS50, 나는 가세요 통지 멀리 실제 구글. 이제 구글은 약간되고있다 그들은 어른의 성가신 추가 매개 변수를 추가, 당신이 URL에,됩니다. 즉 모든 해프닝 자동으로 구글 측. 

중요한 부분은 내가 보일 것입니다 여기에이 요청을 생성 한합니다. 그리고 실제로, 그것은 무슨 일이 일어날. 당신은 HTML을 때 이것은 다음과 같습니다 웹 개발자 표기법의 일종이다 말을 들어 가서 양식을 만들 가 제출 된 때, 그것은이 URL로 이동하는 것입니다. 그리고 URL이 제공 될 때 Q 같은 것들에 대한 가치, 바로이 URL로 이동하지 않습니다. 사실, 상담자 마크하고 Q = 고양이. 매개 변수를 추가, 같은 HTTP 매개 변수를 사용합니다. 

다만, 슈퍼 정확합니다 무엇들을 이곳 추정되고있어 하지만 난 더 explicit--가있을거야 제가 사용하려는 방법 대신 같은 뭔가입니다 얻을 우리는 결국 볼 수 있습니다 후. 즉, 단순히 이해하여이를 HTML과 몇 가지 아주 간단한 태그를 사용하여, 우리는 지금 작성을 시작할 수 있습니다 우리 자신의 프런트 엔드 사용자 검색 인터페이스 뒤에 엔진. 

그러나 이것은 물론, 꽤 끔찍한이다. 그러니 실제로 열어 보자 약간 더 나은 버전. 이것은 내가 준비 하나 즉 간단한 설명이 진행합니다. 하지만 당신은 내가를 볼 수 있습니다 거의 그것을 다시. 그래서이 이미 온라인 사용할 수 있습니다. 그리고 선제 적으로 일어날 않았다 그냥 간단하게하기 위해 HTTPS로 이동합니다. 

그리고 지금의은을 열어 보자 이의 다음 반복. 버전 1이 아닌 0입니다. 무엇은 약간 당신을 밖으로 점프 이 예에서 다른? 

청중 : [들리지]. 

그래,이 텍스트 정렬 센터가있다. 이 여기 좀 이상한데. 그러나 이것은 참으로 새로운 기능입니다. 그리고 아마도 무슨 일이 일어날 것 같아요. 이제 브라우저로 이동하는 경우 와, 검색 1.html를 방문 그것은 거의 같은 일입니다. 그러나에 가까운 단계이다 더 아주 조금 서비스를 제공합니다. 아직 추한,하지만에 예뻐 적어도 모든 것이 지금을 중심으로합니다. 

그래서 내가 무엇을 사용하고 있음을 밝혀 다른 언어 전부라고 CSS, CSS 스타일 시트. 그리고 CSS는, 솔직히, 종류 의, 내 개인적인 의견으로는, atrociously 디자인 언어. 그것은 기억하기 매우 성가신 모든 다양한 세부 사항. 그러나 그것은을 stylizes 무엇인가 전체 월드 와이드 웹 오늘. 나는 누군가의 기분을 상하게. 좋아. 그래서 여기에 다시 돌아가 보자 어떻게 우리가 실제로이를 사용하고 있습니다. 그리고 그것은 적어도 그건 밝혀 실제로 매우 간단 언어. 그냥 키 값 쌍 속성이다 과 값, 속성 및 값. 사실, 여기에 하나입니다 이러한 특성과 가치. 

간단하게 스타일을 사용하여 내 몸 태그에 속성 그리고 그것의 값을 제공 워드 콜론과 다른 단어, 또는 속성과 값, 나는 미학에 영향을 미칠 수 웹 페이지,하지의 반드시 아직 구조, 하지만 그것의 미학. 그리고 단지 주변에 인터넷 검색을하여, 나는 실현 그 CSS, CSS 스타일 시트, 라는 속성을 지원합니다 값이 텍스트 정렬, 수 예를 들어, 오른쪽, 또는 센터를 둘 수. 

그래서 지금은 다시로드 할 때 이 페이지는, 내가 무엇을 얻었 는가 중심 페이지이었다, 하지만 여전히 매우 추한. 이제 가서 열어 보자 검색의 버전 2까지. 그리고 지금은 좀 더 짓을했는지 알 수 있습니다. 헤드의 안쪽 여기에를 주목하라 태그는, 타이틀 이상있을 수있다. 사실, 스타일 태그가있다. 그것은 단지를 얻을 곳이입니다 때로는 좀 지저분 보는 CSS의. 

내가 뭔가를 갖고있는 것 같다 공지 사항 즉 구조적으로 매우 다른 보인다. 그러나 여기의 이름입니다 내가 원하는 태그 양식에 일치시키는입니다. 여기에 우리의 오랜 친구는 곱슬입니다 중괄호와 닫힌 중괄호. 그리고 여기에 있다는 것입니다 속성과 속성 값. 

나는이 파일을로드하면, search2.html, 최종 결과는 동일하다. 그러나 그것은 더 나은 디자인을 향한 단계입니다. 이 CSS를 감안, 나는했습니다 내 HTML로 혼합 된 없습니다. 우리가 볼 수 있듯이 실제로, 나는 할 수 이러한 속성과 값을 다시 사용합니다. 나는 움큼을하고 싶었다면 내 웹 페이지의 부분을 중심으로, 나는 스타일 = 텍스트 정렬을 입력 할 필요가 없습니다 여기 저기 센터. 나는 한 장소에 넣을 수 있습니다 아마도, 상단에 최대 좋아한다. 

그러나 이것조차도 가장 좋은 디자인이 아니다. 사실, 것들 중 하나는 당신이 배울 수 있습니다 당신과 함께 더 많은 시간을 보내고으로 웹 프로그래밍은 더 할 수있다 에서 사물과 요인 일을 모듈화 .H 파일처럼, 우리에게 인자 물건을 보자 우리 요인 일을 할 수 helpers.c 좋아 몇 psets를 전. 마찬가지로, 우리는 수도 이를 달성하려면. 

그래서 버전 예고 sea​​rch.html에 세 나는했습니다 머리의 정리 페이지 바로 넣어 이것에, 링크 태그, 어떤 이름과 달리, 당신에게 하이퍼 링크를 제공하지 않습니다. 그것은의 방법으로 다른 파일에 대한 링크 값이이 경우에 HREF, 검색 3.css입니다 그래서 나는 우리가 빨리거야 알고 있습니다. 그러나 내가하고있는 모든 종류의 의 주위에 물건을 이동. 나에게 열린 검색 3.css하자. 그것은 정말, 아무것도 없다. 난 그냥 복사하고 새로 붙여 넣기 우리가 물건을 인수 분해 많은처럼 파일 전에 다른 파일로. 그리고 result-- 완전히 underwhelming-- 정확히 같은 될 것입니다. 그러나 우리는 toward-- 이동하고 아니, 그렇지는 않습니다. 아, 나는 이유를 알고. 

그래서 버그가 될 것으로 보인다. 그리고 그것은 어떤 의미에서입니다. 그러나 내 네트워크 탭을 열 수 있습니다. 내가 페이지를 다시로드 할 수 있습니다. 아, 왜 CSS하지 적용되는? 음, CSS 파일은 유사하게,이 읽을 수있는 세계로, 말하자면. 그리고 그것은 너무 현재 금지되어 있습니다. 그래서 내가 chmod를 + R을하자 스타의 점 CSS-- whoops-- 우리는 점 CSS 단지이다있어 CSS 파일에 대한 파일 확장자. 이제 나에게로 돌아 가자 내 브라우저를 다시로드합니다. OK, 조금 더. 

이제 내가 마지막으로 일을 할 수 있습니다. 검색 4.html합니다. 난 그냥 생각 버전 더 많은 방법이기는하지만, 방법 쿨러 복잡한. 의 첫 번째 결과를 살펴 보자. 우리에게 더 많은 공간을 제공하기 위해이를 닫습니다. 이것이-4를 검색 입력로 변경합니다. 

그리고 지금의 여러 가지 방법이 끊어집니다. 난 다시 갈거야 여기 내 디렉토리에. 그리고 지금 난 그냥 할거야 file--에 + (R)의 chmod를 나는 그것을 호출 exists-- 알고 있기 때문에 이미지 logo.gif. 그리고 지금 다시로드합니다. 그리고 난 지금 wow-- 아주 가까이, 솔직히, 구글의 1999 년 버전을 좋아하고 솔직히, 구글의 2014 년 버전, 맞죠? 

그래서 지금, 자신의 웹 사이트에 무슨 궁극적으로, 나는 고양이를 검색합니다. 그리고 실제로 그것은이다. 그러나 나는 무엇을 다르게 했는가 이 버전 4에서? 그래서 우리는 여기에 너무 연연하지 않습니다. 당신은 문제가이 나타납니다 결국 일곱을 설정합니다. 하지만 몇 가지 않았다 알 수 있습니다. 

나는 사업부를 도입 부문이다 태그, 단락 태그 정신에는 변함이. 그러나 사업부는 여기에, 단지처럼 직사각형 보이지 않는 지역 화면. 의는 고유를 줘 보자 식별자, 바닥 글, 단지 그래서 우리는 이야기 할 수 그것은 다른 곳에서 우리의 HTML에. 다음 페이지의 다른 DIV는 ID가 콘텐츠가 될 것입니다. 이것은 페이지의 내용이다. 그리고 여기까지 페이지의 헤더입니다. 

즉, 나는했습니다 기본적으로 HTML의 정신입니다 이 웹 페이지 등을 보는 세 가지 구성 요소, 헤더 이 눈에 보이지 않는 사각형 여기에, 중간에 내용 다음 아래로 아래의 글도 하지만 우리는 그 일을 볼 수 없습니다. 나는 내 머리를 원하기 때문에 여기서 페이지 또는 .CSS 파일, 나는이 구문을 사용할 수 있습니다. 

헤더 태그 아니다. 이집니다 그래서 ID의 #header을 수행하여 그 밖으로, 지금은 하나 이상을 적용 할 수 있습니다 헤더 속성. 저도 같은 내용을 수행 할 수 있습니다, 여기에 콘텐츠에 대한 동일합니다. 

예를 들어, 바닥 글에 통지 그래서 내가 추가 해요 이러한 모든 속성. 그리고 나는 그들이 읽는 것만으로 존재하는 것으로 알고 CSS에 대한 설명서 최대. 글꼴 크기 smaller-- 될 것입니다 그래서 어떤 상대 글꼴 크기. 무게는 굵은 될 것입니다. 얼마나 많은 픽셀을 Margin-- 주위에이게 뭐지 20 픽셀입니다. 그리고 그것은 중심이 될 것. 

하지만 지금은, 페이지는 다음과 같습니다. 나는 기뻐하지 않다 경우 바로 내 사본, 나는 붉은 색과 같이 할 수 있습니다. 그리고 나는이를 절약 할 수 있습니다, 다시로드, 지금은 바닥 글 양식에 일치시키는 것. 그래서 그냥 전원에 암시 당신이 웹 페이지에서 수행 할 수있는 작업 주변을 변경합니다. 

그리고이보다 더 쿨러, 당신이 원하는 경우 실제 웹 사이트로 찔러, 당신은 영구적으로 변경할 수 없습니다. 하지만 열 경우 크롬의 경위 다시 나는 왼쪽으로 이동하지 여기에, 페이스 북의 HTML을 보여주는, 하지만 오른쪽에 보여줍니다 편은 CSS의 모든, 당신이 중 하나를 수행 할 수 있습니다 및 즉석에서 물건을 변경합니다. 그래서 내가 가서이 작업을 수행 할 수 있습니다. 

내가 앞으로 및 제어 가자 여기에이 임의의 단어를 클릭, 서명 한 후 요소 검사를 클릭합니다. 크롬은 매우 편리에 점프 페이스 북이 사용하고있는 H1 태그입니다. 그리고 여기에 페이스 북을 통지 종류의 지연이 하드 여기에 속성으로 글꼴 크기를 코딩. 

그래서 좋은 점은 생각입니다 실제로 여기에 가면 그 아, 페이스 북, 나는 그것을 좋아하지 않아, 말 64 픽셀, 우리는 지금 페이스 북을 변경할 수 있습니다. 물론, 우리는 그것을 변경하고 나를 위해 개인적으로 순간. 그러나 이것은 또 다른입니다 우리의 도구 키트 도구 즉 우리가 조정할 수 있도록거야 및 파악도 진단 우리 자신의 웹 페이지에 문제가 있습니다. 그리고 우리는 유사를 통해 갈 수있다 여기에, 같은 일을하는 것입니다. 당신은 정말 멋진 얻고 싶은 경우에, I 지금 당신이 정말로 페이지를 변이 할 수 있습니다 의미 미친 일을. 

왜이 모두가 유용 했습니까? 음, 궁극적으로, 우리는있어 수 할 것 웹 페이지를 만들 수 그 우리 자신의 백엔드에 의해 구동된다, 하지 않음으로써 구글과 이 백 엔드 아웃소싱. 우리는 실제로 원하는 값, 예를 들면, 우리의 검색 엔진의 행동 다른 사람에게하지 이동 특성, 하지만 search.php 같은 것으로, sea​​rch.php는 우리 자신의 서버에있는 경우, 하지 다른 사람의에. 

그래서 우리는 실제로 거기까지 새로운 언어를 도입 할 필요가있다. 그래서 우리는 이미 하나의 새로운 검토 한 정말 여기 언어, 또는 둘, HTML 및 CSS. 그러나 그들은 정말 그냥입니다 구조와 미적 언어. 그들은 프로그래밍하지 않을 언어는 그 자체. 그리고 그 형식에 대한만큼의 시간 우리는 그들에 보낼거야있다. 우리가 지금 시작하겠습니다 때문에 PHP로 전환합니다. 

그래서 PHP는 실제입니다 프로그래밍 언어. 이 스크립트 언어이다 그것의 의미에서 가벼운 무게로 의미 C. 같은보다 그리고 그것은 해석 언어입니다, 어떤이 컴파일되지 것을 의미한다. 간단히 말해서 그래서, 그것은 무엇을 의미 않았다 우리는 C와 같은 언어를 사용하는 경우 우리는 그것을 컴파일했다? 그것은 무엇을 의미 하는가 C 소스 코드를 컴파일? 청중 : [들리지]. DAVID J 마란 : 다시 말해봐? 청중 : [들리지]. DAVID J 마란 : 완벽한. 그것은 바이너리로 변합니다. 그것은 제로과 1로 전환 실제 영어와 같은 소스 코드에서. 그리고 우리가 실제로 할 수있는 그 제로과 1을 실행 을 통해 전달하여 더블 클릭 아이콘으로 CPU 또는 명령을 실행. 

PHP와 파이썬과 루비 펄과 자바 스크립트와 및 기타 큼 언어는 해석 말을하는 것입니다 언어, 당신이 그들을 컴파일되지 않습니다. 오히려, 당신은 입력으로 그들을 먹여 프로그램은 통역을했다. 그리고 통역, 이는 다른 사람이 썼다 , 아래에 소스 코드의 상단을 읽고 바로 바로 해석 왼쪽 그 라인과 당신이 무슨 말을한다. 

발생할 경우에 따라서 인쇄 말한다 라인, 반드시 인쇄를 변환하지 않습니다 해당하는 0과 1에. 그것은 단지 등이 인터프리터가 라는 큰 경우 조건, 프로그래머의 명령이있는 경우 인쇄, 다음을 수행. 그래서 그냥 해석 추론 가지로 당신이 그것을 말하고있는 무슨을을 통해. 

그리고 PHP는 다음 언어 중 하나입니다. 그리고 PHP 년 전 설계되었습니다 정확하게 웹 프로그래밍. 그리고 그것은 처음이었다 매우 단 정치 못한 지저분한 언어. 그리고 실제로, 거대한를있다 거기에 나쁜 PHP 코드의 양. 그러나 언어 자체 지난 몇 년 동안 성숙, 너무 많은 것을 지금은 그래서 실제로 멋진 다음 단계 교육학이 때문에 C에서 모두에게 익숙한 그래서 꿰매 당신은 지난 몇 주 동안 검색된. 

우리가 볼 하나 초기 차이 더 주요 기능은 더 이상 없다입니다. 당신은 코드 작성을 시작할 때, 그것은 단지 가는 무슨 일이 있어도 실행되지 얻으려면, 우리는 순간에 볼 수있다. 한편, 여기에 무슨 변수는 PHP에서처럼 보인다. 그것은 조금 다르다 하지만 겨우. 

PHP에서 강한 타자가 아니다. 주 입력이있다, 이는 그냥 의미 문자열과 같은 데이터 유형 숫자와 다른 것. 하지만 당신은 지정 귀찮게하지 않습니다 그들은 더 이상 무엇인가. PHP는 당신을 위해 그것을 파악한다. 달러 기호는 결정이다 PHP 사람들은 세를 한 것으로 전에 같은 그 PHP의 모든 변수 다만 달러 기호로 시작합니다. 이 점에서 실제로 종류의 유용 그것은 좀 더 당신을 밖으로 이동합니다. 

그러나 그 후,이 PHP의 조건이다. C 대 다른는 무엇입니까? 아무것도 question-- 트릭 없다, 이는 실제로 정말 좋은 것입니다. PHP-- 같은 부울 식. 와 대 부울 식 또는, 스위치, 루프, 루프, OK loops--, 이 사람은 다르다. 

를 거기에서 그래서집니다 PHP의 다른 기능의 커플. 그들 중 하나는, 실제로 인 어떤 멋지고 편리합니다. $ 번호 경우했습니다 배열입니다 프로그램에서 이전에 선언, 각 구조에 대한이 공상을 그 그 모든 일을 대신 성가신 나는이 0과 동일 그 이하로, [? 나는 + +?] 수, 각 각 번호에 대한 그 달러 기호 값으로 그냥 변수, 후자 당신은 I.로 생각할 수 있습니다 당신은 당신이 원하는 무엇이든 그것을 호출 할 수 있습니다. 나는 수를했다. 이것은 반복 할 것입니다 배열은 번호를 불렀다. 그리고 각 반복에서, 이건 자동으로 업데이트 예정 당신 달러 기호 번호 변수 있도록 지속적으로 원하는 변수에 액세스 할 수 어떤 대괄호를 할 필요없이 배열로 표기 또는 인덱싱. 

그건 그렇고, 우리는 심지어 같은 것들을 가지고 거의 같은 모양 배열, 그것은 매우 흔한 제외로서 우리는거야 PHP와 자바 스크립트에 모두 참조 배열을 초기화 사전 대괄호를 사용하여. C는 중괄호를 사용한다. 그래서, 비록 약간 다릅니다 우리가 정말 많은 트릭을 사용하지 않았다. 

그러나 더 강력하게, PHP는 연관 배열을 가지고 하는 멋진 방법입니다 해시 테이블을 말하는. 사실, 당신은 해시를 선언 할 경우 테이블 PHP에서, C-- 달리 얼마나 많은 코드의 라인이 걸릴 않았다 실제로 C의 해시 테이블을 구현? 또는 코드를 몇 줄된다 C에서 해시 테이블을 구현하기 위해 복용? 그래서 그것은 바로, 아마 많은입니까? 그것은 어쩌면, 100 또는 200 수십입니다. 그것은 사소입니다. 아니면 같이 될 약이다 당신은 곧, 사소 볼 수 있습니다 해시 테이블을 구현 [들림] 또한보십시오. PHP--에서 솔직히, 나는 아마 당신이 말 안한다 Monday--까지 PHP에서, 경우 작업이 완료, 테이블을 할 수 있습니다. 즉, 해시 그렇게 table--의 한 줄의 코드와. 과 

언어의 많은 그렇게. PSET 다섯과 재미가있다. 그래서 많은 언어는이 작업을 수행. 그들은 당신에게 이러한 추상화를 제공합니다 다른 사람, 다른 프로그래머가, 그래서 당신을 위해 만든 당신은 자신의 어깨에 서있을 수 슈퍼있는 아이디어를 사용하여 시작 매력적인, 해시 테이블과 나무 등 및 시도합니다. 하지만 당신은 반드시 필요 없어 그런 것들을 자신을 구현합니다. 

그리고 궁극적으로 무엇을 우리는 PHP를 사용하는거야 잠재적으로 프로그램을 작성한다 소위 명령 행의. 우리는 모든 프로그램을 다시 만들 수 있습니다 우리는 지금까지 이번 학기를 작성했습니다 어쩌면 제외 SPL을 사용하여 브레이크 아웃, 어느 순간에 C에 따라 다릅니다. 그러나 다른 모든 문제는 설정, 확실히 마리오와 시저 와 Vigenere 및 [? 우리를? 균열]과 이후 수 PHP에서 다시 구현하고, 아마 더 쉽게 조금. 

그러나 우리는 궁극적으로 무엇을 할거야 웹 프로그래밍을위한 PHP를 사용합니다. 그리고 우리는 다음에 소개하는거야 주 정신 모델,라는 패러다임 MVC, 모델 뷰 컨트롤러, 이는 프로그래밍에 수행 한 경우 파이썬에서 이전 또는 루비 또는 다른 곳에서, 당신 이 팀으로 알고 있습니다 레일 및 장고 등이있다. 그러나 당신의 새로운면 이 역시, 당신은 볼 것이다 이 사실은 매우 자연입니다 인수 분해의 확장 디자인의 종류 코드의 우리는으니 C로 일을하고 우리는 지금 갈거야 PHP에 그 교훈을 적용 그래서 궁극적으로, 우리는 우리 자신의 웹 사이트를 구현. 그리고 당신은 종류의라면 푹 또는 놀라 울 우리가 할 거라고 이렇게 빨리 모든, 거의 모든 것을 실현 학기, 거의 90 % 를 포함하여 학생 CS50의 사람, 이전에 프로그램 된 적이없는 최종 프로젝트를 만들고 결국 그 웹 프로그래밍을 기반으로합니다. 그리고 당신은 반환 것을 볼 수 있습니다 앞으로 몇 주 높다. 그래서 우리는 월요일에 당신을 볼 수 있습니다. 

스피커 1 : 그리고 지금, 깊은 데 이븐 판햄으로 생각. 해시 테이블. 

[웃음]