함께하는 분들과 늘 함께하는 홈   -   문서(홈)작업◈익혀둡시다.

배우고 때때로 익히면

이또한 기쁘지 않은가

 

현재내용.☞ 1).인터넷문서 기본모습   2).태그 익히기   3).HTML 눈에 익히기  

學而不思則罔 (학이불사칙망)

>배우기만 하고 생각하지 않으면 그물에 갇히듯 더 이상 발전이 없다.   


<HTML Tag>에 대하여 : 현재 내용 목록
| 글자크기(제목) | 줄 바꿈Tag | 문단(시작·종료)Tag | 문장(이미지)위치정렬Tag | 문장(글자)크기지정Tag | 색 지정Tag | 위치·색·크기 복합사용 예 | 글꼴 변환 | 문장 들여쓰기 | 문서에 '이미지'배경 넣기 | 문서에 배경색 넣기 | 문장에'이미지'넣기 및 align=속성 | 링크 걸기 : 동일문서 : 다른문서 : 다른문서의 특정 위치로 : 사이트 이동 | border=" " | 이미지에 설명문 넣기 | 하이퍼링크의 색상 | "TARGET" | 표 만들기 | 프레임 문서 | 프레임 나누기 | 속성 | 프레임'가로/세로'로 만들기 |

 

 

 

  글자크기
   글자크기 지정 태그<H> :

<H1>HTML문서</H1>

HTML문서

<H2>HTML문서</H2>

HTML문서

<H3>HTML문서</H3>

HTML문서

<H4>HTML문서</H4>

HTML문서

<H5>HTML문서</H5>

HTML문서

 <H6>HTML문서</H6>

HTML문서


   태그

   줄바꿈 태그<BR> : 줄만 바꿔주는 태그-[<BR>태그는 단독으로 쓰임]

<BR>줄<BR>바꿈<BR>태그

        줄
        바꿈
        태그


  시작·종료  

   문단의 시작·종료 태그<P> : '문단'과 '문단'을 구분

<P>태그 연습...</P><P>연습문장을 작성하고 있습니다.</P>

        태그 연습...

        연습문장을 작성하고 있습니다.

참고 : 문단 태그<P>는 종료태그</P>를 생략해도 결과는 같음.

<P>태그 연습...<P>연습문장을 작성하고 있습니다.</P>

        태그 연습...

        연습문장을 작성하고 있습니다.


  정렬

   문서의 문장 정렬(위치) : 화면의 표시위치를 지정.(왼쪽·중앙·오른쪽)

<p align="left">안녕하세요!</P>

안녕하세요!

<p align="center">정렬 위치</P>

정렬 위치

<p align="right">이렇게 되요.</P>

이렇게 되요.

   출력
   글자의 크기 지정 : 화면에 나타나는 크기 - <font size="*"></font>

글자크기

<p><font size="1">글자크기</font></p>

글자크기

<p><font size="2">글자크기</font></p>

글자크기

<p><font size="3">글자크기</font></p>

글자크기

<p><font size="4">글자크기</font></p>

글자크기

<p><font size="5">글자크기</font></p>

글자크기

<p><font size="6">글자크기</font></p>

글자크기

<p><font size="7">글자크기</font></p>

  내용
   글자의 색 지정 : 글자의 색 - <font color="*"></font>

빨간색입니다

<p><font color="red">빨간색입니다</font></p>

파란색이고요

<p><font color="blue">파란색이고요</font></p>

고동색과

<p><font color="brown">고동색과</font></p>

녹색입니다

<p><font color="green">녹색입니다</font></p>

색상표 번호

<p><font color="#ff00ff">색상표 번호</font></p>

☞ 링크 : 색상표 < 216 색상코드 : 의 사용은 "#색상코드No"
   순서대로
   복합 사용 (정렬·색·크기) : HTML 입력내용(순서대로): 글자검정은 기본색.

중앙 정렬 예문

<p align="center"><font size="5" color="blue">중앙 정렬 </font><font size="5" color="red">예문</font></p>

중앙 정렬 예문

<p align="center"><font size="5" color="blue">중앙 </font><font size="3">정렬</font><font size="5" color="blue"></font><font size="5" color="red">예문</font></p>

  TML 입
   글꼴 변환 태그 : <font face="*"></font>

굴림체 글꼴로

<p><font face="굴림체">굴림체 글꼴</font></p>

 HTML 태그
   
문장 들여쓰기 태그 : <blockquote>***</blockquote>

웃어른이 예의가 없으면 이로 인하여 아랫사람을 부릴 수가 없고,

아랫사람이 예의가 없으 면 이로 인하여 웃어른을 모실 수가 없다.

<blockqudte>와 </blockqudte>사이의 문장이 들여쓰기 상태로 표시됩니다.

 ☞ HTML 입력 내용
<blockquote><p>웃어른이 예의가 없으면 이로 인하여 아랫사람을 부릴 수가 없고,<p>아랫사람이 예의가 없으면 이로 인하여 웃어른을 모실 수가 없다.</blockquote>

   바탕화면
   배경 색·이미지 넣기 :
문서의 바탕에 배경이미지-<body background="이미지화일명">
   </head> 태그 다음에 바로 들어감.
   <body background="
../image/back.gif">
 배경색
문서의 바탕에 배경 색상넣기-<BODY BGCOLOR = 색상코드 또는 색상명>
   </head> 태그 다음에 바로 들어감.
   <body bgcolor = #0000FF>


☞ 링크 : 색상표 < 216 색상코드 : 의 사용은 "#색상코드No"
  IMG

  글 내용중에 이미지 넣기 : <IMG SRC = "이미지위치/이름" "조건등·등">
조건 : width, height, border  ; *"속성"

이해가 잘 되나요 ?

이해가 잘 <img src="../sen_mal/fm_study.gif" width="40" height="40" border="0">되나요 ?


 align="속성" 삽입 : <img src="../sen_mal/fm_study.gif" align="속성" width="40" height="40" border="0">

align="top" 삽입시▷

이해가 잘 되나요 ?

align="middle" 삽입시▷

이해가 잘 되나요 ?

align="bottom" 삽입시▷

이해가 잘 되나요 ?

  링크
  <링크> 페이지 이동 : 한 문서 내에서, 또는 다른 문서나 타 사이트로 쉽게 이동하기 위해 문서내의 특정 글자나 이미지에 이동할 주소를 연결하여 놓은 것을 말함.
   기본 태그 내용> : <A HREF = "이동할 위치 및 주소">링크표시대상</A>
  문서내
   같은 문서 내 이동 : <a href="#이동할위치">링크표시대상</a>
*
예문)   HTML 문서의 ①글자크기를 바꾸어 봅시다.     |  ②☞ 이동하기

① : <p>HTML 문서의 <a href="#글자크기">①글자크기</a>를 바꾸어 봅시다.</p>
② :    <p><a
href="#글자크기">②☞ 이동하기</a></p>

☞ 위 ① ②의 "글자크기"는 문서 내용중에 있는 실제부분을 말 합니다.
  
이동할
   다른문서로 이동 : <A HREF = "이동할 화일명">링크표시대상</A>
 *
예문)  HTML 문서의 ①기본내용을 보며 비교해 볼까요.      |  ②☞ 이동

① : HTML 문서의 <a href="samplefile0.htm">①기본내용</a>을 보며 비교해 볼까요.
② : <p><a href="
samplefile0.htm">②☞ 이동</a></p>
 
  특정
   다른문서 특정 위치 : <A HREF = "화일명#특정 부분 이름"> 이동</A>
 *
예문)  HTML 문서의 ①작업내용을 비교한 것을 볼까요.     |  ②☞ 이동

① : HTML 문서의 <a href="samplefile0.htm#쉽게">①작업내용</a>을 비교한 것을 볼까요.
② : <p><a href="
samplefile0.htm#쉽게">②☞ 이동</a></p>

☞위 ① ②의 "쉽게"도 이동할 문서의 내용중에 있는 실제부분을 말 합니다.
사이트
   다른 사이트로 이동 : <A HREF = " 사이트 주소">글·기타내용</A>
텍스트에 링크   [사이트 드림위즈로 이동.]
   <p>사이트 <a href="http://www.dreamwiz.com/">드림위즈</a>로 이동</p>
이미지에 링크를 한 경우   ['나모'로namo로 이동함.]
   <p>'나모'로<a href="http://www.namo.co.kr/"><img src="../te_click.gif" width="80" height="30" border="0"></a></p>

 border
   boder : <선의 굵기에 관계한다>
표작업시에 border="
1" 등으로 표시가 되어 숫자의 내용으로 굵기를 조절하며, '이미지'에서 테두리 선을 보이게 하는 속성도 가지고 있다(단 '넷스케이프'에서 보이며, 익스플로러 3.0 이하에서는 안됨). 또한 하이퍼링크된 '그림이미지'에 나타나는 테두리 선을 없애는데 border="0" 속성을 이용하여 없앨 수 있다.
 

border="1" 일때   namo로 이동함.

border="2" 인 경우   namo로 이동함.


이미지에 설명문 넣기 : <img src=···>에 alt="namo로 이동함"을 삽입
하이퍼 

   하이퍼 링크의 색상 : <임의로 색상을 바꾸려면...>

 LINK  : 방문하지 않은 곳
 ALINK :클릭시 나타나는 색
 VLINK :방문 했던 곳

<body link = 색상명&코드>    - Link
<body alink = 색상명&코드>   - Activated
<body vlink = 색상명&코드>   - Visited


예) : <BODY LINK = #EEEEF3 ALINK = #FF0000 VLINK= #D7D7DC>
 

하이퍼링크의 속성은 <body>태그에서 지정되며, 중간에서 임의로 바꿀 수가 없다.
대상화면
   'TARGET' : < 링크시 대상화면을 열어, 표시할 장소 >
웹 문서를 몇 개의 프레임으로 나눴을 경우
(한 화면을 상하 또는 좌우로 나누어 구분해 놓는 것) 링크되는 파일을 열 대상화면의 지정된 이름을 말합니다.
  표

   '표' 만들기 : (이해) : <table>태그로 시작 되어 </table>까지

 '웹' 표시화면

HTML 입력내용

태그 관계

 

<p><table border="1">
    <td>&nbsp;</p>
    </td>
</table>

선굵기"1"의 기본표
<table>
<
td></td>
</table>

 

 

<table border="1">
    <
tr>
        <
td width="100">
            <p>&nbsp;</p>
        <
/td>
    <
/tr>
    <
tr>
        <
td width="100">
            <p>&nbsp;</p>
        <
/td>
    <
/tr>
</table>

폭이 "100"인 셀
위 아래
두줄인 표

<table>
<
tr>
<
td></td>
<
/tr>
<
tr>
<
td></td>
<
/tr>
</table>

 

 

 

 

<table border="1">
    <
tr>
        <
td width="30">
            <p>&nbsp;</p>
        <
/td>
        <
td width="70">
            <p>&nbsp;</p>
        <
/td>
    <
/tr>
    <
tr>
        <
td width="30">
            <p>&nbsp;</p>
        <
/td>
        <
td width="70">
            <p>&nbsp;</p>
        <
/td>
    <
/tr>
</table>

위 아래 두줄
폭이 다른
두개
'30'과 '70'으로
나눈 상태.

<table>
<
tr>
<
td></td>
<
td></td>
<
/tr>
<
tr>
<
td></td>
<
td></td>
<
/tr>
</table>


각 셀의 높이를 원하는 크기로 지정하려면 hight="?"를, 색을 넣으려면 bgcolor="색상명&코드"를, 셀안의 내용 삽입은 <td>내용 삽입되는 곳</td>이 됩니다. 전체 예)【<td width="100" hight=" ? " bgcolog="색상명&코드">셀안의 내용<td>】이 됩니다. 또한 셀안의 내용을 정렬하려면 align=left·right·center 중에 하나를 선택하여 넣으시면 됩니다.

'표 태그' 내용 이제 이해 되죠. (셀 나눔 태그<td></td>가 줄 나눔 태그<tr></tr>에서 벗어나거나 걸쳐서 사용되지 못하는 것만 주의하면 되죠)
 

즉 : <tr> "몇 개가 되든<td>***</td>는 이 안에서 놀아야 되죠."</tr>
<table>
"<tr>***</tr>도 같죠 <tr>***</tr>는 이 안에서 놀아야죠. " </table>

프레임
  프레임 문서 : 프레임 셋 태그 - <FRAMESET>   </FRAMESET>
프레임 문서는 웹 화면에 표시되는 한 화면을 둘 또는 그이상으로 나누어 놓은 것을 말하는데, 기본적으로 "화면에 나타날 프레임 형식을 지정하는 문서"와 "각 프레임 안에 표시되는 실제 문서"의 두가지로 구분되며, 기본적으로 필요한 '실제문서'의 수는 프레임으로 화면을 나눈 수 만큼이 됩니다.

 

<frameset cols="   ">또는
<frameset rows="  ">

COLS="   "는 화면을 세로로 나눔
ROWS="  "는 화면을
가로로 나눔
 "  "는 화면을 나누는 할당 정보가 들어감.

 

<frame src="  ">
<frame src="  ">
<frame src="  ">

SRC="  "는 나눈 각 프레임에 들어갈 문서의 주소(url)를 "  "안에 지정하며, <frame src="  ">의 수는 나눈 프레임 수만큼 지정해 주어야 한다.

</frameset>

프레임셋 종료 태그

프레임 나누기
   
프레임 나누기 : <픽셀단위 : % 비율>

픽셀로 구분('숫자' 기입)

<frameset cols="20,*">또는
<frameset rows="20,30,*">

a

b


<frameset cols="20,*">

화면을 세로(좌우 두개)로 나누며
20픽셀의
a와, 나머지전부(*)를 b화면으로 함
 

a

b

c


<frameset rows="20,30,*">

화면을 가로방향으로 세개로 나누며
20픽셀의
a와, 30픽셀의 b와 나머지전부(*)를 c화면으로 함.
 

비율로 구분('숫자%' 기입)

<frameset cols="30%,70%">또는
<frameset rows="20%,30%,50%">

a

b


<frameset cols="30%,70%">

화면을 세로(좌우 두개)로 나누며,전체화면의
30%를
a로, 나머지 70%를 b화면으로 함
 

a : 20%

b : 30%

c : 50%


<frameset rows="20%,30%,50%">

화면을 가로방향으로 세개로 나누며
20%의
a와, 30%의 b와 나머지 50%를 c화면으로 함.
 


"  ,  " 안의 내용에 따라 프레임이 나누어지며, 프레임 수도 정해진다.
 따라 프레임
   정해진 프레임 'a b c ...'는 : <frame src="  ">로 내용을 지정을 해준다.
   
<frame src="표시될 화일명&url" name="프레임의 이름을 정함">

a : 40%

b : 60%

<html>
<head><title>프레임연습</title></head>
<frameset
rows="40%,60%">
<frame
src="sample1.htm" name="main">
<frame
src="sample2.htm" name="view">
</frameset>
</html>

웹 화면에는 위의 40%의 'main'프레임 면에는 'sample1.htm'문서가 표시되며, 아래쪽에 60%를 차지하는 'view'프레임 면에는 'sample2.htm'문서가 차지하게 됩니다.
여기서
name="명(名)"의「명(名)」이 다른 프레임에서 인식할 수 있는 '프레임의 이름'이 됩니다. 곧 문서나 다른 페이지(url)등을 링크할 경우 불러올 문서를 열어 보여줄 Target 프레임(Target="명(名)")이 됩니다.
 
그외 속성 :
NORESIZE : 프레임 간의 경계선을 마우스로 끌어 이동시킬 수 없도록 고정.
SCROLLING : 스크롤바 표시 여부를 지정. 값은 'yes' · 'no' · 'auto'로 'auto'는 화면의 크기에 따라 알아서 나타나도록 지정함.
<noframe></noframe> : 프레임을 지원하지 않는 경우를 위해 안내문 삽입태그로 태그안의 내용은 프레임을 지원하는 부라우져에서는 나타나지 않는다.
 (가로·세로)
   프레임 복합 사용 : 같이 쓰기 : <가로나눔·세로나눔>

a

b

c

<html>
<head><title>복합프레임</title></head>
<frameset
cols="20%,*">
<frame
src="sample1.htm" name="main">
   <frameset
rows="30%,*">
   <frame
src="file1.htm" name="next">
   <frame
src="test3.htm" name="view">
   </frameset>
</frameset>
</html>

웹 화면에는 우선 좌측 20%로 지정한 'main'프레임 면에는 'sample1.htm'문서가 표시되며, 좌측 20%를 뺀 나머지 면에서, 위쪽의 30%를 'next'프레임이 차지하여 'file1.htm'문서가 표시되며, 나머지 부분이 'view'프레임이 되어 'test3.htm'문서가 표시되게 됩니다.

맨위 top (키보드'Home'키'page up'키) top

hk & go home_main frame

이동*안내:[담소방'M]모음:다음▶눈에 익히기


 

나누며 함께하는 buljahome Back◁이전