1. Preparing for HTML
(set up an HTML file)
- <!DOCTYPE html> : HTML을 사용하고 있다는 것을 브라우저에게 알리는 역할
(document type declaration)
항상 포함할 것
2. The <html> tag
위의 declaration은 두가지 정보를 줌 : 문서의 타임, html의 version
하지만 html의 구조나 내용을 더해주지는 않는다
그러므로 <html>의 opening+closing tag를 적어야 한다
3. The Head
- <head> : 페이지 자체에서 브라우저에게 정보를 주는 역할, <body>위에 적힘
웹 페이지를 위한 metadata를 포함
metadata = 직접적으로 표현되지 않는 웹페이지에 대한 정보들, body안의 정보와는 다르게 페이지 자체에
대한 설명
4. Page Titles
<head>엔 다양한 metadata가 포함되는데, 그 중 하나가 title
ex. <title>Hello</title>
5. Linking to Other Web Pages
HTML의 강력한 면 중 하나는, 다른 웹 페이지로 연결이 가능하다는 것이다.
- <a> : (anchor)의 약자, 태그의 사이에 링크의 text를 적음
href 속성 = hyperlink reference, path, address
* 새로운 window에서 열기?
- target 속성 : link가 어떻게 열리는지 결정
href처럼 포함 가능
새 window창에서 열기 위해서는 target="_blank" (new tab)
* 관련된 페이지에서 열기?
위는 외부 web page와의 연결
많은 사이트들은 또한 내부 웹페이지와도 연결 (home, about, content etc...)
보통 HTML 파일들을 만들면 root directory, 또는 메인 폴더에 저장된다
HTML파일들은 보통 같은 폴더에 저장된다 --> 상대경로(relative path) 이용
vs absolute path : a full URL (ex. http://www.codecademy.com/learn/learn-html
상대 경로에 있는 './'는 현재 폴더에서 파일을 찾는 것이라고 브라우저에게 알려준다
* 이미지, 다른 형태의 링크
<a>태그 안에 다른 요소들을 넣어서 만들 수 있다
* 같은 페이지 내의 연결 (top, bottom)
(target link는 #과 target 요소의 id를 포함하는 문자열)
href에 링크를 부여 (부여해주는 링크는 div로 나뉘어진 구역을 할당하면 쉬움)
위의 경우엔 <div id="top">으로 된 구역으로 이동하는 Top링크
항상 target link는 #을 이용하며, <a>태그는 content 뒤에 배치
6. Whitespace
프로그래머는 요소들간의 관계를 알아보기 쉽게 두가지 도구를 이용 - whitespace와 indentation
두 도구는 요소의 위치가 html파일 내의 whitespace 또는 indentation와 무관하다는 것을 이용한다
예를 들어,
만약 단락 간의 간격은 코드 내의 줄바꿈으로 만들어 낼 수는 없다
브라우저는 html파일의 whitespace를 무시하기때문
그러므로,
-각 요소는 한 라인 내에서 구성할 것
7. Identation
또한 탭 또는 들여쓰기를 활용한다
identation은 요소들이 다른 요소에 포함되는 것을 보기 용이하게 한다
8. Comments
HTML도 주석처리가 가능하다
<!-- This is a comment that the browser will not display. -->
이번 포스팅 : html document standards
다음 포스팅 : tables
스다 노래 들으면서 하니까 잘 되네 ㅎㅎㅎ
'Web' 카테고리의 다른 글
| PHP 1 (basic) (0) | 2019.10.12 |
|---|---|
| Forms (3) | 2019.09.16 |
| Tables (0) | 2019.09.16 |
| Introduction to HTML 2 (0) | 2019.09.13 |
| Introduction to HTML 1 (0) | 2019.09.10 |
