웹 개발에 대한 소개

HTML 5 logo on an iPhone smartphone with app icons around it in a cloud
웹에 오신 것을 환영합니다.

돌아 하루 만에 (OK, 전에 내 일), 웹 개발자의 직업은 낮은 하나. 그것은 전문적인 명예의 규모에 강아지 hater하지만 위의 양키스 팬 아래 위를 차지. 때문에 모든 태그와 투명 스페이서 이미지를 우리는 사용, 우리는 미학의 감각과 원유 해커로 간주되었다.

잘, 우리는 여전히 미적 감각이 부족 될 수 있습니다, 웹 개발로하지만, 웹 개발자의 직업을 가지고. 요즘 우리가 잘 작성하기 위해 사용할 수있는 많은 도구가 있습니다, 표준 부합, 아름다운 (OK, 어쩌면 안 마지막) 웹 페이지. 오늘 사용하는 큰 웹 사이트의 대부분은 (뻔뻔한 플러그: 이 주도 포함) 이러한 도구를 사용하여 내장되어.

브라우저의 끝에 도구 우리의 떼은 우리가 상상할 수 있었다 웹에서 물건을 만들 수 있습니다 단지 10 년 전, 등 수많은 소셜 네트워크는 시간을 낭비하는 가장 좋은 방법이라고 주장, “뜨거운” 이미 천 번 해본 적이 무언가를 혁명을 주장하는 기술 벤처 기업, 그리고 난 새 클론은 원본보다 약간 더이라고 주장. 웹의 모든. 아마 이러한 도구 사용의 가장 큰에 갔다하지 않은.

그래서 내가 얘기 한 것이 놀라운 도구는 무엇입니까? 방법을 선도하는되었습니다 (솔직히 놀라운) HTML5라는 언어, CSS3, 그리고 자바 스크립트, 어떤 I 닉네임 3 webocalypse의 기병. 여기에 각각 살펴 보겠습니다:

HTML

HTML (제대로 하이퍼 텍스트 마크 업 언어로 알려져; 나쁜보고 싶지 않은 사람들은 약어를 사용하는 이유는 볼 수) 입니다 언어는 웹 페이지의 레이아웃을 사용. 이 페이지를 마우스 오른쪽 버튼으로 클릭하고 “소스보기”. 즉,이 페이지에서 사용하는 HTML의.

본질적으로, HTML은 무리입니다 태그, 어떤 브라​​우저 해석 및 레이아웃. 예를 들면, 이 HTML 코드를보고:

<피>난 당신에 대해 알고하지 않습니다, 하지만 난 눌러 버튼을 좋아한다.</피>

<BR>

<단추>저를 클릭!</단추>

이 HTML 코드는 단락에서 텍스트를 싸서 (the <피> 태그는 단락을 시작합니다, the </피> 태그는 단락을 끝납니다.) 줄 바꿈이있다 (the <BR>) 다음 버튼을 당신은 당신의 마음의 콘텐츠를 클릭하세요. 브라우저가 당신을 위해 화면에 배치합니다.

그래서 모두 잘하고 좋은. 하지만 당신은 HTML 아무것도없는 경우, you get a webpage that looks like it came straight out of the 1990’s. 별로 좋은 어쨌든 년 나온 (헤어 스타일, 음악, 기타) 그러나 기대! 더있어!

CSS

또 다른 약어. 여름. CSS는 의미 캐스 케이 딩 스타일 시트, 이들이 정말 잘못된 약간의 계단식하지 않기 때문에 (그것이 의미하는 것은 무엇… 그것은 컴퓨터 코드의, 하지 폭포!) CSS는있다 언어 스타일의 웹 페이지에 사용. 이, 너무, 당신의 브라우저에 의해 해석됩니다.

함께 CSS와 HTML 작업 – HTML 페이지의 레이아웃을 만든다, CSS는 그것에게 그것의 감각을 제공합니다. 집을 짓는 상상: HTML은 칙칙한하지만 필요한 나무 프레임 워크를 제공합니다, CSS는 네온 컬러와 독특한 가구를 추가.

CSS는 매우 간단 언어입니다: 특정 HTML 태그에 대한 (단락 등), 당신은 다양한 스타일의 클래스에 대한 값을 지정할 수 있습니다. 브라우저가 CSS를 읽고 일치하는 모든 HTML 태그에 적용됩니다. 예를 들면:

피 {

색: 빨강;

글꼴 크기: 16PX;

}

그래서 모든 절 (HTML에있는 물건 <피> 태그) 것 빨강 글꼴 및 수 16 크기 픽셀. 당신이주의 한 경우, 이들은 당신이 Microsoft Word에서 사용할 수있는 동일한 스타일의 일부입니다 다른 응용 프로그램.

이제 웹 페이지가 배치되고, 그들은 꽤 봐. 하지만, 여기에 일이다: 그것은 그들이 전부. 그들은 단지 거기에 앉아 사랑스러운 모양. 위대하고 모든 인, 하지만 웹의 사용자는 더 할. 그들은 멋진 애니메이션을 원하는. 그들은 팝업을 원하는 (OK, 아마 그들은 다시 한 2002, 하지만 난 빗나가 다.) 그들은 당신이 그들을 클릭하면 물건을 할 것입니다 버튼을 원하는.

그 마지막 하나에 대해서 – 그 문제의. 당신은 할 수 있습니다 <단추> HTML에서, 당신은 모든 주를 클릭 할 수 있습니다, 하지만 조만간 아무것도 아니에요. 당신은 버튼을하려는 경우, 아 몰라, 화면에 걸쳐 코끼리를 이동하고 무언가를 공격, 당신은 뭔가 더 필요.

자바 스크립트

자바 스크립트는 아니 약어, 당신이 궁금해하는 경우. 그것은 자바라는 프로그래밍 언어처럼 보였다 때문에 그들은 자바 스크립트를 호출, 그렇지 않은 원인 이상입니다. 어떻게해서든지, 자바 스크립트는 모든 동적 효과를 일으키는 적절한 프로그래밍 언어 당신은 온라인에서 볼 수.

모든 프로그래밍 언어와 같은, 자바 스크립트는 make 변수와 함수를 사용하는 일련의 명령. 자바 스크립트에 대한 멋진 부분 (잘, 프로그래밍 언어가 할 수있는 시원한) 당신은 그 HTML 요소에 액세스 할 수 있다는 것입니다 (단락 및 버튼과 같은) 및 CSS 스타일 (글꼴 색상 및 크기 등) 그들을 변경. 이 코드를보고:

VAR 단락 = $('P');

paragraph.css('색','블루');

이 자바 스크립트 코드는 페이지의 모든 단락을 발견 할 것이다 – the $ 기호가 일치하는 모든 요소를​​ 찾기 위해 브라우저를 알려줍니다, 그리고 'P’ 이 단락을 선택해야 의미 (기억 <피> HTML의 요소?) 그럼 당신은 변수에 단락을 저장할 수 있습니다, 한 명령어가 브라우저에 자신의 색 CSS 스타일을 변경하는 푸른.

내가 흥미 (다시, 이 관점에서 전부 “이 Webdev”) 세 가지 언어를 함께 사용하는 방법에 우아하다. 자바 스크립트의 마지막 줄은 페이지의 HTML과 상호 작용하고, CSS는 스타일을 지정하는 데 사용. 이들 언어는 같은 일을 단지 다른 구성 요소처럼되지 않습니다 – 그들은 하나와 같은거야, 같은 놀라운 기계의 다른 측면.

매혹적인 사운드? 내 생각 엔요. 즉, 웹의 아름다움의 한 부분입니다.

Published by

Neel 메타 (Mehta)

하버드 대학. 웹 개발자. 언젠가 철학자. 야구 마약 중독자.

One thought on “웹 개발에 대한 소개”

  1. 와우 유 쓴 것을 찾을 수 놀랐습니다, 내가 소여의 웹 프로그래밍 패킷에 가기 전에 좋은 일을 나를 위해이에 좋은 리드입니다.

회신을 남겨주