11. HTML 실습
https://opentutorials.org/course/1688/9345
1) 모델링을 HTML로 만들기
[대제목]
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> 태그
- 제목 태그
- <h1> 태그가 가장 큰 제목
→ h 뒤에 숫자가 커질수록 작은 제목
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> </head> <body> <h1>JavaScript</h1> <h2>JavaScript</h2> JavaScript </body> </html> | cs |
[순서가 있는 리스트]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> </head> <body> <h1>JavaScript</h1> <ol> <li>JavaScript란?</li> <li>변수와 상수</li> <li>연산자</li> </ol> </body> </html> | cs |
[소제목]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> </head> <body> <h1>JavaScript</h1> <ol> <li>JavaScript란?</li> <li>변수와 상수</li> <li>연산자</li> </ol> <h2>변수와 상수</h2> </body> </html> | cs |
[내용]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> </head> <body> <h1>JavaScript</h1> <ol> <li>JavaScript란?</li> <li>변수와 상수</li> <li>연산자</li> </ol> <h2>변수와 상수</h2> 변수란 <ul> <li>변하는 값</li> <li>x=10일 때 왼쪽항...</li> </ul> </body> </html> | cs |
2) 의미론적인 웹
Semantic Web
- 의미가 잘 드러나는 웹
<nav> 태그
- 네비게이션(Navigation) 역할
- 웹 사이트를 탐색하는 데 사용되는 정보라는 것을 알려줌
<header> 태그
- 네비게이션을 돕거나 페이지에 대한 정보를 담는 태그
<article> 태그
- 문서 내에서 독립적인 컨텐츠
- 본문에 해당되는 정보라는 것을 알려줌
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> </head> <body> <header> <h1>JavaScript</h1> </header> <nav> <ol> <li>JavaScript란?</li> <li>변수와 상수</li> <li>연산자</li> </ol> </nav> <article> <h2>변수와 상수</h2> 변수란 <ul> <li>변하는 값</li> <li>x=10일 때 왼쪽항...</li> </ul> </article> </body> </html> | cs |
3) 사이트 완성
index.html
- 대문 페이지
- 홈페이지의 정보를 담고 있는 파일이라고 암묵적으로 약속되어 있다.
- 주소만 요청받았을 경우, 웹 서버는 우선적으로 해당 웹 사이트의 index.html 파일을 찾아 전송한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> </head> <body> <header> <h1><a href="/">JavaScript</a></h1> </header> <nav> <ol> <li><a href="/page_html.html">JavaScript란?</a></li> <li><a href="/page_vc.html">변수와 상수</a></li> <li><a href="/page_op.html">연산자</a></li> </ol> </nav> </body> </html> | cs |
page_html.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> </head> <body> <header> <h1><a href="/">JavaScript</a></h1> </header> <nav> <ol> <li><a href="/page_html.html">JavaScript란?</a></li> <li><a href="/page_vc.html">변수와 상수</a></li> <li><a href="/page_op.html">연산자</a></li> </ol> </nav> <article> <h2>JavaScript란?</h2> JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다. </article> </body> </html> | cs |
page_vc.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> </head> <body> <header> <h1><a href="/">JavaScript</a></h1> </header> <nav> <ol> <li><a href="/page_html.html">JavaScript란?</a></li> <li><a href="/page_vc.html">변수와 상수</a></li> <li><a href="/page_op.html">연산자</a></li> </ol> </nav> <article> <h2>변수와 상수</h2> 변수는 바뀔 수 있는 값이고, 상수는 바뀌지 않는 값입니다. </article> </body> </html> | cs |
page_op.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> </head> <body> <header> <h1><a href="/">JavaScript</a></h1> </header> <nav> <ol> <li><a href="/page_html.html">JavaScript란?</a></li> <li><a href="/page_vc.html">변수와 상수</a></li> <li><a href="/page_op.html">연산자</a></li> </ol> </nav> <article> <h2>연산자</h2> 계산을 할 때 사용되는 것입니다. </article> </body> </html> | cs |
'컴퓨터 > 웹 개발' 카테고리의 다른 글
| [코딩야학] ~ 웹페이지에 코드삽입 - 6일차 (0) | 2017.07.31 |
|---|---|
| [코딩야학] ~ CSS실습 - 5일차 (0) | 2017.07.31 |
| [코딩야학] ~ CSS이론 - 4일차 (0) | 2017.07.31 |
| [코딩야학] ~ HTML이론 - 2일차 (0) | 2017.07.31 |
| [코딩야학] 처음 ~ 서버제어까지 - 1일차 (0) | 2017.07.31 |