HTML이 무엇인가?

  • HyperText Markup Language
  • 브라우저( Internet Explorer, Chrome, Safari 등.. ) 에 파일들을 기록(mark up)하는 방법이다.

Markup Language는 매우 common한것
프로그램 언어와 다르다.
HTML은 유저가 보는 콘텐츠를 구별하는 tags를 사용한다.
tags는 많이 사용하는 것보다 작고 필요한 것만 사용하는게 도움이 된다.

.html 파일

.word 하면 컴퓨터가 워드 실행
.ppt 하면 컴퓨터가 파워포인트 실행
같은 말로 .html 파일을 보면 인터넷 브라우저 실행

브라우저는 .html 파일을 읽을 수 있고 화면에 디스플레이 하는 법을 안다.

스크린 리더나 다른 보조 디바이스들이 정보를 표현하는 HTML tags를 활용할 수 있다.

HTML 파일은 영어와 비슷해서 이해하기 쉽다

HTML 파일 내용
HTML 파일을 브라우저에서 실행했을 때 결과

HTML History

우리가 왜 HTML1 이 아니라 HTML5를 쓰고 있는 지 역사를 살펴보자.

HTML은 하이퍼링크를 통해 문서를 전자적으로 연결하는 방법으로 1990년에 만들어졌다.
처음에는 단순하게 리스트로 쭉 있는 그러한 페이지였다.
핵 과학자로 과학에 관련된거 이외에는 관심이 없었다.
HTML은 모든 플랫폼에 common한 언어를 요구했다.

Mosaic

1993년에 처음으로 그래픽 브라우저가 나왔다.
이미지 태그를 지원하는 첫번째 브라우저이다.

이전 사람들은 모든 사람들이 접근하게 내버려두고, 단순한 내용을 바탕으로 그것을 유지하기를 원했다.
그러나 혁신자들은 아니라고 말하고 있었다.
사람들은 그림을 좋아하고 콘텐츠를 좋아한다.
그래서 어떻게 인터넷이 진화해야될까 토론했다.
Moskey는 Netscape, Internet Explorer, 그리고 다른 브라우저의 형태로 도전자들을 가지고 있었다.
이것이 이른바 ‘브라우저 전쟁’의 시작이었습니다.

The Browser Wars

브라우저들은 적절한 태그를 가지고 있었다.
하지만 태그는 자신의 브라우저에서만 실행됐다.

Web Standards

누구도 독점하지 못하게 규칙을 세움
일부 그룹이 능동적인 규칙을 가지고 있어서 그것이 표준화 하는데 도움이 됨

  • Internet Engineering Task Force (IETF) : 어떻게 다른 네트워크와 콜라보하고 같이 work 하는지
  • World Wide Web Consortium (W3C) : HTML를 다룸, 어떤 태그가 브라우저에서 지원되고 안되는지
  • The Web Accessibility Initiative (WAI) : 가장 새로운 그룹, 어떻게 하든지 사람들이 웹에 접근할 수 있게, 같은 콘텐츠를 볼 수 있는 능력

브라우저의 진화

1990 - 1994 : 단순한 텍스트 베이스
1993 : 이미지 지원하는 모자익 브라우저 등장
1995 - 1999 : 호환성이 깨짐
2000 - 2005 : 브라우저가 스타일과 콘텐츠 분리
2005 - 2008 : CSS를 사용하는 HTML 파일 사용하는 새로운 표준

HTML 버전

1993 – HTML 1.0 – Developed by Tim Berners-Lee to link document
1995 – HTML 2.0 – Developed by Internet Engineering Task Force RFC to include stylized text and tables
1996 – CSS 1
1997 – HTML 3.2 – Developed by W3C and included browser specific features
1997 – HTML 4.0 – A move back to normalizing the pages across platforms
1998 – CSS 2
1999 – HTML 4.01 – Introduced different document types
2012 – HTML 5 – Back to HTML plus multimedia and semantic tags

그렇다면 현재 우리는 어디에 와있는가?

  • W3C와 Web Hypertext Application Technology Working이 협력하는 HTML5
  • 확립된 가이드라인 (어떻게 브라우저가 HTML5를 접근하고 지원하는 지)
    • HTML, CSS, DOM, JavaScript
    • 외부 플러그인 필요 축소 (flash 같은 것)
    • 스크립트를 줄이는 markup
    • 디바이스에 독립적인 HTML5

review

  • 브라우저는 HTML 문서를 보여줄 수 있게 번역한다
  • HTML은 다양한 콘텐츠 유형을 의도 (image, list… )

How it works

URL 에 주소를 타이핑했을 때 어떤 일이 발생할까?

Client / Server 관계

  • Servers
    • 리소스 공유하는 기계
    • 항상 네트워크에 연결
  • Clients
    • 개인적으로 사용하는 기계 (laptops, phones…)

Networks

  • LAN : 로컬 지역 네트워크, 하나의 서버에 다 공유해서 사용
  • WAN : 큰 지역 네트워크, 여러개 서버에 각각 공유

Request / Response Cycle

  • 클라이언트가 페이지를 요청(Request) 한다.
  • 서버는 적절한 파일을 응답(Response) 한다.

Uniform Resource Locator (URL – 3개 파트로 구성)

  • protocol – 연결 방법
  • domain – the server
  • document – 필요한 특정 파일
    • 대부분 페이지들은 여러개 파일로 만들어짐

Protocols

  • HTTP – Hypertext Transfer Protocol
  • HTTPS – Secure Hypertext Transfer Protocol (은행이나 그런 곳)
  • FTP – File Transfer Protocol (HTTP는 HTML5 code를 주고 받지만, FTP는 모든 타입의 파일)

Domain Names

  • 연결하기 원하는 엔티티를 확인
    • google.com, wikipedia.org…
  • top-level 도메인이 다르게 가지고 있다. (.com, .org …)
    • Determined by Internet Corporation for Assigned Names and Numbers (ICAAN)
      그들의 일은 들어가서 다른 도메인에 적합한 조직의 유형을 결정하는 것이다.
    • 어떤 타입이 있는지 확인 – https://www.icann.org/resources/pages/tlds-2012-02-25-en

IP Addresses – 도메인 이름과 매핑됨

  • Internet Protocol Version 6 (IPv6)
  • 모든 컴퓨터는 유일한 ip 주소를 가지고 있다
    xxxx : xxxx : xxxx : xxxx : xxxx : xxxx : xxxx : xxxx (16개 다른 값들)
  • 2^28 개 조합

Domain Name Server (DNS)

  • ip 주소를 기억할 필요가 없다.
  • DNS는 ip 주소 기반 URL 을 본다.

Document

  • URLs 특별한 문서를 가지고 있다. (필수는 아님)
    • http://www.intro-webdesign.com/contact.html
    • http://www.intro-webdesign.com/Ashtabula/harbor.html
  • 이 문서가 없으면 default 문서로 return됨
    • index.html

The Request

  • 한번 ip 주소가 결정되면 브라우저는 HTTP 요청을 생성
  • 이 요청에 많은 숨겨진 정보가 있다
    • header, cookies, form data …

The Response

  • 서버는 웹페이지가 아닌 파일들을 반환한다.
    • 브라우저가 이 파일로 무엇을 할 것인지 결정하게 만듬
  • 만약 서버가 요청에 충족하지 못하면, error code 를 보낸다 ( 404, 500 … )

URL에 입력했을 때 과정

  1. 브라우저는 DNS에서 도메인을 본다.
  2. DNS는 ip 주소를 반환한다.
  3. 브라우저는 HTTP 요청을 해당 ip 주소를 가진 서버에게 보낸다
  4. 서버는 요청 파일을 찾고 응답으로써 다시 보낸다.
  5. 브라우저는 응답을 받고 HTML 코드를 (그래픽, 이미지 .. 이쁘게 꾸밈) 렌더링 한다.

Review

  • URL은 3개로 구성
  • Request / Response cycle은 서버와 클라이언트사이에 여러 단계로 통신을 요구한다.

Tools and Tips

브라우저 마다 되는게 있고 안되는 게 있어서 좋은 브라우저를 선택해야 한다.
하나의 브라우저에서 계속 시도하는 것 보다 브라우저를 바꿔서 시도하는 게 좋다

베스트 브라우저 – https://www.techradar.com/best/browser

Browser

웹페이지를 어떻게 보여줄 것인지 많은 옵션이 있다.

다른 브라우저들

  • 각 브라우저는 장단점이 있다. (웹개발자라면 알아야함)
  • 많은 사람들은 선호하는 브라우저를 가지고 있다.
  • 웹사이트를 만들때 다양한 브라우저에서 사이트를 테스트할 필요가 있다
  • Internet Explorer
    • Microsoft Windows 에 설치되있는 브라우저로 플랫폼에 종속적이다. (Mac 에서는 안됨)
  • Microsoft Edge
    • 2015년에 윈도우 10에 새로운 브라우저
  • Google Chrome
    • 구글이 개발한 프리웨어 브라우저
    • 2008년에 첫 릴리즈되고 윈도우나 리눅스, 맥, 안드로이드 등 포팅됨
    • 보안에 초점
  • Firefox
    • Mozilla 가 개발한 무료, 오픈소스 브라우저
    • 다양한 플랫폼에 이용가능
브라우저 사용 통계

접근성 이슈

http://www.html5accessibility.com 은 브라우저들의 접근성 리뷰
브라우저들은 new HTML5, 모든 보조적인 기술 유형들을 가지고 있어야 한다.

브라우저들이 얼마나 잘 지원되는 지 확인 가능하다.

내가 사용하고 있는 브라우저가 HTML5 tags를 지원하는 지 평가 – http://html5test.com/index.html

내가 사용하는 브라우저 점수

Review

  • 브라우저들은 HTML5 표준이 얼마나 잘 있는지에 따라 다양할 수 있다.
  • 다양한 버전의 브라우저를 고려할 필요 있다.
  • 개발할때는 다양한 브라우저를 테스트

Editors: How to use an editor to create an HTML file

Creating and Editing 파일

  1. 어떻게 파일을 정리할지 결정한다
  2. 네이밍 컨벤션을 결정
    1. under_scores, camelCase
    2. No spaces, 일관된 문자
  3. 에디터 결정
    1. windows (notepad, sublime)
    2. mac (textedit, sublime)

시작하기

  1. 에디터를 연다.
  2. 폴더를 만들고 .html 파일 생성
  3. Doctype, head, body tags 추가
  4. 파일 저장
  5. 브라우저 실행
HTML 코드 및 결과

Trouble-shooting

  • 브라우저 대신에 에디터에서 파일 연다.
    • 수정되면 실행
  • 브라우저는 내가 한 태그를 보여준다.
    • .html 파일을 확인
  • 코드가 변경되어도 같은 페이지가 보여진다
    • 브라우저 새로고침
    • 파일 이름 확인
  • 이상한 문자가 포함
    • 코드를 복사 붙여넣기 하지말고 직접 타이핑

웹 에디터 추천 – https://codepen.io/

공부 위치 – https://www.coursera.org/learn/html/home/week/1