DOUG 로이드 : 그래서 우리는 소비 비슷해 내 수학이 옳다면, 그리고 내가 생각 back-- 찾고 생각 우리는 얘기를 약 35 동영상을 보냈다 아마 C의 다양한 양태에 관한 조금 더, 어쩌면 좀 덜. 그리고 우리는 포함하지 않았다 C의 모든하지만, 우리 의 큰 덩어리를 포함 언어, 그것의 대부분, 확실히 일반적인 용도. 이제 우리는 얘기거야 에 대한 다른 언어로, HTML. 그리고 우리가 다루려고 그것은 단지 하나의 비디오. 

하지만이 확인 될 것입니다. 즉, 실제로이 될 것 뭔가 당신이 익숙해 것입니다. 지금 당신이 가지고있는 하나의 언어의 기초, 그것은 실제로 매우 쉽다 다른 사람을 배우기 시작합니다. 그래서 우리는 시작하는거야 다시 작은 스텝 과 기본을 얼버무 다음 언어 사이의 차이 그리고 종류의 그것 당신을 떠날. 정말 좋은 많이있다 인터넷상의 리소스를 어느 우리가 당신을 지시하는 시작하는거야 인터넷이므로 향해 정보의 광대 한 저장소. 그리고 그것은거야 당신처럼하지 반드시 일을 잃고 정보를 구비하지 않음으로써 비디오에 덮여. 당신은 여전히​​ 얻을 수있을 것이다 모든 것을 당신이 필요로 사용 당신은 이미했습니다 지식 C를 이해함으로써 구축 이들에 대한 학습 곡선을 만들려면 실제로 다른 언어 많은 아첨. 나는 약속한다. 

하지만 이제 하나의 언어에 대해 이야기하자 즉, 모든 웹 정말 근본적인이다 HTML 페이지입니다. HTML은 하이퍼 텍스트 마크 업 언어입니다. HTML은 언어이지만이고 하지 프로그래밍 언어. 

HTML은 변수가 없습니다. 그것은 논리를 가지고 있지 않거나 기능이나 그런 것을. 우리는 할 수 없습니다 HTML에서 자체 프로그램. 때때로 당신은 듣게 될 것입니다 사람들은 자신을 설명 HTML 프로그래머로하는 완전히 정확하지 않습니다. 우리는 HTML 프로그램을 쓸 수 없습니다. 

HTML은 텍스트를 표시하는 데 사용됩니다. 이것은 마크 업 언어라고. 그리고 이것은이 markup--을 does-- 무엇 우리는 HTML과이 tags--에 태그를 사용 이 의미 markup-- 페이지의 구조를 정의 및 일반 텍스트를 유발 태그 해석 사이에 존재 다른 방법으로 브라우저. 그리고 아마도 설명하는 것이 가장 좋습니다 그림의에 의한 방법. 

다음은 아주 간단한 HTML 페이지, 아니다 HTML 프로그램, 다시, HTML 페이지. 그리고 우리는 알고있다 HTML 페이지에 우리가했습니다 때문에 HTML 태그와 모든 경계. 그래서 이것은 HTML 태그의 모습입니다. 그것은 꺾쇠 괄호 사이입니다. 그리고 우리가 상단에 주목 HTML과 매우 하단에, 우리가 무슨 짓을했는지 후 분명히 다른 HTML의 많은, 우리는 꺾쇠 괄호 슬래시 HTML을 가지고있다. 그래서 그런 종류의 경계는 HTML이 무엇이며 무엇을하지 않습니다 사이. 그리고 물론, 통상적으로, 단지 당신은 당신의 C 프로그램을 모두 쓴 도트 C 확장과, HTML 파일의 모든 점 HTML 확장으로 종료됩니다. 하지만 더 여기가에 대한 것입니다. 우리는 이러한 HTML 태그가 없습니다. 우리는 분명히이 있습니다 일이 머리에 태그를했다. 음, 좋아, 그게 뭔데? 

그럼 어쩌면에 최선의 몸체에 의해 구별 바디는 웹 페이지의 콘텐츠 인. 그래서 어쩌면 헤드 태그는 물건을 정의 즉, 브라우저 창에 적절한 아니다 하지만 어떻게 든 중요하다 우리 웹 페이지는 렌더링되고 정확하게. 예를 들어, 내부의 머리 태그 우리는 제목 태그가 있습니다. 

그래서 제목 안녕하세요 세계되고, 그 사실은 무엇을 할 것 크롬의 탭에 표시 또는 사파리 또는 Firefox--에 어떤 브라​​우저는 그건 prefer-- 어떤 제목에 표시하는 것입니다. 그리고 탭 전에 보여줄 것 전체 브라우저 창에 최대 당신은 하나의 페이지를 가질 수 있습니다 한 번에 브라우저 창에서 열립니다. 그래서이 될 것 탭에서 내 페이지 최대의 제목 또는 브라우저 창 바, 안녕하세요. 그리고 다음 내용을 내 웹 페이지 안녕하세요, 세계 일 것이다. 그럼 무엇을 몇 가지 살펴 보자 이 같은 점은 다음과 같을 수 있습니다. 이것은 매우 간단한 HTML 페이지입니다. 그래서 난 내 CS50의 IDE에서 왔어요 및 나는 조금 확대했습니다. 그리고 난 그냥 갈거야 안녕하세요 점 HTML을 열어 이 꽤 많이 있음을 보여 우리가 전에 본 페이지의 콘텐츠. 내 간단한 HTML, 머리 태그, 제목 태그, 등등 몸합니다. 나는 깨끗한 것으로 들여 쓰기했습니다. 

그리고 난에서 할 수있는 다음 어떤 내 IDE는 페이지를 미리 볼 수 있습니다. 그리고 거기 우리는 간다. 내 페이지의 내용은, 세계입니다 안녕하세요, 나는 아무것도 표시되지 않습니다 이 헤드 태그에서. 그것은 몸의 단지 콘텐츠이다. 세계, 안녕하세요. 그리고 다시 몸 단지 말했다, 세계, 안녕하세요. 다른 부분은 없습니다. 

그래서 정말 그것이 전부입니다. 이는 매우 간단한 기본 HTML 페이지이다. 지금은에 내 HTML을 들여 쓰기했습니다 정말 좋은 구성 할 하지만 실제로 필요가 없습니다. 나는 꽤 예쁘게 만들 수 있습니다. 그리고이 여전히 작동합니다. 이는 동일한 웹 페이지가 될 것입니다. 난 그냥 없애 쪘 공백의 모든. 

그것이 나오는 것에 따라, 공백은 데이터입니다. 그래서 우리는 데이터를 보낼 때 송신자는 서버에서, 수신기 클라이언트에 데이터가 돈을 비용. 그래서 공백 치우는 실제로 좋은 생각이다 당신이 사람이라면 누가 제공 웹 콘텐츠의 많은 업. 당신이 있다면 그것은 좋은 생각 이 물건을 배우는 사람 당신이 갖고 싶어 그것은 잘 조직했다. 이것은이보다 구문 분석 훨씬 쉽게입니다. 그러나 기능적으로 동일합니다. 

같은 들여 쓰기 및 물건 실제로 HTML에서 중요하지 않습니다. 모든 문제는 여는 태그입니다 올바른 순서로 태그를 닫는. 하지만, 여기에 무슨 일이 있었는지 알 수 있습니다. 마크 업 우리에게 할 수있는 방법을 제공합니다 추가 정보를 전달 우리가 작성한 것에 대해. 안녕하세요, 세계의 부분이었다 제목으로 해석했다. 그리고, 안녕하세요 부분은 세계이었다 콘텐츠 해석 또는 무엇을해야 내 웹 페이지에 표시. 

서로 다른 100 이상있다 태그 훌륭한 자원을 많이 그들을 찾을 수 온라인. 우리는에 대해 이야기하는거야 이 비디오에 그들 중 몇 가지, 몇 가지 정말 기본적인 재료. 그러나 우리는 이야기를하지 않을거야 모두에 대한 그것 때문에 그렇게 철저한 것입니다. 

당신은하지만, 할 수있는 또 다른 것은, 개발자 도구를 열 수 있습니다. 그리고 당신은 기억 경우 HTTP에 우리의 비디오, 나는 여는 방법을 설명 개발자 도구입니다. 크롬에서 보통 F12 키의 개발자 도구 모음을 엽니 다. 이어서 대신 네트워크 선택의 탭, 당신은 요소 탭을 선택할 수 있습니다. 그리고 당신은 웹을로드하는 경우 페이지, 당신은 실제로거야 해당 웹 페이지를 생성하는 HTML을 참조하십시오. 그래서 당신은 HTML에 대해 많은 것을 배울 수 있습니다 즐겨 찾는 웹 사이트에보고하여 그들은을 구축하는 방법을보고 당신이 좋아하는 것을 그들에게 여러 가지. 그래서 아마도이 멋진이있다 패턴이나 뭐 그런. 그들은 어떻게 HTML로해야합니까? 그럼 당신은 당신의 개발자를 열 수 있습니다 그 요소를 통해 도구와 호버 및 HTML을 만드는 정확히 참조하십시오. 그래서 정말 HTML을 배울 수있는 좋은 방법, 나는 강하게하는 것이 좋습니다 당신이 그것을 모두 배울 할 HTML 또한 약간의 내용 일부 옵션에 대한 비트 에서 사용할 수있는 개발자 도구, 어떤 확실히로 편리합니다 좀 더 집중적 인 웹 일을 시작하기 프로그래밍. 

그럼 살펴 보자 일반적인 HTML 태그의 커플. 그리고 우리는 뛰어 살펴 보겠습니다 이 태그는 렌더링 무슨 내 IDE에서 일부 파일을보고하는 등. 그래서 여기에 대한 세 가지 매우 기본적인 태그는 텍스트의 시각적 모양을 조정. B 태그, 나는 태그 및 U 태그가있다. 그리고 각각 그들이 무엇이다 굵은 글씨로 그들 사이의 텍스트를 렌더링, 기울임 꼴 및 밑줄. 그래서 그 모습 될지 보자 IDE 내에서 실제의 웹 페이지 등을들 수있다. 

그래서 여기 내 IDE에서 내가 가진 BIU 점 HTML이라는 파일. BIU 점 HTML은 단지 인 굵게, 기울임, 밑줄. 나는 그것을 열 수 있습니다. 

그리고 우리는 그 여기에 볼 수 있습니다 이 텍스트를 가지고하는 것은 B 태그 대담한이다. 이 텍스트는 내가 태그 기울임 꼴이다. 그리고이 텍스트는 U 태그에 밑줄을. 이것은 무엇처럼 보일거야? 그럼 다시, 모든 나는이 여기에 가서 할 일은 브라우저로, 내 파일 브라우저, 클릭 미리보기 및이 온다 것입니다. 

B 사이의 텍스트 태그는 참으로 지금 대담한이다. 나는 사이의 텍스트 태그는 참으로 지금 기울임 꼴이다. 및 U 사이에서 텍스트 태그는 참으로 지금 밑줄이 그어져 있습니다. 그래서 꽤 좋다. 이제 우리는 텍스트를 만드는 방법을 알고 좀 더 멋진 모습 또는 어떤 일에 중점을 그립니다. 여기에 일반적인 태그의 또 다른 커플은 단락 태그, P, 및 헤더 태그 이는 내가 HX 여기 렌더링했습니다. 

이러한 P 태그, 이러한 단락 태그 단락에 텍스트를 휴식. 그것은 단지에 충분하지 않습니다 입력하고 공백을두고 충돌, 컴퓨터는 것입니다 때문에 당신이해야 할 그에게 일을 그것은 흰색 무시 대부분의 공간. 그래서 우리는 그냥 Enter를 누를 수 없습니다 우리의 컴퓨터를 기대 우리가 원하는 것을 해석하는 새 단락을 시작합니다. 우리는 매우 명시 적으로이 말을해야 이 paragraph-- 하나 another--입니다 P 태그 세트에 의해 각각 둘러싸. 

그리고 우리는 또한 이러한 옵션을 사용할 수 있습니다 H 태그, 이러한 헤더 태그. 우리는 여섯 가지 수준이 헤더, 하나, 둘, 셋, 아르 넷, 다섯, 여섯, 점차적으로 더 크고 더 큰 헤더. 그리고 그들은 작아과 작고 작아. 그래서 우리는 두 번째 최고 수준의 헤더가 레벨 헤더 등, 등. 

의 아마 몇 가지를 살펴 보자 P 태그 및 일부 헤더 태그 웹 페이지에 행동. 그래서 여기 내 IDE에서 나는라는 파일이 PH 도트 HTML, PH되는 단락 헤더 태그입니다. 그를 엽니 다. 많은 여기에이 일이야 나는 몇 가지가 lorem을 넣어했기 때문에 Ipsum 제품, 여기에 일부 단지 임의의 텍스트. 그래서 나는 조금 축소거야 이 때문에 너무 많은 일. 하지만 난 아주에있는 것을 알 수 나는 H1, 레벨 하나가 여기에 맨 헤더 태그입니다. 그럼 난 그냥 단락을 가지고 임의 text--의가 lorem의 무리 ipsum-- 그냥 텍스트 표준 충전 기본. 그래서 나는 그 안에 두 단락이 레벨 1 헤더 다음 아래 나는 아래 라인 (24) 여기에 레벨이 헤더가, 두 번째 수준 헤더, 다른 두 단락. 그럼이처럼 무엇을 보는가 내가 미리보기에서 볼 경우? 어디 보자. 

그래서 알 여기에 첫 번째 레벨의 헤더 사실은 꽤 조금 더 큰 두 번째 수준의 헤더보다. 그래서 우리는 H1 태그를 사용했다. 그리고 P 태그 우리를 허용 것을 알 수 단락으로 물건을 깰. 우리는 그 P 태그를 제거 먹은 경우 실제로 그냥 넣어 입력하거나 반환 우리가 희망 것 사이의 것 다른 단락 수, 그들은 모두 그냥 같이 슬램 것이며, 그것은이 좋은 단락이없는 것 위와 아래 공간 분리. 그리고 그 무엇 단락의 태그 헤더 태그 일반적으로 그리는 수행하는 데 사용됩니다 웹 페이지의 일부에 관심 그 방법으로. 

다음은 우리가 사용하는 일부 태그입니다 우리의 웹 페이지 목록을 빌드합니다. 그래서 우리는 순서가있다 lists-- ULs--는 단지입니다 주문 글 머리 기호 목록, numbered-- 있습니다 목록 OLs-- 및 내부 중 그 중 하나는 우리가 필요 , LI를 목록 항목을 표시하는 방법의 세트. 그래서 우리는 열린 UL 태그가 우리는 그것의 내부 항목을 넣어. 그리고 우리가 함께 할 때 즉, 우리는 UL 태그를 닫을 수 있습니다. 

그리고 마찬가지로 우리는 할 수 있습니다 주문 또는 번호 매기기 목록 그 내부에 목록 항목을 넣어. 그럼 살펴 보자 목록의 커플 어떤 이들은 것 CS50의 IDE에로 렌더링합니다. 그래서 난 내 IDE의 여기에있다 라는 파일 목록은 HTML을 점. 이제 살펴 보자. 

그리고 여기에 통지 나는 정렬되지 않은이 그것의 다섯 가지로 나열합니다. 그리고 나는 정렬 된 목록을 가지고 있고, 나는 태그를 조금 변경했습니다, 권리? 나는 시작이 여섯 동일 말한. 그것은 정렬 된 목록 내가 함께 밝혀 시작점 목적지를 설정할 수있다 나는 그것이 one-- 될 것 기본적으로 원합니까 에 의해 그냥이 소위 속성을 추가 내 OL 태그에. 그리고이리스트는 것 6시에 계산 시작합니다. 그 번호 매기기 목록의 따라서 요소 되어야 여섯, 일곱, 여덟, 아홉, 열, 다섯 가지 요소가 있기 때문에 목록에서 하나 반대로, 둘, 셋, 넷, 다섯, 어느 내가 OL이 말씀하신 경우 경우 것 시작 속성을 지정하지 않고. 

당신이 할 수 있도록 그래서 우리는 그냥이를 미리 볼 수 있습니다 여기에 무슨 일이 일어나고 있는지에 대한 감각을 얻을. 그리고 거기 우리는 간다. 내 목록이있다. 처음 다섯 요소는 정렬되지 않은 또는 글 머리 기호 목록. 그리고 다음 다섯 가지 요소 별도의 정렬 된 목록은 여섯부터 시작. 그건 그래서 우리가 어떻게 할 수 HTML을 사용하여 목록을 작성합니다. 또 다른 것은 당신이 수도 HTML로 할 테이블을 구축한다 행과 열의 정보 에 정보를 제공하는 특히 길을 조직했다. 우리가있을 수 있습니다 HTML이 작업을 수행하려면 오픈 브래킷을 시작 테이블 정의 테이블. 그리고 그 테이블 안에 우리 행 TR 태그의 집합이있을 수 있습니다 각 행을 나타냅니다. 그리고 TD 태그는 TR 태그의 내부에 이동 행 내에서 열을 지정합니다. 

왜 TD 전화를 TC되지 않는 이유는 무엇입니까? 음, TD 테이블 데이터를 의미합니다. 보통은 퍼팅 이 정보. 이 TD하지 TC 이유 그래서입니다. 그것은 조금 혼란. 

그래서 당신은 테이블 태그를 가지고 테이블 태그의 내부 당신은 행, 거래 정보 저장소의 번호를 가지고있다. 그리고 각 행 내에서, 당신은 열 수에 대한 TDS 당신은 할 것인지 특정 행의. 의 매우 살펴 보자 CS50의 IDE에서 이상 간단한 테이블. 

그래서 여기에 파일이 테이블 도트 HTML했다. 이제 살펴 보자 어떤이는 것 같습니다. 많은 여기가 일어나고 있지만, 당신이 알 수 있다면 테이블이 열려 있습니다. 나는 테이블 정의를 시작 해요. 그리고 내 첫 번째 행에서 나는 분명히 이 네 개의 열, 하나, 둘, 셋, 네. 그리고 나는 그 행으로 수행하고있다. 

그럼 난 다른 행을 시작하고 둘, 넷, 여섯, 여덟 할. 해당 행을 마칩니다. 다른 행, 세, 여섯, 아홉, (12)를 수행합니다. 그리고 마지막 행, 네, 여덟, 12, 그것이 비록 작은 16 여기 차단. 

그 행을 완료했다. 나는 테이블을 완료했다. 그리고 나는 나의 HTML을 수행하고있다. 어떤이는 모습입니까? 음,보고 정말 많이하지 않습니다. 나는 분명히 내 정보를 조직했습니다 좀 더 조직적인 방식으로. 그러나 여기에 슈퍼 꽤 아니다. 그리고 우리는 처리 할거야 우리는 CSS에 대해 이야기 할 때 그. 우리는이 아이디어를 다시 방문 할 것이다 우리는 table--를 만들기 위해 무엇을 어쩌면 조금 더 나은 포맷? 하지만 난 여전히 네 개의 행을해야합니까, 이들 각각은 네 개의 열을 가지며, 인에 정말이 무슨 총계 아주 간단한 네 네 곱셈으로 테이블. 

우리가 얘기하자 그냥 몇 태그. 의가에 대해 얘기하자 HTML 양식의 개념. 그래서 당신은이를 볼 수 있습니다 웹 페이지에 로그인의 콘텍스트. 일반적으로 당신은 당신의 사용자 이름을 입력합니다. 당신은 당신의 암호를 입력 당신은 갈 수 있어요. 즉 형태의 시작이 될 것이다. 

스킵은 두 번째 div에. 우리는 또한 입력이있는 가지 형태의 내부에 들어가. 이러한 요소가 실제로,에 입력하는 또는 라디오 버튼은있어 틱이나 점검 오프 똑딱있는 상자. 그래서 이러한 형태의 내부 이동합니다. 그리고 그들은 기본적으로 포함 양식의 각 행 양식이 잘 포맷 된 경우. 그리고이 개념있다 정말하지 않는 DIV, 특정 카테고리에 맞는 나는했습니다 것과 같은 태그 이전에하고 있었다. 그것은 단지 종류의 구분한다 어떤 임의의 division--의 시작 페이지 div--. 시각적 인 휴식은 없다. 더 선은 없습니다. 그것은으로 출발 아니에요 자동으로 별도의 덩어리. 당신은 스타일을해야 할 것이다 그 방법은 그렇게 할 수 있습니다. 

그것은 그저 내가 원하는 말한다 내 웹 페이지에 공간의 조각, 난 그냥 전화거야 그것은 내 페이지의이 부문. 우리는 내부의 물건을 넣을 수 있습니다 div에, 그리고 사실, 우리는에 향할 때 두 번째의 IDE, 우리는거야 내가 넣었 어 것을 볼 내 사업부의 내부에 형성한다. 

그래서 난 내 IDE의 여기에있다 DIV 형태 도트 HTML이라는 파일. 현실을 열어 보자. 내가 말했듯이 주목, DIV는 임의의 가지입니다. 권리? 그것은 정말 아무것도 의미하지 않는다. 그래서 임의의이 내 페이지의 첫 번째 부문. 그리고 대신 다른 사업부 나중에, 8 번째 줄에서 시작, 나는이 양식을 가지고있다. 그리고 형태의 내부 나는이 입력의 수, 형태의 필드. 그래서 그 이름 필드를 할까 .. 정말 아무것도 의미하지 않는 권리들을 당장 그 분명히 텍스트, 또 다른 하나를 걸립니다 라디오의 암호, 다른 소요 버튼, 체크 박스의 그 다른, 하고 있다는 또 다른 버튼을 제출합니다. 그럼,이 작업을 수행합니다 모든 사실처럼? 음, 살펴 보자. 우리는 우리의 미리보기 창에서을 열 수 있습니다. 이 임의의 알 먼저 거기에 division-- 여기에 시각적 분리합니다. 정말 바로, 아무 짓도 안 했어요? 

그리고 나는 내 양식이 있습니다. 그리고 나는 어떤 특별한 서식을하지 않았다. 그래서 형태는 하나입니다 정보의 큰 행. 내가 다르게 내 양식을 포맷 한 경우, 나는 그것을 선으로 선으로 줄 수도 있습니다. 하지만 난 어떤 스타일을하지 않았다. 다시 말하지만, 우리는 여기에 CSS에 대해 이야기하지 않을. 우리는 HTML에 대해 얘기하고. 

그럼 내 텍스트 형식으로 내가 유형 선택 - 수 기억 유형 텍스트의 형태 그래서 나는 내 이름을 넣을 수 있습니다. 그리고 내 암호 나에 암호를 입력 할 수 있습니다. 그리고 필드 때문에 입력 한 암호입니다 내 비밀번호가 무엇인지 모른다. 그것은 모든 점이다. 

나는 또한을 체크하도록 선택할 수 있습니다 라디오 버튼이나 체크 박스를 체크. 아니면 내가 내 양식을 제출 할 수있다. 그리고 난 아무 짓도 안 했어요, 그래서 나는 내 양식을 제출할 때, 페이지는 새로 고칩니다. 하지만 아마도 구성 할 수 있습니다 내 다른 일을 할 버튼을 제출한다. 그리고 우리는 우리가 무엇을 할 수 있는지 볼 수 있습니다 PHP의 미래 비디오에서 그. 그러나 이것은 매우를 구축 간단한 양식이 우리 사용자가 상호 작용하도록 사용할 수 있으며 우리의 웹 사이트에 정보를 제출합니다. 

마지막 코멘트 우리 전에 다른 태그로 이동 이 살펴보고있다 입력 된 태그를 한 번 더. 내가 강조했습니다 공지 사항 빨간색 태그의 끝. 우리가 지금까지 본 모든 다른 태그는있다 시작과 끝, 개구를 가지고 태그와 닫는 태그입니다. 

그러나 입력 태그하지 않습니다. 진행에 텍스트가 없습니다 입력 태그 사이에. 모든 정보 우리가 전달하고자하는 의 일부로 바인딩 그 입력의 속성. 우리가 입력 이름은 X와 동일해야 알 수 있습니다. 유형 Y 같습니다. 그건 정말 모든 정보 우리가 필요합니다. 

이것은 자기 닫는 태그라고합니다. 그것은 열고을 필요로하지 않습니다 근접 모든 정보 때문에 내부에 포함 태그의 속성. 그래서 때로는 당신도,이 표시됩니다. 당신이있는 경우 있도록 단지 인식 완전히 독립적 인 태그, 이 열리고 자신을 닫습니다 왼쪽의 개방 각 브래킷 및 슬래시 각도 오른쪽 브래킷. 우리는 그 중 또 다른 하나를 볼 수 있습니다 지금 이미지 태그뿐만 아니라. 

우리는 이미지에 대해 이야기하기 전에, 우리 하이퍼 링크에 대해 이야기 할 필요가있다. 우리가 원하는 경우 우리의 웹 페이지가 될 대화 형 우리를 이동할, 그것은 할 수 좋을 것이다 그 중 하나를 클릭합니다 무슨 일이 일반적으로 블루 링크하고있다. 이것은 우리가 구축하는 방법을 실제로 우리의 웹 페이지의 하이퍼 링크. 그리고 흥미롭게 다른 HTML 태그가있다 하이퍼 링크하지 않은, 링크했다. 여기에 앵커를 의미하고, 그것은 우리가 하이퍼 링크를 표시하는 방법은 다음과 같습니다. 

HREF는 X 수단으로 이동 동일 웹 페이지 (X) 그리고 모든 태그 열린 사이 그리고 가까운 태그 무슨 일이 될 것입니다 그 밑줄 링크처럼 보이는 파란색 텍스트 우리는 잘 알고있다. 그 아래에서 우리는 이미지 태그를 갖는 자기 표시 태그를 닫는 (X)에있는 이미지와 당신은 변경할 수 있습니다 지정하여 해당 이미지 폭과 높이 다른 속성에 그 점 도트가 점. 

여기 맨 아래에서 우리는 매우 흥미를 가지고 태그를 찾고 해당하지 않습니다 닫는 태그가 있습니다. 그것은 느낌표 포인트의 DOCTYPE HTML입니다. 그래서 HTML은 이후 주변왔다 웹 페이지를 구축하기위한 1990 년대 초, 그것은받은 사라 졌어요 그 이후 여러 버전. 가장 최근에는 2014 년 이 개정 시행 지금 현재있는 HTML5라는 사실상 HTML 표준의 종류. 

표시 것과 우리의 웹 페이지는 HTML5를 사용하여 작성 우리가 시작하는 방법이다. 그것은 생략 될 수 있지만 그 무엇 기본적으로 수단은 태그 중 하나를 사용할 수있다 HTML5 태그, 그 새로운 태그가 있습니다. 그래서 우리는 항상 시작 우리가 HTML5를 사용하는 경우. 그리고 모든 태그는 우리에 대한 얘기했습니다 이전에 HTML5 태그 아니다. 하지만이 것을 나타냅니다 HTML5 태그는 존재한다. 그래서 우리는 느낌표가 DOCTYPE HTML을, 어떤 의 맨 처음에 우리의 HTML 파일 후 후 그 지점 우리는 실제로 우리의 HTML 열려있는 태그 거기에서 진행합니다. 

마지막 하나는, 주석 태그입니다 이는도 약간 다르게 보입니다. 이 각도 오프 시작 브래킷 느낌표 대시 대시 있지만 닫는 대괄호. 이 두 요소 사이에서 당신은 귀하의 의견을 쓸 곳입니다. 그리고의 이미지를 살펴 보자 그리고 의견과 CS50의 IDE에서 링크. 

그래서 파일이라는 이미지 링크 여기에있다 내가 열어거야 점 HTML. 그리고 몇있어주의 사항 내 HTML 주석 여기에 코멘트. 그러니 그냥 C와 다른처럼 프로그래밍 언어, 다만 마크 업 언어 인 HTML로 코멘트를 가질 수있는 능력을 가지고있다. 그래서 나는 분명히 갈거야 릭 Astley의 사진을 배치 어딘가에이 DIV 사이 태그,이 임의의 분할. 분명히 그 파일입니다 릭 점 JPEG에 위치하고있는 우리는을 통해 머리를 뒤로 경우 두 번째 내 파일 트리, 에 존재하는 파일입니다 현재 디렉토리. 그래서 괜찮아요. 나는 그것을 참조 할 수 있습니다. 

그럼 내부 링크를 가질 수 있습니다. 그래서 여기에 라인 (11)에 통지 내 HREF 안녕하세요 도트 HTML입니다. 그래서는 점 HTML 안녕을 말한다 이는 현재 디렉토리에 존재한다. 그리고 외부를 가질 수 있습니다 HTTPS 단지 지정하여 링크 내가 이야기하고 있지 않다 있음을 나타냅니다 나의 현재 디렉토리에있는 파일에 대한. 내가 존재하는 파일에 대해서 이야기하고 어딘가에 내가 가지고있는 인터넷에 HTTP 프로토콜을 사용하여 요청한다. 

그럼 살펴 보자 무엇 이 페이지는 다음과 같을 수 있습니다 릭의 사진에 대한 준비 Astley가 화면에 표시합니다. 그래서 나는이를 미리 것이다. 릭 Astley는에있다 이 임의의 맨 부문 나는 상단에 넣어. 그리고 아래 나는 아래 내 링크가, 오른쪽? 

나는 안녕하세요 도트 HTML로 링크를. 그리고 나는 그것을 클릭하면, 내가 얻을 이 페이지를 통해 이동 우리는에서 매우 잘 알고 있음 우리의 프로그램의 시작. 나는 다시 개방 해당 페이지를 팝업, 난 경우 팝 이미지 링크는 한 번 더 열고 또한 외부 적으로 갈 수있다 CS50의 웹 사이트에. 그리고 거기에 우리는 내가거야 see-- 조금 축소 here-- 우리의 CS50의 웹 사이트 종류를 볼 수 있습니다 우리 페이지 중간에 매립. 그래서 내부를 확인 할 수 있었다 외부 링크뿐만 아니라 연결합니다. 

HTML과 마지막 규칙이 우리는 여기에 대해 이야기하는거야 당신의 HTML을 잘 구성해야한다는 것입니다. C에서 우리에 대해 많은 이야기 사물의 다양한 구문. HTML의 구문 정말 태그를 중심으로 돌아 가지. 당신이 열 때마다 태그를 폐쇄해야합니다. 그리고 사실, 모든 태그를 열고 역순으로 닫아야합니다. 

그래서 당신은 대담한 태그를 열 경우, 기울임 태그하고 밑줄 태그 에 세 가지를 모두 수행하는 텍스트의 특정 세트, 당신은 역순으로 닫아야합니다. 당신이 대담한 개방한다면, 이탤릭체, 당신은, 밑줄 굵게, 밑줄, 기울임 꼴을 닫으려면. 캡슐화 이런 종류의 무엇이다 HTML은 좋은 조직 유지합니다. 

C는 달리,하지만, 구문 오류는하지 않습니다 실제로 아마도 당신의 HTML을 마비. 당신의 HTML은하지 잘 할 수있다 형성하지만 여전히 작동합니다. 그리고 이러한 오류 하여 슬라이드의 정렬 할 수 있습니다. 정말 경계로 당신에게 달려 있습니다. 때로는 실패하지만 때때로 당신은 멀리 얻을 수 있습니다. 

그것은 정말 될 수 있습니다 어려운 작업하지만, 당신이 열 때 추적하기 태그, 당신이 그것을 닫을 때, 특히 HTML로 파일은 더 크고 더 큰 얻을. 당신은 약간의 도움이 필요합니다. 그리고 온라인있다 검증 도구 당신 웹에서보기를하는 데 사용할 수있는 페이지와는 잘 구성 HTML의 경우를 참조하십시오. 그리고 당신은 확실히해야 그 살펴 당신로 사용하기 시작 HTML을 몇 가지 일을 시작, 당신이 얻으 있도록, HTML을 작성 조직에 대한 몇 가지 좋은 습관 좋은 방법으로 HTML과 좋은 스타일과 확인하고 당신은 아무것도 안하고 있다는 것을 그 구문 오류를 만들 수있는 당신의 비트를 야기 도로의 아래 문제. 

나는 더그 로이드입니다. 이 CS50입니다.