12.HTML 이론(https://opentutorials.org/course/1688/9340)
*HTML: hyper text markup language
-가장 중요한 특징: '하이퍼텍스트' = 링크, 이 링크로 연결된 정보 덩어리: 웹,
-markup language: 사람/웹브라우저 모두 알아들을 수 있는 언어
*markup? => Tag를 알아야함,
-tag: 정보를 알려주는.. 열린태그(시작태그0 / 컨텐츠 / 닫히는태그(끝태그: /)
<strong>content</strong>
*HTML 문법: 속성
-a태그: 링크 태그
<a>생활코딩</a>
-속성 주기:
<a href="http://opentutorials.org/course/1" target="_blank">생활코딩</a>
#href: 속성명 부분(href가 링크를 의미), =이후: 속성값
# target="_blank": 새 창에서 링크를 연다
# target="_self": 기본 창에서 링크를 연결
(<!DOCTYPE html> : html5 버전에서)
*w3c 국제기구: 의장이 팀 버너스리
==> 어떤 태그가 있는지만 알면 되고, 쓸 때 검색해서 쓰기
*Tag Reference: reference: vocabulary 사전같은 것, 저렇게 검색하면 됨.
http://dev.w3.org/html5/html-author/ 현재최신 상태 html 버전
http://opentutorials.org/course/1058 (오픈튜토리얼 html 사전)
=> html이 '정보'라는 본질에 집중하기 위해서 CSS라는 새로운 걸 만듬...
13.HTML 실습(https://opentutorials.org/course/1688/9345)
*모델링을 실제 html 페이지로 만들기(css 전까지는 정보에만 집중!!!*)
-<h1~h6>: 대제목: h1
-왼쪽에 각각에 프로그램 리스트 => 리스트: <ol>, <li>
-소제목, 상대적으로 작은 제목 (h1보다는 작은 h2)
-자세한 내용- 왼쪽 리스트 선택에 따라서 변하는 내용
*의미론적인 웹(2)
-semantic: 정보의 의미를 잘 드러나게 해주는 tag들
-초반에 XHTML이 대두, 이를 계승해서 최신 표준은 HTML5 => 의미론적으로 잘 드러나는 방향으로 나타남
*기존 코드의 내용을 바꾸면서 실습
-네비게이션/컨텐츠를 기계(웹)도 구분할 수 있게 하기 위해서
(1)<nav> </nav> (navigation): 어떤 기능을 하는것은 X, 약속되어 있는 태그를 통해서 안쪽의 부분이 웹사이트를 탐색하는 데 사용하는 정보라는 것을 알 수 있게 됨.
(2)h1: 헤더 영역이라는 것을 분명하게 드러내기 위해서 <header></header>를 사용하면? 다른 이미지, 텍스트.. 등이 들어가도 이것들이 헤더, 간판이라는 역할을 한다.
(3)아래쪽 내용: 본문에 해당하는 정보 <article></article>: 본문의 역할을 함
==> 사람, 기계 모두 도움이 되는 기능으로 발전하고 있음. 정답은 없지만
*사이트 완성 실습(3)
(1) 대문 페이지: 보통 index.html - 특수한 파일(대문 페이지라는 것이 약속된 파일)/ 즉 index.html을 지워도 동일. (홈페이지의 정보를 담고 있다는 암묵적인 동의)
-대문 페이지의 정보: 전체 주제, 네비게이션(탐색용), 본문 영역은 안보이는게...
-index.html / page_html.html / page_vc.html / page_op.html
'etc > 생활코딩-웹프로그래밍' 카테고리의 다른 글
| 04 UI와 API, 프로그래밍을 어떻게 접근할 것인가? (0) | 2016.12.31 |
|---|---|
| 03_2 javascript, php를 활용한 로그인 기능, 반복문, 배열, 함수 (0) | 2016.12.31 |
| 03_1JavaScript & PHP 기초- html에 js, php 삽입하기 (0) | 2016.12.31 |
| 웹어플리케이션 02. CSS 이론과 실습 (0) | 2016.12.07 |
| 웹어플리케이션 00. 준비 단계 (0) | 2016.12.06 |