컴퓨터 IT/인터넷에 집짖기에 해당하는 글 31

4-1. 집짓기 준비

집짓기 준비


■ 집짓기 준비.

먼저 자신의 컴퓨터 하드에 새폴더를 만듭니다. 그리고 폴더 이름을 "마이홈" 이라고 지정합니다.

그리고 이곳에 자신의 홈페이지 파일들을 저장합니다. 그리고 홈페이지에 들어갈 이미지 파일들은

따로 마이홈 폴더 아래에 image 라는 폴더를 만들어 저장합니다.



인터넷에 집짓기에서는 다음과 같은 방법으로 집을 짖습니다.

■ 집짓기 방법.

① 메모장을 실행합니다.

② 메모장으로 HTML문서를 작성합니다. 이 때 확장자를 *.html로 저장해야 합니다.




③ 윈도우 탐색기를 실행합니다.

④ 탐새기로 메모장으로 저장한 파일을 더블 클릭하여 실행하면 브라우저가 나타납니다.
- 메모장으로 작성한 HTML문서를 볼 수 있습니다.




⑤ 다시 ②번에서 사용한 메모장을 화면에 띄워서 필요한 부분을 수정하고 저장 합니다.

⑥ 수정한 HTML문서를 ④번 브라우저의 새로고침 버튼을 클릭하면 수정한 HTML문서를 볼 수 있다.

⑦ 계속적으로 ⑤-⑥를 번가라 가며 HTML문서를 수정 합니다.


'컴퓨터 IT > 인터넷에 집짖기' 카테고리의 다른 글

4-3. 상위페이지 만들기  (0) 2016.08.03
4-2. 프레임 만들기  (0) 2016.08.03
4. 집짓기  (0) 2016.08.03
3-10. 색상표 (RGB Color Table)  (0) 2016.08.03
3-9. 배경음악 삽입  (0) 2016.08.03

댓글()

4. 집짓기

인터넷 집짓기!

아래와 같이 따라 하면서 홈페이지 만들기를 하겠습니다.


예제 홈페이지로 미래소년 코난 팬 홈페이지를 만들겠습니다.

코난의 홈페이지보기



◈ 코난의 홈페이지 만들기 순서도.                   


① 프레임 만들기   각 페이지 만들기   ② 상위 페이지

  ③ 메뉴 페이지 만들기   ④ 메인페이지 만들기  

⑤ 자기소개 만들기


  ⑥ 친구들 만들기   ⑦ 추억록 만들기   ⑧ 인터넷에 땅구하기




⑨ FTP로 홈페이지 올리




     





'컴퓨터 IT > 인터넷에 집짖기' 카테고리의 다른 글

4-2. 프레임 만들기  (0) 2016.08.03
4-1. 집짓기 준비  (0) 2016.08.03
3-10. 색상표 (RGB Color Table)  (0) 2016.08.03
3-9. 배경음악 삽입  (0) 2016.08.03
3-8. 프래임 태그  (0) 2016.08.03

댓글()

3-10. 색상표 (RGB Color Table)

색상표 (RGB Color Table)

RGB 컬러색상표입니다.
필요한 색상코드를 선택하여 사용하면 됩니다.

예]
<font color="#색상코드번호"> ~ </font>

<font color="#ff0000">안녕하세요</font>
<font color="#007700">안녕하세요</font>
<font color="#777777">안녕하세요</font>
안녕하세요
안녕하세요
안녕하세요

색상표 (RGB Color Table)

000000

000031

000063

00009c

0000ce

0000ff

003100

003131

003163

00319c

0031ce

0031ff

310000

310031

310063

31009c

3100ce

3100ff

313100

313131

313163

31319c

3131ce

3131ff

006300

006331

006363

006391

0063ce

0063ff

316300

316331

316363

31639c

3163ce

3163ff

009c00

009c31

009c63

009c9c

009cce

009cff

319c00

319c31

319c63

319c9c

319cce

319cff

00ce00

00ce31

00ce63

00ce9c

00cece

00ceff

31ce00

31ce31

31ce63

31ce9c

31cece

31ceff

00ff00

00ff31

00ff63

00ff9c

00ffce

00ffff

31ff00

31ff31

31ff63

31ff9c

31ffce

31ffff

639c00

639c31

639c63

639c9c

639cce

639cff

63ce00

63ce31

63ce63

63ce9c

63cece

63ceff

9cce00

9cce31

9cce63

9cce9c

9ccece

9cceff

9cff00

9cff31

9cff63

9cff9c

9cffce

9cffff

63ff00

63ff31

63ff63

63ff9c

63ffce

63ffff

ceff00

ceff31

ceff63

ceff9c

ceffce

ceffff

630000

630031

630063

63009c

6300ce

6300ff

633100

633131

633163

63319c

6331ce

6331ff

636300

636331

636363

63639c

6363ce

6363ff

9c9c00

9c9c31

9c9c63

9c9c9c

9c9cce

9c9cff

cece00

cece31

cece63

cece9c

cecece

ceceff

9c0000

9c0031

9c0063

9c009c

9c00ce

9c00ff

9c3100

9c3131

9c3163

9c319c

9c31ce

9c31ff

9c6300

9c6331

9c6363

9c639c

9c63ce

9c63ff

ce6300

ce6331

ce6363

ce639c

ce63ce

ce63ff

ce9c00

ce9c31

ce9c63

ce9c9c

ce9cce

ce9cff

ce0000

ce0031

ce0063

ce009c

ce00ce

ce00ff

ce3100

ce3131

ce3163

ce319c

ce31ce

ce31ff

ff0000

ff0031

ff0063

ff009c

ff00ce

ff00ff

ff3100

ff3131

ff3163

ff319c

ff31ce

ff31ff

ff6300

ff6331

ff6363

ff639c

ff63ce

ff63ff

ff9c00

ff9c31

ff9c63

ff9c9c

ff9cce

ff9cff

ffce00

ffce31

ffce63

ffce9c

ffcece

ffceff

ffff00

ffff31

ffff63

ffff9c

ffffce

ffffff

0000ff

1800ff

3100ff

4a00ff

6200ff

7800ff

9c00ff

b400ff

cd00ff

e600ff

ff00ff

ff00e6

ff00cd

ffffb4

ff009c

ff007b

ff0062

ff004a

ff0031

ff0018

ff0000

0018ff

1818ff

3118ff

4a18ff

6218ff

7b18ff

9c18ff

b418ff

cd18ff

e618ff

ff18ff

ff18e6

ff18cd

ff18b4

ff189c

ff187b

ff1862

ff184a

ff1831

ff1818

ff1800

0031ff

1831ff

3131ff

4a31ff

6231ff

7b31ff

9c31ff

b431ff

cd31ff

e631ff

ff31ff

ff31e6

ff31cd

ff31b4

ff319c

ff317b

ff3162

ff314a

ff3131

ff3118

ff3100

004aff

184aff

314aff

4a4aff

624aff

7b4aff

9c4aff

b44aff

cd4aff

e64aff

ff4aff

ff4ae6

ff4acd

ff4ab4

ff4a9c

ff4a7b

ff4a62

ff4a4a

ff4a31

ff4a18

ff4a00

0062ff

1862ff

3162ff

4a62ff

6262ff

7b62ff

9c62ff

b462ff

cd62ff

e662ff

ff62ff

ff62e6

ff62cd

ff62b4

ff629c

ff627b

ff6262

ff624a

ff6231

ff6218

ff6200

007bff

187bff

317bff

4a7bff

627bff

7b7bff

9c7bff

b47bff

cd7bff

e67bff

ff7bff

ff7be6

ff7bcd

ff7bb4

ff7b9c

ff7b7b

ff7b62

ff7b4a

ff7b31

ff7b18

ff7800

009cff

189cff

319cff

4a9cff

629cff

7b9cff

9c9cff

b49cff

cd9cff

e69cff

ff9cff

ff9ce6

ff9ccd

ff9cb4

ff9c9c

ff9c7b

ff9c62

ff9c4a

ff9c31

ff9c18

ff9c00

00b4ff

18b4ff

31b4ff

4ab4ff

62b4ff

7bb4ff

9cb4ff

b4b4ff

cdb4ff

e6b4ff

ffb4ff

ffb4e6

ffb4cd

ffb4b4

ffb49c

ffb47b

ffb462

ffb44a

ffb431

ffb418

ffb400

00cdff

18cdff

31cdff

4acdff

62cdff

7bcdff

9ccdff

b4cdff

cdcdff

e6cdff

ffcdff

ffcde6

ffcdcd

ffcdb4

ffcd9c

ffcd7b

ffcd62

ffcd4a

ffcd31

ffcd18

ffcd00

00e6ff

18e6ff

31e6ff

4ae6ff

62e6ff

7be6ff

9ce6ff

b4e6ff

cde6ff

e6e6ff

ffe6ff

ffe6e6

ffe6cd

ffe6b4

ffe69c

ffe67b

ffe662

ffe64a

ffe631

ffe618

ffe600

00ffff

18ffff

31ffff

4affff

62ffff

7bffff

9cffff

b4ffff

cdffff

e6ffff

ffffff

ffffe6

ffffcd

ffffb4

ffff9c

ffff7b

ffff62

ffff4a

ffff31

ffff18

ffff00

ffff31

ffff18

ffff00




'컴퓨터 IT > 인터넷에 집짖기' 카테고리의 다른 글

4-1. 집짓기 준비  (0) 2016.08.03
4. 집짓기  (0) 2016.08.03
3-9. 배경음악 삽입  (0) 2016.08.03
3-8. 프래임 태그  (0) 2016.08.03
3-7. 테이블 태그  (0) 2016.08.03

댓글()

3-9. 배경음악 삽입

배경음악 삽입

<EMBED SRC="soundclip/bak.wav" autostart="true" hidden="true">

배경 음악이 반복되는 것을 막기 위해서 EMBED 태그에 LOOP=false 속성을 추가하면 됩니다.

LOOP=true로 설정하면 무한 반복하게 됩니다.

LOOP=2와 같이 하면 2회를 연주합니다.

BGSOUND 태그는 익스플로러와 모자이크에서 지원하는 태그로 네비게이터에서는 지원하지 않습니

다. 사용법은 간단히

<body> <bgsound src="soundclip/bak.wav" loop="false"> </body>

사이에 삽입합니다.



'컴퓨터 IT > 인터넷에 집짖기' 카테고리의 다른 글

4. 집짓기  (0) 2016.08.03
3-10. 색상표 (RGB Color Table)  (0) 2016.08.03
3-8. 프래임 태그  (0) 2016.08.03
3-7. 테이블 태그  (0) 2016.08.03
3-6. 줄바꿈 및 문단태그  (0) 2016.08.03

댓글()

3-8. 프래임 태그

프래임 태그

<frameset> 태그
태그 : <frameset> <frame> </frameset>
<frameset> 태그는 화면 분할을 지정하는 태그로, 프래임의 시작과 끝을 지정합니다.

▶ 속성.

rows="크기지정, 크기 지정" 가로로 나눌 프레임 지정
cols="크기지정, 크기 지정" 세로로 나눌 프레임 지정
frameborder="no|yes" 프레임 창의 테두리 지정
border="크기 지정" 프레임 창의 테두리 두께 지정
- 프래임 분할시 rows="20,*" 에서 20은 20픽셀을 의미하며, *(와일드카드)는 남은 면적 전부를 의미합니다. 또는 백분율을 사용하여 rows="20%,*" 로 사용 할 수 있는데, 이것은 전체 화면(100%)중 위의 프래임의 크기는 20%이고 아래 프래임의 크기는 나머지 전부(80%)를 의미하는 것입니다.

<frame> 태그
태그 : <frame>
<frame> 태그는 분할된 화면(프레임)의 속성과 초기에 불러올 문서를 지정하는 태그입니다.

▶ 속성.

src="경로지정" 문서경로지정
name="사용자 지정" 프레임에 이름 지정(링크에 사용)
scrolling="auto|yes|no" 스크롤바 생성 옵션
noresize 마우스로 크기조절 불가
marginwidth="크기 지정" 프레임내 가로 여백
marginheight="크기 지정" 프레임내 세로 여백
- 프래임의 이름을 지정하는 name은 링크 태그의 target=" "을 지정시 사용되는 것으로 name을 지정한 프래임에 문서를 불러올 때 사용합니다.
예를 들어 name="main" 으로 지정한 프래임에 문서를 불러 올 때 링크 태그의 target="main" 으로 지정하면 됩니다.
- 스크롤바 생성 옵션에서 스크롤바를 사용하지 않으려면 scrolling="no" 로 문서의 길이에 따라 자동으로 지정시 scrolling="auto" 로 스크롤바를 사용려면 scrolling="yes" 로 지정하면 됩니다.

사용예]
<html>
  <head>
     <title>인터넷 집짓기</title>
  </head>
<frameset rows="150,*" frameborder="no" border="0">
   <frame src="top.html" name="top" scrolling="no" noresize>
   <frame src="main.html" name="main" scrolling="auto" noresize>
</frameset>

<noframes>
  <body>
  </body>
</noframes>
</html>
- 위의 프래임 태그에서
  <noframes>
    <body>
    </body>
  </noframes> 태그는 없어도 관계 없습니다.


ⓐ 가로 2단 편집.
<frameset rows="150,*">
   <frame src="top.htm" name="top">
   <frame src="main.htm" name="main">
</frameset>
  top.htm
  main.htm

ⓑ 3단 편집.
<frameset rows="150,*">
   <frame src="top.htm" name="top">
<frameset cols="200,*">
   <frame src="menu.htm" name="menu">
   <frame src="main.htm" name="main">
</frameset>
</frameset>

  top.htm
 menu.
  htm
  main.htm


<iframe> 태그
태그 : <iframe> </iframe>
<iframe> 태그는 문서 안에 프레임을 지정해 주는 태그 입니다.

▶ 속성.

src="경로" 문서 경로 지정
width="크기지정" 프래임의 가로 크기
height="크기지정" 프래임의 세로 크기
frameborder="크기지정" 프래임의 태두리 두께
scrolling="auto|yes|no" 스크롤바 생성 옵션
marginwidth="크기지정 프레임 내부 가로 여백
marginheight="크기지정 프레임 내부 세로 여백
name="사용자 지정" 프레임에 이름 지정(링크에 사용)

사용예]
<html>
  <head>
     <title>인터넷 집짓기</title>
  </head>
<body>
<iframe src="http://www.imbc.com/index.htm" width="450" height="340 " frameborder=0 scrolling=no marginwidth=0 marginheight=0 name="sub"></iframe>
</body>
</html>
  imbc

- <iframe> 태그는 문서 안에 프레임을 지정해 주는 태그임으로, <frameset> 태그와 달리
<body>태그 안에서 지정하여야 합니다.





'컴퓨터 IT > 인터넷에 집짖기' 카테고리의 다른 글

3-10. 색상표 (RGB Color Table)  (0) 2016.08.03
3-9. 배경음악 삽입  (0) 2016.08.03
3-7. 테이블 태그  (0) 2016.08.03
3-6. 줄바꿈 및 문단태그  (0) 2016.08.03
3-5. 이미지 태그  (0) 2016.08.03

댓글()