>> 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입니다.