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

배우고 때때로 익히면

이또한 기쁘지 않은가

 

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

  한 가지씩 (자꾸 눈에 익히기)

참고:나모 웹에디터4.0  

  html 소스 (HTML 문서의 기본 알아보기)

백지상태의 html 내용

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<html>

<head>

<title>제목부분</title>

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

<meta name="author" content="">

</head>

<body>

<p>&nbsp;</p>

</body>

</html>


← 문서의 시작을 표시

← 머리글임을 표시(문서의 정보를 포함하는 부분)

← "제목부분"은 화면의 맨위에 표시됨. <title>,<meta>등의 태그를 사용해서 작성 태그 좀더 알아보기

← 머리글 끝남 표시

← 문서의 본문내용의 시작표시

← 내용을 작성하는부분으로 각종태그들이 사용되어진다

← 본문의 내용작성의 끝을 표시

←html문서의 끝을 표시

   다음의 내용을 삽입한 경우

         내 용  비 교

배워 봅시다

 느지막에 공부를 하려니
 꽤나 더디고 힘드는군요.

 그러나 배운다는 것은 좋은것이여!

  빈 화면에 좌측의 내용만을

  작성하였을 경우 입니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<html>

<head>

<title>제목없음</title>

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

<meta name="author" content="">

</head>

<body>

<h2>배워 봅시다.</h2>

<p>&nbsp;느지막에 공부를 하려니<br>&nbsp;꽤나 더디고 힘드는군요.</p>

<p>&nbsp;그러나 배운다는 것은 좋은것이여!</p>

</body>

</html>


변화가 없는 부분
처음부터

</head>

<body> 이전은 변화가 없음.
 

내용 삽입에 의해
새로이 삽입된 html 소스내용

<body> 이후부터

<p> ~

</body> 까지 사이의 내용

 

   <META> 태그

<META> 태그는 <HEAD>와 </HEAD>태그 사이에 사용할 수 있으며, 웹페이지에 관한 정보를 브라우저에 제공하기 위한  태그로 키워드와 저작자,  날짜 등을 지정할 때나,브라우저가 지정된 웹 페이지를 자동 로딩하도록 하기 위한 것입니다

   <META> 태그 기본 구조

<META  NAME=" "  HTTP-EQUIV=" "   CONTENT=" "

  ●  NAME="name" : 몇 개의 메타 정보의 이름을 정할 수 있으며 지정하지 않으면 HTTP-EQUIV와 같은 기능을 합니다.

  ●  HTTP-EQUIV="fieldname" : HTTP로 정보를 보낼 항목명을 설정합니다.

  ● CONTENT="value" : 항목명으로 설정된 값을 입력합니다.

 <META> 태그의 속성과 쓰임새

  ● <META HTTP-EQUIV="description" CONTENT=" ">
홈페이지에 대한 설명을 나타내게 합니다. keyword와 함께 검색엔진으로 검색하였을 때 홈페이지에 대한 소개 부분에 나타날 설명을 적습니다.


  ● <META HTTP-EQUIV="Keyword" CONTENT=" ">
검색 엔진에게 제공할 자신의 홈페이지 키워드를 나타냅니다.


  ● <META  HTTP-EQUIV="content-type" CONTENT="text/html; charset=euc-kr">
한글 코드를 지정하여 브라우저상에서 한글이 깨져 보이는 현상을 막을 수 있습니다. 이외의 ks_c_5601-1987, iso-2022-kr 등의 한글 코드를 이용할 수 있습니다.


  ●  <META HTTP-EQUIV="Reply-To" CONTENT="인터넷주소">
자신의 이름과 E-Mail 주소를 나타냅니다.


  ●  <META HTTP-EQUIV="REFRESH" CONTENT="30">
HTTP-EQUIV="REFRESH" 속성은 일정한 시간이 지나면 자동으로 페이지를 갱신하는 기능을 합니다. 이 예에서는 현재의 페이지를 30초마다 갱신합니다.


  ●  <META HTTP-EQUIV="REFRESH" CONTENT="5; FIRST.HTML">
5초가 지나면 FIRST.HTML 을 자동으로 로드 합니다.


  ●  <META HTTP-EQUIV="Expires" CONTENT="Mon, 06 Jan 1990 00:00:01 GMT"> 그리니치 표준시간으로 1990년 1월 6일 월요일 기준으로 유효기간이 끝남을 나타냅니다
 

   애플릿 삽입한 경우

         삽입 애플렛

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<html>
<head>
<title>제목없음</title>
<meta name="generator" content="Namo WebEditor v4.0">
<meta name="author" content="">
</head>

<body>
<p><applet code="Lake.class" name="Lake Applet" alt="물결에 비친 모습" width="200" height="150">
<param name="image" value="sky200-98.jpg">
</applet></p>
</body>
</html>

 

- 내 용 -

이미지 : sky200-98.jpg

size : 200 × 98 (픽셀)

    삽입한 경우

 

 

 

 

 

 

 

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<title>제목없음</title>
<meta
name="generator" content="Namo WebEditor v4.0">
<meta
name="author" content="">
</head>
<body>
<table
border="1">
    <tr>
        <td
width="212">
            <p>
&nbsp;</p>
        </td>
        <td
width="212">
            <p>
&nbsp;</p>
        </td>
        <td
width="212">
            <p>
&nbsp;</p>
        </td>
    </tr>
    <tr>
        <td
width="212">
            <p>
&nbsp;</p>
        </td>
        <td
width="212">
            <p>
&nbsp;</p>
        </td>
        <td
width="212">
            <p>
&nbsp;</p>
        </td>
    </tr>
    <tr>
        <td
width="212">
            <p>
&nbsp;</p>
        </td>
        <td
width="212">
            <p>
&nbsp;</p>
        </td>
        <td
width="212">
            <p>
&nbsp;</p>
        </td>
    </tr>
</table>
<p>
&nbsp;</p>
</body>
</html>

html '표삽입'

<body>와</body>사이에 삽입

<table border="1">부터 '표'의 내용이 삽입

'표' 내용

셀 폭 : 212 픽셀
높이 지정 : 없음
셀 : 3 (칸)× 3 (줄)

각줄 세칸(셀): 표시
   <tr>
        <td
width="212">
            <p>
&nbsp;</p>
        </td>
        <td
width="212">
            <p>
&nbsp;</p>
        </td>
        <td
width="212">
            <p>
&nbsp;</p>
        </td>
    </tr>

</table> 까지

문서 종료부분"</body></html>"

   표 안에 내용이 들어간 경우

표 문서

1

2

표문서의 html 내용 눈에 익히기
예제입니다.

 

빈 문서에 좌측의 내용이
삽입된경우

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<title>제목없음</title>
<meta name="generator" content="Namo WebEditor v4.0">
<meta name="author" content="">
</head>
<body>
<p>&nbsp;</p>
<table border="1">
    <tr>
        <td width="146">
            <p align="center">표 문서</p>
        </td>
        <td width="146">
            <p align="center">1</p>
        </td>
        <td width="146">
            <p align="center">2</p>
        </td>
    </tr>
    <tr>
        <td width="450" height="31" colspan="3">
            <p align="center">표문서의 html 내용 눈에 익히기<br>예제입니다.</p>
        </td>
    </tr>
    <tr>
        <td width="450" height="7" colspan="3">
            <p>&nbsp;</p>
        </td>
    </tr>
</table>
</body>
</html>


title 및 head 부분

align="center"
가운데 정렬


 

  내 홈페이지 살리기(알리기)

 ◐  검색순위에 영향을 미치는 기본 요소  ◑
제  목
검색엔진이 그 페이지의 '제목'이 그 페이지에 담겨있는 내용을 나타낼 것 이라고 판단할 것이기 때문에 <title> 태그 안에 단어를 찾을 것 이므로, 반드시 <title> 태그를 작성합시다. 꼭「<title>*****</title>」 태그 사이(***)를 untitled(제목없음 표시로 됨)로 비워두지 말고 반드시 작성하도록 하자.
☞ 위치 및 강조
홈 페이지 내용을 알릴 수 있는 '중요 단어'가 'headline 태그'의 큰 글씨로 표시되고, 글 전체의 앞쪽에 있어야 검색엔진이 찾기가 빠를 것이다. 검색엔진들이 페이지 전체를 검색하지 않고 상위 200~300 글자까지만 검색을 한다고 합니다. 그러므로 중요한 단어를 페이지 내용의 제목으로 하고, 또한 강조를 해보자.
☞ 반복
반복되는 단어가 나타나면 검색엔진은 당연히 그 단어가 중요하다고 인식할 것입니다.
메타태그 <META>내용
'메타태그'는 여러 검색 엔진들에서 써칭에 많은 영향을 준다고 합니다. 눈에 보이지는 않지만, 그러니 그냥 두는 것보다는 작성하는 것이 그래도 조금이라도 낳겠죠.
.
예) <META HTTP-EQUIV="Keyword" CONTENT="검색 엔진에게 제공할 홈페이지의 키워드를 적어 넣는다">
예) <META HTTP-EQUIV="description" CONTENT="홈페이지에 대한 간단한설명을 적는다">
예) <META name="Keyword" CONTENT="검색 엔진에게 제공할 키워드를 입력">
     ---------------------
*<meta http-equiv="Content-Type" content="text/html">
*<meta name="keywords" content="home page; 개인 홈페이지; 홈페이지 만들기; 아이콘; 이미지; 꽃; 음악; music">
*<meta name="description" content="이미지와 음악이 있는 홈페이지. 업데이트 자주 합니다.">
*<meta http-equiv="keywords" content="korea; 문학; 한국문화; ">
*<meta name="keywords" content="MBC; 가요; 폭포; 여행; 관광; 등산; 문화재; 역사; 축제; 피서지; 만화; 애니메이션; 멀티미디어; 호수; 산; 자연; 생활; 환경; 주택; 주말여행; 서울근교; 유원지">
이렇게하면 되겠죠. ?
☞ 키워드
키워드의 선정과 배열 및 빈도수가 많은 영향을 끼친다고 합니다. 키워드의 선정요령에 대해서도 공부를 해야할 것 같군요.
☞ 링크
외부에서 자기 홈페이지로 많은 링크를 하고 있을수록, 검색 엔진들은 양질의 정보가 있다고 판단하여 높은 점수를 부여한다는 것입니다. 그러므로 많은 링크를 확보하려면 홈페이지의 내용도 충실해야 겠지요.
 

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

hk & go home_main frame

이동♧안내:[담소방main]: 모음◁페이지로..


 

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