- HOME
- Post in | and so on
- Post at | 2014. 11. 25. 17:27 | by 밀크빵.
- View comment
11/25 Build Your Own Webpage 1~6
1. What you'll be making
우리는 코드의 무리를 작성하기 전에, 무엇을 당신이 이 프로젝트에서 만들 것인지 정확히 보는 것이 도움이 될 것이라고 생각한다.
index.html 파일을 확인해라. 그리고 예제의 결과로 생긴다. - 우리는 우리 자신의 웹 페이지를 만들었다.
*instructions
자신의 빌딩의 시작하기 위해 save& submit code를 눌러라
2. 모든 집은 프레임이 필요하다
HTML 페이지는 집과 같은 종류이다 : 이것은 작동하기 위하여 어떤 일정 수의 구조를 필요로 한다
집 처럼, HTML 페이지는 구조를 필요로 한다. 당신의 프레임은 <!DOCTYPE>, <html>, <head>, <body>태그로 만든다.
*instructions
당신의 웹페이지는 비어있다. 이것은 새로 태어났다! 다섯가지의 것들을 추가해보자
01. <!DOCTYPE> 태그
02. <html> 태그
03. <head> 태그
04. <title> 태그(당신이 좋아하는 어떤 타이틀!) head 태그 사이에
05. <body>태그
03. 헤더가 있는 것이 낫다
당신의 웹페이지는 body 태그 사이에 <h1> 헤더가 필요하다, 모두가 페이지가 당신에 관한것이라는 것을 알게
*instructions
<h1>태그를 body 태그 안에 생성해라 모두가 볼 수 있게 <h1></h1>사이에 당신의 이름을 적어라!
04. 너 자신에 대하여 말해라
당신의 페이지는 따라오고 있다. 그러나 아직 그것은 우리에게 말한게 아니다
당신은 문단이나, 당신의 관심사, 무엇을 위해 살아가는지, 얼마나 HTML을 배우는 것을 사랑하는지 등등 두가지에 관하여 말 할 수 있다.
*instructions
세개의 <p> 태그를 <h1> 태그 다음에 삽입해라( </body> 태그 전에 )
각각 세개의 단락에 당신 자신에 대하여 조금 적어라
당신은 무엇이든지 당신이 원하는 것을 말할 수 있다. 이것은 당신의 웹페이지니까!
05. 사진은 천개 단어의 가치를 가진다
Nice work! 너의 페이지는 여전히 약간 spare로 보이긴 하지만 이미지나 두개의 깔끔한 것을 올리면 낫다
기억해라 이미지를 웹 에서 올리려면 당신은 오른쪽 클릭을 해서 "Copy image URL"을 필요로 한다. 그러면 그 URL을 <img> 태그에 사용한다.
*instructions
<img>태그를 body 태그 사이에 삽입해라. 어디든 놓을 수 있다. (우리 생각에는 <h1> 태그 아래, <p> 전에가 가장 최적으로 보인다)
당신은 src를 만들 수 있다.
06. Link me!
Great! 단지 한개의 문제가 있다: 당신의 웹페이지는 문이 없는 집과 같다.
들어가거나 나가는 방법이 없다. 우리는 한 쌍의 링크로 고칠것이다.
한번 당신은 당신의 링크를 성공적으로 추가한다. 그리고 클릭하여 실행시킨다. 그럼 끝!
아직도 약간 기초로 보이면 걱정마라. 우리는 곧 당신의 웹페이지가 sharp처럼 보이도록 만들기 위해 CSS를 가르쳐줄 것이다.
*instructions
2개의 링크를 추가해라
당신은 이미지나 약간의 텍스르로 링크를 추가할 수 있다. <p> 태그안에 추가할 수 있다
<a>태그를 어떻게 동작싴는지 잊었다면 힌트를 확인해라
'and so on' 카테고리의 다른 글
| 초성검색 (0) | 2014.12.03 |
|---|---|
| 인덱싱 (0) | 2014.12.03 |
| 11/17 HTML Basics 1~8 (0) | 2014.11.17 |
| windows 톰캣 설치 (0) | 2014.04.21 |
| 마크다운 (MARKDOWN) 문법 (0) | 2014.04.14 |
