- HOME
- Post in | and so on
- Post at | 2014. 11. 17. 21:41 | by 밀크빵.
- View comment
11/17 HTML Basics 1~8
1. HTML을 왜 배우는가
모든 웹페이지는 HTML이라고 불리는 언어로 쓰여져 있다.
당신은 HTML에 관하여 모든 웹페이지 구조의 골격으로써 생각할 수 있다.
이 과정에서 우리는 HTML을 단락, headings, 이미지 그리고 웹페이지 링크를 추가하기 위하여 사용할 것이다
오른쪽에 보이는 에디터에 test.html 이라고 불리는 탭이 있다.
이것은 우리가 HTML로 입력하기 위한 파일이다.
코드에 있는 <>들을 보면? 그것은 HTML 이다!
다른 언어 처럼 이것은 그들만의 특별한 문법을 가진다
우리가 저장&제출 코드를 누르면 결과 탭은 인터넷 브라우저처럼 행동할 것이다 (eg 크롬, 파이어폭스, IE)
브라우저의 일은 test.html의 코드를 인식할 수 있는 웹페이지로 전송하는 것이다
그것은 HTML 문법을 따르는 레이아웃 페이지로 변할지 알고 있다
2. HTML & CSS
HTML은 Hyper Text Markup Language를 나타낸다. Hypertext 의 의미는 "test with links in it" 이다
어느때나 단어를 클릭하면 새로운 웹페이지로 데려간다 당신은 hypertext를 클릭했다
Markup language는 페이지에 있어 텍스트가 더 많은 일을 할 수 있도록 하는데 사용되는 프로그래밍 언어이다.
: 이것은 텍스트가 이미지, 링크, 표 리스트 그리고 더 많은 것으로 전환될 수 있다.
HTML은 markup language 이다
우리는 이걸 배울 것이다
웹페이지를 멋지게 만드는 것은 무엇인가?
그것은 CSS - Cascading style sheets.
우리가 가장 먼저 할 일은 페이지의 뼈대를 설정하는 것이다.
a. 항상 첫줄에 <!DOCTYPE html>을 적는다
이것은 브라우저가 어떤 언어를 읽는지 말해준다
b. 항상 <html>을 그 다음줄에 적는다 이것은 HTML 문서의 시작이다.
c. 항상 </html>을 마지막 라인에 적는다 이것은 HTML 문서의 종료이다.
3. 기본 용어
HTML에 관해 더 배우기 위해 우리는 HTML에 관해 어떻게 이야기 하는지 배워야 한다.
이미 당신은 <>를 많이 사용하는 것을 봐왔다.
01. <>안에 있는 것들은 tags라고 불린다
02. tags는 거의 항상 쌍으로 온다 : 오프닝태그 & 클로징 태그
03. 오프닝태그 예 : <html>
04. 클로징태그 예 : </html>
당신은 이미 존재하는 괄호 처럼 태그를 생각할 수 있다 : 하나를 열때마다 그것을 닫아야 한다.
tags 또한 한 세트이다. 그래서 너는 그것들을 / 로 닫아야 한다. : 가장 최근 열었던 태그는 가장 먼저 닫아야 한다
<first tag><second tag> Some text! </second tag></first tag>
마지막 예제는 우리의 HTML 파일을 어떻게 설정하는지 가르쳐준다.
우리가 지금 하는 모든 것은 <html> 과 </html> 사이로 간다
4. head 만들기
우리의 모든 HTML 파일은 오프닝 <html>과 클로징 </html> 태그 사이에 이동한다
HTML 파일은 항상 두개의 파트가 있다: head 와 body
head를 시작해보자
head는 타이틀 처럼 html 파일에 관한 정보를 포함하고 있다 타이틀은 브라우저의 타이틀바나 페이지의 탭에서 볼 수 있는 것이다.
예를들어 이 페이지의 타이틀은 "HTML Basics | Codecademy"이다
*instructions
우리의 웹페이지에 타이틀이랑 head를 추가해보자.
01. 오프닝 <head>태그와 클로징 </head> 태그 추가
02. <head>태그들 사이에 오프닝 <title>태그와 클로징</title> 태그를 추가한다
03. <title>태그들 사이에 너의 페이지를 위한 타이틀을 적는다 ex) "My Webpage"
04. "Save & Submit Code" 누르기
5. body 용어
그레이트잡! THML 파일은 head랑 body 둘다 가지고 있다.
head는 타이틀과 같이 당신의 html 파일에 관한 정보를 넣는다.
body는 텍스트, 이미지, 링크와 같은 당신의 content을 넣는다
body 안에 있는 content는 실제 페이지에 보여질 것이다.
body는 <html>테그 사이에, <head> 오른쪽 다음에 간다
아래와 같이
<html>
<head>
<title> My webpage</title>
</head>
<body>
</body>
</html>
*instructions
01. </head>태그 아래에 <body>태그와 </body> 태그를 넣는다
02. body 안에 두개 용어를 넣는다 <p></p> 우리는 저 태그 사이에 내용을 적을 수 있다
<body>
<p>Hello world!</p>
</body>
6. 단락과 머리글
우리는 확실히 좋은 진전을 보이고 있다!
우리는 언제, 그리고 왜 우리가 HTML을 사용하는지 배웠다. 우리는 또한 어떻게 사용하는지 배웠다:
a. tag를 사용한 HTML 파일 설정
b. 웹 페이지의 타이틀(<head>안에)
c. 단락 생성(<body> 안에 <p >태그 이용하여)
다음 단계는 단락 머리글에 heading tags를 사용해주는것이다.
<h1> 태그를 시작한다. 이 태그 사이에 있는 내용은 커질 것이다!
*instructions
01. body 섹션 안에, 머리글을 생성한다. <h1> 태그 생성 =
02. 내용 추가
03. <h1>으로 닫는다(너의 내용은 지금 <h1>과 <h2> 사이에 있어야 한다)
04. 머리글 태그 아래에 두개의 <p>태그를 이용하여 너가 좋아하는 내용 무엇이든지 생성한다.
<!DOCTYPE html> <html> <head> <title> Headings & Paragraphs </title>
</head> <body> <h1> heading</h1>
<p>hello world</p> <p>hello world too </p>
</body> </html> |
7. more about headings!
HTML은 실제로 하나 이상의 제목 크기를 가지고 있다.
6개의 머리글 크기가 있다.<h1>은 제일 크고 <h6>은 작다!
<h1> - The CEO
<h2> - VP
<h3> - Director
<h4> - Middle management
<h5> - Lowly assistant
<h6> - gets coffee for everyone
*Instructions
01. 당신의 코드는 현재 <h1>머리글과 두개의 문단을 가지고 있다
02. <h3> 머리글을 두개의 문단 전에 추가한다
03. <h5> 머리글을 두개의 문단 다음에 추가한다. 그리고 새개의 문단을 이 머리글 다음에 추가해라
<!DOCTYPE html>
<html> <head> <title> Headings & Paragraphs </title>
</head> <body> <h1>h1 heading</h1>
<h3>h3 heading </h3>
<p>hello world</p> <p>hello world too </p>
<h5>h5 heading </h5> <p>third paragraph hello world</p>
</body> </html> |
8. 모든 머리글 사용하기
nice work!
*instructions
01. 3개 이상의 머리글 추가 하기. <h2>, <h4> 그리고 <h6>. 모든 태그를 닫았는지 확인해라!
02. 각 머리글 아래에 작은 문단을 추가해라. 문단은 <p></p>태그가 필요하다는 것을 잊지 말아라
'and so on' 카테고리의 다른 글
| 인덱싱 (0) | 2014.12.03 |
|---|---|
| 11/25 Build Your Own Webpage 1~6 (0) | 2014.11.25 |
| windows 톰캣 설치 (0) | 2014.04.21 |
| 마크다운 (MARKDOWN) 문법 (0) | 2014.04.14 |
| doxygen - 표 (0) | 2014.03.19 |
