'.NET프로그래밍/HTML 4.0 / XHTML1.0' 카테고리의 글 목록

문서형 선언(DOCTYPE)과 문서형 정의(DTD)

.NET프로그래밍/HTML 4.0 / XHTML1.0 2011. 2. 16. 15:32 |

문서 형식 선언(DOCTYPE)

HTML 문서는 문서 형식 선언 (비공식적으로, "doctype")으로 시작해야 한다. 브라우저에서 doctype의 기능은 렌더링 모드를 지시하는 것이며, 부분적으로는 쿼크 모드를 피하기 위한 목적도 있다.

doctype의 원래의 목적은 문서 형식 정의 (DTD)에 기반한 SGML 도구를 통하여 HTML 문서의 파싱과 유효 여부 확인을 가능하게 하려는 것이었다. DOCTYPE에 대한 DTD는 DTD에 순응하는 문서를 가진 허용 또는 금지된 내용을 지정하고 기계가 읽을 수 있는 문법을 포함하도록 지시한다. 반면 브라우저는 HTML을 SGML의 애플리케이션으로 수행하지 않으며, 결과적으로 DTD를 읽지 않는다. HTML 5는 기술적인 제한으로 인해 DTD를 정의하지 않는다. 그래서 HTML5에서 doctype 선언 <!doctype html>는 DTD를 참조하지 않는다.

HTML 4 doctype의 예제는 다음과 같다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

이런 선언은 엄격한 HTML 4.01을 만들기 위해 DTD를 참조한다. 이것은 선언적인 요소인 font 같은 요소는 포함하지 않으며, CSS나 span, div 요소는 유지한다. SGML 기반의 유효 확인자(validator)들은 문서를 적절히 해석하거나, 유효 여부 확인을 실행하기 위해 DTD를 읽는다.

최근의 브라우저에서 이 doctype은 쿼크 모드에 반대되는 표준 모드를 활성화한다.

게다가 HTML 4.01은 임시적이고 프레임 단위의 DTD를 제공한다.

출처 : 위키백과(http://ko.wikipedia.org/wiki/HTML#.EB.AC.B8.EC.84.9C_.ED.98.95.EC.8B.9D_.EC.84.A0.EC.96.B8)

'.NET프로그래밍 > HTML 4.0 / XHTML1.0' 카테고리의 다른 글

HTML4.0 / XHTML1.0 - PPT (0)	2009.07.25
25. HTML 태그 정리 (0)	2009.07.24
24. 메타태그 (0)	2009.07.24
Form (0)	2009.07.24
22. I프레임(인라인 프레임) (0)	2009.07.24

Posted by holland14

:

HTML4.0 / XHTML1.0 - PPT

.NET프로그래밍/HTML 4.0 / XHTML1.0 2009. 7. 25. 21:51 |

000[1].HTML20090720.ppt

- 출처 : http://www.dotnetkorea.com/Website/

'.NET프로그래밍 > HTML 4.0 / XHTML1.0' 카테고리의 다른 글

문서형 선언(DOCTYPE)과 문서형 정의(DTD) (0)	2011.02.16
25. HTML 태그 정리 (0)	2009.07.24
24. 메타태그 (0)	2009.07.24
Form (0)	2009.07.24
22. I프레임(인라인 프레임) (0)	2009.07.24

Posted by holland14

:

25. HTML 태그 정리

.NET프로그래밍/HTML 4.0 / XHTML1.0 2009. 7. 24. 21:54 |

<br /> : 줄바꿈

<p></p> : 문단(단락)구분. 2줄 바꿈

<h1></h1> <h6></h6> : 제목 크기

<a></a> : 링크

<address></address> : 주소. 이탤릭체

<b></b> : 볼드체

<blockquote></blockquote> : 한단계 들여쓰기

<center></center> : 가운데 정렬

<cite></cite> <code></code> <dfn></dfn> <var></var> : 인용구문

<div></div> <span><span> : 많이 쓰임

<dl></dl> <dt></dt> <dd></dd>: 용어 정의

<em></em> <strong></strong> : 강조

<form> <input /> <select> <optgroup> <option></option> </optgroup> </select> <textarea></textarea> </form> : '폼' 관련

<hr /> : 수평선

<i></i> <u></u> <s></s> <sub></sub> <sup></sup> <tt></tt> : 이텔릭체, 밑줄, 취소선, 아랫첨자, 윗첨자, 타자기체(정사각형크기글씨)

<ol> <li></li> </ol> <ul> <li></li> </ul> : 목록(리스트)

<iframe></iframe>

<img /> <map><area /></map> : 이미지맵

<pre></pre> <xmp></xmp>

<table></table> <tr></tr> <td></td> <caption></caption> <thead></thead> <tbody></tbody> <tfoot></tfoot> <th></th> : 테이블

<frameset></frameset> <frame></frame> <nobr></nobr>

</body>
</html>

'.NET프로그래밍 > HTML 4.0 / XHTML1.0' 카테고리의 다른 글

문서형 선언(DOCTYPE)과 문서형 정의(DTD) (0)	2011.02.16
HTML4.0 / XHTML1.0 - PPT (0)	2009.07.25
24. 메타태그 (0)	2009.07.24
Form (0)	2009.07.24
22. I프레임(인라인 프레임) (0)	2009.07.24

Posted by holland14

:

24. 메타태그

.NET프로그래밍/HTML 4.0 / XHTML1.0 2009. 7. 24. 21:53 |

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</body>
</html>

//
- <meta>태그를 활용하여 웹페이지 설명을 붙인다.
- <meta>태그는 <head> 태그 안에 들어옴. 검색에 노출이 잘 된다.
- <link rel="shortcut icon" href="http://www.naver.com/favicon.ico" />
--> 주소창에서 주소 앞에 조그만 아이콘보이게 할 때

< 실행결과 >

24.메타태그.htm

'.NET프로그래밍 > HTML 4.0 / XHTML1.0' 카테고리의 다른 글

HTML4.0 / XHTML1.0 - PPT (0)	2009.07.25
25. HTML 태그 정리 (0)	2009.07.24
Form (0)	2009.07.24
22. I프레임(인라인 프레임) (0)	2009.07.24
프레임 (0)	2009.07.23

Posted by holland14

:

Form

.NET프로그래밍/HTML 4.0 / XHTML1.0 2009. 7. 24. 10:57 |

====================================== Login.htm =============================================

<form
    id="Loginform"
    name="LoginForm"
    action="LoginProcess.aspx"
    method="post">

<pre>
아이디 : <input type="text" name="txtID" size="10"/> (텍스트박스)
이름: <input type="text" name="txtName" maxlength="3" value="홍길동" readonly="readonly"/> (텍스트필드)
암호 : <input type="password" name="txtPwd" /> (패스워드필드)
성별 : (라디오버튼:단일선택)
    남<input type="radio" name="optGender" checked="checked" /> 여<input type="radio" name="optGender"/>
취미 : (체크박스:다중선택)
    농구 <input type="checkbox" name="chkHobby" value="B"/>
    축구 <input type="checkbox" name="chkHobby" value="S" checked="checked" />
    배구 <input type="checkbox" name="chkHobby" value="V" disabled="disabled" checked="checked" />
직업 : (콤보박스/드롭다운리스트:다중/단일선택)
    <select name="lstJob" size="1">
       <optgroup label="기본">
        <option>회사원</option>
       </optgroup>
        <option>공무원</option>
    </select>
주소: (리스트박스:다중/단일선택)
    <select name="lstAddr" size="4" multiple="multiple">
    <option value="S">서울</option>
    <option value="K">경기</option>
    <option value="인천">인천</option>
    </select>
소개 :
<textarea cols="40" rows="5" name="txtIntro"></textarea> (멀티라인 텍스트박스)
사진업로드 : <input type="file" name="txtFile" /> (파일필드/파일업로드)
<input type="hidden" name="hdnSite" value="닷넷코리아"/> (히든필드)
<input type="submit" value="회원가입" /> <input type="reset" value="취소" />
<input type="button" value="일반버튼(JS에서사용)" />
<input type="image" src="./images/2.jpg" />
</pre>

</form>

<a href="LoginProcess.aspx?txtID=red&txtPwd=1234">
GET 방식으로 서버측으로 데이터 전송
</a>

//
- Login.htm --> 입력페이지
- form 태그가 없으면 실행되지 않음. HTML 레벨에서 눈에 보이지 않음.
- form 태그는 크게 3가지 속성 가짐 : name(폼이름), id, action(어디로 보낼건가, 경로, 실행되는 페이지지정). 대소문자 구분
- method : get/post (폼 태그는 post 방식으로 전송)
          post : HTTP 헤더에 담아서 전송. 눈에 보이지 않게 전송. 폼으로 입력할 때. 보안이 필요한 정보.많은 양의 데이터를 전달할 경우에 쓰임.
          get : ?(물음표) 뒤의 쿼리스트링에 담아서 전송. 주소창에 포함되어서 보내짐.(보안상 위험하다.)링크로 입력할 때. 간단한 정보를 보낼때 쓰임.
- input 태그는 name, type 속성이 반드시 필요함. name속성은 대소문자 구분함.
- <select name="lstAddr" size="4" multiple="multiple"에서 multiple: 여러항목 선택가능"
- '파일필드'는 모양 변경 불가능하다.
- '히든필드'는 개발자가 필요한 내용을 눈에 보이지 않게 전송할때 쓰임.
- enctype : 자료실 만들 때 사용
- HTML 레벨에서는 모양만드는 것은 가능하나 비주얼적인 부분은 불가능.
  모양 예쁘게 하려면 스타일 시트 이용.
  경고창은 자바스크립트 이용.
  DB 저장이나 추가적인 기능은 서버측 언어(C#, ASP) 이용
  위의 내용을 다 조합하고 이용해야 함.

====================================== LoginProcess.aspx =====================================

<%@ Page Language="C#" %>
<%
Response.Write("<h3>입력하신 자료...</h3>");
Response.Write("아이디 : "+ Request["txtID"] + "<br />");
Response.Write("이름 : " + Request["txtName"] + "</br />");
Response.Write("암호 : " + Request["txtPwd"] + "<br />");
Response.Write("취미 : " + Request["chkHobby"] + "<br />");
%>

- LoginProcess.aspx --> 출력페이지이다.(Login.htm 페이지에서 값을 넘겨 받아 보여줌)

< 실행결과 >

--> get방식으로 전송하였을 경우 화면

'.NET프로그래밍 > HTML 4.0 / XHTML1.0' 카테고리의 다른 글

25. HTML 태그 정리 (0)	2009.07.24
24. 메타태그 (0)	2009.07.24
22. I프레임(인라인 프레임) (0)	2009.07.24
프레임 (0)	2009.07.23
테이블태그기타 (0)	2009.07.23

Posted by holland14

:

22. I프레임(인라인 프레임)

.NET프로그래밍/HTML 4.0 / XHTML1.0 2009. 7. 24. 10:13 |

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>iframe 태그 : 인라인 프레임</title>
</head>
<body>

</body>
</html>

//
- 여기서는 테이블 안에 각 셀마다 I프레임이 삽입되었다.
- 특정한 페이지를 포함한다.
- 프레임은 사용하지 말고 i프레임은 쓸 수 있을 경우 씀.

< 실행결과 >

'.NET프로그래밍 > HTML 4.0 / XHTML1.0' 카테고리의 다른 글

24. 메타태그 (0)	2009.07.24
Form (0)	2009.07.24
프레임 (0)	2009.07.23
테이블태그기타 (0)	2009.07.23
20. 템플릿(가느다란 실선으로 테이블 테두리 표시) (0)	2009.07.23

Posted by holland14

:

프레임

.NET프로그래밍/HTML 4.0 / XHTML1.0 2009. 7. 23. 18:04 |

============================== Default.htm ====================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<frameset rows="120, *">
    <frame src="Navigator.htm" noresize="yes" frameborder="1"></frame>
    <frameset cols="150, *">
        <frame src="Category.htm" scrolling="no" frameborder="1"></frame>
        <frame src="Catalog.htm" name="Catalog" frameborder="1"></frame>
    </frameset>
</frameset>
</html>

//
- <frameset rows="120, *"> : 행을 120픽셀과 그 나머지 부분으로 나눴음.
- <body>태그를 사용하지 않고 <frameset> 태그 사용.
- noresize : 프레임 크기 조절 안되게 함.
- scrolling="no" : 사이즈를 줄여도 스크롤 바 안나옴.

============================ Navigator.htm ====================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</body>
</html>

//
target="_top" 또는 target="_parent" : 최상위 프레임
- 하이퍼링크 걸린 '다음', '네이버'를 누르면 "Catalog"프레임에서 열린다.

=========================== Category.htm =====================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<h3>카테고리</h3>
<ul>
    <li><a href="#">C#</a></li>
    <li><a href="#">ASP.NET</a></li>
    <li><a href="#">Silverlight</a></li>
</ul>

</body>
</html>

=========================== Catalog.htm =====================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<div>
안녕하세요...
</div>

</body>
</html>

============================================================================

// 요즘에는 쓰이지 않는다.

< 실행결과 >

'.NET프로그래밍 > HTML 4.0 / XHTML1.0' 카테고리의 다른 글

Form (0)	2009.07.24
22. I프레임(인라인 프레임) (0)	2009.07.24
테이블태그기타 (0)	2009.07.23
20. 템플릿(가느다란 실선으로 테이블 테두리 표시) (0)	2009.07.23
19. 테이블 (0)	2009.07.23

Posted by holland14

:

테이블태그기타

.NET프로그래밍/HTML 4.0 / XHTML1.0 2009. 7. 23. 12:01 |

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>테이블태그 기타</title>
</head>
<body>

</body>
</html>

//
- caption : 테이블의 이름(제목)
- colgroup/col width : 너비(열) 조절과 관련.
- th : 열 제목. 볼드체로 보여지고 가운데 정렬됨.

< 실행결과 >

'.NET프로그래밍 > HTML 4.0 / XHTML1.0' 카테고리의 다른 글

22. I프레임(인라인 프레임) (0)	2009.07.24
프레임 (0)	2009.07.23
20. 템플릿(가느다란 실선으로 테이블 테두리 표시) (0)	2009.07.23
19. 테이블 (0)	2009.07.23
18. body속성 (0)	2009.07.23

Posted by holland14

:

20. 템플릿(가느다란 실선으로 테이블 테두리 표시)

.NET프로그래밍/HTML 4.0 / XHTML1.0 2009. 7. 23. 12:00 |

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</body>
</html>

//
첫번째 테이블에서
bordercolordark : 테두리선 그림자
- 가느다란 실선으로 보이기 위해 cellspacing값도 0으로 설정했음.

< 실행결과 >

'.NET프로그래밍 > HTML 4.0 / XHTML1.0' 카테고리의 다른 글

프레임 (0)	2009.07.23
테이블태그기타 (0)	2009.07.23
19. 테이블 (0)	2009.07.23
18. body속성 (0)	2009.07.23
17. 이미지맵 (0)	2009.07.23

Posted by holland14

:

19. 테이블

.NET프로그래밍/HTML 4.0 / XHTML1.0 2009. 7. 23. 10:56 |

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</body>
</html>

//
- tr (table row) : 표의 1행을 가리키는 말
- td (table data) : 표의 셀 하나를 가리킨다.(각 행의 셀을 만듦)
- border : 외곽선(테두리) 굵기 / bordercolor: 외곽선 색
- cellpadding : 셀 테두리와 글자 사이의 내부간격
- cellspacing : 셀 사이의 간격
- colspan : 가로로 셀(열끼리) 합침
- rowspan : 세로로 셀(행끼리) 합침
- valign : 상하정렬 / align : 좌우정렬
- td태그와 img태그 사이 앞 뒤로 공백을 두면 안됨.

< 실행결과 >

'.NET프로그래밍 > HTML 4.0 / XHTML1.0' 카테고리의 다른 글

테이블태그기타 (0)	2009.07.23
20. 템플릿(가느다란 실선으로 테이블 테두리 표시) (0)	2009.07.23
18. body속성 (0)	2009.07.23
17. 이미지맵 (0)	2009.07.23
16. 이미지링크 (0)	2009.07.22

Posted by holland14

:

Notice

Category

Tags

Recent Posts

Recent Comments

Recent Trackbacks

Archives

Links

'.NET프로그래밍/HTML 4.0 / XHTML1.0'에 해당되는 글 28건

문서형 선언(DOCTYPE)과 문서형 정의(DTD)

'.NET프로그래밍 > HTML 4.0 / XHTML1.0' 카테고리의 다른 글

HTML4.0 / XHTML1.0 - PPT

'.NET프로그래밍 > HTML 4.0 / XHTML1.0' 카테고리의 다른 글

25. HTML 태그 정리

'.NET프로그래밍 > HTML 4.0 / XHTML1.0' 카테고리의 다른 글

24. 메타태그

'.NET프로그래밍 > HTML 4.0 / XHTML1.0' 카테고리의 다른 글

Form

'.NET프로그래밍 > HTML 4.0 / XHTML1.0' 카테고리의 다른 글

22. I프레임(인라인 프레임)

'.NET프로그래밍 > HTML 4.0 / XHTML1.0' 카테고리의 다른 글

프레임

'.NET프로그래밍 > HTML 4.0 / XHTML1.0' 카테고리의 다른 글

테이블태그기타

'.NET프로그래밍 > HTML 4.0 / XHTML1.0' 카테고리의 다른 글

20. 템플릿(가느다란 실선으로 테이블 테두리 표시)

'.NET프로그래밍 > HTML 4.0 / XHTML1.0' 카테고리의 다른 글

19. 테이블

'.NET프로그래밍 > HTML 4.0 / XHTML1.0' 카테고리의 다른 글

티스토리툴바