HTML 배경화면 색깔, 스페이스바, 제목, 문자 태그, 이미지 첨부 방법
SOURCE.HTMLspan style="font-weight: normal;"><!-- 1. 주석 --><!--도큐멘트타입 사용할언어 w3c단체를 기입된것-->
<html>
<!--
1. 엘리먼트 사용 시 : 내용물의 형태(시작태그-끝태그 사이의 형태)
a. 하위 엘리먼트만 갖는 경우
b. PCDATA만 갖는 경우
c. 하위 엘리먼트와 pcdata를 혼합해서 갖는 경우
d. 아무것도 없는 경우
2. 엘리먼트 사용 시 : 속성의 종류, 값
a. 엘리먼트들은 각자 역할이 있다.
b. 엘리먼트의 내용물은 해당 엘리먼트의 데이터를 표현
c. 엘리먼트의 속성은 해당 엘리먼트의 데이터를 표현
d. 속성 = 데이터
e. 부가 데이터
-->
<head>
<!-- title 태그 : 블럭 요소 -->
<title> new document </title>
<!-- meta 태그 : 인라인 요소 -->
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<!--단독태그 내용을 가질수 없다단독태그는 자식을 가질수 없다.-->
</head>
<body>
<!--
주석예제
-->
div 태그입니다.
<div>문자열</div>
안녕하세요 저는 아무개입니다..<br />
<br />
<div></div>
<h2>제목입니다.</h2>
</body>
</html>
결과
HTML meta 태그에 대해서
SOURCE.HTML<!-- 2. meta태그 --><html>
<head>
<title>현재 문서의 제목입니다.</title>
<meta name="author" content="zzarungna" />
<meta name="generator" content="에디터플러스" />
<meta name="keyword" content="title 달아보기~" />
<meta name="description" content="head태그 예제입니다." />
</head>
<body>
</body>
</html>
결과
HTML 웹페이지 배경화면 색깔 넣는 방법
SOURCE.HTML<!-- 2_1. bgcolor, background --><html>
<head>
<!-- 문서의 정보 -->
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="zzarungna" />
</head>
<!--
bgcolor : 배경색
색상(HTML 사용 가능한 색상)
a. Named Color(Well-known Color) : 색상명 ex) red, blue etc..
b. RGB Color
- Red(0~255), Green(0~255), Blue(0~255)
- 256 * 256 * 256 = 16777216
- #FFFFFF (White), #000000(Black) #FF0000(Red), #FFZZ(Yellow)
-->
<body bgcolor="#aee19b" background="./images/han.jpg">
<!--
문서의 출력 내용 : 텍스트, 태그(이미지, 멀티미디어...,구조) : 클라이언트 영억
(Client)
-->
문서의 출력 내용입니다.
</body>
</html>
결과
HTML 스페이스바 표시 하는 방법
SOURCE.HTML<!-- 3. 공백, 개행--><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="zzarungna" />
</head>
<body>
<!--
HTML 4.01 - XHTML 1.0 사이에 껴있는 상태이다.
XHTML 기준
1. 태그의 대소문자를 구분한다.(소문자만 사용)
2. 태그, 속성 모두 소문자로 기술한다.
3. 단독태그는 끝에 / 기술한다. <br /> 빈공란 한칸뛰어준다. 인식못하는 브라우저가
존재한다.
4. 속성명="속성값", 속성명='속성값' 만 지원한다.
속성명=속성값 지원안함.
공백이있으면 "red blue" 라고하면 레드 부터 블루까지이지만 ""없을경우 다른 속
성으로 인식한다.
공백(WhiteSpace)
- 편집기상의 공백 : 스페이스(32),엔터(13), 탭(8) 공백도 일반문자형으로 인식한다.
- 편집기상의 공백이 HTML문서상의 공백과 일치하지 않음!!!
- 브라우저가 편집기 상의 연속된 공백문자를 통합해서 하나의 스페이스로 치환됨
- 공백을 출력할 수 있는 수단
1. 개행(엔터) : <br />
2. 공백(스페이스) : (특수문자,앤티티) 앤티티정의 : &단어;
-->
안녕하세요. zzarungna님. 1 2 3 4 5 6 7 8 9 10 11
<br />
12
<br />
13 14
</body>
</html>
결과
HTML 제목 표현 방법
HTML에서 다량의 문자를 P태그 안에 넣어서 사용 하며. HTML에서 엔터의 역활예제 입니다.SOURCE.HTML<!-- 4. head --><html>
<head>
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="zzarungna" />
</head>
<body background="./images/han.jpg">
<h1>한승연이 짱입니다.</h1>
<!-- 헤드테그 -->
<b>카라의 한승연입니다.</b>
<h2>XHTML이란?</h2>
<b>마크업 언어로써 웹페이지를 만드는데 사용합니다.</b>
<h6>가작작은제목</h6>
<b>가장작은 제목의 사이즈입니다.</b>
<!-- 웹표준에 의해 font size="" 이러한 코드는 사라졌다. 제목을 표현해낼때 -->
</body>
</html>
결과
HTML에서 다량의 문자를 P태그 안에 넣어서 사용 하며. HTML에서 엔터의 역활예제 입니다.
SOURCE.HTML<!-- 5. p태그, br태그 --><html>
<head>
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="김종현" />
</head>
<body>
<p> 다량의 텍스트 입니다.다량의 텍스트 입니다.다량의 텍스트 입니다.다량의 첫번째 라인입니다.</p>
<br /> <br />
<p></p>
두번째 라인입니다.
<br /> <br />
</body>
</html>
결과
HTML에서 div 기본 사용 방법
SOURCE.HTML<!-- 6. div태그--><html>
<head>
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="zzarungna" />
</head>
<body>
<div>문자열입니다.</div>
<div>문자열입니다.</div>
<div>문자열입니다.</div>
</body>
</html>
결과
HTML span태그 사용방법
SOURCE.HTML<!-- 7. span 태그> --><HTML>
<head>
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="김종현" />
</head>
<body>
안녕하세요. <p>홍길동</p>입니다.<br /><br />
안녕하세요. <div>홍길동</div>입니다. <br /><br />
안녕하세요. <span>홍길동</span>입니다.<br /><br />
</body>
</html>
결과
HTML에서 < > 꺽쇠 표시 copy 표현방법, HTML 저작권 태그 표현 방법
SOURCE.HTML<!-- 8 entity 태그> --><html>
<head>
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="zzarungna" />
</head>
<body>
<>태그 설명</>
<p>
<br />는 행을 바꾸는 태그입니다.
©Copyright 2011 Test.com All rights reserved.
</p>
</body>
</html>
결과
HTML에서 리스트를 나타내는 방법, OL태그, UL태그, DL태그
SOURCE.HTML<!-- 9. list태그--><html>
<head>
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="zzarungna" />
</head>
<body>
<>리스트</>
<!-- 1, A, a, I, i 00 이6가지외엔 직접기재해야한다.-->
<!-- 넘버링 자동으로 숫자를 채워준다. -->
<ol type="A">
<li>C#</li>
<ol type="a">
<li>문법</li>
<li>클래스</li>
</ol>
<li>Winform</li>
<li>ASP.NET</li>
</ol>
<>자바 과정 리스트</>
<!-- circle, square, disk -->
<ul type="square">
<li>자바기초</li>
<li>JSP</li>
<li>Spring</li>
</ul>
<>HTML 용어정리</>
<dl>
<dt>태그</dt><!--단어-->
<dd>태그는 HTML의 구조를 형성하는 요소</dd><!--단어설명-->
<dt>속성</dt><!--단어-->
<dd>속성은 태그의 부가적인 정보를 표현 </dd><!--단어설명-->
<dt>엔티티</dt><!--단어-->
<dd>엔티티는 치환 문자열입니다.</dd><!--단어설명-->
</dl>
</body>
</html>
결과
HTML 태그에서 강조 하는 태그의 역활 및 사용 방법
SOURCE.HTML<!--10. Strong, em 태그-->
<html>
<head>
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="zzarungna" />
</head>
<body>
<!-- 의미를 강조 및 부여하기 위한것 -->
이부분은 <strong>강하게</strong> 강조하는 부분입니다. <br />
이부분은 <em>약하게</em> 강조하는 부분입니다.<br /><br />
<!-- XHTML에서는 서식과 관련된 태그는 사용X(소멸) -->
<!-- 서식읠 의미 <b> </b> <i></i> -->
이부분은 <b>강하게</b> 강조하는 부분입니다. <br />
이부분은 <i>약하게</i> 강조하는 부분입니다.<br />
</body>
</html>
결과
HTML symatic web의 의미
결과<!-- 11. symatic 관련--><html>
<head>
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="zzarungna" />
</head>
<body>
<div>zzarungna</div>
<div>02-1234-5678</div>
<div>zzarungna@naver.com</div>
<이름>짜룽나</이름>
<전화번호>02-1234-5678</전화번호>
<이메일>zzarungna@naver.com</이메일>
<!-- sementic web 은 데이타 소스상 의미를 부여하여 구조화된 데이타는 데이타를 재사용 하기에 용이하며 데이타로 값어치가 있다. -->
<div id="name">김영웅</div>
<div class="tel">02-555-5487</div>
<div class="email">zzarungna@naver.com</div>
<div id="A002">홍길동</div>
<div class="tel">02-343-5234</div>
<div class="email">duawkd@naver.com</div>
<div class="email">duawkd@naver.com</div>
<!-- id와 클래스를 만든 정의는 결국 데이타의 의미를 부여하고 재사용하기 위한 목적으로 만들어졌다. -->
<!-- id -> 유일한 속성 이름이나 주민번호등 한가지만 있는것, class -> 분류 한개이상의 유일성이 없는것.클래스는 중첩가능-->
</body>
</html>
이건 설명이므로 결과를 볼필요가 없습니다.
HTML 태그에서 주소 링크 거는 방법
SOURCE.HTML<!-- 12. a태그 관련--><html>
<head>
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="zzarungna" />
</head>
<body>
<a href="http://www.naver.com" title="네이버로간다고!!!!!!!!!">네이버</a>
<br /><br />
<a href="http://www.gogle.com" title="구글로갑니다~"><img src="images/1.jpg" width="400" height="500" /></a>
<br /><br />
<a href="http://kr.yahoo.com" title="야후로 이동합니다.">이동합니다. </a>
<br /><br />
<!--
target 속성은 4가지만 있다.
1. _self, _blank, _parent, _top
_self -> 현재창에서 링크된 페이지를 보여준다.
_blank -> 새로운창에서 링크된 페이지를 보여준다.
default 로 _self로 target이 지정되어 있다.
2. 프레임명
-->
<a href="http://www.naver.com" target="_self">네이버</a>
<br /><br />
<!-- 그냥 링크만 붙일경우는 #을 붙이도록 한다.-->
<a href="#">그냥 링크</a>
<br /><br />
<a>그냥 링크2</a>
</body>
</html>
결과
HTML 태그에서 javascript 호출하는 방법
SOURCE.HTML<!-- 13. a태그 javascript alert --><html>
<head>
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="zzarungna" />
</head>
<body>
<a href="URL">링크</a>
<br /><br />
<!-- a태그로 자바스크립트를 호출 할수 있다.-->
<a href="javascript:alert('안녕');">자바스크립트 호출</a>
<br /><br />
<a href="mailto:admin<admin@test.com>">메일 보내기(메일 클라이언트 호출)</a>
</body>
</html>
결과
HTML 이미가 깨질 경우, 이미지 제목 부여
SOURCE.HTML<!-- 14. img 속성 관련--><htm>
<head>
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="zzarungna" />
</head>
<body>
<>이미지 태그</>
<!-- .은 자기자신을 나타낸다 현재 폴더에-->
<!-- tip 이미지가 깨지는것은 무조건 경로가 잘못된것이다. 깨진이미지 브라우저상 마우스우클릭 등록정보에서 경로 확인후 경로맞는지 확인한다.-->
<img src="./images/han.jpg" alt="이미지 경로가 잘못 되었습니다." />
<img src="./images/ha.jpg" alt="이미지 경로가 잘못 되었습니다." />
<br /><br />
<!--
alt = alternate Text : 대체 텍스트 -> 이미지가 깨질경우 이미지 대신에 보여주는 텍스트 title = 풍선 도움말 어디서든 가능하다
XHTML 1.0 -> img 태그는 src와 alt속성은 필수 속성(생략 x) 픽셀 표현할수 있는 최소한의 점 가로 세로로 점은 단색으로 표현 가능한것
-->
<img src="images/adore.png" alt="이미지 경로가 잘못 되었습니다." title="반짝반짝"/ >
<br /><br />
<img src="images/angry.png" alt="이미지x" width="128" height="128" />
<br />
<!-- 종횡비가 유지됨 -->
<img src="images/angry.png" alt="이미지x" width="50" height="50" />
<br /><br />
<img src="images/angry.png" alt="이미지x" width="200" height="50" />
</body>
</htm>
결과
HTML 이미지 태그 추가설명
SOURCE.HTML<!-- 15. img 관련--><html>
<head>
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="zzarungna" />
</head>
<body>
<!--
브라우저 입장
1. <img> 읽기
2. <img>의 정보를 가지고 해당 태그의 위치에 이미지를 출력
a. 이미지 위치를 자리잡기
b. 실제 이미지 경로를 찾아가서 이미지 데이터를 읽어 온뒤 a에 맡아둔 위치에 실제 이미지 데이터를 출력
이미지가 크기가 정해지지 않은 상태에서는
브라우저상 이미지에 사이즈를 지정하지 않을 경우에 이미지 사이즈를 읽어와서 웹에 보여준다.
그러므로 이미지 사이즈를 지정해서 해주어야 웹에 대한 안정성을 기할수 있다.
브라우저 로딩 시에도 사이즈를 지정하는 것이 속도면에서 빠르다
width, height의 %지정을 하지 않을땐 자동으로 픽셀단위로 지정된다.
-->
<img src="images/adore.png" alt="핑퐁" title="스마일" width="128" height="128" />
<img src="images/adore.png" alt="핑퐁" title="스마일" />
<img src="images/adore.png" alt="핑퐁" title="스마일" width="256" height="256" />
<!--
HTML 수치
a. 픽셀 - 절대값
b. 상대값(%) - 현재 태그의 부모 태그 영역 기준
-->
<br /><br />
<!--
현재태그의 부모는 body 아무리 커져도 부모 크기보단 커질수없다 지금은 body 영역을 꽉채워라
-->
<!--<img src="images/adore.png" alt="핑퐁" title="스마일" width="100%" height="100%" />-->
<br /><br />
<!-- 이미지를 감싸고 있는 네모난 사각을 없애기 위해서 보더 속성에서 값을 0으로 지정하여 이미지만 나오게 한다. -->
이미지링크 : <a href="http://www.naver.com"><img src="images/angry.png" alt="네이버" title="네이버 사이트 링크" border="0" /></a>
</body>
</html>
결과
