[음악 재생] 

데이비드 J 마란 : 이것은 CS50이며, 이것은 주 (7)의 시작이다. 그래서 다시 환영합니다. 그리고 당신은 그 리콜 할 수 있습니다 문제에서, 네 개의 설정 폐품 사냥의 비트가 있었다 일부 멋진 상품, 이에 대한 당신의 사진을 복구 한 후 모두 여기 뉴 헤이븐에있는 직원, 당신은의 많은 사람을 찾기 위해 도전했다 당신이 할 수와 같은 그 컴퓨터 과학자. 그리고 우리는 전체있어 제출의 무리. 나는 몇 가지를 공유하고자합니다 오늘 당신과 함께. 

그리고 우리는 온라인으로 모든 게시합니다. 그러나 특히, 내가 원한 잘 한 이러시면 당신의 관심을 끌기, 샘은 그들 중 상당수 있었다 일반적으로 다음과 같은 포즈. 그러나 현재이 나타납니다 오늘 아침, 승자 특정 누군가와 켄 지명되었다 직원의 24 카메라에 포착 당신이 고려 때 더 많은 또는 몇 사진에서 여러 직원을 차지하고있다. 여기 사진은 다음 켄입니다 뉴 헤이븐에있는 마리아. 

지금, 켄,하지만, 회전 아웃 코너 케이스의 비트입니다 즉, 아직 전에 무슨 일이 있었 아니에요. 그것은 발생하지 않은 것이 밝혀 나에게 문제에 글씨를 넣어 직원이 있다고 그 네 가지를 설정 멋진 경품에 대한 자격 켄의 물론 하나이기 때문에 우리의 직원 사진 작가. 자, 그렇게 말한다면, 그는 원래 말을 저를 썼다 온라인으로 사진을 게시하지 마십시오. 나는 많은 부분에서 생각 사진의 대부분 때문에 이 사진은 볼 걸렸다 이 같은 작은 선물. 등을들 수있다. 

그러나 켄은 내가 당신을 안심하고 싶습니다 그는 아주 좋은 사진이 있다고, 그는, 그는 전문 걸립니다 흐릿하지 않은 사진, 초점 더 나은, 그리고 그가 우리 자신의 직원의 상당수를했다. 오히려 단지보다 인정 우리는 우리가 할 거라고 생각했던 켄, 목록을 이동한다 제출 된 실제 학생. 그리고 그것은과 그 랜스를 밝혀 이 아침의 등 15 개 우리의 우승자이었다. 

그리고, 랜스는 콜튼로 여기 사진 자신과 SKAZ, 샘과 함께. 그러나 그것은 밝혀 그와 같은 오전 11시 46분, 조금 전에 이렇게, 내 이메일에 다시 가서 발견 우리는 아직 한 번 더 제출 한 것으로 보니라는 이름의 학생이 그 이메일은이 말했다. 거짓말을하지 않을, 내가 해요 수업 시간에이 일을. 그리고 바로 연결하는 진행 14 사진, 랜스의 15 수줍은 하나. 

그러나 보니의 사진에서, 그것은집니다 밖으로 여러 직원이, 샘이었다 그 (것)들의 사이에서, 그래서 우리는 우리가 생각했던 할 것이 두 가지를 인정합니다. 그래서 보관을 받고뿐만 아니라 공간이 참가 모두 수신,이 두 부분은 것입니다 그들을 위해 좋은 음식을 장만 점심을받을 그들의 섹션 이 다음 주 짝. 그래서 당신은 우리로부터 듣게 될 것입니다, 그것에 대해 랜스와 보니,. 그들에게 이렇게 큰 축하. 지금, 당신의 그 누구 것 점심 같이 더 일반적으로 캠브리지에서 그 CS50 점심을 알고 뉴 헤이븐은 금요일입니다. CS50의 웹 사이트 슬래시 RSVP로 이동합니다. 그리고 지금 세미나에 단어. 더 curricularly. 그래서 우리는 가까워 야 학기의 포인트 당신은 시작해야하는 위치 최종 프로젝트에 대해 생각. 그리고 사실, 조금의 의지 사전 제안이 원인 일 소위. 그래서 전 제안은에 의미 수 꽤 낮은 충격 정말 단지 기회 당신은 짧은 메모를 작성합니다 당신의 교육 동료 알리기합니다 그 또는 그녀의 당신은 당신이 무슨 생각을하는지 최종 프로젝트에 대한 수행 할 수 있습니다. 

지금, 많은 학생들이 결국 일 웹은 최종 프로젝트를 기반으로. 그리고 물론, 우리는 그냥있어 이 이제 마지막 주 웹 프로그래밍에 다이빙을 넘어. 그래서 걱정하지 전혀 생각 방법이 없다 당신은 아이디어를 구축 할 것이라고 당신은 당신의 마음에있을 수 있습니다. 이건 정말 그냥 강제 기능입니다 당신이 생각하고 얘기를 얻을 수 그것에 대해 당신의 TF와. 하지만 그와 함께 당신을 도울하고합니다 궁극적으로 최종 프로젝트와, CS50는 전통을 가지고 있음을 알고있다 의 세미나를 제공합니다. 

그리고 이들은 손에, 선택적 또는 기회를 기반으로 강의 있는 항목에 대한 자세한 내용은 코스의에 약간의 보조 강의,하지만 그럼에도 불구하고 멋진 재료는 최종 프로젝트를 구동한다. 그래서이의 목록입니다 여기에 뉴 헤이븐에서 CS50 직원 대한 때우기 아이폰 OS에 대한이 해 프로그래밍, 안드로이드 프로그래밍, 게임 개발, 더 많은 도구와 송이 그리고 언어와 기술. 

그래서 CS50의 웹 사이트에 눈을 유지. 그리고 그 사이에, 당신은하고 싶은 경우 이들의에 관심을 등록, CS50의 슬래시 레지스터로 이동합니다. 그리고 우리는 그 다음에로 후속 것 일 비행 시간과 장소 그리고 모든 걸 다 대부분의 모든 것 수 스트리밍 수요에도 가능 당신이 실제로 그것을 만들 수없는 경우에 후. 그래서 그 이상의 야단 법석없이, 우리 GET과 마지막을 떠났다. 

그리고이이었다 메시지 같았다 가상 봉투의 내부, 기억, 우리는에 라우터에 라우터에서 전달 된 것을 웹 브라우저 및 웹 사이 라우터 서버. 그리고 그 메시지를 보았다 이 같은 작은 선물. 이것은 더 많은 비밀 메시지였습니다 봉투 안에 실제로이었다 그 종이에 작성 첫 번째 라인은 그대로, 슬래시를 얻을 말했다. 

단지 전성 검사로, 슬래시는 무엇을 표시 했습니까? 슬래시 때 무엇을 의미 하는가 웹 사이트를 요청? 당신은 모든 시간을 요청합니다. 대부분의 어떤 시간 당신은 웹 사이트를 방문하십시오 실제로 파일 이름을 입력하지 않습니다. 당신은 아마, Facebook.com로 이동 , gmail.com 등을 입력합니다. 그리고 슬래시는 무엇을 상징 하는가? 어떤 파일? 구체적으로 또는 어떤 페이지,? 

인덱스, 그래. 기본 페이지 그래서. 파일을 지정하지 않는 경우에 따라서 우리가 볼 시작할 것 같은 이름, 당신은 실제로 단지 요청하고 나에게 페이스 북의 기본 페이지를 제공합니다 또는 나에게 내받은 편지함을 제공하거나 제공 나 뉴스의 기본 페이지 CNN의 웹 사이트 등을합니다. 그리고 서버가 응답하는 뭔가 그 메시지 이처럼, 나는 네 말 HTTP 버전 1.1을 말한다. 

상태를 200, 우리는 거의 인간없는 코드 그것은 좋은 때문에 이제까지 참조하십시오. 그것은 확인 요청을 의미하기 때문에 수신 제대로 처리되었다. 그리고 콘텐츠 유형 분명히 응답 자주, 항상은 아니지만, 텍스트입니다. 구체적으로는, HTML. 그리고 그것은 사실입니다 여기서 오늘날 우리가 봐. 

그래서 사실, 내가 갈거야 앞서 및 브라우저를 엽니 다. 내가 크롬을 사용하는거야, 당신은 사용할 수 있습니다 주 모든 브라우저를 대부분 와서. 우리는 일반적으로 크롬을 권장 그것은 특히 왜냐하면 소프트웨어 개발자를위한 좋은. 내장의 그것은 많이있어 쉽게 만드는 도구 HTML과 CSS 단지를 개발, 우리가 오늘에 대해 이야기를 시작 할 것들, 뿐만 아니라 다른 언어뿐만 아니라. 

내가 가서 이러시면 갈거야 나는 클릭하거나 마우스 오른쪽을 제어거야 웹 페이지에서 아무 곳이나 클릭합니다. 그리고 요소를 검사로 이동거야. 그리고 조정할거야 내 여기에 화면이 조금. 내가 바닥에이 이동하자. 그래서이라고 무엇인가 크롬의 경위. 그래서 이것은 디버깅과 같다 도구는 크롬에 내장. 

당신의 모든 이미이 있습니다 당신은 크롬을 사용하고있는 경우. 그리고 그것은 당신이 무슨 일이 일어나고 있는지 볼 수 있습니다 일부 웹 페이지의 후드 아래에. 그래서 실제로 보자 다음과 같이 이것 좀 봐. 이 방법은 더 많은 기능을 가지고 우리는 오늘에 관심. 그러나 여기에이 탭이 있습니다. 요소, 네트워크, 소스 타임 라인, 그리고 몇몇 다른 물건. 나는 클릭거야 잠시 네트워크입니다. 

그리고 그것은 조금 압도 여기에 언뜻. 하지만 내가 할거야하는 것은 할 수있다 내게는 조금 단순화합니다. 나는 켜거야 이 빨간색이다 있도록 빛을 기록. 그리고 로그를 보존 말할거야. 그리고 이것은 단지 조금 것은 내가 알아 낸 시간이 지남에 따라 그 저장 것 브라우저에서 일어나는 모든 일. 그리고 지금은 갈거야 http://facebook.com에. 

사실,의​​는 WWW를하자 좋은 측정을 위해, 슬래시. 입력합니다. 너무 URL 많은 당신이 방문 할 수 있습니다. 그리고 지금 페이스 북의 웹 페이지 상단에 온다. 그리고 다음 왕창 물건은 아래쪽에 의해 날아 갔다. 사실, 그것은 밝혀 당신이 Facebook.com를 방문 할 때, 당신은 단지 하나의 HTTP 요청을하지 않을 그것은 Facebook.com에가는 것이 밝혀 그 봉투 (41)를 전송 자신의 GET 요청 각, 화면 뒤에 불구하고, 지시 된 바와 같이 여기서, 화면의 하단에, 그것은 참으로 나타냅니다 내 브라우저 (41) 요청을했다. 

총, 그것은 861 양도 킬로바이트 그리고 어떤 이유로했다 8 개의 초 그 모두를 다운로드합니다. 그래서 사실 조금 이상한 페이스 북의 사이트는 걸릴 것 긴하지만, 그래서이 경우에는 그 것이다. 자,이 모두는 정말 상관 없어 맨 위의 요청을 제외하고 약. 그럼 여기이 하나에 가자 나 그냥 잠시 축소 할 수 있습니다. 

그리고 내가이 확대 할 수 있습니다. 나는 비록 왼쪽에했던 그래서 여기 무슨 일이 많이있다 내가 강조했습니다된다 Facebook.com 다음 나는 아래로 스크롤하고있어 것을 알 수 아래로 스크롤 아래로 스크롤 헤더를 요청할 수 있습니다. 그리고 당신은 크롬이 표시되어 있음을 볼 수 있습니다 나 본질적으로 내부 내용 요청 내가했다. 그것은 아주 동일에 서식 아니에요 방법 만 얻을 언급 거기에 주목, 호스트의 언급이있다 통지 Facebook.com, 경로, 또는 슬래시, I가 요구되는 파일이다. 

그리고 나는 이동하면 백업, 우리는 실제로거야 참조 페이스 북이 반환 무슨 나에게 이러한 헤더의 전부입니다. 가상 봉투의 내부 그래서 실제로 키 값 쌍 많다. 단어, 콜론, 다음의 값. 단어, 콜론 및 값. 이들은라는 헤더입니다. 그리고 방법 자세한 내용은보다 여기에있다 우리는 실제로 지금 걱정. 

하지만이 두 번째입니다 거기 마지막으로, 주의, Facebook.com의 서버 그, 실제로 여기 말했다 일부 텍스트 HTML을 온다. 그래서이 모든 말을하는 것입니다 당신이 웹 요청할 때 에 브라우저에서 페이지 서버는 해당 서버가 응답 자신의 봉투 이는 내부의 텍스트입니다. 즉, HTML. 하이퍼 텍스트 마크 업 언어. 어떤 다른 언어 우리는 오늘 소개하는 것을 인간과 컴퓨터가 생성하는 위하여 웹 페이지를 구현한다. 

특히,의이 살펴 보자. 지금은 돌아갈거야 페이스 북의 웹 사이트에. 그리고 난에 갈거야 단지 제어 클릭 또는 마우스 오른쪽 버튼으로 클릭 및 페이지 소스보기를 클릭합니다. 그리고 당신은 크롬을 사용하지 않는 경우에도, IE는이, 파이어 폭스는이 작업을 수행 할 수 있습니다 할 수있는, Safari는 심지어 메뉴 불구하고,이 작업을 수행 할 수 있습니다 옵션은 약간 다를 수 있습니다. 그리고 이것은 HTML은 그 마크와 페이스 북에 회사가 작성했습니다. 

그리고 집단적으로,이 언어 여기를에 파란색과 흰색 페이지를 구현 것을 우리는 잠시 전에 보았다. 자,이 조금 압도하고있다. 우리는 왼쪽 상단에 최대를 보면, 우리는있어 어떤 패턴을 볼 시작할 것. 많이있을 것 같습니다 이러한 개방 각 브래킷 다음이 키워드 HTML있다. 여기에 또 다른 열려있어 꺾쇠 괄호 머리. 

우리가 아래로 스크롤하면 여기입니다 아래로 아래로, 나는 해요 가서 시도 할 것 무언가를 검색 할 수 있습니다. 이 방법을 통해 오른쪽에 여기에 오픈 브라켓 몸입니다. 그리고 마지막에서 리콜 우리가 제안하는 시간 간단한 웹 페이지 그 인간이 쓸 수 있음 이 같은 작은 선물을 보일 수 있습니다. 열기 HTML 태그, 열린 머리 태그 열린 제목 태그, 다음 폐쇄 제목, 폐쇄 머리, 개방 body 태그, 텍스트는, 몸을 폐쇄 폐쇄 HTML. 

그러나 잠시 여기를 일시 중지합니다. 이 코드는, 당신이 했더라도 전에 쓴 적이 하지만 여전히 아주 이해가 안 돼요 무슨 일이 일어나고 있는지, 꽤 좋아 보인다. 마우스 오른쪽 단추로, 매우 깨끗합니다. 그것은 매우 문체 좋다. 들여 쓰기 및 흰색 공간을 많이합니다. 페이스 북의이 없습니다. 왜 페이스 북은 너무 많이 HTML을 작성에서 나는보다 더? 분명히. 

오른쪽이 하나처럼 스타일의 다섯 중. 강력한 이유가있다 그들을 위해 이러한 모서리를 잘라. 좋아, 그래서 그들은 싶지 않아 쉽게 당신이 그것을 읽을 할 수 있도록. 그래서 어떤 의미에서, 그들이있어 를 난독, 일종의를 스크램블링 적어도 미적으로 매우 이 마이 스페이스에 대한 더 열심히 있다고 가서 벗어 버리고 자신의 홈페이지 그것의 HTML. 이 프로그램 밝혀 크롬을 포함하지만, 우리는 슈퍼 쉽게 정리 할 수​​ 있습니다. 그래서 이유로 상당히 그입니다. 다른 어떤 것이 원인 일 수 있습니다. 그래. 그래, 공백 비용 데이터. 당신은 무엇을 의미합니까? 네, 정확히. 당신은 Tab 키를 많이 또는 충돌하는 경우 스페이스 바는, 의미를 고려한다. 그래서 키보드의 모든 키는 [들림] 한 바이트로 표현. 

그래서 가정이 마크 또는의 devs의 요즘은 한 번만 스페이스 바를 안타 이 HTML 페이지에서 해당 페이스 북의 홈페이지를 나타냅니다. 그리고 페이스 북은 많이있다 사용자의 요즘. 그래서 가정이 페이스 북의 홈페이지 오늘 억 명의 사람들이 방문한다. 그리고 페이스 북에서 누군가가있다 한 번만 스페이스 바를 누르십시오. 

하나의 추가적인 바이트 억 요청 얼마나 더 많은 데이터가 페이스 북이다 인터넷을 통해 전송 누군가가 히트하기 때문에 자신의 키보드의 스페이스 바를? 억 바이트, 또는 1 기가 바이트 데이터는 페이스 북 서버에서 전송되는 주위 사람들에게 이유없이 세계. 지금, 그것은 단지 하나의 공간이다. 

우리가 실제로이 청소 상상해 일이 위를 들여 쓰기 및 추가 흰색 공간을 많이하고 탭 문자와 공백, 당신은 지출 기가 바이트 결국, 그렇지 않으면 테라 바이트 공간을 더. 그리고에 이렇게 슈퍼 공통 웹 개발의 실제 세계 코드를 작게하다하는 것입니다. 그리고 우리는 결국 볼 수 있습니다 이 작업을 수행하는 방법. 

그러나 오늘, 우리는 코드를 작성 시작합니다 그것은 우리 인간이 실제로 읽을 수 있습니다. 당신이 돌아 가면 그것은하지만, 밝혀 크롬이 도구로, 요소 검사 이전에, 우리는 네트워크 탭에 있었다. 그것은 당신이 가면 밝혀 당신이 실제로 무엇을보고 요소 탭, 크롬의 꽤 인쇄됩니다 같은 HTML 버전. 그래서 우리는 그것을 deobfuscated했습니다. 그래서 컴퓨터에 대한 일치 없습니다. 그리고 지금 당신은 실제로 수 주위에 클릭하고 시작 웹 페이지 인 계층 구조를 볼 수 있습니다. 그래서 실제로이 작업을 수행 할 수 있습니다. 나는 가서 최대 열거야 내 맥 텍스트 편집라는 프로그램. 그리고 이것은 그냥 리콜 슈퍼 간단한 텍스트 프로그램. 윈도우 NOTEPAD.EXE있다. 그리고 나는 그대로거야 다음을 입력합니다. 문서 형식 HTML, 오픈 브래킷 HTML, 브래킷 HTML을 폐쇄 우리는 여기에 헤드 페이지를 현재 페이지의 헤드 엔드, 제목은, 안녕하세요 세계처럼 될 것입니다. 

그리고 여기 아래, 우리는 필요 웹 페이지의 본문. 닫힌 몸. 그리고 여기에, 안녕하세요. 괜찮아. 그래서 우리는 슈퍼 빠른 웹 페이지를 작성했습니다. 나는로 저장거야 내 바탕 화면에 hello.html. 나의 Mac의는 불평 것 그 생각, 잠깐, 이 텍스트 파일을 수행 당신은 그것을 .txt를 호출 할? 하지만, 나는 도트 HTML을 사용하고 싶습니다. 

내가 경우 그리고 좋은거야 다만이 파일을 더블 클릭, hello.html, 여기 내 웹 페이지입니다. 불행하게도, 나는 오전 세계에서 유일한 사람 누가 지금이 페이지를 방문 할 수 있습니다. 어디 분명히 살아 않기 때문에? 그것은 내 Mac에서의, 오른쪽? 어떤 쓸모가 없다. 이 방에 아무도처럼 인터넷에 혼자하자 실제로 해당 페이지를 방문 할 수 있습니다. 그래서 오늘, 우리는 필요 다른 요소를 소개합니다. 

그리고이 일을, 내가 갈거야 가서 구름 9를 엽니 다. 그래서 구름 9 코스입니다 클라우드 기반 service-- CS50 IDE-- 즉 우리의 작업 공간을 모두 가지고 어딘가에 인터넷에서 실행. 그리고 그것은 우리의 파일의 모든 의미 이미 공개적으로 액세스 할 수 있습니다. 그럼 가서이 작업을 수행 할 수 있습니다. 나는 앞서 갈거야 및 새 파일 NCS50IDE을 만듭니다. 내가 전에로 저장거야 그리고 hello.html로하면 저장을 클릭합니다. 그리고 지금은 단지 시간을 절약하기 위해, 내가 갈거야 이 코드를 붙여 가서 복사 대신 그것을 다시 입력합니다. 그리고 저장합니다. 그래서 지금은이 파일 hello.html을했다. 하지만 어떻게 실제로 내가 할 웹 페이지로 열? 음, CS50에 내장 밝혀 IDE는 그 소리 같은 단지 컴파일러 아니다 그리고 GDB 같은 디버거 다른 프로그램의 움큼, 전체 깃털이 실제로있다 CS50 IDE 내에서 실행되는 웹 서버. 

여러분 모두, 즉, 자신의 웹 서버가 있습니다. 그리고 웹 서버는 조각 그 목적은 인생에서 소프트웨어의 웹 페이지를 제공하는 것입니다. 브라우저에서 요청을 수신하고, 작은 가상 봉투로 응답 내부에있는 것이다 내가 작성한 콘텐츠입니다. 그래서이 웹 서버입니다 실제로 무료 및 오픈 소스. 어디 오픈 소스 그냥 의미 다른 사람이 가지고 소프트웨어 서면 우리 모두가 할 수있는 실제로보고도 다운로드 소스 코드를 변경합니다. 그리고 그것은 아파치를 불렀다. 

그리고 우리에게 조금 더 쉽게 만들었어요 아파치 (50)를 호출하여 CS50IDE에 사용합니다. 실제로 수 있도록 다음 사항을 이해합니다. 아파치 (50) 시작을 말하는거야. 그리고 난 그냥 점을 말하는거야. 그리고 우리는 몇 가지 다소 참조 말 비밀 메시지 아파치의 문서 [설정? 그룹?] 집, 우분투, 그 무엇이든, 작업 공간을 슬래시. 시작 웹 서버 성공적으로 아파치 2. 

너무 오래 짧은 이야기, 내가 단지 버튼을 추진해 왔습니다 지금의 웹 서버에 설정 TCP 포트에 인터넷에서 수신 특정 주소 80. 그리고 여기라고하고, 이 기반이 변경됩니다 사용자 이름 및 기타 요인에, 나는 이것을 클릭하면하지만, 지금 주목 IDE50 도트 jharvard 등과 그래서, 알이 모든 시간이 지난 몇 대한 주, 당신은 할 수 있습니다 자신의 이름 것​​으로 나타났습니다 오른쪽 상단에 내장되어 CS50IDE의 코너. 

그리고 실제로있다이 모든 주소를 시간이있는 당신이 할 수에서 웹을 통해 모든 파일을 참조하시기 바랍니다. 지금까지, 그것은 중요하지 않은, C에 있기 때문에, 일반적으로 에서 실행되는 것을 원하는 단말기가 아닌 웹. 그러나 오늘, 우리는 시작 웹 기반 코드를 작성 우리가 원하는 않는 것이 공개 된 URL에 접근. 그래서 내가 갈거야 할이 URL을 클릭합니다. 

그리고 내가 꽤 볼 것을 알 수 못생긴 인덱스, 디렉토리 목록, 그러나 파일은 아마 당신을 밖으로 점프? Hello.html. 내가 저장하기 때문이다 내 작업 공간에 파일을 저장합니다. 그리고 나는 아파치 웹 서버를 말 했어요 무슨 다윗의 작업 공간 디렉토리를 보면된다. 그리고 누구든지하자 세계는 그 파일을 참조하십시오. 

그리고 사실, 내가 만약 지금 hello.html 클릭 나는 바로이 탭 해당 파일 내에서 참조하십시오. 이제 클라우드 9의 하 고 알 우리에게 약간의 도움이 뭔가. CS50의 IDE 내에서, 거기에 주목 갑자기 주소 표시 줄. 우리가 있는데도 때문이다 CS50IDE를 방문하는 크롬을 사용하여, CS50IDE의 내부는 그 자체입니다 지금 웹 브라우저의 버전. 그래서보다는 같은 일을 복잡하게, 나는 앞서 갈거야 바로이 URL을 복사합니다. 나는 앞으로 그냥 갈거야 내 자신의 크롬 창을 엽니 다. 그래서 여기에 마술, 아니 CS5​​0IDE가 없습니다. 난 그냥 그대로 붙여 넣을거야 내 J 하버드 URL를 입력하고 Enter를 누르십시오. 그리고 짜잔, 지금, 그리고 이론적으로, 모두 인터넷에서, 나는 구성한 경우 적절하게 권한, 이 파일을 방문 할 수 있습니다. 그래서 지금은 말했다 경우 hello.html, 짜잔,이 내 엄청나게 실망 웹 페이지이다. 그럼 빠른 정신 검사를 할 수 있습니다. 이 모든 때문에 개념 셋업이다. 그리고 우리는 정말 실제로 적이 없다 어떻게 HTML 자체를 작성하는 방법을 가르쳤다. 질문 지금까지 방금 일어난 무엇에? 네. CS50는이 웹 페이지를 소유 하는가? 어떤 의미에서? 좋은 질문. 그래서 CS50의는 CS50.io.를 소유 우리는 참으로 그 도메인 이름을 구입했습니다. 그리고 너희들의 자연에 의해 CS50IDE에 로그인, 당신의 모든 하위 도메인이라고 것을 얻을. 

그래서 마란 IDE50-, 또는 IDE50-Rob.CS50.io, 그 내에서 고유 한 주소입니다 우리의 도메인 이름입니다. 물론 상업적 그래서 당신은 당신의 자신의 고유 한 주소가 있습니다. 그러나 우리가 일을 단순화했습니다 최상위 도메인을 구입, CS50 점 I / O 및 다음 다른 사람이다 그 내부에, 말하자면. 그리고 우리는 그에게 돌아올 것이다 아마 몇 주에, 특히 최종 프로젝트에 당신의 시간, 때 일부 자신의 도메인 이름을 얻을 수도 있습니다. 비교적 실제로있어 간단합니다. 괜찮아. 그래서 지금은이 작업을 수행 할 수 있습니다. 나는 다시 갈거야 CS50IDE, 어디에 내 파일을 지금, hello.html, 모두 재미 없습니다. 내가 뭔가를하고 싶습니다 그보다 조금 더 좋은. 그래서 나는 이런 식으로 뭔가를 할거야. 열린 paragraphs.html 나를 보자. 그래서 내가 미리 쓴 파일입니다. 그것의 상단에, 같은 항상, 우리는 의견이있다. 그러나 HTML의 코멘트 조금 다른 보인다. 선 세 개의 라인 (14)에서, 코멘트를 시작하기위한 구문을 참조하십시오 과 코멘트를 종료. 

그러나 물건의 없음에 기능적으로 문제 사이. 그것은 단지 메모의 여기에 무슨 일이 일어나고 있는지 사람. 그리고 그냥 빨리 정신으로 나는 아래로 스크롤하면, 확인, 분명 새로운 기능 우리가 도입 한 태그? 지금까지 우리가 본 적이 따라서 태그는 열려 브래킷 HTML, 머리, 제목 및 본문. 하지만 지금은 분명 새로운 무엇입니까? 

그래, 그래서 P. p 태그 또는 단락 태그입니다. 그리고 난 그냥 몇 가지 기본을 빌려 라틴어 텍스트 내 단락을 구성합니다. 내가가 원하는 것을 때문에 증명은 어떻게 수도있다 HTML의 텍스트 단락을 나타냅니다. 그래서 무슨 일이 일어날 시작하고 여기에 이​​미 존재이다 패턴 현상. 그리고 내가 가서이 작업을 수행 할 수 있습니다. 내가 먼저 아파치를 해제 할 수 있습니다. 그리고 난 그 자체를 시작하도록 말할거야 다시 오늘의 소스 일곱의 내부 M 디렉토리. 그래서 나는 모든에 액세스 할 수 있습니다. 

그리고 지금, 나는 다시 가면 이 디렉토리 목록, 나는 오늘부터 모든 파일을 참조하십시오 알 수 있습니다. 그리고 당신은에서 볼 수 있습니다 다음 문제 세트, 우리는거야 당신에게 지시를 정확히이 일을합니다. 내가 paragraphs.html 열 경우이 수도 뿐만 아니라 프로그래밍 언어처럼 당신에게 당신이 말하거나 라틴어를 읽을 수없는 경우. 그러나 이것은 단지 세 단락입니다 텍스트의는 HTML에 표시됩니다. 

그리고 단락을주의 그들 사이의 휴식 시간. 그것은 밝혀 때문에 심지어 당신이 생각 이 작업을 수행하는 경향 될 수 있습니다, 현실 세계에서 반면, 당신은 줄을하려는 경우 일 사이의 휴식, 당신이 수도 아주 간단하게 이 작업을 수행하고 저장을 누르십시오. 그리고 지금, 내가 여기 다시로드하는 경우, 통지 그 모든 것이 함께 흐리게 텍스트의 한 덩어리입니다. HTML은 바보 언어 가지이기 때문입니다. 

그것은 그러한에 사용됨을 방법 브라우저 것입니다 만 명시 적으로 당신이 그것을 말해 무엇. 당신이 그것을 말하지 않는 경우에 따라서 나에게 새로운 단락을주고, 새 단락을 참조하지 않을거야. 그리고 사실, 어떤 브라우저가 할 것 당신이 Enter 키를 누르더라도이다, 의는 또 다시 해 봅시다 다시,이 텍스트 방식으로 이동 다음 화면과 아래로하여 저장 다음 브라우저가 가고, 다시로드 그 공백을 모두 축소하는 단 하나의, 눈에 보이는 공백으로. 괜찮아. 그래서 단락 태그입니다. 그래서 패턴 무엇 즉, 여기에 개발이야? 음,이 경우 것으로 보인다 HTML은 모든 태그를 시작하는 방법에 대한 것입니다 및 태그를 종료. 그리고 태그는 무엇인가? 음, 구문 단지 덩어리입니다. 오픈 브래킷, 키워드, 폐쇄 브래킷, 태그입니다. 또는 태그를 시작합니다. 그리고 당신이있을 때 자신을 표현하는 일, 같이 당신은 단락으로 수행하고, 당신은 반대로 말을 그렇게. 그러나 그 반대가 상당히 거꾸로 아니다. 

당신은 단순히 동일한 태그의 접두어 이 같은 슬래시로 이름을 지정합니다. 괜찮아. 그래서 모두 흥분하지. 사실, 우리는을 만들지 않을 웹 모든 것을 더 재미. 내가 만들고 싶어 크고 굵은 가지? 그래서 여기에 예를 들어 있다고 밝혀 headings.html에, 어디에 내 몸에, 나는, H1 태그, H2, H3있어 넷, 다섯 또는 여섯, 모두 꽤 난해한 것 같습니다. 그러나 나는이 열 가면 예, 이제 살펴 보자. Headings.html. 

기본적으로 브라우저가 제공 할 수 있도록 텍스트 그 크고 서로 다른 크기의 굵은입니다. H1은 큽니다. H6는 작고입니다 그 사이에 다른 모든 것들. 그래서 여전히 재미 있지만입니다 정말 내가 아는 웹. 우리가 원한다면 내가 가진 목록 같은 것을. . 그래서 여기의 글 머리 기호 목록은 하버드의 주택 세. 

당신은이 일에 대해 어떻게 갔습니까? 음, list.html를보십시오. 그리고 여기, 우리는 참조 funkiness의 조금 하지만 이제 무슨 일이 일어나고 있는지 생각해 보자. 그래서 방금 본 적이 무엇을 기반으로, UL은 정렬되지 않은 목록을 의미합니다. 정렬되지 않은 목록은 단지 글 머리 기호 의미한다. 어떤 번호가 없습니다. 또한 거기에 뭔가를 호출 태그에서 OL입니다 목록을 주문했다. 이어서 LI,리스트 아이템은 모든 수단이다. 

그리고 그것을 자동으로 당신을 위해 숫자 다. 하지만 내 들여 쓰기 다시, 모든 흰색 공간은 나를 위하여이다. 브라우저는 아니다 실제로 신경 것. 그래서 비록 당신은 할 수 없었다 이, 그냥 명확하게하기 위해 할, 당신은 비록 균일하지 말아야 브라우저는 여전히 것 잘 이해 할 수 있습니다. 나는에 다시로드 타격있어 내 브라우저, 나는 다시로드를 클릭 해요 어떠한 변화가 발생하지 않습니다 여전히 브라우저 때문에 내가 할 말을 정확하게 일을. 

괜찮아. 그래서이 모든 단지 텍스트입니다. 이제 더 흥미로운 일을 할 수 있습니다. 나는 앞서 갈거야 및 이 HTML의 일부를 빌려. 나는 앞서 갈거야 및 여기에 새 파일을 만듭니다. 그리고 우리는이 rick.html 전화 할게. 우리는 불균형이 사용 일 이에 릭 롤라고 클래스 올해, 나는 모른다, 그냥 유기적으로 일어났다. 

그리고 지금은 통제 있어요. 그래서 난 그냥 갈거야. 그리고 구글에 가면 이미지 릭 Astley. 우리가 왜 당신이 모르는 경우 이, 그냥 위키 백과에 읽어. 당신이 링크를 클릭 한 때마다, 누군가가 어딘가에서 웃고 됐어요. 그리고 나를 ahead--가 가자 우리의이 이미지를 볼 수 있습니다, 이동합니다. 

그래서 여기에 우리가 있습니다 Google 이미지에서 이미지입니다. 그리고 이제이 있다고 가정하자 합리적으로 어디서나 인터넷에. 그래서 나는 나를 위해 확인의 가정거야 실제로 내 웹 페이지에이를 넣어. 나는 앞서 갈거야 이미지 URL을 복사합니다. 그리고 지금은 클라우드로 돌아갈 경우 9의 내가 여기에 무엇을 할 수 있는지 보자. 그래서 여기에 단지 웹 페이지입니다. 이 하하, 릭 Astley입니다, 지금은 돌아갈거야 브라우저로, 다시로드, 재미있는. 

릭 어디에 있습니까? 그래서 나에게 일어난 것을 볼 수 있습니다. 사실, 난 갈거야 나는 그렇게하지 ​​않았다 척. [들림] 여기에 집어 넣어. 우리는 순간에 다시 그에게 올 것이다. 그래서 여기 rick.html입니다. 그래서 릭 Astley 아니다. 이 밝혀 그래서 우리는 할 수 실제로 여기에 그를 추가 할 수 있습니다. 이것은 릭 Astley입니다. 나는 나에게 그 이미지를주는 말을하려고 해요 소스는 그냥 복사 URL입니다, 어떤 분명히 행복 생일 무언가 또는 다른. 

그리고 지금은 갈거야 이 같은 태그를 닫습니다. 그래서이 슈퍼 긴 포​​장된다. 하지만 모두가했습니다 것을 알 수 오픈 브라켓 이미지를 수행, 이러한 특성을 가진 소스. 그리고 그것은 정말로 긴 URL입니다. 그리고 맨 끝에,이를 알 수 있습니다. 왜이 짓을 슬래시 각도 브래킷 대신, 다른 모든 태그처럼, 오픈 브래킷을 가진, IMG, 브래킷을 폐쇄? 그냥 한 경우에도 추측을 더 친숙 전혀 없다 HTML과 전. 

그래서 닫힐 어떻게 명령,하지만 왜 정말 직관적하지 않습니다 의미는 좀 더 뭔가를 가까운 이미지처럼 장황? 그래. 그래. 그냥 의미의 아무 의미가 없습니다 이미지를 시작 이미지를 끝내는 그 중 하나가 나는 아니다. 그래서 간격을두고 이해가되지 않습니다 이미지의 내부에 다른 거. 당신은 그렇게 할 수 없습니다. 그래서 구문 일반적으로 단지 것 내부 슬래시를 할 수 오픈 태그 또는 시작 태그의 다음 저장을 누르십시오. 

그래서 만약 것은 지금 현재,이 파일을 다시로드 여기 좋은 웹 페이지 요리를 가지고있다. 그리고 우리는 확실히 할 수 정말 사람을 성가 시게 대신에 포함시켜 유튜브 링크 등을들 수있다. 그리고 사실, 어떤 시간 혹시, YouTube에 갔어요 실수 실제로 저를 보자 릭은 여기에 자신을 굴립니다. 그래서 릭 롤. 그래서 릭 난 여기거야 roll--. 

[음악 재생] 

확인을 한 사람은 그것을 좋아했다. 그래서,이 모든 시간을 알 당신 경우 물론, 당신을 공유 링크를 클릭 URL을 얻을 당신은 실제로 수 이메일 또는 법정 이미지에 포함 또는 문제에 설정하거나 슬라이드. 그리고 지금, 내가 대신 퍼가기를 클릭하면, 알 모든이 시간,이 물건 되고있다. 내가 가서이 복사거야. 

그리고 바로 그래서 우리는 난, 더 잘 볼 수 있습니다 내 텍스트 편집기에 붙여 넣을 것. 이 알 수 무엇 YouTube는 말하고있다. 당신을 방문 할 때마다 YouTube 동영상, 당신의 경우 에 동영상을 삽입 할 위치 웹 페이지는 단순히이 잡아. 그래서 이것은 또 다른입니다 HTML 태그는 iframe을 불렀다. 또는 라인 프레임. 그래서 너무 조금 더 본다 모든 다른 사람보다 복잡한. 그래서 이미지 밝혀 태그 분명히은 iframe 태그 라는 속성이 무엇인지 걸릴. 

그리고 이것은 또 다른입니다 HTML 구문의 조각. 태그의 이외에 이름, 오픈 브래킷 태그 이름, 는 태그의 동작을 제어 할 수있다 속성의 전체 무리를 가짐으로써 값과 같다. 속성 값과 같다. 그래서 예를 들면, YouTube는 우리에게 말하고있다 이 비디오의 폭을하려는 경우 420 픽셀, 높이가 될 315 픽셀로, 그건 당신은 어떻게 HTML로 그것을 표현한다. 

비디오의 소스는 것입니다 그 긴 유튜브 URL이어야합니다 다음 다른 물건 , 프레임 테두리가 제로 같은 그래서 아마 거기에 의미 일이 주위에 테두리가 없습니다. 아마 전체 화면 허용 사용자 것을 의미한다 버튼을 클릭하고 실제로 전체 화면 비디오. 정말되고 싶은 경우에 따라서 릭 점 HTML 여기에 감동, 이미지 태그를 사용하는 대신,하자 내가 그 삭제, 대신 붙여 넣습니다. 그리고 지금 다시로드합니다. 그리고 지금 여기에 우리가 다시 간다. 좋아, 그것으로 충분합니다. 좋아 내가 시도 할 것이다, 그래서 하드 다시를 할 수 없습니다. 그래서 여기에 테이크 아웃은 무엇인가? 이 웹 페이지 그래서 HTML, 같은 못생긴 있다, 실제로 매우 간단하다. 그것은 프로그래밍 언어 아니다. 이 기능이 없습니다. 그것은 루프를 가지고 있지 않습니다. 그것은 조건이 없습니다. 그것은이 모든 수십입니다 다른 태그, 각각의 0 개 이상의 특성을가집니다. 그리고 사실, 재미에 대해 무엇을 HTML 당신은으로 다이빙을 시작으로 매우 자기의 가르침을받을만한 점이다. 

그것을 가지고가는 것은 이해입니다 HTML의 일반적인 프레임 워크. 태그 란, 속성은 무엇인가, 실제로 웹 페이지를 구성 어떻게 으로는 다음과 같다. 그리고 다른 모든 것들 정말 결과입니다 의 온라인 참조 올려 또는 일부를 수행하는 방법을 인터넷 검색 기술 또는 우리가 보았 듯이, 페이스 북의 소스보고 코드, 웹 사이트에서 찾고 당신이 그것을 좋아하는 것은 소스 코드이고 이해하는 방법이 개발자 실제로 물건을 마련했다. 

그래서 우리는뿐만 아니라 이미지 작업을 수행 할 수 있습니다. 그리고 사실, 우리는 좀 전에 그것을했다. 내가 가서 당신을 그냥 보여 드리죠. 여기에 몇 가지 예제 코드입니다. 당신은 이제까지 심술 고양이를 참조하십시오. 그래서 내가 할 수있는 것을 알 수 여기에 이​​미지 태그가 있습니다. 그리고 위의 코멘트를 가지고있다. 나는 대안을 가지고 접근성 텍스트입니다. 화면을 사용하고 그래서 사람 시력의 이유로 독자 실제로 다음 수 있습니다 자신의 스크린 리더는 심술 고양이를 말한다. 만약에 그들이 할 수 없기 때문에 이미지를 볼 수, 그들은 적어도 자신의 컴퓨터를 가질 수 있습니다 그것이 구두로 무엇을 그들에게 말해. 그리고 그 파일의 소스는 cat.jpeg이다. 그래서 사실, 난 정말 원한다면 내가 할 수 무엇을, 영리 얻을 done-- 그래서, 릭 Astley로 이동하지 약속 내가 대신 고양이를위한 Google거야. 그리고 구글 이미지에 가면 여기에, 우리는 가정합니다 것을이 내 고양이의 사진입니다. 

내가 컨트롤을 클릭 있다고 가정 또는 오른쪽 실수로,이를 클릭 소름. 그리고 cat.jpeg 나는거야 내 바탕 화면에 저장합니다. 내가 지금 구름 9로 돌아가 보자. 그 여기에 내가 할 수있는 주목 로컬 파일을 업로드로 이동합니다. 그리고 나는이를 잡아 경우 파일, cat.jpeg 예고 나는 그것을 드래그 할 수 있고 클라우드 9에 드롭 그리고 여기 나 소리하는거야. 

우리는 이미했기 때문에 당신에게 cat.jpeg 파일을 주어진, 하지만 슈퍼 쉽게 당신이했습니다 사진을 잡아 페이스 북에서 촬영 플리커 등 또는 실제로 드래그 앤 드롭 다음 클라우드 9에와 것은 그것을 만들 자신의 개인적인 부분 웹 사이트 또는 문제 우리가 곧 볼 수 있습니다로 7 ~ 8을 설정합니다. 그리고 때를 마지막으로 그 고양이를 방문, 나는 그 같은 고양이 다운로드 가정, 그 that--주의 사랑스러운했다. 

당신이 볼 것이다 것은 여기이 얼굴과 같은. 파일 그래서 당신 웹 페이지 내에서 레퍼런스 중 하나를 자신의 지역이 될 수 있습니다 다른 서버에 계정 또는 원격 릭의 경우와 마찬가지로 조금 전에 Astley 사진. 그렇다면 무엇을 else-- 다른 우리가 여기서 할 수 있습니까? 그럼 다음을 살펴 보자. 당신은 종류의 어떤 멋진 알아? 

우리는 지금까지 만들어왔다 매우 정적 웹 페이지를 참조하십시오. 본인은 다음과 같은 일을 양념 할. 난 내 자신의 검색 엔진을 만들고 싶어. 그래서하자, 검색 엔진을 만들려면 가서이 일을 시작합니다. 내가 가서 만들거야 새 파일 search.html에 불렀다. 그리고 우리는 온라인 버전을 prefabed했다. 으악. 터미널 창에 붙여 넣기하지 마십시오. 온라인 조립식 버전. 그리고는 다음과 같이 시작하는거야. 그래서 여기의 시작이다 파일 search.html에 불렀다. 나는에 저장거야 오늘의 소스 디렉토리. 나는이 검색을 호출하는거야. 사실, 우리는 더 잘 할 것이다. CS50 검색 실제로 브랜드 그것. 그리고 지금, 내가 말할거야 H1 CS50 검색 같은. 그리고 여기 아래, H2 곧 온다. 다만, H1을 개괄하고, H2는 무엇 각각 의미? 

그래, 그렇게 크고 굵게, 그리고 같은 큰,하지만 여전히 굵은하지. 그래서이 저장 이상 여기 있으면, 이제 파일 search.html에 볼 수 있습니다. 좋아,이 하나 [들림] right--입니다. 대기. 다윗은 혼란이다. 아, 바로 거기에 있습니다. 다윗은 바보입니다. 그래. 그래서 거기입니다. 그래서 CS50 검색이 곧 온다. 그래서 지금, 합성하자 우리는 지난 주에 무슨 짓을했는지. 

우리는 이야기는 어디 HTTP의 낮은 수준의 역학. 그리고이 새로운 아이디어 HTML, 어떤 단지입니다 이 마크 업 언어 어디를 정확히 무엇을 브라우저에게 우리 자신의 검색 엔진을 구현합니다. 그래서 그 대신 단지 곧 말을, 내가 해요 도입 예정 뭔가 폼 태그를했다. 그리고이 형태로, 내가 갈거야 입력 필드 같은 것을 가지고있다. 

그리고이 입력의 이름 필드는, 나는 그것을 호출하는거야 Q. 이 입력 필드의 형식 내가 말할거야 그냥 "텍스트"입니다. 텍스트 필드와 같은 우리는거야 참조, 단지 텍스트 상자입니다. 그리고 그것은이 여기 감지하지 않습니다 이 시점에서 그것의 내부에 아무것도. 그래서 나는 단순히거야 그와 태그를 닫습니다 앞으로 태그 자체에서 바로 슬래시. 그리고 나는 갈거야 다른 하나의 입력을 가지고있다. 입력 방식은 제출 같습니다. 그리고 나는 갈거야 너무이 하나를 닫습니다. 

그리고 지금은 여기에 돌아갈거야. 그리고 이미 우리는, 참조 꽤 추한이기는하지만, 나는했습니다 의 시작을 얻었다 여기에 내 자신의 검색 페이지. 사실, 내가하려고하자 조금이를 정리. 그것은 해당 밝혀 여기에 입력, 나는 할 수 있습니다 자리라는 또 다른 속성. 그리고 나는 키워드 같은 것을 볼 수 있습니다, 상세하게, Q 쿼리. 

그리고 지금, 내가 가진, 알 회색 텍스트의 종류 그 같이 사라 빨리 입력을 시작으로, 하지만 아마 뭔가 당신은 다른 웹 페이지에서 봤어요. 정말 제출 버튼을 좋아하지 않는다. 그래서 실제로 줄거야 버튼을 검색 값을 제출합니다. 내가 다시로드하는 경우 그리고 지금, 알 내 버튼이 검색의 이름이된다. 당신은 정말하지 않습니다, 알고 여기에 로고 등을들 수있다. 그래서 구글 글꼴 생성기. 

본인은이 양념 싶다. 그래서 CS50 검색. 내 자신의 로고를 만들 수 있습니다. 즉, 좋은 보인다. 그래서 지금 날이 어서 as-- 저장할 수 있습니다. 어디거야? 가. 그래. 그것을 놓쳤다. 다른 이름으로 저장. 바보 브라우저. 대기, 우리는 갈거야 이 한번에 해결. 우리는 거기에 갈. 괜찮아. 죄송합니다. 비번 날. 지금 이것은 펑키입니다. 전체 화면을 종료합니다. 괜찮아. 

지금, 정상 등 사람으로 이미지를 저장합니다. Logo.gif. 지금은 CS50IDE과에 갈거야 나는 단순히 로고를 잡아 갈거야, 나는에 드래그거야 내 소스 일곱 디렉토리, 파일이 이미 내가 그와 함께 확인 해요, 존재한다. 그래서 나는 그것을 대체 할거야 나는 이미 그것을 가지고 있기 때문이다. 그리고 지금 내가 어떻게이 제거합니까? 

의 여기 가서하​​자 이미지 소스는 logo.gif 같습니다. 이를 닫습니다. 저장합니다. 그리고 지금은 내 검색으로 돌아 가면 페이지, 지금은 꽤 좋은 찾고 있습니다. 좋아, 그렇지 갖도록 매우 유용 아무 짓도. 사실, 내가 검색 해보자 그리고 고양이를 위해 무슨 일이 일어 나는지. 고양이. 젠장. 그냥 분명히 작동하지 않습니다. 그래서 중요한 부분은 무엇인가 즉, 여기에 누락? 

오른쪽, 당신은 어떤 HTML을 모르더라도, 나는 전화 양식을 표시 시작했습니다 나는, 입력을 얻는 방법을 말 했어요 나에게 텍스트 상자를주고 버튼을 제출, 분명히 어떤 부분을 누락? 우리가 실제로 싶어한다고 가정 제대로 작동이 일. 우리는 무엇을 어떻게해야합니까? 우리는 백엔드를 구현할 필요가 또는 데이터베이스 검색 엔진 자체 그것은 걸릴 것 솔직히 시간이 훨씬. 

그래서 우리는 지난 시간에 한 일을 기억한다. 그래서 당신은 구글에서 무언가를 검색하는 경우 당신은 사전에 꺼져 리콜, 빠른 검색. 그래서 내가 그를 해제하자 그래서이 실제로 이전 학교 브라우저처럼 동작, 지금은 고양이처럼 뭔가를 검색하면, URL이 어떻게 생겼는지 기억합니다. 그것은 꽤 애매합니다. 그러나 거기에 포함, 리콜은, 슬래시 검색입니다. 물음표 q는 고양이 같다. 

그리고 그 날을주는 것 같다 검색 결과의 전체 무리. 그래서 당신은 내가 할거야 알아? 나는 빌려 갈거야 다만 분에 대한 구글. 내가 가서거야 여기 내가 말할거야 이 조치를 형성하는 것이 나 대상은, 그래서, 말하자면 말 그대로 구글해야합니다. 그리고 그 방법은 내가 원 사용에 도착 될 것입니다. 

그래서 행동은 무엇인가? 액션은 이상하게, 이름 하지만 그건 단지 의미 누가 처리 할 것입니다 이 양식의 행동? 나는 검색을 클릭하면 결과는 가야하나요? 그리고 지금은 내 양식으로 돌아 가면 여기 내 웹 페이지를 다시로드 지금 뭔가를 검색 강아지처럼, 지금 주목 나는 구글을 다시 구현했다. 권리? 

내가 뭔가를 검색하려면 다른, 그것은 단지 개를 작동, 또한 고양이 작동합니다. 또한 CS50 작동합니다. 그리고 확인, 이것은 단지입니다 압도적 아래에, 그렇지? 좋아,하지만 실제로 작동합니다. 그래서 실제로 무슨 일 됐어요? 그래서 사용하여 브라우저를 가르쳤다 HTML은, 사용자로부터 입력을 취할 실제로 그 입력을 보내 원격 서버에 HTTP를 사용. 

그리고 브라우저 때문에 HTTP, 그 사실을 이해 무엇 있도록 URL을 구성 나는, 내 브라우저에서 이상 끝 무슨 일 통지 때 나는 개를 검색. 내가 검색을 클릭하면 알 수 내가 의도 한대로 URL을 변경 쿼리 개에 해당 google.com/search합니다. 그리고 그 형태 때문이다 방법은 얻을 수 있기 때문에, 알고, 단순히 거기에 해당 URL에 추가합니다. 

지금,이 웹 페이지는 여전히 못생긴. 그럼 다른 하나를 소개하자 구문의 조각 오늘날 우리가 할 수있는 경우에. 그리고 이것은 알려진 일이다 CSS 스타일 시트 등. 그래서 나를 살펴 보자 여기에이 예제와 참조 우리는 무슨 일이 일어나고 있는지 추론 할 수있는 경우. 이 CSS0.html입니다. 그리고이 어디 것들 조금 추한. 불행하게도 때문에 웨브의 세계에서, HTML은 혼자 모든 것을 할 수 있습니다. 그리고 당신이 원하는 경우 당신의 웹 페이지에 스타일 당신은 실제로에 초점을 맞출 필요 다른 방법으로 미학. 그래서 여기, 내 웹의 몸을 가지고 이는 내부 페이지는 큰 DIV이다. 그리고 사업부는 분할을 의미한다. 그래서 단락하지만처럼 같은 의미가 없습니다 텍스트의 단락의. 

이것은 단지 의미 브라우저, 여기에 온다 내 웹의 큰 사각형 영역 페이지, 내가 특별히 그것을 처리 할. 그 DIV가 시작되는 지금, 라인 (21)이다. 그리고 그냥 추측을. 에 라인 (21)의 효과가 무엇입니까 페이지 내용의 나머지? 를 중심으로. 그게 다야. 그래서 우리는 방법을 보지 못했다 실제로 텍스트 센터링. 

사실, 내 검색 엔진 실제 구글과는 달리, 모든 왼쪽에 이상 정당화했다. 그래서 지금은 라인 (21)에, 나는 야, 말하는거야 브라우저 페이지의 사업부를 만들 수 있습니다. 그냥 나에게 큰, 눈에 보이지 않는 사각형을 제공합니다. 그게 내가 원하는 방법 웹 페이지에 대해 생각합니다. 다음과 같이 그리고 그것을에 스타일. 그 따옴표의 내부, 지금, 제 2 언어이다 우리는 오늘 소개 한 라는 CSS 스타일 시트. 다행히, 너무 아니다 프로그래밍 언어 그래서 매우 구문 제한 있어요하지만 또한 아주 그 기능 제한 HTML 반면에 관한 모든 것입니다 웹 페이지의 데이터를 마킹 및 웹 페이지의 구조. CSS는에 대해 일반적으로 마지막 마일, 미학, 크기 및 색상을 얻기 웹 페이지에서 바로 바로 위치. 그리고 실제로, 그것은이 형성된다 키 값 쌍. 

이, 텍스트 등의 특성 콜론, 정렬, 그 값의 다음에 이 경우 센터 속성. 그리고 지금 당신을 통지 둥지 이런 일을 할 수 있습니다. 나는 그 모든 것을 원한다면 나는, 중심을 강조했습니다 그 이유는 내가 선 (21)을 가지고 해당 라인 (31). 하지만 지금은 가정 존을 말하고 싶습니다 하버드는 나의 홈 페이지에 오신 것을 환영합니다. 

저작권 기호 존 하버드. 내가 처음한다고 가정 그 라인은 꽤 큰합니다. 36 픽셀. 그래서 괜찮은 크기입니다. 그리고 대담하기 위해 무게를 원했다. 그러나 그 아래, 나는 작은 텍스트를 할 수 있습니다. 그리고 그 아래에, 내가 원하는 더 작은 텍스트입니다. 죄송합니다. 오늘은 오프 날 것 같은 느낌이 든다. 

그래서 지금, 나는이를 표현하기 위해 무엇을하고 있는가? 여기에 라인 (22)에 내장되어 사업부 또는 중첩 된 DIV, 당신이됩니다. 너무 자신의 스타일 태그가 있습니다. 나는 36의 글꼴 크기를 지정합니다. 나는 대담한의 글꼴 두께를 지정합니다. 여기에 아래로, 나는 단지 24 픽셀을 지정합니다. 그리고 마지막으로, 라인 28, 나는 12를 지정합니다. 그래서 그냥 빨리 전성 검사 등 그리고 인간이 읽기로, 화면에있는 단어 실제로 굵은 될 것? 어떤 라인은 실제로 굵은입니까? 

그냥 존 하버드. 권리? 라인 (22)이 헤이 말한다 것처럼 때문에 브라우저, 여기에 페이지의 한 부문이다. 이 글꼴 크기 36 포인트를 확인합니다. 글꼴 두께를 굵게. 최대한 빨리 도달로 해당 종료 태그 또는 라인 (24)에 닫힌 태그, 그 수단, 헤이 브라우저, 당신이하고있는 무엇이든 일을 중지합니다. 그리고주의 사항에도 불구하고, 명확하게하기 선 (22)는 이러한 특성을 모두 가지고 스타일처럼, 때를 라인 (24)에 태그를 닫습니다, 당신은 단지 태그의 이름을 언급. 

당신은 단어의 스타일을 반복하지 않거나 그 따옴표 내부의 아무것도. 그리고 지금 이것 좀 봐 그렇다면 브라우저에서의가 보자 최종 결과보고. 날 보내 주라 앞서 CSS 0이 파일에. 그리고 그것은 꽤 일반 여전히 하지만 꽤 흥미지고. 그러나 거기에 밝혀 내가 여기서 할 수있는 다른 것들, 그리고 만드는 위험 완전히 무시 무시한이, 여기에 있다는 점에서 알 내 내 웹 페이지의 몸, 나는 재미 뭔가를 할 수 BG 또는 배경 색상 등을들 수있다. 

그리고 빠른, 가장 좋아하는 색깔은 무엇입니까? 녹색 나는 들었다. 괜찮아. 그래서 지금, 내가 지금 다시로드를 공격하는 경우, 우리는 녹색 웹 페이지가 있습니다. 좋아, 그래서는 나쁘지 않다. 그리고 지금, 나는이를 만들고 싶어 정말 멋진, 내 텍스트의 색상을 만들 수 있습니다 심지어 빨간색. 그래서이 어떻게 생겼는지 보자. 지금은 꽤 좋은 찾고 있습니다. 그리고 아래로 여기, 당신이 만약 정말로 사람과 혼란에 원하는 또는 당신이되고 싶은 경우 그 사람들 중 한 사람 웹을 방문으로 당신을 속여 시도 페이지들이 구글의 속임수했기 때문에 사고로 전체 무리가있다 핵심 단어를 보자 그때 엔으로, 다시로드합니다. 어디 갔습니까? 그리고 우리가 그것. 괜찮아. 나는 옆으로이 말을 그래서 우리는거야 몇 주에이 물건에 대해 이야기 우리에 대해 이야기 할 때 보안, 당신이 경우 실제로 의 포함 전체 송이 웹 페이지에서 키워드 그들은 볼 아니더라도 구글과 같은 인간, 사람, 물론, 아직 실제로이를 찾을 수 있습니다. 좋아, 그래서 꽤입니다 꽤 빨리 끔찍한. 

그리고 사실, 그것은 모두가 아니다 내 자신의 웹과는 달리 그 정도 학부, 같은 페이지에있는 내가 찾는 주위에 인터넷 검색 시작 나의 오래된 웹 사이트의 이전 버전. 그것은 아주 나쁜했다. 사실, 난 찾았 어 단지 클래스 전에 하나. 그러나 거기 더있다. 이것은 분명히했다 나의 1996 홈 페이지. 분명히 나는​​ 그것이라고 생각 사람들에게 자신의 이름을 물어 적절한 할 수있을 전에 실제로 내 웹 페이지를 참조하십시오. 

그리고 나는 그들을 보여 아마 바보 같은. 나는 다음 시간에 대한 자세한 내용을 발굴합니다. 하지만 지금은,하자 디자인의 비트를 고려한다. 우리는 스타일에 대해 얘기했습니다. 이 페이지 지금까지와 내가 작성한 대부​​분의 모든 문체 매우 깨끗합니다. 그러나 디자인에 대해 무엇? 음, 중복이 많이있다 내가 여기서 뭘했는지에. 

나는 단어를 언급 한 장소의 몇 가지 색상. 나는 몇에서 글꼴 크기를 언급 한 장소 몇 곳과 대담한. 그리고 근본적으로, 나는 공동 해요 두 가지 언어를 어울. 내 태그와 함께 HTML을 가지고 내 다음 속성 급격하게, 따옴표 사이에, 나는이 두 번째 언어 오늘 다시, 바로이있다라는 CSS, 키 값 쌍 또는 이러한 속성 콜론으로 구분. 

그것은 그 정도를 밝혀 같은 C에서 우리가 어디 아웃 요인을 시작할 수 있습니다 헤더 파일에 일부 코드, 그래서 우리는 HTML에서 동일한 작업을 수행 할 수 있습니다. 다음과 같이 그리고 그 방향으로 단계입니다. 이 버전은, CSS1.html가 있음을 알 수 있습니다 동일한 웹 페이지를 구조적으로. 그래서 왕창있어 div에의,하지만이 시간, 나는했습니다 래퍼 제거이라도 당신이 볼 수로 DIV. 

그리고 나는 그 세 된 div를 준 위, 중간, 아래, 고유 ID. 이는에 의해, 좋은 그 사단을주는 페이지 고유 식별자의, 나는 다른 곳을 참조 할 수 있습니다. 어디? 음, 저를 위로 스크롤 할 수 있습니다. 그리고 지금까지, 언제 우리가 검토 한 웹 페이지의 선두에, 무슨 일이야 우리가 했어 유일한 태그 웹 페이지의 선두? 조금 더 크게. 그냥 제목까지. 그러나 거기에 밝혀 몇 가지 다른 것들 당신은 거기에 하나를 넣을 수 있습니다 이는이 스타일 태그라고. 그래서 잠시 전, 우리는 보았다 스타일 속성에. 스타일 태그 거기에 밝혀졌습니다. 그것은 내부에 속하는 웹 페이지의 선두. 그리고 지금 내가 뭘하는지 알 수 있습니다. 나는이 내부에있다 스타일 태그 다음. 말 그대로 라인 (20)에 언급하고있어 내가 스타일을 적용 할 태그의 이름입니다. 

그럼 열린 중괄호가 그리고 중괄호를 마감했다. , C의 정신에 따라서 유사하지만 또,이 기능이 아닌, 이 여기에 단지 구문 세부 사항입니다. 그리고 물론, 내가 말하는거야 브라우저, 헤이 브라우저, 페이지의 전체 몸을 중심의 텍스트 정렬을 갖는다. 그리고 다음이 다음과 같은 말을한다. 이봐 브라우저, 당신은 HTML을 보면 페이지의 요소 또는 태그 그 상위의 고유 한 식별자를 갖는다 그래서 해시 심볼 여기 바로 수단 상단의 독특한 아이디어, 진행 그 글꼴 크기 확인 (36) 그 글꼴 두께 대담한. 

이봐, 브라우저, 그 요소 ID는 24 픽셀 수 있도록, 중간이다. 그리고 헤이 브라우저, 당신이 볼 경우 하단의 아이디어는, 그것을 12 픽셀합니다. 결국 효과 정확히 샘이다. 나는 CSS 1에 들어갈 경우, 페이지는 동일한 보인다. 그러나 우리는 대한 발짝 약간 더 나은 디자인. 내가 지금 CSS2에 여기로 가자 내가했던 그 밖의 무엇을 참조하십시오. 

이제 페이지가 정말, 정말 깨끗합니다. 사실, 난 모두를 맞을 수 여기 페이지의 내용을 표시합니다. 그러나 새로운 기능 태그 내가이 분명, 도입? 링크. 그리고, 태그 최선의 이름이 아니다 이 점에서 링크 아니기 때문에 우리는 그것을 알고있다, 그러나 이것은 의미 다른 파일에 대한 링크. 이 샤프 C.에 포함의 같은 종류 

이것은 HTML의 방법입니다 브라우저를 봐 말을, 의 내용을 가서 파일이 css2.css을했다. 관계, 나에게, 이 스타일 시트는 것이다. 그리고 실제로, 그 무엇의 하나 CSS 스타일 시트 수단에 S 년대. 이 스타일 시트이다. 그것은 단지 포함 된 텍스트 파일의 숙박 시설의 전체 무리. 이 스타일의 전체 무리의 당신은 페이지에 적용 할 것이다. 

그리고이 분명히있다 두 번째 파일을 참조. 그리고 나는 그, CSS2.css를 열 경우, 모든 내가했던 것을 알 수 복사 모든 붙여 넣기입니다 이 파일에이의. 그리고 지금, 당신은 적이없는 경우에도 전에이 물건을 코딩, 다만 고려해야 속담 엔지니어링 모자 에 이유는 아마도 더 나은 디자인? 그 CSS 속성을 감안, 자신의 파일에 넣어. 비록 우리는이 문제를 해결 문제 같은 오분 전 첫 번째 버전. 

우리는 개선되지했습니다 페이지 문체, 이것은 단지 더 나은 어떤 의미에서 디자인. 왜 생각하십니까? 그래. 더 유연한 방법? 그래. 당신이 가고 싶다면 다시 물건을 변경, 지금, 당신은 하나의 장소가 여기서 당신이 일을 변경할 수 있습니다. 그리고 사실, 뭔가 같은 문제는, 일곱 설정 우리는을 구현 볼 수있는 곳 주식 거래 웹 사이트, 즉,이 것 페이지의 전체 무리. 그리고 그것은 정말로 것 짜증나는 당신이 결정하는 경우, HM, 난 정말 내가 원하는, 24 픽셀을 좋아하지 않는다 그것은 28 픽셀 또는 약간 더 큰합니다. 그리고 할 필요가 찾기 및 바꾸기 글로벌 또는 당신의 웹 사이트의 모든 파일을 엽니 다 단순히 실제로 하나의 값을 변경합니다. 이러한 스타일을 감안하여 중앙의 한 곳으로, 이제 하나의 텍스트 파일을 열 수 있습니다 어떤 프로그램에 CS50IDE에, 이를 변경을 저장하고 수행. 당신은 사람들을 전파했습니다 사방 변경. 그리고 그것은 같은 것 도트 H 파일뿐만 아니라. 그래서 질문이 이렇게 지금까지이 구문에? 좋아, 그래서 우리는했습니다 모든 것 같다 수행 실제로 제외하고 하이퍼 링크를 구현한다. 그리고 이제 가서이 작업을 수행 할 수 있습니다. 내가 가서 보자 여기에 새 파일을 만듭니다. 나는 그것을 호출하는거야 link.html, 오늘의 코드에 넣어. 

그리고 오픈 할거야 브래킷 문서 형식 HTML. 에서 제외하고,이 일로서, 상단,이 문서 유형 선언, 그것은 이상한 유일한 하나 느낌표. 당신은 그냥 거기에 그것을해야하고 우리가 HTML 버전 5를 사용하는 것을 의미한다. 이전 버전 언어는 더 이상했다 당신이 필요한 문자열이 넣어. 그래서 여기에 링크라고하는 예입니다. 

여기 내 웹 페이지의 몸이 필요합니다. 그리고 여기에, HREF 등호 의는 HTTP://www.disney.com을 가정 해 봅시다 내 마음에 드는 웹 사이트, 우리는 말할 것이다. 좋아요, 아주를 무해한, 사용자 친화적 인 페이지. 나는 지금 내 디렉토리로 이동하는 경우 여기 목록 및 link.html을 열어, 우리는 하이퍼 텍스트가 있습니다. 

그리고 실제로이 어디 HTTP의 H는에서 온다. 하이퍼 텍스트 전송 프로토콜 텍스트 전송에 관한 것입니다 즉, 다른 리소스에 대한 하이퍼 링크가 있습니다. 그리고 실제로, 여기에, 잘 알고있다 복고풍 경우, 파란색 링크를 클릭하면 그, 실제로 Disney.com 날을 이끌 것입니다. 이제, 오, 곧오고있다. 좋아, 그래서 지금, 무엇 일부 이것의 의미의? 

그리고 솔직히, 세계가 시작됩니다 좀 더 익숙해 질 또한 조금 무서운 뿐만 아니라 조금 더 당신이 시작하면 방어 자기 이런 일을 이해합니다. 확률은, 당신의 일부, 당신이가는 경우이기 때문에 자신의 Gmail의 스팸 폴더를 통해 또는 받은 편지함, 당신은 아마했습니다 이메일의 어떤 종류를 얻었다 그 변화를 묻는 것 당신의 암호는 아마 아니면 확인 페이팔 자격 증명이나 이것 저것. 

그리고 사실, 당신이받은 수 여기를 클릭하십시오처럼 말한다 무엇인가 페이팔 비밀번호를 재설정합니다. 그리고 지금, 경우, 통지 이 Disney.com 아니다 하지만 같은 badplace.com과 다시로드하는 것으로 여기에 텍스트 전혀 아무것도 말할 수 있습니다. 사실상, 이것은 단지 단어이다. 이유는 실제로 슈퍼 악성하지 말라 및 http://www.paypal.com을 말한다. 

페이팔을 다시 여기를 클릭하십시오 암호를 지금 다시. 이것은 바로, 꽤 합법적 보인다? 내가 클릭 않을 것, 의미 그냥이 말한다 이메일. 그러나 여기 이분법을 알 수 있습니다. 그것은 www.paypal.com 말한다, 사실, 잠깐, 우리는 당신이 원하는 것을 알고있다 보안에 대한의. 그래서 지금, www.paypal.com HTTPS로 이동 그러나 당신이 전에 이런 짓을 적이있는 경우, 하는 습관을받을 수 있나요 여기에 작은 링크를 통해 유혹. 그리고 볼 어렵다 이 화면에서, 그리고 여기에 모든 것을 쉽다. 하지만 방법 아래로 여기에서 작은 작은 코너 실제로 브라우저는 않습니다 우리가 가고 있다는 것을 당신에게 대신 Paypal.com의 badplace.com합니다. 자, 여기서 우리는이와 함께가는거야? 우리가 오늘했던 모든 예제, 우리는 하드 코드 및 수작업 입력 한. 웹은 믿을 수 없을만큼이다 재미 때 하드 콘텐츠 그래서 당신의 웹 페이지를 코딩 정적 결코 변화하지 않는다. 의 물론, 우리의 모든 즐겨 찾는 웹 사이트 오늘, 그것은 Gmail이나 트위터 또는 여부 페이스 북이나 다른 사람의 수 동적입니다. 그들은 변화하는 것 사용자 입력에 응답 바로 Google 검색 결과 등을들 수있다. 

그래서 수요일에, 우리가 할 것은 우리는 HTML과 CSS 도입을두고 우리가 타고 우리 뒤에 지금 우리 것을 당연 그것을 알고 우리는 소개 새로운 프로그래밍 언어 좋아라고 PHP, C는 우리에게 줄 것입니다 실제로 프로그램을 만들 수있는 능력 스스로하는 것이 출력을 생성합니다. 이 경우, 우리는 사용할 것 PHP 동적 웹을 생성 이 새로운 언어를 사용하는 페이지. 수요일에 그에 따라서 더. 그때 만나. 

[음악 재생]