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

배우고 때때로 익히면

이또한 기쁘지 않은가

 

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

안녕하세요!
홈 만드는 작업이 솔직히 힘드는 군요. 몰라서도 힘이들지만 시간이 만만치 않게 투자되어야 하더군요. 그런데 배워가며 하려니 시간 까먹는 것이 정말 시간문제더군요. 여하간 거북이 처럼 왔습니다. 그리고 앞으로도 계속 가보렵니다. 다만, 혹시나 방문하셨다가 아무런 도움이 안돼 시간만 축낸 결과가 있을까 걱정되는군요. 2002.1.30.


   인터넷 문서 ; html 문서 : 기본익히기
 

초보의 노트정리(홈페이지&문서작업/관련)
HTML 기본내용 알아보기

HTML : 'html'이란 'html 문서'를 작성하는 '언어'이다.
'html 문서'란 '하이퍼텍스트 기능'을 가진문서 즉 인터넷(웹브라우저)에서 사용되는 문서의 형식으로, 문서의 내용 중간 중간(글자나 이미지)이 다른 문서와 링크로 연결이 되어있어 그 연결을 따라가면 다른 문서로 직접 이동을 하며, 이렇게 관계된 내용을 따라 직접 이동하면서 내용을 확인할 수 있는 문서를 말한다.
html 기초 : 'html'문서는 '태그(Tag)'라는 일종의 명령어와 함께 이루어졌다.
'태그(Tag)'는 보통 "< >"로 쌓여있는 모양이며,  ①「<태그>텍스트문장</태그>」인 시작태그와 종료태그 형식.  ②「<태그 속성=인자>텍스트문장</태그>」의 형식.  ③ 단독「<태그>」의 형식을 이루고 있다.

기본 틀 : HTML 문서의 기본 모양
 

 <HTML>
      <HEAD>
        <TITLE>문서의 제목</TITLE>
              'meta Tag', 'Script' 내용
      </HEAD>
    <BODY>
      본문의 내용이 들어있는 곳으로
      '표','이미지','텍스트'등의 내용
      '스크립트'내용도 들어감.
    </BODY>

·HTML 문서임을 표시.
·웹상에서의 문서의 소개 부분.
·문서의 제목 표시.
 문서소개의 meta Tag와 JavaScript 내용.
·문서의 소개 부분 끝남.
·화면에 나타나는 문서의 시작표시.
 
        "문서의 내용 작성 부분"
 
·화면에 나타나는 문서의 끝남을 표시.

 </HTML>

·HTML 문서인 현재 페이지의 끝임을 표시.

 

다음의 작은 HTML문서의 예를 들여다 보며 이해하여 봅시다.




기본 주요 사항

* HTML은 대,소문자를 구분하지 않습니다. 즉 <HTML>이나 <html> 또는 <Html>모두 같이 취급함.

* 각각의 Web 브라우저들에서 모든 HTML tag들이 다 지원되지는 않습니다. 해당 브라우저가 특정 tag를 지원하지 않으면, 그 tag의 내용은 무시되어 화면에 표시되지 않습니다. ☞'나모 웹에디터'로 작업시는 '미리보기'화면에서 '나도 모르는 tag'라고 그나마 친철히 ? 표시를 해 주네요.

* 태그는 왼쪽 태그( "<" :angle bracket )와 오른쪽 태그( ">" :angular bracket )로 이루어 지며, 시작'태그'인 "<*>"와 끝막음 '태그'인 "</*>"로 주로 쌍으로 이루어 집니다.
 


   '태그(Tag)'에 대해

 

 

 ;
 
HTML 내용 보기
 
쉽게보기 > 태그 내용 ; 태그속성 ; 태그인자 ; 스페이스 ; 본문 내용

- HTML 문서 -

- 비  고 -

<html>

*>html문서임을 표시하는 '시작 태그'입니다.

<head>

*>본문 내용에는 표시되지 않는 문서의 헤드부의 '시작태그'입니다.

<title>HTML 쉽게 이해하기</title>

*>웹상에서 문서제목으로 표시되거나 검색엔진의 주요 검색요인이되는 '타이틀 태그'입니다. 한번만 쓰네요.

<meta name="generator" content="Namo WebEditor v4.0">

*>자신의 웹페이지에 대한 정보를 브라우저에 제공하기 위한  태그로 키워드와 제작자에 대한 사항 및 그외 정보를 등을 지정하며, 메타태그는 여러번 사용이 가능합니다.

<meta name="author" content="만든이">

<meta name="Keyword" content="개인홈; HTML; 음악; 등등">으로 표시.

</head>

*>헤드부의 '종료태그'입니다. 태그 앞부분에 "/"표시가 붙는게 시작태그와 다르죠. 여기까지의 내용은 화면에 나타나지 않습니다.  위 예문

<body background="../image/back_sky.gif">

*>화면에 표시되는 본 문서의 시작임를 표시하는 <body> 시작태그입니다. <background=" ">는 문서의 바탕화면의 색이나 이미지를 선택하는 태그입니다.

<h2>HTML 이란 ?</h2

*>문서의 제목 표시 부분으로, "<h2> </h2>"는 가운데 글자의 크기를 결정하는 태그로 화면에 보여지는 제목 글자의 크기를 결정합니다.
☞ 참고: 문장의 글자크기   ☞ 위 예문

<table border="1">

*>"table"은 '표' 시작 태그 내용이며, border="1"은 표의 선굵기로, "0"으로 지정하면 표가 보이지 않습니다(화면에 안 나타남). 지금 보는 화면 내용도 표작업 내용이나, border="0"으로 해서 표 선이 안보입니다.

    <tr>

*>몇개의 줄로 나누어지는 표의 맨위 첫줄의 시작태그<tr>입니다. (줄나눔 태그)   위 예문보기

        <td width="33">

*>첫줄을 몇 개로 나눌때 첫 셀의 시작태그와 셀의 폭지정(width="33") 및 셀나눔 시작태그<td>입니다.

            <p align="center"><font color="red">☞</font></p>

*>나눈 셀안의 내용 지정으로, <p align="center">는 위치를 '중앙'에 지정. <font color="red">☞</font>는 삽입내용"☞"의 색을 지정한 것이며, </p>는 '문단' 종료태그입니다. 문단 시작태그는 <p>입니다.

        </td>

*>첫 번째 셀의 종료 태그</td>입니다.

        <td width="345">

*>두번째 셀의 셀나눔 시작과 폭 지정(width="345")입니다.

            <p><font color="blue">기본&nbsp;주요 사항</font></p>

*>두 번째 셀안의 내용표시. "&nbsp;"는 한칸 뛰운다는 표시입니다.   위 예문보기
(참고 : 위 표는 전체를 두줄로 나누고, 윗줄은 3등분하여 3개의 셀로, 아래줄은 2등분하여 2개의 셀로 만든 상태입니다)

        </td>

*>두번째 셀의 종료태그입니다. 첫번째·두번째의 '태그'구분이 없고, 같은 태그로 순서(대)로 구분이 됩니다. 즉 <td>첫번째</td><td>두번째</td><td>세 번째</td>···의 방법으로.

        <td width="345">
            <p>&nbsp;</p>

*>세번째로 구분된 셀의 시작 및 폭 지정내용.
   셀 안에 보이는 내용이 없죠 ! 한칸만 뛰웠을 뿐이라...

        </td>

*>세 번째 셀의 종료태그입니다.  위 예문
(참고:이상과 같이 '폭'은 지정을 하는데 '높이'를 지정하는 것은 없습니다-기본 높이가 되고, 높이지정은 뒤에 hight="?"를 삽입하면 됩니다.)

    </tr>

*>줄나눔 태그의 종료태그입니다. 첫번째 줄나눔 종료 태그.

    <tr>

*>줄나눔 태그의 시작태그입니다. 두번째 줄나눔을 다시 시작한다는 태그입니다.    위 예문

        <td width="33">

*>다시 첫번째 셀의 셀나눔 시작과 폭 지정(width="33")입니다.

            <p align="center">내<br><br>용</p>

*>셀안의 내용으로, align="center"은 중앙에 위치함을 지정하며. <br><br>는 문단이 아닌 줄만 바꾸는 태그로 두번 바꾼 결과죠. <p></p>가 문단이 바뀌는 문단 시작·종료 태그입니다.

        </td>
        <td width="694" colspan="2">

*>두 번째줄 첫 번째 셀의 종료 태그입니다.
*>두번째 셀의 셀나눔 시작과 크기지정(width="694")입니다.

            <p>* HTML은 대,소문자를 구분하지 않습니다. 즉 &lt;HTML&gt;이나  &lt;html&gt;
                        또는  
      &lt;Html&gt;모두 같이 취급함.</P>
            <p>* 각각의 Web ~이하 생략.</p>

*>두번째 셀안의 삽입내용입니다.

  "&lt;"는 "<"표시를, "&gt;"는 ">"를 표시함.
  문단 바꿈 태그인 <p></p>의 모양이죠.
  옆의 줄바꿈 태그<br> 상태와 다르게 나타나죠.
  위 예문보기

        </td>

*>두번째 셀의 종료태그입니다.

    </tr>

*>줄나눔 태그의 종료태그입니다. 표의 두번째 줄의 종료 태그입니다.

</table>

*>'표' 작업의 마침(종료) 태그입니다.        위 예문
그러므로 표 작업은 :<
표시작태그:table>→<줄나눔태그:tr>→몇칸으로 나눈다면→<셀나눔태그:td>와<셀종료태그:/td>로 나눌 수만큼 반복되며→<줄종료태그:/tr>→다음 줄을 만들려면「<줄나눔태그>위와 같은 방법으로 셀나눈 후<줄종료태그>」가 줄수만큼 반복된 후→<표종료태그:/table>의 순으로 작업이 된다.

<p>&nbsp;</p>

*>'표' 밖의 일반적 텍스트작업 문단 태그입니다.

<p>'태그(Tag)'에 대해<a href="Tag_file.htm"><img src="image/fm_conf.gif" width="40" height="40" alt="Tag화일로"></a></p>

*> 위 예문보기
<a href="불러올 화일의 이름"></a>는 링크태그.
<img src="이미지경로와 관련사항">는 이미지 삽입태그
 alt="Tag화일로"는 이미지에 마우스를 올려놓으면 나타나는 "설명을 삽입"태그 입니다.

</body>

*><body>부의 종료태그</body>로 화면에 표시되는 부분의 끝을 나타냅니다. 더 이상 없죠?     위 예문

</html>

>html문서의 작업마침. 문서의 '끝'을 표시하는 html '종료태그'입니다.

 

 

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

hk & go home_main frame

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


 

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