데이비드 J. 마란 : 좋습니다. 우리는 다시 수 있습니다. 그래서, 마지막 세션의 목표 몇 개념을 소개하는 것입니다 뿐만 아니라 모든 사람들에게 기회를 제공 종류의 손가락을 스트레칭 실제로 뭔가를 작은 손에. 목표는하지 설정하는 것입니다 우리 모두 웹 개발자로 어떤 방법하지만 정말 그냥으로 몇 가지의 맛을 제공합니다 무엇의 기본 구조의 웹 프로그래밍 오늘 웹으로 간다 개발, 너무 things--의 정적 측면 아무 논리도없고, 프로그래밍 언어, 그냥 정적 콘텐츠. 그리고 그것은 우리에게 기회를 제공 할 것입니다 실제로 웹 서버가 무엇인지 보려면, HTML 파일이 무엇인지, 무엇을보고 참조 그것은 HTTP 실제로까지 제공된다. 그러나 우리는 어떤 회고전에서 다이빙을하기 전에 클라우드 컴퓨팅에 대한 질문 보안 또는 사이에 아무것도 나? 아니? 좋아, 잘하자 단지의 경우,이 작업을 수행 가입 과정 뭔가 몇 분 정도 걸립니다. 우리는 백그라운드에서 그것을 할 드리겠습니다. 당신이 할 수있는 경우, 어서, 이 URL here-- c9.io.에 이 타사이다 service-- 서비스로서의 플랫폼, 당신이 will-- 경우 그것은 당신을 초대하는 것입니다 계정에 가입하고, 그리고 당신의 각을 줄 것 소위 클라우드 계정 누군가 다른 사람의 인프라, 회사는 Cloud9을했다. 그러나 대한 좋은거야 이것은 그들이 당신을 줄 것입니다 의 근사치 실제 실제 개발 환경,이기는에서 클라우드 및 웹 브라우저에서, 우리는 실제로이를 사용합니다 오늘 약간의 실험. 그리고 가서 바로 이동 가입 절차에 당신의 방법 만약 네가 가능하다면. 그래서 우리는 클래스에서 이것을 사용하는 일이 나는 우리 학생들 모두에게 가르 칠 캠퍼스에 지금 오프, 두 그것은 어떤 역사적으로 교체있어 그렇지 않으면 다운로드 가능한 소프트웨어이었다. 그래서 당신에 대한 액세스를 확보했다 이러한 가상 머신 중 하나입니다, 기본적으로, 나는 앞에서 설명한 것이다. 그래서이 회사 Cloud9 아마 실제로 제 party--에서 임대료 이 경우, 전체 Google-- 가상 머신의 무리 그들은 어떻게 든들로 잘라 것을 개별 서버의 환상 우리 각자 것을 완벽하게 제어 할 이상이 있습니다. 이 말을 매우 정확 아니다 그들은 가상 머신 걸, 하지만, 때문에 어떤 Cloud9 실제로 사용 다소 새로운 기술입니다 컨테이너 수송했다. 그리고 내가이 사진을 잡아 보자 여기에이 그림을 그릴 수 있습니다. 

컨테이너는 경우입니다 당신은 사진을 리콜 가벼운 이전, 약간의 가상 머신보다 무게. 사실, 마지막 반면, 시간은 우리는 약이 이야기 운영되는 시스템 및 하이퍼 바이저 다음 게스트 운영 체제, 게스트 운영 체제, 게스트 운영 상단에 시스템, 당신의 물리적 하드웨어, 이 새로운와의 차이 기술, 컨테이너 수송, 그들 모두가 어떻게 든 공유 할 것입니다 동일한 운영 시스템. 그러나 그들은 여전히​​ 생성 모든 사람의 환상 자신의 독점을 갖는 관리 권한 및 파일 서버에서. 그러나 적은 소프트웨어있다 당신과 하드웨어 사이. 의 결과에서, 이론적으로, 더 높은 성능, 당신이 사용하고 있기 때문에 나 적은 자원을 낭비 그 소위 가상화 계층에. 그래서이라고 본래 컨테이너 수송 도커이라는 기술의 방법으로, 이는 매우 자신에오고있다. 그리고 이것은 뭔가입니다 기업의 엔지니어 가지 종류의 이야기를 시작 수 있습니다 에 대해 곧 그들은 이미하지 않은 경우, 더 확실히 거기에 불구하고 이유는 bandwagons에 이동합니다. 

그는 말했다와 그래서, 무엇을 당신은 아마 지금 참조 이 같은 조금 보이는 화면입니다. 승인. 하지 않을 경우 그냥 저를 통해 호출합니다. 그리고 그러니까 ...하면은 내가 아니더라도 와서 것이다. 가서 그 큰를 클릭 플러스 작업 공간을 만들 수 있습니다, 당신은이 같은 화면을 볼 수 있습니다. 당신은 작업 영역을 호출 할 수 있습니다 당신이 지금 원하는 무엇이든 이름을 지정합니다. 다만 실제로 편의를 위해, 잘 당신의 일부를 그리고 - 이동 이미 작업 공간이 있습니다. 당신이 사업을 원합니까 무엇을 호출 당신이 원하는 무엇이든 하버드, 목요일. 당신은 설명이 필요하지 않습니다. 당신은 개인두고 할 수 있습니다하지 않는 한 이미 작업 공간의 무리가 있습니다. 당신이 그것을 공개하도록 강제하는 경우, 즉, 오늘날의 목적을 위해 괜찮아요. 여기에, 역시 상향 판매 중 하나입니다. 당신은 하나의 개인 작업 공간으로를 얻을 수 태만. 하지만 당신은 더 많은 것을 원하는 경우 당신은 더 많은 비용을 지불해야합니다. 그렇지 않으면, 그들은 당신을 강제로 작업을 공개합니다. 하지만 그들이 있기 때문에 또한, 괜찮아요 오픈 소스 커뮤니티에서이 대상 사람들을 격려하기 실제로 공동 작업을 수행 할 수 있습니다. 

그리고 중요한 마지막 일, 당신이 이름을 선택 후, 비록입니다 당신은 개인 또는 공용 선택 후, HTML5, 큰 오렌지 아이콘을 클릭합니다 왼쪽에서 두 번째, 그리고 다음 작업 공간 만들기를 클릭합니다. 그리고 그것은 아마 것 또는 그렇게 분을 하지만 당신은 다음을해야합니다 환경, 당신이 한 번 연상 보이는, 그렇게 여기 지금 화면에 무엇을. 하지만, 다시는 분 걸릴 수 있습니다 이상이 화면에 도착합니다 당신이 클릭 한 후 작업 공간을 만듭니다. 당신이 나를 원한다면하지만 그냥 날 이상 플래그 아무것도 또는 조언을 살펴합니다. 괜찮아. 그래서 나는 지금이 배경에 갈거야. 당신이 보이는 경우에 저를 통해 전화 기술적 인 어려움이있다. 그러나 다시, 그것은 걸릴 수 있습니다 그 열기위한 약간. 그리고 이제 가서 얘기하자 무엇을 실제로 웹 페이지를 만드는 수단 어떤 HTML 것은, 어떻게이 모든 우리가 시작하는대로 지금 상호 연결 실제로 기술의 일부를 사용합니다. 그래서 내가 할 수있는 것으로 나타났다 여기에 내 작은 맥에 가서, 라는 간단한 프로그램을 엽니 다 텍스트 편집기 또는 Windows에서 내가 할 수 Notepad.exe를 호출 열린 뭔가. 그리고 나는 단지 뭔가를 할 수 이 항아리 "안녕하세요, 세계."와 같은 그리고 나는대로이를 절약 할 수 hello.txt 그래서 거기에 어떤 마법. 이 웹 함께 할 수 없다 프로그래밍, HTML과는 아무. 그냥 간단한 텍스트 파일을 생성. 그러나 웹 밝혀 페이지는 문자 그대로 그 단지입니다. 그것은 간단한 텍스트 파일에 포함 된 텍스트의 당신이 당신의 키보드로 입력 할 수 있음을, 그러나 일반적으로 항상은 아니지만 .txt로하지만, .html 파일 또는 .HTM하지 만료됩니다. 그리고 당신은하지 않습니다 파일의 단어를 입력합니다. 당신은 실제로라는 것을 사용해야합니다 태그 또는,보다 일반적으로, 어떤 마크 업 언어라고합니다. 

그래서 매우 빠르게 입력 할거야 후 다음을 설명합니다. 내가 처음에 갈거야 라고하는이 입력 이봐, 브라우저, 여기에 오는 웹 페이지는 HTML로 작성된. 그리고이 두 가지가 함께, 헤이, 말 브라우저는, 다음 HTML 참이다. 이봐, 브라우저, 여기에 오는 머리 또는 내 페이지의 상단. 의 상단이 봐, 브라우저, 내부 내 페이지, 안녕하세요 "하는 제목을 넣어 세계." 의 안녕, 브라우저, 후 머리를 내 페이지는, 여기 내 페이지의 본문 온다. 그리고, 헤이, 브라우저의 신체 내 페이지는 "안녕하세요."라고한다 그래서 두드러진 세부 사항은 여기에 무엇입니까? 이것은 일반적으로 무슨이다 한 문서 형 선언라고, 그리고, 솔직히, 그것은 약간의 이 처음에는 기억하기 어렵다. 당신은 종류의 복사 - 붙여 넣기를. 이 공식 방법 헤이, 말하는, 브라우저, 나는 HTML 버전 5를 사용하고있는 다소 최근에 나왔다. 그것은 몇 가지 그 마법의 주문이다 디자인의 빈약 한 감이있는 사람 상기 넣어하기로 결정 파일의 맨. 그것의 경우에도 작은 비밀은 그게 다야 그것은 여기에, 헤이, 브라우저를 means-- HTML의 버전 5와 함께 제공됩니다. 

이것의 나머지는 우리와 함께하고있다 이제 몇 시간 동안, 역사적으로, 그러나 진화되고, 그리고 그것의 아마 조금 더 간단 받고있다. 몇 가지 특성을 주목하라 내가 강조했습니다 무엇. 각도에 이런 일있다 왼쪽 브래킷을 brackets-- 오른쪽 브래킷. 그리고 여기 대칭을 알 수 있습니다. 그리고 대칭으로, 난 그냥 같은 의미 I 여기이 시작 태그 또는 오픈 태그가 당신이 경우, 여기까지 나는이 가까운 태그 또는의 종료 태그 단지 한, 그것은이이 서로 다른 단어의 시작 부분에 슬래시 HTML. 그리고 당신은 생각할 수 이 내가 부담이었다로 이봐, 전에 제안, 브라우저, 여기에 몇 가지 HTML 온다. 그리고, 반대로, 헤이, 브라우저, 그건 이를 HTML-- 시작 및 종료합니다. 

여기에 한편 헤이, 브라우저, 내 페이지의 머리를 온다. 이봐, 브라우저, 즉 머리를 그것입니다. 이봐, 브라우저, 여기 내 페이지의 본문. 이봐, 브라우저, 즉 몸을 위해 그것을이다. 그리고 내부에 그 일부 지금은 임의의 텍스트. 그리고 머리의 내부 한편, 일부는 임의하지만 태그입니다 그래서, 제목을 말한다 텍스트로 이야기하는 내 페이지의 "안녕하세요, 세계."한다 자, 이제, 당신은 할 수 그 브라우저를 가정 오히려, 웹 페이지가, only--하거나 두 개의 헤드와 본체를 파트로 나뉘는데. 그리고 머리는 일반적으로 메뉴 바처럼, 물건 정말 매우 상단에. 그리고 몸이 페이지의 용기이며, 그 큰 사각형의 모든 그 화면을 채 웁니다. 그래서 내가 가서이 일을하려고 해요. 내가 앞서 갈과 저장을 클릭, 저장 파일. 그리고 저장거야 이 hello.html으로, 난 그냥 갈거야 내 바탕 화면에 넣어. 그리고 난 갈거야 앞서 저장을 클릭합니다. 그리고 나의 맥을 notice-- 적어도 내게 고함된다. 이 작업을 수행 하시겠습니까? 그리고 예, HTML을 사용, 말거야. 나는이 경우에 더 잘 알고있다. 그리고 지금은 내 바탕 화면에 갈거야 어디서 갑자기이 파일이 있습니다. 그리고 나는 그것을 더블 클릭거야. 그리고 당신에 의해, 그 알 수 있습니다 기본적으로 크롬 열었다. 그건 때문이다 기본 브라우저. 그리고 그것은 그냥 "안녕, 세계"라고 말한다. 하지만, 안녕하세요 "라는 이 곳에서 세계 ". 왼쪽 상단을 알 수 있습니다. 그것을 놓칠 꽤 하드. 그것은 크고 굵은입니다. 어디 다른 것은이 보인다 "안녕, 세계"대답? 

청중 : 탭. 

데이비드 J. 마란 : 네, 탭 자체. 그래서의 머리를 말할 때 페이지는 모두 최대 top--입니다 실제로이 제목이다. 그냥 여기 탭에 있습니다. 그리고 나는이 탭을 뽑을 수 아웃 혼동하지 않도록. 이것은, 지금은 단지 하나의 탭입니다 실제로 우리는 "안녕, 세계"를 참조하십시오 여기까지와 "안녕하세요, 세계"여기까지. 그래서 매우 간단합니다. 그러나 그것은 또한 매우 간단합니다. 그리고, 실제로, 나는 확대. 난 그냥 글꼴 크기를 변경할 수 있습니다 접근성 확대합니다. 그러나의 지금 뭔가를 할 수 있습니다 좀 더 흥미 롭군요. 

나는 으악,하자를 나아갈거야 나를 내 텍스트 파일로 돌아가. 나는 다시 갈거야 내 텍스트 파일, 나는거야 이 변경과 대답 "안녕하세요, 디즈니 월드." 구하다. 그리고 다시 가서 내 브라우저가 새로 고침을 클릭합니다. 그리고 지금, 물론, 그것을 "디즈니 월드."라고 그리고 인위적으로 확대거야 너무에서 볼 수 쉽습니다. 그래서 지금, 불행하게도, 나는 종류의 원하는 건 ... 사실, 그 맥 기능입니다. 나는 디즈니 월드을 클릭합니다 및 disney.com 같은 곳으로 이동 하지만이 작동하지 않습니다. 따라서 웹의 기본 교리는 하이퍼 링크, 다른 곳으로 이동 링크. 그래서 내가 어떻게 그렇게 할 수 있습니까? 글쎄, 난 그냥 말할 수 있습니다, "안녕하세요, http://www.disney.com." 이 내용을 저장합니다. 다시로드합니다. 하지만이 역시 클릭 할 수 없습니다. 그리고에도 불구하고, 여기에 좋은거야 이것은 아직 작동하지 않습니다 이 보인다 있다는 것입니다 브라우저는 문자 그대로 만 수행 내가 어떻게해야 그것을 말해. 그래서 난 그냥이 같은 URL을 입력하면, 그냥 나에게 URL을 표시하는 것입니다. 나는 태그 또는 마크 업을 사용할 필요가 언어는 실제로 말할 수 있습니다 브라우저가 더 많은 작업을 수행합니다. 그래서 앞서 갈거야 및 잠시이 삭제합니다. 그리고, 헤이, 말거야 브라우저, 여기에 앵커를 시작, 링크는 말하자면. 그리고 하이퍼 참조 대상 그 앵커의,이 URL이어야합니다. 그리고 내 시세를 알 수 있습니다. 나도 작은 따옴표를 사용할 수 있습니다, 하지만 일관성이 있어야한다, 나는 일반적으로 그냥 사용합니다 큰 따옴표는 간단하게합니다. 내가 태그를 닫으려고 알 수 있습니다. 그리고 여기에 내가 갈거야 "디즈니 월드를."대답 그리고 지금은 일부 symmetry-- 필요 오픈 브라켓, / A, 브래킷을 마감했다. 

그래서 내가 무엇을 도입? 우리는 이미 몇 가지 태그를 가졌다. HTML, 머리, 제목, 본문, 모든 태그, 그래서, 말하자면 개방과 폐쇄 대응과 함께. 그러나주의, 이것은 일종의 의 근본적으로 다른. 이것은 우리가 전화 할게 무엇인가 HTML의 속성. 및 특성은 그냥 키 - 값 쌍. 이것은 일반적인 것입니다 컴퓨터 science-- 키 - 값 쌍. 그것은 무역의 도구의 일종이다. 키와 값입니다. 단어 다음 몇 가지 다른 단어 또는 단어. 이 경우, 키는 HREF 인 그 값은 전체 URL이다. 그리고 어떤 속성이하는 일은 그것입니다 태그의 동작에 영향을 미친다. 이 경우, 우리는 영향 필요 앵커 태그의 동작 우리는 고정해야하기 때문에 곳이 링크를 클릭하십시오. 그리고 당신은 즉 어떻게 속성의 방법으로. 

그래서 앞서 갈거야 지금 파일을 저장합니다. 나의 브라우저를 다시로드로 이동합니다. 그리고, 짜잔, 우리는 지금이 합법적 인 웹 페이지의 시작. - 슈퍼 간단하지만 내가 올려 놓으면 이상 왼쪽 하단에있는이 항아리 통지, 그것은 슈퍼 작다. 하지만 당신은 www.disney.com를 참조 할. 그리고, 실제로이 그것을 클릭하면 멀리 disney.com에 저를 턴다. 이제, 호기심 일 여기가 없다는 것이다 상기 가장 시장성이 URL을 best--하지만, 이 파일이 없기 때문에 그 괜찮아요 월드 와이드 웹에 존재합니다. 그것은 분명히에서 로컬 파일로 존재 내 사용자 directory-- / jharvard-- 존 Harvard-- / 데스크탑. 그러나 그것은 URL이 있습니다. 그냥 로컬로 발생합니다. 불행하게도, 당신의 아무도 방문 할 수 없다 이,이 URL을 입력하면 때문에, 당신이 당신의 브라우저를 말하는 거라고 라는 파일 hello.html을 찾습니다 하드 드라이브에. 그리고 물론, 당신은했습니다 않는 수동 따라 다음되고, 존재하지 않을거야. 

그래서 괜찮아요. 우리는 아직도 궁극적 방법이 필요 웹에이 파일을 얻으려면, 하지만 이제 몇 떨어져 애타게하자 의 보안 관련 우리 단지 보고 이전에 다시 넥타이 이 아침부터 토론. 그것은 밝혀하는 경우 그 브라우저는 그대로 단지 않습니다 나는 어떻게 그것을 말해, 그것은 보이는 앵커 태그가있는 경우 일 수 있습니다 의 값에 의해 영향 이 속성이라고 HREF 하지만이 표시 텍스트,이 보인다 내가 URL을 넣을 수 있다는 것을 의미합니다 두 곳 모두에서 다음 다시로드 이제 URL을 확인하고 URL로 이동합니다. 공지 사항, 나는 왼쪽 아래 위로 마우스를 이동하는 경우, 나는 참으로 disney.com 여전히거야. 

당신이 이제까지 있었던 경우에 따라서 phished-- P-H-I-S-H-E-D-- 그 가짜 이메일 중 하나 페이팔 은행 등으로부터, 당신은 아마 내부 링크를 쪘 당신이 것을 읽고있는 이메일 당신은 확인을 이동하려면 여기를 클릭 알려줍니다 비밀번호 나 생년월일을 확인 사회 또는 뭔가 사회적으로 당신을 설계하는 것은 공개합니다 정보. 글쎄, 난 종류의 걸릴 수 있습니다 내가 할 수 없었던이의 이점? 내가 뭔가를 말할 수 같은 www.paypal.com. 대신 disney.com의, I badguy.com, 등으로 갈 수있다. 다시로드합니다. 그리고 그것은 속는하는 방법을 쉽게, 특히 비 기술적 리더 또는이 대충 읽고 클릭하는 것보다 독자 내가 그건 ...를 클릭하면이 같은 링크, 사실 badguy.com을 가고 싶지 않아. 사실 거기 모르겠어요. 그래서 paypal.com 예고이며, 이에 무슨 일이 말한다, 그러나 물론, 나는 아래를 보면 슈퍼 낮은, 그것은 약간 흐린입니다 하지만 badguy.com 말한다. 즉, 만 지금 말씀입니다 것을 나는 잘못된 장소에 갈거야. 내가 말했듯이 때 은행 정말 격려 기차 안 클릭하면 링크에 사용자이 그것의 한 표현이다. 그리고 그것은 간단입니다. 당신은 상대의 경우 지금 당신이 뭔가를 할 및 사용자를 속이려고 당신의 웹 사이트를 방문에. 하지만 지금, 우리는 계속됩니다 물건 친절하고 깨끗한. 우리는 앞서 갈거야 이러한 변화 되감기. 페이지를 다시로드합니다. 그리고 내가 다시 disney.com로 이동합니다. 

우리가 애타게 할 수없는 경우 보자 이 떨어져 조금 더. "안녕하세요, 디즈니 월드."그래서 나는 여기까지 말을하려고 해요. 어쩌면 나는 약간의 공간을 만들기 위해거야. "우리는 당신이 당신의 여행을 즐기시기 바랍니다!" 구하다. 다시로드합니다. 그 아니다 rea-- 아니에요 나는 권리를 의도? 내 텍스트를 처리하고있어 경우 내 말은, 워드 프로세서와 같은 파일, 당신은 무엇을 여기에 일어날 것이라고 기대 했는가? 그래,이 느낌 여기에 줄 바꿈해야한다, 그래서 어떤 방법으로 버그를 느낀다. 하지만 실제로 고의적이다 이전처럼 때문에 브라우저에만 것입니다 당신은 어떻게 그것을 알 수 있습니까 것. 나는 선을 깰 그것을 말하지 않았다. 난, 아래로 이동을했다 적이 없다 내가 그랬던 것처럼하지만, 직관적으로, 나는 생각합니다. 그래서 우리가 필요로 밝혀 좀 더 마크 업, 나는 다음과 같이이 문제를 해결하겠습니다. 나는 안녕하세요 먼저 서문거야 단락 태그라고 것과. 그리고 내가 가서거야 이 다른 문장을 포장 다른 단락 태그에, 비록 그들은 슈퍼 짧은 단락입니다. 지금은 저장거야. 다시로드합니다. 그리고 지금 우리는이 공간, 그리고 우리 종류의 의 의미를 가지고 두 개의 단락. 

즉, 모든 벌금과 좋은,하지만 것 이 페이지에 이미지를 추가하는 좋은, 그래서 찾아 갈거야 Google 이미지에 미키 마우스. 그리고 그냥 재미, 난 이 이미지를 잡아 것. 내가 지금 가서거야 및 이 이미지의 URL을 잡아, 다른이 비록 방법이 작업을 수행합니다. 지금은 그냥 URL을 복사거야. 내 텍스트로 돌아갈거야 파일은, 내가 여기 말할거야 IMG SRC = 인용 인용을 끝내 그 URL, 슈퍼 긴. 의 그리고 개념 이미지는 조금 다르다. 시작의 어떤 개념은 정말 없습니다 화상 및 화상 결말 시작처럼 종료 태그를 태그. 그래서 조금 이상한 느낌 나 의미,이 작업을 수행하는 근접 이미지 태그를해야합니다. 그것은 잘못이 아니다. 그것은 완벽하게 맞습니다 그것은 격려있어, 하지만 속기 표기법이있다. 난의 동시 종류의 수 열고 동일한 태그를 닫습니다, 그 브라우저가 행복 할 것입니다. 그래서 조금의 것들에 대한 더 간결 개념적으로 정말하지 않는 것이 시작 및 종료하는 의미를. 그들은 단지 거기에, 또는 그들이 아닙니다. 

그래서 나는이 내용을 저장하고 갈거야 내 "안녕, 세계"페이지와 다시로드합니다. 그리고, 조금 통제 불능의 그 이미지는 실제로 때문에 큰 조금,하지만 괜찮아요. 내가 프로그램에서 크기를 조정할 수 있습니다. 아니면 어떤 것은 알고있다. 그냥 난 입증하기 실제로 말을하려고 이 물건의 폭이해야 그 200 픽셀, 200 점합니다. 내가 가서 저장하자 하고 페이지 지금 다시로드하고, 좀 더 합리적으로 보인다. 하지만, 패턴 발견. 글쎄, 난 종류의 가르친 모두 어떤 의미에서 HTML의 적어도 개념적으로, 모든 HTML이기 때문이다 이러한 오픈 태그, 태그를 폐쇄 tags-- 것을 속성 자신의 행동을 수정합니다. 그리고, 분명히, 모든 태그는 0 또는 1을 가질 수있다 또는 2 이상의 속성마다 이는 않는 조금 다른 뭔가. 지금, 당신은 어떻게 존재 무엇을 알 수 있습니까? 당신은 사람을 듣고 존재 무엇을 말해처럼, 또는 튜토리얼에 대한 주위에 당신은 구글 HTML에, 그것은 정말 간단합니다. 

정말, 나는 학부 때이었다 년 전에하고, HTML을 배웠다 내 수학 교육의 하나 조수는 소비 나에게 과외 약간의 시간 추천 30 분, 한 시간, 그리고, 나는 내 길이었다. 내가 만드는쪽으로가는 길에 있었다 지금까지 가장 끔찍한 웹 사이트, 이는 분명히, 내가하지 않은 정말 이상 진행. 그러나 요점은, 당신 한 번 이 간단한 ideas--을 이해 비밀 text--하지만이 간단한 경우 생각을 시작하는 아이디어 그리고, 생각을 닫는 유지 모든 것이 잘, 균형 최대 뭔가를 찾고 수정 해당 태그의 동작은, 그건 정말 전부 거기에있다. 그리고 사실, 우리는 지금에 가면 실제로 google.com-- 같은, 의 좀 더 자리를 가자 reasonable-- stanford.edu. 그리고,보기 갈거야 개발자, 소스보기. 그것은 추한,하지만 notice-- 나는 통지 확대됩니다 이미 익숙한 몇 가지 물건. 여기이 있습니다이야 이는 브라우저입니다. 여기에 HTML5가 제공됩니다. HTML이있다. 분명히, 거기에 내가하지 않았다 특성 즉를 지정 사용 페이지의 언어, 이 자동으로 도움이 될 수 있습니다 그런 번역 및 물건. 다음 페이지의 선두입니다. 여기에 스탠포드의 페이지의 제목입니다. 내가하지 않았다 태그가 있습니다 yet-- 메타 태그에 대해 이야기. 그냥 일종의이야 배경 정보. 그것은 검색 엔진 최적화에 도움이, 또는 검색 엔진 최적화, 또는 Google 검색 결과 등을들 수있다. 우리가 찾고 유지하지만, 계속 찾고, 여기에 바디 태그입니다. 그리고 기타의 다발있다 태그 우리는 아직 대해 이야기하지했습니다. 그러나 사업부는 하나입니다 페이지의 분할. 그것은 눈에 보이지 않는 사각형처럼 당신은 종류의 정신적를 원하는 경우 로 페이지를 분할 온라인 다른 단위. div에의 그리고 많은 I , 클래스라는 것을 볼 수 그러나 우리는 다시 그에게 올 것이다. 

이 interesting-- 양식입니다. 양식은 모든 웹을 통해입니다. 당신이있어 모든 검색 상자 지금까지 사용되는 형태입니다. 그리고, 그래서, 실제로 보자. 형태. 동작. 어떤이 양식의 행동, 역사적인 이유로, 그 URL입니다. 방법은 "포스트"입니다. HTTP 요청이 사용할 수있는 것으로 나타났다 우리가 전에 보았던 것처럼 동사는, "얻을" 또는 "게시 할 수 있습니다." 그리고 차이를 볼 수 있습니다 순간이의. 의 사실이 무엇인지 살펴 보자. 나를 다시 스탠포드의 페이지로 돌아가 보자. 그들은 어떤 형태를 이야기 대한, 당신은 생각 하는가? 무엇이 당신을 밖으로 점프? 

대상 : 검색 상자. 

데이비드 J. 마란 : 그래. 오른쪽 상단에 최대 그래서 여기 검색 상자입니다. 그리고 그들이 그건 ... 구현 방법 말 그대로 오픈 브라켓 형태의 태그입니다. 그리고 다음의 뭔가를 검색 할 수 있습니다. 의이 대화 상대를 검색하자 mine-- "닉 Parlante."의 들어가다. 물론, 그것은에 갔다 약간 다른 URL. 나를 여기로 가자. 이제 검색하자 "과정." 젠장. 다른 URL에 갔다. 그래서 스탠포드의 몇 가지 마술을 추가 그들은 URL에 저를 복용하지 않는 것이 우리는에서 본 것을 작업이 때문이다. 그러나 여기이 양식은 순수하게 구현된다 여기에이 마크 업의 방법으로,이 태그. 사실, 여기에 대한 입력의 당신이 원하는 검색 유형. 여기에 입력이다 검색의 또 다른 유형입니다. 여기서 문자열 자체에 대한 입력이다. 그리고 목표는 포장하지 않는 것입니다 이 태그의 모든 주위에 우리의 마음 하지만 바로 볼 수 있습니다. 그냥 열고 닫는 것 태그 찾고 것입니다. 네? 빅토리아? 

청중 : [들리지] 데이비드 J. 마란 : 좋은 질문입니다. 즉 볼 수있는 약간 까다입니다. 내가 그에게 돌아와 보자 단 몇 분의 질문 우리가 무언가를 볼 때 호출 CSS 또는 CSS 스타일 시트, 우리는 추론을 시도 할 수 있습니다 페이지에서 많은. 그래서 우리는 지금 google.com에서 살펴 경우, 의 자신의 페이지가 어떻게 생겼는지 보자. 당신은 오늘 귀여운 they're-- 것이다. 승인. 모든 다. 소스보기 너무 좋아. 귀하는 Google이 생각 정말 좋은 소스 코드입니다. 그래서, 분명히 무슨 일이 벌어지고? 실제로, 이것은 심지어 HTML 아니다. 이 자바 스크립트라는 무언가이다. 그리고 이제 가서 계속하자. 페이지가 시작되는 난 몰라. 나는 명령을 사용하는거야 F, 오픈 브라켓 HTML. 좋아, 거기이다. 나는 페이지의 시작을 발견하고, 너무 많은 물건이 여기에있다. 

실제로 무슨 일 이죠? 글쎄, 당신은 무엇을 알고, 우리는 이것을 정리 할 수​​ 있습니다. 나는 대신에가는 경우에이 검사 도구 모음이 특별한 진단 도구, 네트워크 않도록 이동 오늘날 우리가 계속 경우, 하지만 난 요소로 이동하는 경우, 정말로 좋다 브라우저가 많이있다이다 나보다 훨씬 더 눈. 그리고 브라우저에서 읽을 수 있습니다 웹 페이지의 혼란, 그 HTML 메일 우리 단지 바라 보았다, 그것은 수 구문 분석 또는 읽고 그것을 분석하고 포맷 좋은 인간 친화적 인 방법입니다. 그래서 지금보고하고있어 여기에이 화면에 요소에서 동일한 콘텐츠, 하지만 그들은 모든 것을 들여 쓰기 한, 그들은 그것을 색상 화,하지만 한 그것은 동일한 텍스트의 나는 서버에서 다운로드있다. 

그리고 지금의 좋은 것은 내가 볼 수 있습니다 몸에, instance-- 통지를 들면, 페이지가 아직 구성되어있다 단지 머리와 몸, 나는 계층 여기에서 다이빙을 할 수 있습니다. 구글이 갖고있는 것 같아요 알 수 있습니다 이 일이 하나를 divs--합니다. 나는 그것을 확장 할 수 있습니다. 다른 div에의 전체 무리가있다. 그래서 조금 복잡합니다. 하지만 기다려. 이것은 훨씬 더 보인다 읽을 수있는, 상대적으로, 이것보다. 왜 구글은 당황 바로 전송하여 자체 일부 코드의이 거대한 혼란 일종의 뭔가를 구현하는 그 첫 번째 눈에 너무 간단 보인다? 마찬가지로, 왜 그들은 더 많은 공간을 추가하지 마십시오? 내가 그랬던 것처럼 그들은 왜 Enter 키를 누르하지 않았다? 어떻게 보면 좋은 I이었다 웹 페이지를 쓰고. 나는 그렇게 열심히 Enter 키를 누릅니다. 난 그렇게 모든 것을 들여 쓰기 너무 예쁘고 읽을 수 있습니다. 왜 구글은 동일하지 연습을합니까? 

청중 : [들리지] 데이비드 J. 마란 : 좋은. 매우 공평한. 그들은 어떤이 없습니다 구글에서 사람이 수동으로 이상 홈페이지를 업데이트. 그것은 더 이상 1999 아니다. 그래서 그들은 소프트웨어가 있습니다. 그들은 다른 도구를 가지고 그 동적들은 HTML있어 생성합니다. 물론, 코드 자체 인간에 ​​의해 작성되었습니다, 그러나 현실이다 그것은, 말을 아주 공평 브라우저는 확실하지 않습니다 코드가 얼마나 지저분한 관심. 하지만 훨씬 더있다 강력한 기술적 인 이유 Google은 HTML을 배포하는 것이 이러한 실수 코드, 겉으로보기 절대적인 방법은 모두 함께 포장 아주 작은 way-- 거의 함께 내가했던 것처럼 서식의 방법이다. 

청중 : [들리지] 

데이비드 J. 마란 : 빠른? 왜? 그리고 당신은, 리디아 무엇을 말 했는가? 빠른? 왜 빨리? 청중 : [들리지] 데이비드 J. 마란 :있다 공백은 읽을 수 없습니다. 네. 그래서 공간이 무엇인지에 대해 생각합니다. 그래서 키보드의 각 문자는 소요 공간의 일부 량을 나타내는데 물리적으로, 그것과 같은 많은 공간이 있음을 차지, 또는 어떻게 든 아래 후드, 즉 메모리가 필요합니다. 같은 aside-- 우리는거야 그리고 이 tomorrow--에 대해 더 이야기 키보드의 모든 문자 일반적으로 8 비트 또는 1 바이트가 필요합니다. 그래서 8 제로의 패턴 또는 사람, 또는 단지 1 바이트, 우리와 같은 인간은 일반적으로 말할 것입니다. 그래서, 작고하지만, 여전히 비 - 제로이다. 아직 공간의 일부 금액입니다. 그래서 엔지니어 또는 Google 안타 스페이스 바를 단 한 번, 그리고 가정 Google-- 그것의 슈퍼 popular-- 그 억 명을 가정 하루에 자신의 홈 페이지를 방문, 또는 사람의 일부 수 홈 페이지 a를 방문 억 회, 얼마나 많은 추가 바이트 것이있다 소프트웨어 엔지니어는 구글 비용 한 번 자신의 공간이 줄을 쳐서? 

청중 : [들리지] 데이비드 J. 마란 : 아주 나쁜 것은 아닙니다. 그냥 1 바이트 회 억. 그래서 할까 .. 청중 : 80억기가바이트. 데이비드 J. 마란 : 없음 80 억. 80 억 바이트. 그러나 1기가바이트. 1기가바이트은 측정 단위가 될 것입니다. 그 또는 그녀가이 작업을 수행하는 경우 공간, 2기가바이트. 세 기가 바이트. 권리? 그것은 비싸게 확장 할 수 있습니다. 그리고 구글과 같은 경우에, 이는, 부여, 극단적 인 경우는, 다만 발생하는 다른 문제가 있습니다 매우 합리적인 의사 결정을함으로써 또는 아주 간단한 인간의 조치를 취할, 그것은이 확대 된 효과가 있기 때문이다. 이유 중 하나 그래서 이 때문에 압축 보인다 빅토리아는 그것이 said-- 그대로입니다 다만 어쨌든 컴퓨터에 의해 생성. 그래서 더 큰 문제. 브라우저가 그것을 알아낼 수 있습니다. 그러나 그것은 또한 의도적으로 공간이 없습니다, 공간이 필요하지 않기 때문에. 그리고 공간은 실제로 돈을 비용. 

그 중 하나는, 시간 비용 그냥 밀어하기 때문에 중 훨씬 더 많은 데이터 google.com의 본사 단지 어느 정도 걸릴 가지고있다 이 밀리 초를하더라도 시간, 또는 마이크로,하지만까지 추가 많은 사용자를 통해, 또는 가능성, 아마 돈을 비용. 구글은 아마에 연결 세계, 하나에서 다른 사람 이들의 피어링 점, 그리고 그들이 가지고있는 경우 금융 관계의 일종 이에 데이터 돈을 비용, 그들은뿐만 아니라 수도 데이터의 양을 최소화 그들은 밖으로 침있어 자신의 인터넷 연결. 

그래서 재미있는 것은, 그러나, 궁극적으로, 또는 어쩌면 안심 것, 비록이 끔찍하게 보이는 것입니다 압도적 날 끝에 그것은 여전히​​ 똑같은 원리이다 여기에 HTML이 매우 간단 페이지 페이지. 그래서 그냥 요약하고 할 수 있도록 당신이 아니었다면 정식 버전이 여기, 여기에 선택에 따라 다음 웹 페이지의 가장 단순한 일 수도 그래서 뭔가 아마도 이상에서 재생합니다. 

음,이를 소개하자 지금 다른 아이디어의 커플. 우리는 소개하려고합니다 뭔가 스타일 태그를했다. 우리는이 페이지에 스타일을 할 수 있습니다 더 흥미로운 방법입니다. HTML 이메일 반면, 그래서 모든 약까지 표시된다 데이터는 일종의로 지정 어떻게 데이터를 구조화하는 브라우저, 어디에 넣어 그것을, CSS, 또는 CSS 스타일 시트, 제 2 외국어는 그 일반적으로 HTML과 혼합 된 도착 우리는 see-- 것이다 그러나 우리는 청소로 소요 moment--에서 그 최대 그것은 최종 마일, 그리고 그것을 stylizes. 그것은 색상이 바로 도착, 글꼴은 바로 크기 위치 바로. 그것은 미학에 대한 모든이야 또는,하지에 대한 포맷 기본 데이터 자체. 그리고 가장 쉬운 방법은 보여 이 예에서 아마도. 그래서 내가 가서거야 내 간단한 텍스트 파일. 단지 순간, 나는거야 과정을 통해 우리를 걸어 이에게 자신을 일을. 

내 파일로 돌아갈거야 여기에 그냥 페이지를 다시로드 이 모양을 확인합니다. 우리가 지금에있어 곳이다. 아이들이 즐길 것 같은 느낌 이 웹 페이지에 어떤 색을 갖는. 그래서 여기에 갈거야 페이지의 선두에. 그리고 나는 스타일 / 스타일을거야. 그리고이 안에, 내가 갈거야 내 page--의 몸을 말합니다 이 서식에있다 언뜻 보면, 아마도 조금 이상한하지만 기존의. 나는 배경 말할거야 이 페이지의 색은 녹색이어야합니다. 그리고 이것은 불행하게도이다 일종의없는 최고의 디자인. 주의 그 이전에 HTML의 세계에서, 내가 말한 속성이 이러한 키 - 값 쌍입니다. 뭔가 견적을 동일 인용을 끝내 "뭔가." 이었다 CSS의 세계에서, 일부 다른 사람에 의해 설계, 그들은에서, 그 결정들이 세계, 키 - 값 쌍 단어 대장 뭔가 될 것입니다. 그래서하지만, 같은 생각입니다. 이 값을 연관시키는 것 어떻게 든 몇 가지 중요한 그와 이 페이지의 행동에 영향을 미친다. 

그리고 당신은 아마 추측 할 수있다. 이 아마 가고 무엇입니까 당신이 적이없는 경우에도해야 할 일 전에 HTML이나 CSS를 볼? 대상 : 배경 색상을 변경합니다. 데이비드 J. 마란 : 네, 배경 색상을 변경합니다. 그리고 구체적으로 신체의 배경 색상. 그러나 한,로 지금은 몸이 웹입니다 page-- 그것은 유일한 일이 제목 표시 줄 정말 .. 아래에 아마 것 같은 일에 영향을 미친다. 그래서 보자. 이 해 저장할 수 있습니다. 여기 가서 다시로드합니다. 그것은 꽤 끔찍한입니다. 그리고 무슨 일이야 여기 부작용이다. 난 그냥 무작위로 이미지를 선택했다. 왜 녹색이 아닌 미키 뒤에 침투? 청중 : [들리지] 데이비드 J. 마란 : 맞아요. 그것은 꽤, 그 이미지를 밝혀 우리가 사용할 수있는 많은 모든 이미지, 사각형의 모든 rectangles-- 있습니다. 미키는 약간의 곡선이있는 경우에도 자신과 배경을 가지고, 그 배경은 무엇인가되어야한다. 그것은 흰색이어야한다. 그것은 검은 색 또는 뭔가 다른이어야한다. 그것은 투명하게 할 수 있습니다. 그리고 사실, 난 할 수 여기에 미키 마우스를 엽니 다 포토샵이라는 프로그램에서 또는 이와 유사한 그 흰색의 모든 변경 투명 배경, 그래서 녹색 빛을 발하게됩니다. 그러나 그것은 내가 필요한 것 인 무엇인가이다 자신 또는 그래픽 아티스트 부탁합니다 또는 디자이너 내 기업, 예를 들어, 특히 나는 단지 때문에,해야 할 일 인터넷에서이 하나를 빌렸다. 이런 일이 왜하지만입니다. 

그래서 그 밖의 무엇을 우리가 수행 할 수 있습니다? 음, 우리는 우리가 말을 할 수 있습니다 정말 당신이 당신의 체류를 즐길 수 있기를 바랍니다. 그리고 강조, 내가 원하는 이 강한 만들기 위해, 그리고 나는 열려있는 강력하고 말 것 강한 닫은 후 다시로드합니다. 그리고 그것은 조금 어렵다 프로젝터를 볼 수 있습니다 그러나 아마 정말 지금 조금 더 밖으로 이동합니다. 그래서 당신은이에 이탤릭체를 추가 할 수 있습니다 방법,이 방법으로 대담한 직면. 우리는 색상을 변경할 수 있습니다. 사실, 그냥 재미로 들어 난 가서이 작업을 수행하는 것. 난 정말 어떻게 마음에 안 내 단락 함께이 가까이 그래서 나는 같은 것을 할 수 있습니다. 나는 브라우저를 말할거야, 가지고있는 모든 단락 태그를 변경, 당신이 무엇을 알고,의 실제로 say--하자, 의 그것이 텍스트 정렬, 중앙 정렬 할 수 있습니다. 그리고 또,이 만 알고 누군가가 나에게 가르쳐 때문에 또는 나는 그것을 보았다 온라인 참조. 그래서 내가이를 저장할 수 있습니다. 그리고, 아, 지금은했습니다 이 이미지 중심. 그리고 실제로, 당신은 무엇을 알고 나는 단락에 내 이미지를 이동 tag-- 그래서 세 번째 단락, 심지어 텍스트 아니에요하지만. 의 해당 내용을 저장하고 다시로드 할 수 있습니다. 이제 페이지 종류 보이기 시작 동행입니다 나는 여전히 꽤 추한 의미 내가 보낸 것처럼하지만 적어도 그것은 본다 이분 대신 1 분 그것을 만들기. 

그리고, 점진적으로, 우리는 할 수 있습니다 페이지에 지금이 미적 변화? 정말의 데이터를 변경되지했습니다 정말 단어를 추가하는 것보다 다른 페이지로 이동합니다. 당신이 경우 I는 메타 데이터를 추가했습니다. 이봐, 브라우저는을 단어 "정말"대담한. 그러나 데이터는 강하지 않다. 즉, 메타 데이터입니다. 데이터는 "정말"입니다. 그래서 우리는 여전히 일부를 같은 개념 이전. 지금, 물론,이 웹 아니다 그래서 여기에 마지막 단계를 할거야. 

나는 hello.html 갈거야 그냥 선택하고이를 복사합니다. 그리고 지금은 갈거야 Cloud9로 이동하는 난 그냥 순간에 당신을 통해 안내합니다. 그리고 확률은, 만약 당신이 곧있을 것입니다 아니 이미이 같은 화면에서. 그리고 내가 당신에게 신속하게 제공 할 수 Cloud9 실제로 무엇 투어. 그래서 다시 9는 클라우드 이 클라우드 기반 서비스 그것은 당신과 나에게 환상을 제공합니다 우리 자신의 가상 머신을 갖는 클라우드, 기술적으로 클라우드에서 컨테이너, 우리는 전체가 있는지 관리자 권한한다. 이론적으로, 아무도 그래서 세계의 다른있다 난 화면에 액세스 지금보고, 아마 사람들을 제외하고 누가 사이트를 운영, 기술적으로 그들이 가지고 있기 때문에 물리적 인 접근 등. 

그래서 우리는이 환경에서 무엇을 볼 수 있습니까? 나는, 축소거야 그것은 조금 작은이기 때문에. 그리고 나를 통해 지적하자 여기에 그냥 잠시. 왼쪽의 제 및 화면 왼쪽에 파일 브라우저가있다. 정신 그래서 비슷한 맥 OS와 윈도우에. 이들은 모두 아르 내 계정에있는 파일. 그리고 기본적으로, 만약 당신의 계정, 내 같다 당신은 참조하거나 곧 볼 수 있습니다 인 HelloWorld.html 및 readme.md. 여기 오른쪽에있는 동안,이입니다 여기서 내 텍스트 파일 갈 것입니다. 혹시 마이크로 소프트 사용한 경우 워드 메모장이나 텍스트 편집기, 또는 이 단어 내 편집입니다 파일로 갈 것입니다. 그리고 가장 비밀 이 환경의 기능 우리는 정말 사용할 필요가 없습니다 것 여기 아래 터미널 창이라고합니다. 당신은 DOS를 사용한 경우 근년,이 리눅스는 또는 DOS의 리눅스와 동일합니다. 또한 텍스트 기반의 interface-- 어떤 마우스 클릭없이 드래그. 당신이 할 수있는 모든 유형 명령하지만, 이러한 명령 파일을 파일을 만들 이동할 수 있습니다 오픈 디렉토리, 가까이 디렉토리, 것의 개수를 수행. 지금, 우리는 단지거야 여기에 우리의 시간을 보낸다. 

그리고이 해 보자. 이에있는 경우 환경, 당신이해야 작업 영역을 만든 경우 수 이미 가서 그냥 이동 잠시, 새로운 파일입니다. 그리고 그것은 당신에게 새로운을 제공합니다 여기 중간에 탭을 선택합니다. 그리고 난 그냥 ... 및하자 가서 이렇게. 이제, 저장 파일 않은 지금 가서 보자 그리고 가서 그것을 hello.html 전화, 와 혼동하지 인 HelloWorld.html, 어떤 새 무료 계정과 함께 이는 단지 샘플 파일입니다. 당신은 갑자기 표시가 나타납니다, 왼쪽에 가장 가능성 그리고 탭이 열려있을 것입니다. 그리고 내가 다시 지금 격려하자 이 파일 또는 그 일부 변형. 그리고 당신은 확실히에 그것을 볼 수없는 경우 화면이 슬라이드 동일 당신은 아마 다른 탭에있는 것이다. 

그래서 짧은에, 당신의 첫번째 웹 페이지를 만들 그 후 잠시에 저장 어떻게 내가 당신을 보여 드리죠 실제로이를 볼 수 있습니다. 하지만 적어도 한 가지를 변경합니다. 에 helloworld를 변경 자신의 선택의 뭔가, 그것이 당신의 것을 당신이 확신거야 그래서 내가 방금 만든 하나를 제출하지. 괜찮아. 그리고 당신은 더 ready-- 때 당신이 준비가되면 rush--, 가서 파일을 저장 일단 이러한 변경했습니다. 그리고 당신이를 클릭하면 실행 버튼 위로 맨이 말할 것이다 새 탭을 열합니다 당신은, 당신은 귀하의 파일을 방문 할 수 있습니다 무엇을 할 URL 하지만 잠시 시간이 걸릴 수 있습니다 인용 ", 아파치를 시작"인용을 끝내되는 웹 서버의 이름이다. 그래서 정확히 할주의 무슨 일이 궁극적으로 파일에 있습니다. 그래서 지금, 나는 확대됩니다. 내가 입력을 시작하는 경우 오픈 브라켓 HTML 예고 내 생각을 완료 나 메시지를 표시합니다. 그리고 내 생각을 완료하면, 그것을 자동으로 나에게 닫는 태그를 제공합니다. 그러나 기대는 내가 칠 것입니다 입력 한 다음이 내부 이동 내부 머리 않으며, 그때 나는 내 몸을한다. 그리고, 처음에는 조금 이상한 당신을 위해 일을하고 있기 때문에, 하지만 궁극적으로 그 실현 그것은 당신에게 키 입력을 저장합니다. 의 그리고 사실, 아주 일반적인 기능 프로그래밍은 요즘 환경 모두 같은 웹 개발을위한 이 실제 프로그래밍, 저희는 내일 얘기하자, 이러한 자동 완성 기능이며, 단지를 허용 것들 프로그래머 나 디자이너 에 적은 수의 키 입력을 입력합니다 같은 일을 수행. 때로는하지만, 좋아. 가끔은 그냥 짜증나. 그리고, 다시 한 번 당신은 전사 한 슬라이드 또는 그 일부 변형, 당신은 상단까지 실행 버튼을 클릭 할 수 있습니다. 그리고 하단에 창, 당신은 통보됩니다 어떤 URL에 당신은 당신의 웹 페이지를 방문 할 수 있습니다. 광산, 예를 들어,에있다 business-daharvard.c9users.io 기타 등등. 좋아, 그래서, 가구 있구만 질문을하자? 그냥보기에 대한 다른 질문 우리가 기능을 추가하기 전에이 작업? 단지, 내가 제안하자 사람들이 comfortable-- 도착 그것은 단지를에 한 가지 때문에 내가 무슨 짓을했는지 맹목적으로 복사 - 붙여 넣습니다. 그러나 단지 사람들이 씨름 있도록 할일 적어도 하나와, 나는 어떤 음악을 켜거야. 나는 목록을 제안하는거야 당신이 잠재적으로 추가 할 수있는 일. 그리고 당신은 확실히 구글을 사용할 수 있습니다. 그리고 왜하지 우리 단지 당신이 해결하려고하는 것이 제안 적어도 하나의 특정 문제를 여기에. 태그의 관점에서 그래서, 내가 여기를 재사용 할 수 있습니다. 

사실, 내가 넣어 보자 그것은 텍스트 형태 일 수있다. 의 우리가 수도 태그 사이에 그런 말을하자 여기에 사용 여기에 몇 가지 태그입니다. 우리는 단락 태그를 보았다. 이제 자동 완성을 것입니다. 단락 태그 앵커 태그입니다. 의 당신이 원하는 가정 해 봅시다 뭔가 더 큰 확인 그래서 당신은 이렇게 ... 수 스팬 태그는 도움이 될 수 있습니다. 글쎄, 당신은 약간의 도움이 필요할 수 있습니다 그냥 순간에 해당합니다. 우리는 사업부를 보았다. 당신은 테이블 거기에 볼 수 있습니다. 뭔가 그럴 필요는 TD있다라고합니다. 일, TD. 순간 다시 그에게 가자. 편리한 밖의 무엇을 할 수 있는가? 강한있다. 이 강조, 또는 오히려 그들. There's-- 다른 무엇 여기 공상 수 있는가? 음, 우리는 할게요 함께 그 봐. 우리가 본 적이 양식. 형태가있다. 입력과 몇 가지 다른 사람이있다. 좋아, 그래서이 작업을 수행 할 수 있습니다. 빅토리아의 답변을 문제는, 첫째 날 수 있습니다 단지 모두가 있는지 확인 자신의 헬로 작업을 얻을 수. 그런 나를 소개하자 몇 가지 다른 아이디어. 그 다음 우리는 사람들이 해결 드리겠습니다 자신에 대한 몇 가지 문제. 그럼 우리가 실제로 다시 올 것이다 양식의 개념에, 우리는 실제로 다시 구현합니다 함께 프론트 엔드 인터페이스 그래서 구글 자체에 대해 이야기합니다. 우리는 백 엔드 구글을 사용하여 드리겠습니다 그들이 열심히 일을, 탐색, 그러나 우리는 프런트 엔드를 다시합니다 구글과 검색 폼 그들은 자신의 홈 페이지에 있는지. 그래서 우리는 다시 올 것이다 그냥 순간에이 태그. 

그래서 이것은 무엇 I 잠시 전에 제안했다. 우리는에 양식에 추가 할 수 있습니다 이 스타일 태그의 내부 페이지, 우리는 배경에 스타일을 할 수 있습니다 색, 텍스트 정렬, 그것은 중앙 또는 왼쪽 또는 오른쪽의 여부. 그러나 매우 빨리 당신은 것 찾거나 웹 디자이너 이 찾을 것입니다 조금 다루기된다 당신이하고 있기 때문에 무슨 일이야 혼합 컨텐츠라고 프리젠 테이션을 포함한다. 당신은 당신의 데이터를 혼합하고 그리고 미학을 포함한다. 그리고 사실, 당신이 생각하는 경우 무엇으로 .. 이상 일어날 이것은 매우 작은 웹 페이지, 물론. 그러나 나는이 페이지에 내용을 추가하는 경우 나는이 페이지에 스타일을 추가, 페이지가 매우 빠르게 도착 이상과 이상과 이상. 그리고 내가 원하는 것을 가정 두 번째 웹 페이지를 갖도록 이러한 특성의 일부를 공유합니다. 나의 두 번째 웹 페이지를 위해 가정 내 관련 사이트 또한, 나는 모든 센터를 원하는 나는 또한 모든 것을 할 녹색 배경. 나는 꽤 많이해야 할거야 복사하고이 라인의 일부를 붙여 좋은 느낌이 두 번째 파일,에. 이 문제를 해결한다. 

하지만 세 번째 페이지를 무엇을하려는 경우 30 페이지 또는 40 페이지 나? 지금은 복사 할거야 및 중복 코드를 많이 붙여 여러 파일입니다. 그리고한다고 가정 나는 결정 또는 내가 말했다있어, 이봐, 우리가에서 사용하지 않는 더 이상 녹색 배경입니다. 우리는 오렌지를 사용하기 시작하는 것입니다. 당신은 무엇을 변경해야합니까? 글쎄, 당신은 그 스타일을 변경해야 오렌지 녹색에서 얼마나 많은 장소에서? 30 ~ 40 곳 등을들 수있다. 그것은 지루한입니다. 그것은 오류가하는 경향이있다. 이유가있다 당신은 유도 싶지 않을 경우 자신을위한 고통의 종류. 그리고 그것은 좋은되지 않을 것 우리가 취할 수 있다면 내가 단지 이 두 개의 노란색 사이에 넣어 태그 이러한 스타일 태그, 그것을 고려, 그리고 모든을 넣어 내 하나의 중앙 파일에 디자인과 나의 다른 모든 파일 (30) 또는 (40) 에서 빌리거나 어떻게 든 참조, 하지 네트워킹 달리 도 우리는 이전 일을했다? 

여기에 가면 그래서, 난 실제로 제안하는 것 우리는 교체하는 것이 뭔가 스타일 태그 링크 태그라고하는 끔찍, 끔찍 이름, 당신은을 사용하지 않기 때문에 링크 태그는 무엇을 만들 수 있습니다 우리 인간은 웹 페이지의 링크로 알고있다. 이를 위해, 당신은 태그를 사용할 수 있습니까? 당신은 어떻게 웹 페이지에서 링크를 만들려면 어떻게해야합니까? 청중 : 다음은. 데이비드 J. 마란 : 다음은, 또는 앵커 전에 디즈니에 갔다 태그. 여기에 링크 태그는 말하고있다 라는 파일이 항아리 링크 에 styles.css가, 관계 내 스타일 시트 있다는 될 것입니다. 그래서 이것은 S 년대 중 하나입니다 CSS-- CSS 스타일 시트. 스타일 sheet-- CSS의 S 년대의 두. 스타일 시트를 계단식. 이것은 단지 이봐, 브라우저, 이동 수단 로컬 서버에 styles.css가를 찾을 수 와, 스타일 시트로 사용 이는 해당 파일의 내부 의미 의 모든 될 것입니다 우리가했던 양식화. 그리고 무엇 해당 파일 IS 다음과 같을 수 있습니다. 그리고 난 그냥이가 빠르게 할 수 있습니다 예를 들어, 우리가 필요로하지 않기 때문에 여기 잡초에 너무 많이 얻을 수 있습니다. 나는 이것을 복사하면, 나는 제안 무엇이야 프로그래머가 새 파일을 만들 것입니다, 그 lines--에 붙여 넣기 그 라인에 whoops-- 붙여 넣기, 에서, 다음을 styles.css로 저장하고, 다른 파일이 모두 삭제 대신 교체 이 링크 태그. 그 나는 HREF = "styles.css가"를 연결한다면, 관계는 "스타일"한다 가까운 태그입니다. 저장해. 내 helloworld를 다시 이동합니다. 다시로드합니다. 

말 그대로 아무 일도하지 않았다. 즉, 좋은 일이 그것 때문에 실제로 모든 작업 의미합니다. 많은 것을 증명하기 위해, 나는을 가정 오타, 나는이 "styles.css가"전화 인 자본 S와 부정확 한 다음 다시로드합니다. 지금 당신은 그냥 작동하지 않습니다 볼 수 있습니다. 지금, 왜? 음,이를 사용하자 이전의 기술. 에, 내가 가서 보자 브라우저, 크롬, 난 특별한 것을 열어가는 네트워크 탭 이전과, 나를 페이지를 다시로드 할 수 있습니다. 당신은 지금보고 놀랐 어떻게하지? 아니면 당신이 그것을보고 놀랐입니다. 어느 쪽이든, 당신은 지금 무엇을 볼 수 있습니까? 청중 : [들리지] 데이비드 J. 마란 : 그것은 발견 아니에요. 왜이 발견되지? 음, Styles.css-- 자본 S--가 존재하지 않습니다. 나는 그것을 잘못된 이름. 단순 오타. 하지만 지금은 이해할 받고 있어요 (404), 서버가 말하고 있기 때문에, 헤이, 그것을 찾을 수 없습니다입니다. 말 그대로, 나도 몰라 여기서 해당 파일입니다. 결과적으로, 브라우저 그래서 , 무엇을 할 수있는 방법을 보여줍니다 페이지의 원료 함량, 이는은 (200), HTML했다 하지만 디자인과 수 없어 그 이후에 추가 될 수있다. 그리고 이것은 계단식 의미 무슨이다. 당신은 일종의 추가 할 수 있습니다 이후, 그리고 종류의 웹 페이지의 미관 정제. 그리고 당신은 심지어을 대체 할 수 있습니다 또 다른 스타일 시트 파일과 스타일 네가 원한다면. 그것은,이 경우에는, 그러나,없는거야 때문에 물론, 나는 그것을 잘못된 이름. 그래서 내가 먼저 그 문제를 해결해야합니다. 

그럼 가서 보자 다음을 제안한다. 이제 가서이 작업을 수행 할 수 있습니다. 아마로 시작 당신의 helloworld를 파일, 나 그냥 몇 가지를 초대하자 의 제안을 갖추고 있습니다. 그래서, 빅토리아, 당신은 원한 일부 텍스트 더 큰, 바로 확인? 좋아, 그래서 우리가 할 수있는 텍스트를 더 만들 수 있죠. 그리고 우리는 각각 떨어져 뽑은 것 하나의 문제는 해결합니다. 텍스트를 더합니다. 내가 귀찮게하지 않을거야 때이 글을 쓰는 바로 여기 총알 기술을 가지고있다. 그래서 몇 가지 문제. 그래서 우리는 시도 할거야 텍스트가 더 큰 확인합니다. 괜찮아. 다른 사람이 무엇을 제안까요? 또 우리가 할 수 있습니다 웹 페이지에서 할까? 의이 마련하자 일의 짧은 목록 다음에 위임 그룹이 알아낼 수 있습니다. 

청중 : [들리지] 

데이비드 J. 마란 : OK, 위치 텍스트 페이지의 다른 측면에? 괜찮아. 다른 것. 

청중 : [들리지] 데이비드 J. 마란 : 그것은이다. 그래서 지프 단지입니다 다른 파일 형식. 우리는 단지 사용, 무엇을하는 PNG 또는 아마 JPG? 우리는 JPG를 사용했다. 당신은 과도한 호기심 경우 귀하의 질문에 답변 jpg이 일반적으로 사용된다 사진 그것이 지원하므로 색 24 비트 색상 수백만. GIF는 일반적 등에 사용되는 인터넷 밈이 days-- 애니메이션, 같은 애니메이션 GIF를. 그러나 작은 색상을 사용하는 일 팔레트, 256 가능한 색상, 그러나 지원 투명성과 애니메이션. 지원 그리고 거기에 PNG, 투명성과 더 많은 색상 하지만 애니메이션. 그래서 트레이드 오프입니다. 그래서 비록 지프를 추가, 기능적 것 PNG 또는 JPG를 추가하는 것과 같습니다. 네. 이미지 소스는 동일합니다. 그래서 뭔가. 의 뭔가 생각해 보자 그 우리가 여기서 뭘 빅토리아로 전송. 

청중 : 폼에 대한 단추를 추가합니다. 데이비드 J. 마란 : OK. 그래서 양식 버튼을 추가합니다. 그리고 우리는 함께 그 일을 할 수 있습니다. 그래서 완벽한 SEGUE 수 있습니다 바로이 도전 후. 다른 건? 무엇을하기를 원하십니까 수 있는가? 웹은 매우 실망 느낌 이 모든 경우에 우리는 할 수 있습니다. 대상 : 텍스트의 색상을 변경합니다. 데이비드 J. 마란 방법 : 어떤 변경? 대상 : 텍스트의 색상. 데이비드 J. 마란 : 텍스트의 색상 변경. 괜찮아. 그래서,이 해 보자. 그냥 다시 그래서 당신이 걸하지, 그냥 기계적으로, 내가 뭘하는지 정확히하고, 나는 음악을 켜거야 여기에 아마 5 분. 당신은 구글을​​ 사용하는 것이 환영합니다. 당신은 나 한테 물어 환영하고 있으며, 나는 당신의 귀에서 힌트를 속삭 있습니다. 당신은보기 위하여 환영합니다 이상의 다른 어깨에. 그러나 이러한 문제의 한을 해결한다. 그러나 우리는 마지막 하나의 작업을 수행합니다 우리가 할 수있는 경우 함께, 하나를 형성한다. 그래서 5 분 해결하기 위해 이들 문제 중 어느 하나 구글, 직관을 사용하거나 사용 가능한 다른 방법. 

[음악 재생] 괜찮아. 걱정하지 원하는 경우 땜질 유지, 그러나 나는 몇 가지를 망치고 있습니다 이 답변. 에서 첫 번째 제안 그래서 빅토리아는 텍스트를 더 만드는 것이 었습니다. 그래서이 작업을 수행 할 수있는 몇 가지 방법이있다. 저는 현재 복원했습니다 이 크기에 내 화면, 나는 확대했습니다 불구하고 인위적으로 그냥 물건을 볼 수 있습니다. 그리고이 해 보자. 나를 앞서 및 잡아 가자 일부 일반 라틴어 텍스트 그냥 그래서 우리는 작업 할 뭔가가있다. 그래서 나에게 한 순간을 제공합니다. 나는 3 단락을 만들 수 있습니다. 승인. 이것은 더 좋은 예가 될 것입니다. 호기심에 대한에 따라서 내 hello.html, 난 그냥 붙여 넣은 세 무의미 라틴어 단락 그냥 그래서 우리는 함께 작동하도록 일부 텍스트가 있습니다. 그리고 빅토리아의 목표는에 있었다 더 큰 텍스트의 일부를합니다. 그래서, 이전, 여기에 갈 수 있었다. 그리고 내가 그것을 올바른 방법으로 할 수 있습니다. 나는 링크를하려고 해요 파일을 가리키는 태그 소위 "styles.css가"관계 있는 "스타일."다시입니다 그리고 나는 그것을 저장하는거야 이 "styles.css가 있습니다."열어 

그래서, 이전과 같이, 나는이 이 CSS 파일의 능력 실제로 기본을 무시하는 웹 페이지의 미학 기본 미학, 물론, 꽤 지루한입니다. 그것은 검은 일반 글꼴 크기의 종류,이다 텍스트, 등 흰색 배경합니다. 그래서 내가 만들고 싶어한다고 가정 이 텍스트의 모든 큰. 나는 몇 가지 일을 할 수 있습니다. 내을 styles.css 파일에서, I 당신이 무엇을 알고, 말할 수, 받는 사람 다음을 적용 내 페이지의 본문. 어서 만드는 글꼴 크기 24 포인트, 어떤 숫자가 나는 수도있다 Microsoft Word에서 사용합니다. 내 웹으로 돌아 가자 여기에 페이지 새로 고침, 당신은 그것을 볼 수 있습니다 이미 훨씬 더 큰합니다. 그리고 우리는 약간 미친 얻을 수 있습니다, 단지 우리가 desktop--에 수 있습니다처럼 그것은 96 포인트합니다. 다시로드합니다. 그리고 그것은 조금 점점 이 시점에서 다루기. 

하지만 좀 더 정확한 될 수 있습니다. 대신에 이것을 적용 내 페이지의 본문에 스타일 시트, 그 밖의 무엇을 나는 대신에 적용 할 수 있습니다 어떤 다른 태그가 여전히 수도 같은 방식으로 작동? 

청중 : 또한, p 태그? 데이비드 J. 마란 : P 태그입니다. 그래서 머리가되지 않을 것 올바른 머리 때문에, 당신은 실제로 할 수 없습니다 의 미학을 제어 할 수 있습니다. 하나의 텍스트가 아닌지있다. 그러나 p는 tag-- 조금 다이빙 수 있습니다 깊은, 그래서 단락에, 말하자면 태그입니다. 세가 있더라도 그 때문에 CSS에 완벽하게 괜찮아요 난 그냥 "P"이 말을 할 때 다음 적용 수단 이 일치하는 모든 태그 선택기 선택기 단지 태그의 이름을 주도했습니다. 그래서 당신이 볼 때마다 "P", 글꼴 크기를 적용 그리고 좀 더 그것을 만들 수 있습니다 합리적인 again-- 24 점. 그리고 당신은 무엇을 알고, 그냥 좋은 측정을위한, 의이 색을 만들어 보자 순간 빨간색 단지. 그리고 지금은 지금, 다시로드하면 우리 세 못생긴 단락을 참조하십시오. 

하지만 지금은 일종의 해요한다고 가정 동행입니다 나는 첫 번째 단락을 원한다 사용자 밖으로 이동합니다. 난 그냥 증가하고 싶지 않아 모두의 글꼴 크기. 그래서 내가 실제로 식별 할 또는 이 단락을 구분. 그럼 붉은 색을 제거하자, , 그건 그냥 가지 볼품 왜냐하면 과의이 가서 확인하자 글꼴 크기를 12 포인트 기본적으로, 그래서 우리는 다시 뭔가있어 좀 더 합리적인. 그리고 지금은 그냥이 증가 할 첫 번째 단락의 글꼴 크기입니다. 나는 몇에서이 작업을 수행 할 수 있습니다 방법 만의 하나의 방법 상기 아마도 가장 교육 순간 다음을 수행하는 것입니다. 내가 가서 보자,이 말 단락 "제."의 고유 한 ID를 가지고 내가 원하는이 무엇을 호출 할 수 있습니다. 나는이 "foo는"호출 할 수 있습니다 또는 다른 단어 하지만 난 그것을 좀 줄거야 의미 적으로 의미있는 이름 "처음."와 같은 이는 고유 식별자 아이디, 내 첫 번째 단락합니다. 

나는 지금 내 스타일 시트에서 할 수있는 일 좀 더 정확합니다. 대신 말의 적용 상기 p- 태그에 다음, 나는 following--을 말할 수있다 다음을 적용, 선택하거나, HTML 요소 즉, "제."의 고유 한 ID를 가지고 내가 그것을 적용 할 수 있습니까? 24 포인트의 글꼴 크기. 그래서 나는 지금이 선택기가 있습니다. 하나는 모든 만든다 12 포인트를 문단. 하지만이 하나가되어 특히 이후 두 번째로는 그것은 file-- 마지막 제공 이 계단식 효과가있다. 난 그냥 모두를했습니다 내 단락 태그 12 점, 하지만 지금은 폭포와 그 어떤 요소보다 우선 페이지의 페이지에서 모든 태그 고유 ID는 인용 인용을 끝내이다 "처음." 그리고 이러한 맥락에서 해시 태그 그냥 "고유 식별자"을 의미합니다. 나는 HTML 파일에 넣어하지 않습니다. 나는 여기에, 그냥 말 "처음."인용을 끝내 인용 

그래서 내가 다시로드 할 수 있습니다. 그리고 지금은 OK, 아, 참조하십시오. 나는 그 아니라, 의미 꽤 있지만 종류의 의 서문 등 책이나 뭐 그런, 여기서 첫 번째 단락은 크다. 심지어 더 정확하게 할 수 단지 첫 글자 만 이상 나는 더 많은 컨트롤을 행사했습니다. 지금 봐 주길 어쩌면 나는이 작업을 수행 할 수 가끔 어떤 이유로, 그리고 나는이 원하지 않는 하나의 HTML 태그에 적용됩니다. 오히려, 이제하자 say--하자 또한 다음을 수행합니다. 클래스 = "가져 오기." ID가 고유를하는 데 사용되는 반면 한 가지, 하나의 태그를 식별 웹 페이지에, 클래스가 될 것을 의미한다 요소 또는 태그의 수에 사용 웹 페이지에. 그래서 다시 사용할 수 있습니다. ID를 재사용하지 않습니다. 클래스는 다시 사용할 수 있습니다. 

그리고 당신은 알고 무엇을 위해 무엇을, 철학적 reasons-- 나는 완료되지 않았습니다 내 제 생각 엔 내가 말할거야 그 첫 번째 단락과 두 번째 단락은 중요하다. 그래서라는 클래스를 적용하는거야 "중요한"그게 내 파일을 저장하는 경우 없이이, 다시로드 아직 기능에 미치는 영향. 그러나 나는 몇 가지를 추가했습니다 파일에 대한 메타 데이터 별도의 뭔가의 종류 파일의 코어 데이터로부터 그래서 지금은 내 스타일에, 나는 경우 대신 ".important"말 - 당신이 알고, 중요한 무엇이든, 난 글꼴 색상을 만들려고하면, red-- 또는 오히려 글꼴 색하지, 그냥 색상. 불일치가있다 CSS에서 불행하게도. 그리고 다시로드합니다. 이제 첫 번째 발견 두 단락은 빨간색 하지만 세 번째, I 때문에 만 의 클래스를 적용 "중요" 그 일의 처음 두에. 

아이디에 그래서, 당신은 능력을 가지고 매우 정밀하게 지정할 수 있습니다. 클래스를 사용하면 재사용이있다. 그러나, 두 경우 모두에서, 알 좋은 디자인 원칙의 종류 나는 모두를 고려 곳 내을 styles.css 파일 미학. 그래서 여기에는 어지러움가 없습니다. 빨간색에 대한 언급은 없습니다 또는 이 파일의 굵은 대면 또는 글꼴 크기입니다. 오히려 나는 의미가, 의미, 내 데이터를 특징 여기에 몇 가지 중요한 데이터입니다. 다음은 몇 가지 중요한 데이터입니다. 또한, 여기입니다 내 중요한 데이터의 "첫 번째". 그래서 HTML은 약 종류 전부입니다 태그, 문자, 단어 과의 단락과 구조 당신의 이 작은 힌트 페이지, 당신의 경우 것입니다, 당신이 할 수있는 그 어떻게 든 사용하여 활용 이러한 방법으로 CSS와 같은 다른 기술들. 

그래서 빅토리아의 질문에 대한 대답, 우리는 그 방법으로 텍스트를 더 만들 수 있습니다. 거기에 다른 많은 방법들이 있지만, 글꼴 tag-- 오픈 브래킷 "글꼴"- 실제로 몇 살입니다. 그리고,이 문제는, 도에만 의존와 온라인 resources--에 그들은 오래된되는 경향이있다. 그리고 실제로 그는 더 이상 사용되지 않습니다있어, 세계를 실현하기 때문에, "글꼴 크기 = 7"은 무엇을 의미합니까? 그것은하지 않습니다. 그리고 몇 년과에 이 측면의 한 day-- 여기에 노트가 실제로 있다는 것입니다 믿을 수 없을만큼 고통스러운 여전히 때때로 에 대한 사이트를 개발 웹, 때문에 마이크로 소프트 구글과 모질라와 다른 사람들은 종종 방법에 대한 동의 HTML과 같은 사양을 해석합니다. 

HTML에 대한 규정집가 그 일반적으로 각 태그의 의미를 말한다. 그러나 때때로 그것은에 남아 구현의 재량, 마이크로 소프트의 재량과 구글. 그리고 당신은 매우 자주거야 웹 사이트 무엇인가에 참조 PC에서 다른 모습 그것은 Mac에서보다, 그리고 그것은 정말 때문에 하루의 끝에서, 그들은 그것을 테스트하지 않았다 물론 두 플랫폼 모두에서. 그러나, 또한 때문에 합리적인 똑똑한 사람들은 동의하지 않습니다 기업들은 동의하지, 그래서 것 프로그래밍의 과제 중 하나는 웹 또는 디자인에 대한 웹에 대한 것들 방법으로 당신의 웹 사이트를 쓰고있다 즉, 모든 웹 브라우저에서 작동합니다. 그러나 심지어 오른쪽 불합리한입니까? 너무 많은 너무 많은 버전이 있습니다 어떤 점에서, 거기에 그 브라우저, 당신은 또한 판단 호출을해야 당신은 회사로 결정해야, 특히 전자 상거래 - 스타일 당신이있어 사이트 최신의 그리고 최고의를 사용하려고 기술은 정말 좋은 사용자를 제공합니다 경험. 그러나 일부 사용자 비율은 수도 아직도 인터넷 익스플로러 6 또는 7을 사용하여 수 8, 특히에 따라 그들이에서오고 있다는 것을 국가. 

그래서 매우 일반적으로 상담은 뭔가 "웹 브라우저 통계."와 같은 우리가 할 수 이러시면 갈 경우의 위키 백과 참조 그리고 가장 최근이 차트가 얼마나 참조 경우 하나있다. 그래서 여기에 볼 수 있습니다 여기서 실제로 브라우저 2015년 12월에 따르면,이다, 미국 정부에 따르면. 크롬 다음으로 42 %의 시장 점유율에있다 대부분의 기업 설정에서 IE로 또는 PC 설정 물론 파이어 폭스,이어서 다음 사파리, 다음 오페라는하지 않았다 어떤 이유로 여기에지도를 만들어, 다음 기타. 아마 다른 사람 아래에 있습니다. 그러나 그것보다 더 문제가 is-- 위키 백과는 경우 보자 브라우저의 버전 version-- 

의 브라우저 통계에 가자. IE. 심지어는 충분하지 않습니다. 브라우저 통계. 내 버전. 그건 바로 될 것 아니에요. 의이 버전을 보자. 브라우저 시장 점유율. 이가 오면 보자. 승인. 지금이 점점 좀 더 유용합니다. 그래서 여기에 우리 모두가 알 브라우저의 다른 버전. 그리고, 세상에, 당신은 크롬을 저게 경우 48, 크롬 47, 크롬 31, 크롬 45. 내 말은, 점점 더 업데이​​트 된 브라우저, 그 변화의 때로는 일부 에서 중요하다 기능면. 그리고 어떤 시점에서, 제품 관리자 나 엔지니어 decision--을해야 당신 세계의 1 %를 무엇을 알고 여전히 IE 7을 사용하고 있습니다. 그들과 함께 지옥. 우리는하지 않을거야 해당 브라우저를 지원합니다. 그리고 그것은 지원하지 않는 무엇을 의미합니까? 이 버튼 있음을 의미 할 수 있습니다 웹 페이지에서 작동하지 않습니다, 또는이 의미 수도 서식이 완전히 꺼져 있습니다. 아니면 확인해야 할 수도 있습니다 같은 판단 통화 우리가있어 이동이 일에 더 이상 IOS 5를 지원하지 않을. 그래서 사람들은 업그레이드해야합니다. 아니면 우리가 먹고를 지원하지 않을거야 안드로이드 장치에 대한 안드로이드 OS에, 때문에 같은을 전 세계로 기술 세계가 앞으로 이동하고 싶어, 그것의 종류의 드래그 싶어 그래서 그것으로 세계 그들은하지 않습니다 계속해야 호환 그들은 그렇게 새로운 좋은 기능을 제공 할 수 있습니다. 이것은 실제로 이유 중 하나입니다 많은 기업은 왜 출시된다 자동 업데이트 및 강제의 종류 우리의 소프트웨어의 최신 버전. 심지어 회사 애플의 정렬합니다 같이 당신을 거의 강제 나 강요 시장의 힘의 관점에서 당신 새 휴대 전화를 구입 그들은 단지 때문에 더 이상 이전 휴대폰을 업데이트하지 않습니다. 그래서 당신은 놓치지 최신의 그리고 최고의 기능, 그것은으로 그들에게 비용 때문에 회사는 틀림없이, 나이가 유지 소프트웨어의 열등 버전. 그러나 순수한 효과 있다는 우리는 또한뿐만 아니라이 고통. 

그래서 그냥 살펴 보자 여기에 최종 몇 가지. 의 진짜 빠른의 일부를 노크하자 그 다른 글 머리 기호, 호기심 경우. 그래서 당신이하려고한다면, 예, 위치에 대한 의 다른 측면에 텍스트 페이지, 나는, 하나 빠른 방법을 할거야 하지만 다른있다 이 작업을 수행하는 방법. 내가 가서 eliminate--하자 다음과 같이이 작업을 단순화합니다. 나 그냥 다시 가자 내 단순, 간단한 단락. 내을 styles.css로 돌아 가자. 그리고 난 그냥 simple--를 사용하는거야 당신이 구글에서 볼 수도있는 또는 earlier--에서 리콜 오른쪽 텍스트를 맞 춥니 다. 그리고이 페이지를 다시로드. 이제 모든 것 오른쪽 정렬되어야합니다, 여기에 오버 헤드에서 볼 수있다. 

우리는 볼 수 있습니다 좀 더 같은 책, 우리는 "정당화"말할 수 그리고 다시로드합니다. 지금은 좋은 모두에 광장의 종류의 좋은 측면. 우리가 여기 있었다 또 다른 목표 텍스트의 색상을 변경했다. 그래서 우리는 내 빨간색 텍스트와 그 보았다. 그리고 지금은 양식 버튼을 추가합니다. 그런데 왜 우리는 정확히이 일을하려고하지? 하지만 먼저 나를 사이트로 이동하자 그 우리의 대부분은 구글 day-- 매를 사용합니다. 그리고 이제 살펴 보자 어떻게 구글이 실제로 작동합니다. 하지만이 작업을 수행하는거야. 첫째 날 네를 in--하자, 내가 먼저 Google에 가자. 내가 가야하는거야 Google 설정으로, 내가 사용하지 않으려하기 때문에 뭔가 인스턴트 결과라고합니다. 

그래서 당신은에주의 수도 구글이 나를 돌아 가자 days-- 이 전원을 켭니다. 내가 검색을 시작한다면 이 같은 "고양이"에 대한, 만하지 통지 나는까지 자동 - 완성 얻을 상단의 갑자기, 페이지 자체 뿐만 아니라 꽤 빨리 변경하는 것, 그것은 구글이 언어를 사용하여이야 도움이 될하려고 자바 스크립트했다. 그러나 불행하게도, 그것은 종류 우리의 논의를 망쳐 놨어요 실제로 무슨 일이 일어나고 있는지의 여기에 후드 아래에. 그래서 난 그냥 좀 빨리이다 즉시 결과를 끄십시오. 그리고 저장을 클릭하겠습니다. 그리고 지금은 열거야 진단 도구 모음이 그 I 네트워크 탭에서 개방을 유지합니다. 그래서이 작업을 수행 할 수 있습니다. 가구 있구만 whoops--하자 조금이 아래로 스크롤합니다. 그리고 저를 검색 할 수 있습니다 "고양이." 

그리고 지금 notice-- 실제로, 이 좋은 기회입니다 잠시 논의합니다. 나는 그것을 중지 유형 선택 - 순간을 알 수 있습니다. 멈춰. 승인. 내가 문자를 입력하는 순간에 주목 C는 화면 하단 시계. A- T- S. 무슨 바닥을 수행 이 화면의 내 네트워크 탭, 각 일어나고 제안 시간 나는 문자를 입력? 불행하게도, 개구리는 매우이다 산만 오늘 또는 토끼풀 또는 그는 무엇이든. 내가 입력 할 때마다 무슨 일이 벌어지고? 그리고 나를 선택을 취소 할 수 버퍼 다시 입력합니다. 그러니까 ... 으악. 내가 문자를 입력 할 때마다, C- A- T-- 그래서 새 행이 분명하게 나타나는 유지합니다. 그 각 행이 무엇을 상징 하는가, 우리가 본 논의 한 내용을 기반으로 지금까지? 청중 : 검색하면? 데이비드 J. 마란 : 검색하면, 또는 더 일반적으로, HTTP 요청 서버에 브라우저에서. 그럼, 왜 내 브라우저는 HTTP를하고있다 때마다 내가 문자를 입력을 요청? 

청중 : [들리지] 데이비드 J. 마란 : 네,주고 날이 자동 완성 결과. 마찬가지로, 어디에서 이러한 작업을 수행 검색 결과에서 온? 글쎄, 때마다 난을 입력 편지, 구글은 더 보낸다 점점 더 많은 내가 입력 해요 단어. 왜? 그들은 나에게주고 싶어하기 때문에 더 좋은, 더 나은 제안, 어떤 단어에 대한 제안 목록, 사실 전체에 노력하고있어. 그래서이 말 그대로 모든 말을하는 것입니다 문자는 구글에 입력 궁극적으로 전송되는 대량뿐만 아니라 때때로 한 구현하기 위해 한번에 이러한 자동 완성 기능 때 데이터는 웹 물론이다. 

지금, 무엇을 실제로 살펴 보자 내가 Google 검색을 클릭 할 때 발생합니다. 그리고 우리는이에게 자신을 활용할 수 있습니다. 내가 바로 지금 아래로 스크롤 경우에 따라서 방금 일어난 첫 번째 요청. 다음을 알 수 있습니다. 그것은 꽤 긴 전송 된 URL-- https://www.google.com/search? 다음 물건의 전체 무리. 의 지금 실제로 보자 브라우저 탭 자체입니다. 의 여기 도구 모음을 제거하자. 검색 결과 페이지이다. 통지는 여기에 URL입니다. 지금, 당신은 아마 추측 할 수 무슨 일이 부분적으로 여기에 것입니다. 정의, 모든 그래서 일단. 이것은 분명히 대상입니다 양식은 어디에 제출됩니다. 그래서 난에 입력 할 때 단어 "고양이"와, Enter 키를 누르 분명히 구글은 전송 이 URL에 내 텍스트 입력 내가 강조했다고 이 검색을 슬래시. 그 URL을, 아무것도, 알고 보니 물음표가 후 발생, 우리가 말을 지킬 때, 키 - 값 쌍 그는 형태로 또는 어떻게 든 입력했다 로부터 송신 서버에 브라우저. 

그래서 언제든지 당신은 입력을 입력 웹의 형태로 우리가했습니다으로하고 보낼거야 는 GET을 통해 논의하고, 이러한 가상의 하나 봉투, 콘텐츠 그 예 envelope--의 보관 물리적으로 박제하기 클래스의 봉투에 오늘, 그러나 기술적으로 그것은 실제로 URL에 넣어 것. 사실 그래서, 내가이 가려 낼 수 있습니다. 당신은 어디에서 사용자의 입력을 볼 수 있습니까? 어디 당신이 뭔가를 보는가 나 자신은 여기에 입력했는지? 그래서 "고양이."그래 권리? 그래서 내가 이것을 증류하자 간단하게 뭔가에. 나는에 대한 모든 것을 삭제하는거야 내가 이해하지 못하는이 URL, 난 그냥 떠날거야 그것은이 항아리로 / 검색? Q = 고양이. 우리는 여기서 Q를 볼 수 있습니다 잠시에서 온다, 하지만 최소 것 같은 느낌이 든다 내가 제공 한 정보의 양. 그리고 지금은 Enter 키를 누르거야. 그리고 그것은 여전히​​ 작동 알 수 있습니다. 우리는 여전히 고양이의 전체 무리를 다시 얻을. 그래서 구글은 애호​​가입니다 이것보다 요즘. 그것은 2016 년이 아니라 1999입니다. 그래서 다른 물건이있다 그 내를 브라우저는 서버에 전송된다. 그러나 이것은 최소한이다 모두가 필요합니다. 

그래서 무슨 일이야? 음, 첫째 날 가서 가자 다시 Cloud9에 나를 앞서 가자 이전 내 탭을 닫습니다. 그리고 나는 이것을에 할 거 야 내 단지 잠시 동안 소유하고 있습니다. 나는 앞서 갈거야 새로운 파일을 만듭니다. 그리고 난의 google.html로 저장하겠습니다. 그리고 나는 매우 quickly--에 갈거야 나는 실제로 훔칠거야 이 텍스트의 일부는 단지 시간을 저장합니다. 여기에이 붙여 넣을거야. 내가 귀찮게하지 않을거야 어떤 양식에이 시간. 우리는이 호출 할거야 "내 구글을." 그리고 난 없애려고 신체의 모든 것을. 그리고 난 다음을 수행하겠습니다. 저를 확대 할 수 있습니다. action-- 폼 나는 간단히 언급 한 바와 같이 나는 간단히로 whoops-- earlier-- a의 액션, 앞서 언급 형태는 당신이 데이터를 보낼 곳입니다. 그래서 google.com/search. 본 방법은 I 사용할 두 가지 중 하나가 될 수 있습니다. 우리가 지킬 때 그것은 하나 "얻을"수 있습니다 논의, 또는 할 수있다 "게시 할 수 있습니다." 지금은, 기본 당신이 사용하는 경우의 차이는 "GET"입니다 그 모든 정보 사용자는 URL로 전송됩니다 제공합니다. 

즉, 검색 같은 것들에 좋은 곳입니다 엔진과 몇 가지 다른 응용 프로그램, 하지만 어떤에서와 상황 것 당신은 양식을 작성하지 상기 정보는 결국 한 URL, 브라우저의 주소 표시 줄에 같은? 형태의 어떤 종류의 방송 해요을 청중 : [들리지] 데이비드 J. 마란 : 그래, 어떤 거? 청중 : 암호. 데이비드 J. 마란 : 그래, 당신은 로그인 할 수 있도록 페이스 북이나 일부 웹 사이트에있다. 즉로부터 사용자 입력의 양식, 텍스트 상자, 하지만 당신은 아마 그것을 원하지 않아요 브라우저의 URL에 표시. 왜? 나는 어쩌면 몇 가지가있다, 의미 네트워크의 보안 문제, 하지만 좋아하는 선율은, 더 간단하게, 어떤 경우 룸메이트, 당신의 중요한 다른, 당신의 아이는 당신의 배우자가 보인다 브라우저 기록을 통해? 비밀번호 권리가있다 이 브라우저의 역사입니다. 즉, 좋은 디자인처럼 생각하지 않습니다. 심지어 더 기술적으로, 당신이하려고하는 가정 플리커 (Flickr)에 사진을 업로드 또는 페이스 북이나 wherever-- 그 경우에도, 사용자 입력 이 방법 interesting-- 조금 더 나는 URL 표시 줄에 이미지를 벼락 공부합니까? 당신은 가지 종류의 수 없습니다. 당신은 종류의 수 있습니다. 하지만, 정말로, 나는 곤경에 해요 그 일을 상상합니다. 그래서 다른 방법이 필요합니다 웹 사이트에 사진을 업로드, 그리고 다른 방법은 "게시물"이라고합니다. 하지만 지금, 우리는 단지에 대해 얘기하자 두 가지의 간단 인 "얻을". 그냥두고 모든 의 URL에 사용자 입력. 

그래서 여기 내가 만드는거야 형태입니다. I는 입력을 할 수 있습니다. 그리고 그거 알아? 여기 추측을거야. 내가 기억하는거야 내 의 입력 "Q", "쿼리." 그리고이 중 하나라고 생각합니다 오리지널 디자인, 아마도, 1999. 이 입력의 다음 유형 단지가 될 것입니다 "텍스트입니다." 그리고 나는 또 다른 입력을거야 즉, 우리가 곧거야, 이름을 필요로하지 않는다 유형은 참조 "제출한다." 그리고 이것은 가고있다 나에게 특별한 버튼을 제공합니다. 그리고 그게 다입니다. 

그래서 내가 가서이 파일을 저장 할 수 있습니다. 나는 돌아갈거야 내 브라우저의 google.html로 이동합니다. 들어가다. 그리고 드문 드문 종류의 적어도 말을합니다. 그러나 내가 앞서 가자 및 검색 "고양이." 그리고 나는 현재 해요 통지 이 Cloud9의 URL에서. 하지만 그 순간 나는 이쪽을 클릭, 여기서 당신은 내가 결국 바랍니다합니까? 

청중 : 구글. 

데이비드 J. 마란 : 구글. 그럼 제출을 클릭 할 수 있습니다. 그리고 실제로 나는 구글을 다시 구현했습니다. 권리? 그것은 간단합니다. 그것은 라이터입니다. 내 코드가 명확보다 더 의미 그들의은 혼란에서 우리는 이전 보았다. 그리고 그거 알아? 나는 조금이 양념거야. 나는이 이전 버전을 언급하지 않았다. (1) 제목에 대한 H1 같은 태그가 있습니다, 페이지에서 가장 중요한 제목. "내 구글은"나는이 전화 할게. 나를 다시 보자. 이미 조금 더 찾고 있습니다. 그리고, 사실, 그거 알아? 내가 거짓말을 already--했습니다. 나는이 스타일을하지 않을 있다고 말했다, 하지만 예전처럼이 스타일을거야. 그리고 내 몸이 될 것입니다 텍스트 정렬 센터의 말을 할 수 있습니다. 이미 많은 구글처럼 찾고 있습니다. 

나는하지만, 줄 바꿈이 필요 그것을 위해 버튼을 제출합니다. 그리고 당신은 밝혀 단락을 사용할 수 있습니다, 또는 당신은 더 많은 문자 그대로 그냥 말할 수있다 나에게 휴식은 BR 태그를 here-- 라인을 제공합니다. 나는이를 다시로드한다면, 지금이 간다. 그것은 조금 못생긴, 그래서 여러 줄 바꿈을 할 수있는, 그러나의 여기 너무 욕심 얻을 수 있습니다. 그래서 지금을 위해 작동하는지 보자 "개." 뿐만 아니라 "개"를 작동하는 것 같다. 그래서 강력한 테이크 아웃은 여기에 무엇입니까? One--는에 큰 도약이 아니었다 몇 가지 더 태그를 소개합니다 입력 태그의 form 태그 등을들 수있다. 하지만 더 근본적으로 이며, 모두 우리가하고있는 우리의 이해를 활용하여 HTTP와 사실 형태는 궁극적으로 변경할 수 있음 브라우저의 URL에 무엇을, 그래서, 그러므로, 우리는 할 수 기계적 서버에 입력을 제공 할 HTML 양식을 만들고 알고에 의해 서버가 HTTP를 이해하는, 우리의 몸은 같은 이해 좋아, 내 손을 떨고, 같은 프로토콜, 그래서 우리는 응답을 얻을 우리는 궁극적으로 기대. 

그럼 하나를 수행 해보자 마지막으로 이제 모바일과 함께, 그리고 내가 추가 할 것입니다 make--합니다 슬라이드에이 코드. 당신은, 당신을 수리를하고 싶습니다 그래서 만약 확실히 거기에서 걸릴 수 있습니다. 하지만 난 갈거야 앞서 한 일을. 내가 가서거야 및 내 인덱스 page--을 열어 이전과 나의 안녕 페이지, 어떤 이 가짜 라틴어 텍스트를 많이하고있다 또는 의미 라틴어 텍스트 및 has-- 그것은이 글꼴 크기 다음과 같습니다. 그러나 내가 가서이 작업을 수행 할 수 있습니다. 나는 Cloud9에 갈거야. 그리고이 단계를 수행 할 필요가 없습니다. 난 그냥 나 자신을 다하겠습니다. 나는 공유를 클릭거야. 그리고 이것은 기능입니다 바로 Cloud9, 이에의 내 환경에 공개 할 수 있습니다. 

그리고 단지의 이익을 위해 데모는, 내가이 작업을 수행 할 수 있습니다. 내 응용 프로그램을 공개하겠습니다. 오전, 그것은 나를 경고있어 주목하라 나는 확실히 나는이 작업을 수행 할 수 이 모두를 만들려고하기 때문에 세계에서인지 그들은 지금 여기 또는 나중에 비디오를보고 수 인터넷이 내가 보는 것을 볼 수 있습니다. 하지만 괜찮아요. 내가 말할거야 "완료." 내가 한 경우에, 내가 당신을 격려하자 이 날 먼저 테스트 할 수 correctly--. 당신이 mind--하지 않는 경우, 어서 컴퓨터의 브라우저에서, 이 URL로 이동, 희망 내 라틴어 텍스트를 볼 수 있습니다. 그리고 명확하게하기 위해, 그것은이다 내 노트북​​에없는 실행. 그것은 클라우드에 있습니다. 그것은 문자 그대로, Cloud9에있어하지만 내 작업 공간을 공개했습니다 그래서 인터넷에서 사람 내 라틴어 홈 페이지에 액세스 할 수 있습니다. 

같은 URL에로 이동 휴대 전화, 당신이 할 수있는 경우. 그것은 당신에게하지만, 당신을 요할 것이다 경우 그냥 어깨 너머로 볼 수 있습니다. 청중 : [들리지] 데이비드 J. 마란 : 미안 해요? 청중 : [들리지] 데이비드 J. 마란 : 그냥 라틴어 단어. 그게 다야. 하지만 당신이 볼 수거야. 

청중 : 네. 데이비드 J. 마란 : 그래. 네. 승인. 그래서 나는까지 수용 할 수 있습니다 단지 잠시 동안 전화? 그래서, 희망, 당신은 액세스하는 경우 그것은 거의 읽을 보일 것입니다. 그것은 내 말은 아직 -, 그것의의 때문에 라틴어를 읽을. 그러나 그것은 또한 읽을 수 있어요 무슨 다른 이유? 마찬가지로, 당신은 이것에 대해 어떤 불쾌? 청중 : 그것은 작은입니다. 데이비드 J. 마란 : 그것은 매우 작은, 슈퍼입니다. 그래서 우리는 어떻게이 문제를 해결할 수 있을까? 그것은 매우 작은, 슈퍼입니다 빅토리아의 전화 그리고, 당신은 뽑아 한 경우 아마도까지 자신, 휴대 전화에 작은뿐만 아니라, 당신이하지 않는 내게 필요한 옵션 설정을 사용할 수 있습니다. 그게 뭔데? 당신은 그냥 꼬집어 수 있으며, 가능한입니다 줌, 하지만 당신은 단지 참조 한 번에 몇 마디. 그래서 분을 기다립니다. 나는이 문제를 해결하는 방법을 알고있다. 권리? 나는 CSS를 사용할 수 있습니다, 그리고 나는를 변경할 수 있습니다 12 점에서 24 점으로 글꼴 크기입니다. 하지만 부작용, 물론, 지금이 될 것입니다, 데스크톱이나 노트북에, 이제 텍스트는 큰 배입니다. 그리고 그것은 종류의 좋은 것 장치를 구별하는, 그리고 거기에 밝혀 그 일을하는 방법입니다. 여러 가지가 있습니다 다른 방법으로, 사실, CSS와 애호가 기능을 사용함으로써 우리는 훌륭한 세부 사항에 들어가되지 않습니다, 당신은 본질적으로 조회 할 수 있습니다 브라우저 및 말 화면이보다 작 으면 많은 픽셀이 글꼴 크기를 사용합니다. 화면이보다 크면 많은 픽셀이 다른 글꼴 크기를 사용합니다. 

당신은 여전히​​에도 애호가가 될 수 있습니다. 당신이 이제까지 방문한 경우 웹 페이지 즉, 바탕 화면에, 아마에 떨어져 큰 메뉴가 있습니다 후 측면, 및 모든 콘텐츠 그 옆에있다 menu-- 즉, 일반적인 패러다임의 종류입니다. 왼쪽, 콘텐츠에 대한 메뉴 오른쪽, 또는 그 반대에. 때 정말 모바일에서 작동하지 않는 화면이 넓은 만이 많은 픽셀입니다. 휴대가에 따라서 더 많이, 메뉴 갑자기 얻을 것이다 붕괴, 당신은에 있습니다 그것을보고 버튼을 클릭, 또는 웹 사이트 메뉴를 넣어 것입니다 그리고 그 위에 아래 내용을 넣어. 그리고 당신은이를 구현할 수 있습니다 너무 여러 가지 것들. 당신은 당신의 프로그래머를 요청할 수 있습니다, 이봐, 팀, 언제든지 당신은 안드로이드에서 HTTP 요청을 참조 장치는 Microsoft 장치, 구글 장치 애플 장치는 이것을 사용 폰트 크기는 메뉴 레이아웃을 사용하고 그렇지 않으면이 기본 더 큰 레이아웃을 사용합니다. 

지금 사용하는 것 기본적인 기술의 오늘 엔지니어는 사용할 수 그것의 여부를 알 수 있습니다 아이폰, 안드로이드 폰, 노트북, 회사의 서버를 방문 데스크톱? 항에있어서, 그들은 그 정보를받을 수 있나요? 

청중 : 헤더? 

데이비드 J. 마란 : 네, HTTP 헤더. 그래서 모든 HTTP 요청에서 오는 고객 자신의 서버에 가상 내부에 포함 봉투, 전체 무리 HTTP 헤더들 중 하나는 브라우저 및 운영 체제 심지어 당신이에 관심이있는 경우 세부 사항의 수준. 지금, 그것은 비밀 보이는 문자열,이다하지만, 소프트웨어가 존재하는 단지 것 그 단순화하고, 당신은 요청할 수 있습니다 PHP, 자바, C code-- 프로그래밍 ++, whatever-- 어떤 전화는이 항아리입니다 사용이 사용자는 어떤 장치인가? 그리고 당신은 그들이 보여 말할 수 웹 사이트의 버전은 전화​​ 인 경우. 그들에게이 버전을보기 웹 사이트는 노트북이나 데스크탑의 경우. 하지만 당신도 필요하지 않습니다 서버 측 복잡성. 당신은 물건도 간단한 작업을 수행 할 수 있습니다. 

나는이 작업을 수행하는거야. 나는에 가서거야 제 Cloud9 환경 나는 태그를 추가거야 이전에 구글에서 보았다. 그것은 메타 태그라고합니다. 그리고 정말이 일을 기억하지 난 여기가 전사거야. 메타 이름 = 다음 "뷰포트"와 내용 = "너비 = 장치 폭, intital 규모 = 1 "그게입니다. 

그래서 그것은뿐만 아니라 수 있습니다 마법의 주문처럼. 그것은 모든 것을 명확하지 않다,하지만이 있습니다 뭔가, 뷰포트로 할 수 있습니다 뷰포트는 단지 몸 웹 페이지, 직사각형 영역 그 페이지의 대부분을 정의합니다. 그리고 이것은 단지 말하고있다 브라우저, 그거 알아? 이 페이지의 폭을 장치 폭에 효과적으로 동일. 즉, 그 가정하지 당신은 무한한 공간의 종류가 있습니다. 당신은 단지 많이 있다고 가정 장치 자체 공간이 큽니다. 그리고 지금, 경우에게 나는이를 다시로드 내 브라우저에서, 나는 변화를 볼 수 없습니다. 하지만이 correctly--을 한 경우 내 fingers--을 교차하게하는 모든 경우 당신의 전화를 다시로드, 당신을 강력한 변화를 볼? 그래, that--입니다 

청중 : [들리지] 데이비드 J. 마란 : 예. 승인. 그래서 틀림없이 더 읽기 지금? 아직도 작은, 공정하게,하지만합니다 그래서 작은 관리 할 수​​ 있습니다. 그리고 나는 확실히이 메소드를 오버라이드 (override) 할 수 상기 CSS 또는 서버 측에서 하지만 점점 당신이있어 무엇을 점점 더 많은 기능을되어보고 에 추가 클라이언트 측 environments-- 자바 스크립트, 우리가 논의 되겠지만 내일, CSS 및 HTML-- 그래서 이러한 쿼리의 모든 클라이언트에서 수행 할 수 있습니다 되도록하면 귀찮게하기 서버 훨씬 덜하지 들어와 계속해야합니다 예, 상수 맹공 새로운 운영 체제의 버전, 새로운 브라우저 버전. 당신은 브라우저를하도록 할 수 있습니다 장치를 물어, 당신이 얼마나 큰 있습니다 다음 다소 논리적 확인 그에 따라 결정. 그러나 우리는 더 많은 기회를 볼 수 있습니다 논리적 결정에 대한 맥락에서 내일 프로그래밍 언어의. 

그래서, 질문, 다음, 웹 개발에? 오늘은 웹 프로그래밍, 당 없습니다 우리가했던 자체는, 이후 대부분의 모든 당신이 경우, 매우 심미적이었다. 어떤 의사 결정이 없습니다 우리가 작성한 코드, HTML은 마크 업이 이유 때문에 그건 언어가 아닌 프로그램 언어. 그러나 내일 우리는 할게요 얼핏, 궁극적으로, 자바 스크립트에서, 어느입니다 실제 프로그래밍 우리가 조금 더 많은 일을 할 수 있습니다 언어입니다. 

질문? 글쎄, 내가 두를 제안하자 숙제에 대한 선택 기회를 제공합니다. 하나는 이러한 Cloud9 데로 계정이 만료되지 않습니다. 당신은 사용하기 환영합니다 그들에게 어설프게합니다. 이 서비스의 무료 수준입니다. 만들 때 경우, 그 실현 작업 공간, 당신은 그것을 공개 즉, 해당 사람을 의미 하는가 인터넷은 당신이 입력하는 것을 볼 수 있습니다. 그래서 어쩌면 그냥 생각 자신을 당황하지 당신은 당신의 첫 번째 웹 퍼팅하는 경우 공개적으로 실수로이 페이지, 그러나 아무도에게 않을거야 어쨌든보고 알고있다. 

그리고 나에게 던져 보자 2가 있으며 뿐만 아니라이 URL까지, 오늘 A의 온, 특히 다른 사람보다 편안한 조금 이 모든 물건이 무엇을 의미하는지 확실하지. 이 동영상의 훨씬 더 실현 어떤 잠들 수있는 좋은 방법 둘 다 또한 동안 웃음 또한 가지며, 이렇게 사회적으로 관심을 많이 및 보안 관련 토론 거기에 존 올리버에서, 코미디언이기는하지만. 

그러나 더 이상의 질문이없는 경우, 그 수신에 우리를 제공합니다. 그래서 내가 왜 음악 켜지지 않습니다. 음료가 있어야한다 외부와 스낵. 나뿐만에 대한 어울려 행복 해요 사람들이 원하는만큼 오래, 일대일 질문에 더 대답합니다. 그러나, 그렇지 않으면, 당신은 환영합니다 어느 시점에서 이륙하기 위해, 우리는 당신을 다시 볼 수 있습니다 좀 더 내일 아침. 좋아요, 감사합니다.