DAVEN FARNHAM : 오늘, 내가 갈거야 HTML에 대해 조금 이야기 하이퍼 텍스트 마크 업 언어. 당신은 요즘 사방에 HTML을 참조하십시오. 사실, 당신이보고하는 경우 브라우저에서 비디오, 당신이있어 지금 HTML을보고. HTML은 프로그래밍 언어 아니다 오히려, 사용하는 마크 업 언어의 정보 페이지를 렌더링하는 웹 브라우저 인터넷에서. 

그래서 당신이 작성하는 방법을 정확하게 요청할 수 있습니다 다른 HTML에서 웹 페이지 프로그램에서 프로그램을 작성에서 C와 같은 언어? 음, C는 매우 엄격한와 언어 할 필요가 구문 규칙 그것을 실행하기 전에 컴파일. 당신은을 포함 잊어 버린 경우 의 문장의 끝에 세미콜론 C 코드는, 당신은 내가 무슨 말인지 엄격한 구문에 관해서에 대한. 

웹 브라우저하지만, 조금 더있다 이 HTML에 관해서는 용서. 당신의 HTML은 구문이 아닌 경우에도 올바른, 페이지는 여전히있을 수 있습니다 브라우저에 표시하지만, 수도 당신이 의도 한대로 볼 수 없습니다. 귀하에게 적합한 정보를 항상 규칙을 따릅니다. 직관을 얻을 수있는 가장 좋은 방법 일의 작업을하는 방법에 대한 예를 통해 이동합니다. 

그래서 우리가 여기있는 것은 기본입니다 웹 페이지에 대한 청사진. 당신은 아마 많은 것들을 발견 꺾쇠 괄호 사이. 글쎄, 사람들은 단지 태그입니다. 태그는 기본적으로 웹 브라우저를 알려 즉,이 봐, 뭔가 길을오고있다. 당신이 열 때마다, 비록 기억 태그는, 당신은 당신이 한 번 닫을 필요 을 사용하여 수행. 

그래서 예를 들면, 나는 섹션을 엽니 다 열려있는 코드 브래킷 몸, 대괄호. 그럼 내가,이 경우, 텍스트를 추가 첫 번째 웹 페이지는 그때에 갔을 때 이 섹션을 닫습니다, 내가 사용하는 거의 이 시간을 제외하고는 동일 태그 앞으로 본문 앞에 슬래시. 일반적으로, 이것은 당신이하고있는 형식입니다 당신이 열 때마다 사용하는 것 및 태그를 닫는. 함께 열린 태그와 종료 태그 요소라는 것을 구성한다. 

첫 번째 라인을 보면, 당신은거야 다음에 느낌표를 참조하십시오 DOCTYPE html로. 이건 정말 당신의 브라우저를 말하고있다 파일이 웹 페이지인지 HTML로 작성. HTML 태그는 본질적으로 말한다 여기에 일부 HTML이 제공됩니다. 그럼 우리가 함께 머리 태그가 그 안에 제목 태그. 당신이로 생각할 수있는 머리 태그 에 포함되어 HTML 코드 웹 페이지의 대량 실제 내용. 

일반적으로, 당신의 제목을 넣어 당신의 여기에 웹 페이지는, 비록 몇 가지가 있습니다 나타날 수있는 다른 태그 여기뿐만 아니라. 다음 웹 페이지의 몸은, 오는 귀하의 웹 사이트의 실제 고기와 뼈. 우리의 예제에서, 우리는 단순한를 넣었습니다 문장, 나의 첫번째 웹 페이지, 이는 우리가 우리의 사이트를 실행하는 경우, 볼 것이다 이 같은 작은 선물. 우리의 웹 페이지가 너무 동성애 아니라, 하지만 걱정하지 마십시오. 우리는 곧 그것을 단장합니다. 

그래서 위의 HTML, 우리는 당신에게 아주주지 웹 페이지에 대한 기본 템플릿, 아무것도 공상, 그냥 맨손으로 뼈. 하지만 웹 페이지를 만드는거야 경우, 나는 무엇을 추가 할 경우 나 자신, 말, 그림? 글쎄, 난 그렇게 할 수 있습니다. 두 가지 방법에있다 귀하의 사이트에 이미지를 추가 할 수 있습니다. 이미지가 같은 폴더에있는 경우 HTML 파일, 당신은에 연결할 수 있습니다 이 같은 경로를 통해 이미지. 

당신은 다음에 이미지 태그로 열 별의 alt 속​​성에 이미지의 소스. alt 속​​성의 값은 그냥 경우 대체 텍스트 사용자 수 없습니다 이미지를 참조하십시오. 또는, 당신은 또한에 연결할 수 있습니다 이 같은 전체 URL을 통해 이미지. 자, 그 웹 사이트는 실제로 존재하지 않는, 하지만의 그림이 있다면 해당 주소 나, 내가 사용할 수 등이 소스 URL 내 웹 사이트의 이미지. 어느 쪽이든, 당신은 많은 끝낼 예뻐 웹 사이트, 다음과 같이. 

글쎄, 그건 정말 멋진,하지만 종류 뿐만 여기에 몇 가지 텍스트를 원하는. 그럼 뭔가를 추가 할 수 위의 초간단 헤더와 같은 이미지. 지금까지 수행 한 모든 헤더를 사용하는 것입니다 태그, H1 및 줄 바꿈 태그, BR. 헤더 태그는 글꼴 조금 있습니다 조금 더 크고 눈에 띄는. 다른 한편으로 줄 바꿈 태그, 손, 멋진데. 대부분의 다른 태그와는 달리, 당신은 필요가 없습니다 개폐 휴식 태그, 단지 하나는 위의 그림. 휴식 시간에는 내용이 없기 때문입니다 그리고, 따라서 빈 요소입니다. 

이 같은 빈 요소, 당신은 열 수 있습니다 단순히로 동시에 가까운 에 슬래시를 포함 초기 선언의 끝. 그래서 지금 내 웹 사이트가 조금 보인다 다음과 같이. 더 나은,하지만 종류의 느낌 막 다른 골목에있다. 옆으로 가서 아무데도있다 이 메인 페이지에서. 음,에 의해 그 문제를 해결하자 링크를 포함. 

내가 여기 할거야 것은을 사용합니다 로 표시 속성 및 확인 이미지에 대한 링크를,의는, CS50 TV를 가정 해 봅시다. 그런 식으로, 사람들이 나에 클릭 할 때마다, 자신의 브라우저로 이동됩니다 또 다른, 아마도 더 많은 유용한 웹 페이지. I는의 크기를 최소화하기 위해 가졌다 우리의 웹 페이지이기 때문에 약간의 텍스트 고급지고. 그러나 희망, 그것은 여전히​​ 분명하다. 내 웹 사이트는 정확히 같은 모양 만 지금, 나는이 그림을 클릭 할 때마다, 내 브라우저는 다른 열립니다 CS50.tv 웹 페이지에 대한 탭을 클릭합니다. 

마지막으로,이 전 스타일에 갈거야 가정 해 봅시다 이 웹 사이트 나중에 CSS를 사용하여. CSS는로 알려져 있습니다 무엇입니까 CSS 스타일 시트. 그리고 그것은 기본적으로 효율적으로 제공 편집 할 수있는 방법과 스타일 코드와 유사한 블록. 내 HTML에 조직을 시작하려는 쉽게 나중에 스타일을 할 수 있습니다. 여기, 두 개의 서로 다른 종류의 설정 내 코드를 구성하는 데 도움이되는 식별자. 나는 내부의 ID 속성을 사용했습니다 분할, 또는 div 태그, 내가 사용했습니다 클래스 내부 속성 다른 div 태그. 

ID 및 클래스 특성 유사하게 작동합니다. 유일한 차이는있을 수 있습니다 하나의 요소, 특정 ID하지만 요소의 수 클래스를 공유 할 수 있습니다. 그래서 예를 들면, 나는 클래스를 사용할 수 있습니다 이미지를 여러 번,하지만 난 할 수 없습니다 다른 부서를 만들 ID의 상단. 내가 CSS로 사라지지했지만, 일반적으로 사용되는 다른 언어 HTML과 함께, 한 번 스타일링을 시작 CSS 내 코드는, 나는이 사용할 수 있습니다 영향에 대한 조직의 특성 내 웹 페이지의 미학. 

부문 톱 내의 모든 유사 따라 연주하거나이있을 것이다 에 HTML의 I 그룹의 다른 그룹 클래스 이미지와 비슷한 모습을 공유 할 것입니다. 이 편집하는 것보다 훨씬 쉽습니다 스타일의 이미지 나 블록 개별적으로 텍스트. 

그래서 우리는 방법의 기초에 갔다 HTML과 웹 페이지를 만들 수 있습니다. HTML은 다른 기능들을 가지고 다른 언어와 결합 할 때 CSS 및 자바 스크립트와 같은, 정말 수 페이지에 띄는. 편안하게 얻을 수있는 가장 좋은 방법 HTML, 그것은 주위에 그냥 엉망이다 무엇을 작동하고, 무엇을하지 않습니다를 참조하십시오. 

내 이름은 Daven 파넘입니다. 이 CS50입니다. 

그래서 예를 들어, 내가 사용할 수 있습니다 클래스 이미지 - 아니, 너무 많은 속성이 있습니다. 내 이름은 Daven 파넘입니다. 이 CS (650)이다. 나는 CSS를 말하고 싶다. 이것은 CSS입니다.