고급 웹 표준 개발 방법론을 담은『Head First HTML with CSS & XHTML』. 이 책에서는 일반인들이 웹 표준에 대한 이해를 쉽게 할 수 있도록 구성하였다. 최근의 신경생물학, 인지과학, 학습이론 연구를 바탕으로 만들어진 이 책은 웹 페이지 제작에 숨겨진 진짜 비밀들을 알아보고, HTML 테이블에 관하여 여러분의 상사가 말하는 모든 것이 대부분 왜 잘못됐는지를 알아보고 있다. 또한 표준이나 CSS를 외부 스타일 시트 파일과 연결 방법에 대하여 상세하게 설명하고 있다.

이 책은 웹 언어와 웹 페이지 만들기, 엘리먼트들과 친숙해지고 정렬하기, 진보된 웹 페이지 만들기, 표와 대화식 페이지 만들기 등으로 구성되었고 각 장 끝부분에는 연습문제를 실어 본문의 내용을 복습할 수 있도록 했다.

서문
 누구를 위한 책일까요?
무슨 생각을 하고 있는지 다 압니다.
초인지
 두뇌를 정복하는 방법
 테크니컬 리뷰어
 감사의 글

1장 웹 언어
 비디오가 아닌 웹이 라디오를 삼켰습니다
 웹 서버는 무슨 일을 할까요?
HTML 작성하기
 브라우저가 생성하는 것들
 스타버즈에서의 전성시대
 스타버즈 웹 페이지 만들기
 매킨토시에서 HTML 파일 만들기
 윈도우즈에서 HTML 파일 만들기
 한편 스타버즈 커피샵에서는…
브라우저에서 웹 페이지를 열어봅니다
 작성한 웹 페이지 시운전
 태그 해부
 스타일 엘리먼트와의 만남
 스타버즈에 스타일 추가하기
 누가 무엇을 했을까요?
안방 토크
 핵심 정리
 연습 문제 정답

2. HTML에서 'HT' 알아보기
 새롭게 향상된 헤드 퍼스트 라운지
 새로운 라운지 만들기
 지금까지 우리는 무엇을 했나요?
브라우저는 무슨 일을 할까요?
속성 이해하기
 기술적인 난관
 경로 탐색 계획
 깨진 이미지 파일 복구하기
 연습 문제 정답

3장 웹 페이지 만들기
 시속 12마일의 속도로 일기를 웹 사이트로 변환하기
 개략적인 디자인 스케치
 스케치로부터 개요 잡기
 개요를 웹 페이지로 변환
 토니의 웹 페이지 시운전
[q]엘리먼트 알아보기
 기다란 인용구
[blockquote] 추가하기
[q]와 [blockquote] 미스터리 뒤에 감춰진 진실
 리스트를 만들기 위해 [p] 엘리먼트 사용하기
HTML 리스트를 만들기 위한 간단한 두 가지 단계
 다른 엘리먼트 안에 하나의 엘리먼트를 넣는 것을 "중첩(nesting)"이라 부릅니다.
중첩 관계를 이해하려면, 그림을 그려라
 중첩을 사용하여 태그들 일치시키기
 인라인 혹은 블록?
연습 문제 정답

4장 웹 마을로의 여행
 스타버즈(혹은 여러분 사이트)를 웹으로 가져가기
 호스팅 회사 찾기
 어떻게 하면 도메인 명을 얻을 수 있을까요?
이사하기
 파일들을 루트 폴더로 가져가기
 두 페이지에 걸쳐 FTP 설정하기
 본업으로 돌아와서…
URL 중심가
HTTP 프로토콜이란 무엇인가?
절대 경로란 무엇일까요?
디폴트 페이지가 작동하는 방법
 어떻게 다른 웹 사이트와 연결할까요?
카페인 버즈에 연결하기
 꼼꼼하게 웹 페이지 마무리하기
 페이지로 링크 걸기
 목적지를 생성하기 위해 [a] 엘리먼트를 사용하자
 목적지 앵커와 연결하는 방법
 새 윈도우로 링크 걸기
 타겟을 사용한 새 윈도우 열기
 연습 문제 정답

5장 미디어와의 만남
 브라우저가 이미지들을 다루는 방법
 이미지는 어떻게 보여질까요?
이제 정식으로 소개하겠습니다: [img] 엘리먼트를 만나봅시다
 항상 대체 수단을 제공하는군요
 팬 사이트 만들기: myPod
와! 이미지가 너무 크군요
myPod HTML 수리하기
 섬네일들을 사용한 사이트 재구축
 섬네일을 링크로 변환하기
 그러면, 이미지들 밖으로 어떻게 링크를 만들까요?
무슨 형식을 사용해야 할까요?
투명해지느냐, 불투명해지느냐? 이것이 문제로다…
잠깐만, 웹 페이지 배경의 색은 무슨 색인가요?
matte를 가진 로고 체크하기
myPod 웹 페이지에 로고 추가하기
 연습 문제 정답

6장 진지해진 HTML
열람실 대화
HTML의 간단한 역사
 웹 페이지가 브라우저를 쿼크 모드로 밀어 넣게는 할 수 없습니다
 문서 타입 정의 추가하기
W3C 유효성 검사기(Validator) 알아보기
 헤드 퍼스트 라운지 유효성 검사
 휴스턴, 문제가 생겼다…
컨텐트 타입을 명시하기 위해 [meta] 태그 추가하기
 유효성 검사기(그리고 보다 많은 종류의 브라우저)와 더불어 [meta] 컨텐트 태그와 행복하게 살기
 과연 세 번째에는 행운이 올까요?
DOCTYPE을 strict로 변환하기
 이제 유효성을 갖게 되었나요?
중첩 문제를 고칩시다
strict가 되기 위한 또 한 번의 기회
Strict HTML 4.01 안내서
 안방 토크
HTML 고고학
 연습 문제 정답

7장 HTML에 'X' 끼워 넣기
XML은 무엇인가?
HTML과 무슨 관련이 있을까요?
여러분은 왜 XHTML을 사용하기를 원하나요?
XHTML 1.0 체크 리스트
strict HTML에서 XHTML 1.0으로 가기
 구식의 HTML 4.01 Strict
새롭게 개선된 XHTML 1.0
유효성 검증: HTML을 위한 것이 아닙니다
 안방 토크
HTML 혹은 XHTML? 선택은 여러분의 몫입니다…
연습 문제 정답

8장 스타일 추가하기
 여러분은 더 이상 캔자스에 있지 않습니다
 웹 마을의 "시장" 엿듣기
XHTML과 함께 CSS 사용하기
 환영 메시지에 밑줄을 추가해 봅시다
[h1]만을 위한 두 번째 규칙 만들기
 건강 음료(elixirs)와 찾아오는 길(directions) 페이지에 라운지 스타일 추가하기
 외부 스타일 시트와 연결하기
 상속에 관해 이야기할 때가 되었군요…
가계도(family tree)에서 폰트를 위로 옮기면 어떻게 될까요?
상속 재정의
 클래스를 위한 선택자 만들기
 클래스 심층 학습
 스타일들이 적용되는 방법에 대한 세상에서 가장 작고, 빠른 지침서
 누가 상속을 받을까요?
라운지 CSS 유효성 확인하기
 연습 문제 정답

9장 어휘력 향상시키기
30,000 피트 높이에서 바라 본 텍스트와 폰트
 폰트 패밀리란 무엇일까요?
CSS를 사용하여 폰트 패밀리 명시하기
 토니의 일기에 쌓인 먼지를 털어냅시다
 다른 폰트를 가진 여러 사용자들을 다루려면 어떻게 해야 할까요?
그렇다면, 폰트 사이즈를 어떻게 정의해야 할까요?
토니의 웹 페이지에 있는 폰트 크기를 변경해 봅시다
 폰트 굵기 변경하기
 폰트에 스타일 추가하기
 토니의 인용구에 이탤릭 추가하기
 웹 컬러는 어떻게 동작될까요?
어떻게 하면 웹 컬러를 명시할 수 있나요? 몇 가지 방법이 있는지 세어봅시다
hex 코드에 대한 2분 지침서
 웹 컬러를 찾는 방법
 토니의 페이지로 돌아가서
text-decoration에 관해 여러분이 알기 원하는 모든 것
 밑줄 제거하기
 연습 문제 정답

10장 엘리먼트들과 친숙해지기
 라운지 등급 올리기
 몇 가지 간단한 갱신 작업부터 시작해 봅시다
 새로운 줄 간격을 체크해 봅시다
 몇 가지 주요 혁신을 위한 준비
 박스 모델 자세히 살펴보기
 박스에서 할 수 있는 것들
 보증서 스타일 생성하기
 보증서를 위한 패딩, 테두리 그리고 마진
 약간의 패딩 추가하기
 이제 약간의 마진을 추가해 봅시다
 배경 이미지 추가하기
 배경 이미지 고치기
 왼쪽에만 패딩을 추가하는 것은 어떻게 할까요?
오른쪽에 마진을 증가시키는 것은 어떻게 할까요?
테두리에 대한 2분 지침서
 테두리 끝손질하기
HTML 클래스와의 인터뷰
id 속성
 라운지에서 id 사용하기
 스타일 시트 리믹싱
 여러 개의 스타일 시트 사용하기
 연습 문제 정답

11장 진보된 웹 페이지 만들기
 건강 음료 XHTML 자세히 살펴보기
 어떻게 하면 페이지를 논리적인 구간으로 나눌 수 있는지 탐색해 봅시다
 테두리 추가하기
 테두리 시운전
 건강 음료 구간에 몇 가지 실질적인 스타일 추가하기
 작전 계획
 건강 음료 너비 작업
 건강 음료에 기본적인 스타일 추가하기
 우리가 필요한 것은 자손들을 선택하는 방법입니다…
건강 음료 제목의 색깔 바꾸기
 줄 간격 고치기
 지름길로 갈 때가 되었습니다
[span]을 추가하는 쉬운 3가지 단계
[a] 엘리먼트와 그것의 여러 가지 성질
 어떻게 하면 상태에 따라 엘리먼트를 꾸밀 수 있을까요?
의사-클래스 일 착수시키기
"캐스케이드"에 대해 이야기할 때가 되지 않았나요?
캐스케이드
"특별성 게임"에 오신걸 환영합니다
 모든 것을 합치세요
 연습 문제 정답

12장 엘리먼트 정렬하기
 슈퍼 브레인 파워를 했나요?
flow를 사용하거라, 루크
 인라인 엘리먼트는 어떻게 되나요?
모두 함께 일하는 방법…
엘리먼트를 떠오르게 하는 방법
 라운지 무대 뒤에서는
 새로운 스타버즈
header 바로 밑으로 sidebar를 옮기세요
sidebar의 너비를 설정하고 그것을 뜨게 합니다
 두 개의 컬럼 문제 해결하기
 주요 구간에 마진 설정하기
 돌아와서 겹쳐지는 문제를 정리해 봅시다
 오른쪽은 팽팽하게, 왼쪽은 느슨하게
liquid와 frozen 디자인들
absolute 포지셔닝 작동 방법
 스타버즈 CSS 변경하기
footer를 고치기 위해 할 수 있는 한 가지 협정
 트로피 위치시키기
fixed(고정된) 포지셔닝은 어떻게 작동할까요?
음수의 left 속성 값 사용하기
 상대적이 됩시다
3개의 컬럼
 연습 문제 정답

13장 표 만들기
XHTML로 테이블을 어떻게 만들까요?
XHTML을 사용하여 어떻게 테이블을 생성할까요?
브라우저가 생성하는 것
 테이블 해부
 캡션과 요약 추가하기
 꾸미기 시작하기 전에 토니의 페이지로 테이블을 가져가 봅시다
 테두리 붕괴시키기
 약간의 색을 주는 것은 어떨까요?
토니가 흥미로운 것을 발견했어요…
토니의 테이블 다시 살펴보기
 하나 이상의 행을 병합하는 방법
 새롭게 개선된 테이블
 낙원에서의 곤경?
중첩된 테이블 제목을 위해 CSS 재정의하기
 마지막으로 토니의 사이트 광택내기
 연습 문제 정답

14장 대화식 페이지 만들기
 폼이 동작하는 방법
 폼이 브라우저에서 작동하는 방법
XHTML에서 작성하는 것들
 브라우저가 생성하는 것들
 폼 엘리먼트 동작 방법
Bean Machine 폼을 생성하기 위한 준비
 폼 엘리먼트 추가하기
 폼 엘리먼트 이름 작동 방법
 돌아와서 XHTML로 [input] 엘리먼트를 추가합시다
 폼에 더 많은 input 엘리먼트들 추가하기
[select] 엘리먼트 추가하기
 고객에게 whole 혹은 ground beans 선택권을 줘봅시다
 라디오 버튼 구멍뚫기
 폼 완성하기
 체크박스와 textarea 추가하기
GET 동작 지켜보기
 테이블이냐, 테이블이 아니냐? 그것이 문제로다…
테이블 안으로 폼 엘리먼트 넣기
CSS를 가진 테이블과 폼 꾸미기
 연습 문제 정답

부록: 10가지 토픽들 (다루지 않은 것들)
더 많은 선택자들
 프레임
 멀티미디어와 플래쉬
 웹 페이지 생성을 위한 도구들
Client-side 스크립팅
Server-side 스크립팅
 검색 엔진을 위한 튜닝
 프린트를 위한 스타일 시트에 관한 것들
 무선 장치를 위한 페이지
 블로그

 찾아보기