구글와이드(336x280)_상단 2개


HTML(태그) 기초 태그: html dhtml

(참고: html이 무엇인지 모르는 초보자 분들이 아래 내용을 따라해 보시려면....[메모장]으로 연습해 보시면 됩니다.
그 메모장의 위치는.....맨 아래 좌측의 [시작]-->모든 프로그램--->보조 프로그램 --->메모장....
그 메모장을 클릭하여 띄우고, 아래 소개되는 html 내용을 기록한 다음.... 다른 이름으로 저장하기를 클릭하여.....
저장하고자 하는 파일이름은 영문소문자로 자신이 만들어 주되, 확장자 이름을 반드시 html로 하고, 파일이름을 [모든 파일] 부분에 체크한 다음, 자신이 찾기 쉬운 디렉터리 (예컨데, 바탕화면 등)에 저장한 다음,....그것을 찾아 다시 클릭하면....
자신이 연습한 내용이 실제 인터넷 웹상에서 어떤 모습으로 표현되는지를 볼 수 있습니다.
HTML이란.....웹페이지를 만들어 인터넷에 실제 띄우기 위한 웹페이지 제작도구입니다.
물론 홈페이지 등을 만들기 위해서.....모두가 HTML을 배울 필요는 없습니다.
왜냐면.....요즘은 마이크로소프트의 프런트 페이지나 드림위버 등으로 제작할 수 있기 때문입니다.)

Dave Raggett Getting started with HTML

Dave Raggett, revised 24 May 2005.

title(제목) 줄 만들기

<title>나의 첫번째 HTML 문서</title>
<h1>중요제목 굵은 글씨로 만들기</h1>
<h2>부제목 약간 굵은 글씨로 쓰기</h2>
<p>문단 바꾸기</p>

<p>두번째 문단 바꾸기</p>

강조 문장 만들기

이것은 정말 <em>흥미있는</em> 주제다. 
이미지 삽입하기
<img src="peter.jpg(자신이 올리고자 하는 이미지파일 이름)" width(이미지의 가로폭)="200" height(높이)="150">
<img src="peter.jpg" width="200" height="150" alt="이미지 파일에 대한 간략한 설명 첨부">
<img src="peter.jpg" width="200" height="150" alt="이미지파일에 대한 간략 설명" longdesc="AAAA.html"(=이미지파일에 대한 긴 설명문이 있는 별도 파일이 있는 경우, 그것을 첨부할 수 있다)>

다른 웹페이지의 링크를 걸기

<a href="링크하고자 하는 웹페이지나 파일의 주소(예: http://www.empas.com)">링크시키고자 하는 페이지에 대한 설명(예: 엠파스 바로가기)</a>.
 
(회사의) 로고 이미지를 클릭하면, 그 회사의 홈페이지로 연결되도록 할 수 있는 방법: 
(엠파스 첫화면에 있는 엠파스 로고를 이용하여, 설명하면 아래와 같이 된다.)
<a href="http://www.empas.com/"><img src="top_logo.gif" alt="home page"></a>
 

목록 만들기 방법 3가지

1) 순서없는 목록 만들기
<ul>
  <li>첫번째 항목</li>

  <li>두번째 항목</li>

  <li>세번째 항목</li>
</ul>
 
2)순서가 있는 목록 만들기
<ol>
  <li>첫번째 항목</li>

  <li>두번째 항목</li>

  <li>세번째 항목</li>
</ol>
3) 용어정의 목록 만들기
<dl>
<dt>첫번째 용어</dt>
<dd>그에 대한 정의</dd>

<dt>두번째 용어</dt>
<dd>그에 대한 정의</dd>

<dt>세번째 용어</dt>
<dd>그에 대한 정의</dd>
</dl>
서로 다른 목록태그들(예: 순서 목록과 비순서 목록)은 그 안에 다른 종류의 목록태그들을 포함할 수도 있다.
<ol>
  <li>첫번째 항목</li>

  <li>
    두번째 항목
    <ul>
      <li>첫번째 하부 항목</li>
      <li>두번째 하부 항목</li>
    </ul>
  </li>

  <li>세번째 항목</li>
</ol>

HTML 은 head 와 body 로 구성되어 있다

If you use your web browser's view source feature (see the View or File menus) you can see the structure of HTML pages. The document generally starts with a declaration of which version of HTML has been used, and is then followed by an <html> tag followed by <head> and at the very end by </html>. The <html> ... </html> acts like a container for the document. The <head> ... </head> contains the title, and information on style sheets and scripts, while the <body> ... </body> contains the markup with the visible content. Here is a template you can copy and paste into your text editor for creating your own pages:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title> replace with your document's title </title>
</head>
<body>

replace with your document's content

</body>
</html>

Tidying up your markup

A convenient way to automatically fix markup errors is to use HTML Tidy which also tidies the markup making it easier to read and easier to edit. I recommend you regularly run Tidy over any markup you are editing. Tidy is very effective at cleaning up markup created by authoring tools with sloppy habits. Tidy is available for a wide range of operating systems from the TidyLib Sourceforge site, and has also been integrated into a variety of HTML editing tools.

Getting Further Information

If you are ready to learn more, I have prepared some accompanying material on advanced HTML and adding a touch of style.
W3C's Recommendation for HTML 4.0 is the authoritative specification for HTML. However, it is a technical specification. For a less technical source of information you may want to purchase one of the many books on HTML, for example "Raggett on HTML 4", published 1998 by Addison Wesley. XHTML 1.0 is now a W3C Recommendation.
Best of luck and get writing!

null



바보들의 영문법 카페(클릭!!)

오늘의 메모....

시사평론-정론직필 다음 카페
http://cafe.daum.net/sisa-1

바보들의 영문법 다음 카페
http://cafe.daum.net/babo-edu/

티스토리 내 블로그
http://earthly.tistory.com/

내 블로그에 있는 모든 글들과 자료에 대한 펌과 링크는 무제한 허용됩니다.
(단, 내 블로그에 덧글쓰기가 차단된 자들에게는 펌, 트랙백, 핑백 등이 일체 허용되지 않음.)

그리고 내 블로그 최근글 목록을 제목별로 보시려면....
바로 아래에 있는 이전글 목록의 최근달을 클릭하시면 됩니다.
그러면 제목을 보고 편하게 글을 골라 보실 수 있습니다.

그리고 내 블로그내 글을 검색하시려면 아래 검색버튼을 이용하시면 됩니다.


가가챗창

flag_Visitors

free counters