|
|
현재내용.☞
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> </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> 느지막에 공부를 하려니<br> 꽤나
더디고 힘드는군요.</p>
<p> 그러나 배운다는 것은 좋은것이여!</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> </p>
</td>
<td
width="212">
<p> </p>
</td>
<td
width="212">
<p> </p>
</td>
</tr>
<tr>
<td
width="212">
<p> </p>
</td>
<td
width="212">
<p> </p>
</td>
<td
width="212">
<p> </p>
</td>
</tr>
<tr>
<td
width="212">
<p> </p>
</td>
<td
width="212">
<p> </p>
</td>
<td
width="212">
<p> </p>
</td>
</tr>
</table>
<p> </p>
</body>
</html>
|
html '표삽입'
|
| <body>와</body>사이에 삽입
|
| <table border="1">부터
'표'의 내용이 삽입
|
| '표' 내용
셀 폭 : 212 픽셀
높이 지정 : 없음
셀 : 3 (칸)× 3
(줄)
|
| 각줄 세칸(셀): 표시
<tr>
<td
width="212">
<p> </p>
</td>
<td
width="212">
<p> </p>
</td>
<td
width="212">
<p> </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> </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> </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
|
