HTML HTML에서 텍스트, 이미지를 다루는 것은 힘든 일이다. 사용자들은 그들의 브라우저상에서 선호하는 개인적인 텍스트형태를 셋팅하기 때문에, 어떻게 자신이 원하는 대로 웹 페이지에 텍스트가 나타나게 할 수 있을것인가? 이것이 이 강좌에서 다루고자 하는 것이다. 태그 내에서 많은 정보들을 특화시킬 수 있다. 예를 들면, 기본적인 텍스트와 링크색깔과 같은 것을 내에서 많이 조정할 수 있다. - 크기, 색깔, 심지어는 개별적인 글자의 서체까지도. 우리의 팁들은 여러분이 어떻게 할지를 보여줄 것이다. HTML 기본형식 HTML문서에서 일반적인 문자이외에 문자에 기능을 넣어주는 명령어를 태그라고 한다. 태그는 시작하는 태그와 끝나는 태그를 갖고 있는데 같은 모양이지만 끝나는 태그는 앞에 '/'가 붙는다. 태그는 대/소문자 구분 없이 사용된다. HTML 기본 구성요소는 아래와 같다. ~ ~ ~ 태그는 이 범위 안의 문서가 HTML형식으로 작성되었다는 것을 선언해 주고, 태그는 Heading의 준말로, 글의 머릿말에 해당하는 부분이다. 태그는 본문에 해당한다. HTML 문서의 HEAD부분에는 문서의 제목을 나타내는 과 이 온다. 그 사이에 문서의 제목이 오게 된다. 그런데 이 문서의 제목은 브라우져의 맨 위 머리부분에만 나타난다. 넷스케이프의 북마크(BookMark)에 저장할 때 그 타이틀의 목록을 의미한다. 타이틀은 가능하면 한글이 아닌 영어로 표현하는 것이 좋다. 한글에는 UNIX의 금지문자들이 들어 있기 때문이다. 또한 외국인이 북마크를 생성할 경우 도저히 알아볼 수 없는 글자의 조합이 되기 때문이며, 짧거나 너무 긴 타이틀은 좋지 않다. 지금까지 HEAD, BODY, TITLE을 보았는데 그것만으로도 간단한 문서를 작성할 수 있다. 한 번 다음과 같이 입력해 보자 처음시작하는 예제 본문에 해당하는 내용입니다. 태그의 구성요소 태그는 문서안에 있는 상대적인 주소를 분석하는데 어떤 패스를 사용할 것인지를 정의한다. 문서내에 있는 링크 참조에 패스명을 전부 넣지 않을 때 유용한 기능을 한다. Netscape3.0 Download 다운로드 넷스케이프3.0 위의 예제에서 보면 클릭된 URL(/comprod/mirror/index.html)이 태그에 지정된 URL(http://home.netscape.com/index.html)의 하부디렉토리를 연결하게 된다. 최종결과로 URL은 (http://home.netscape.com/comprod/mirror/index.html)으로 바뀐 것을 알 수 있을 것이다. 의 기능은 HTML문서를 만들 때 자체 디렉토리 관리를 쉽게 한다. 태그의 구성요소 ~ 태그는 본문을 나타내며 문자와 링크의 색상, 배경화면과 기본글자색을 지정할 수 있다. 또한 는 특별한 구성요소를 가지고 있지 않다. 모든 웹 브라우져는 지원하지 않는 태그의 기능이 문서에 포함된 경우 그 부분을 무시하고 페이지를 기술한다. 태그는 배경이미지를 선언한다. aaa.gif 화일의 크기가 클 경우 다운로드 하는 속도가 늦어지므로 background화일은 작고 빨리 읽히는 사이즈로 저장하는 것이 문서를 빨리 읽게 해 준다. background에 들어가는 화일은 JPG, GIF외 넷스케이프가 지원하는 파일을 모두 사용할 수 있다. --Main윈도우 배경색 지정 --표준텍스트 색 지정 --링크부분의 색 지정 --검색한 링크부분의 색 지정 --검색중인 링크의 색 지정 #4169e1=41은 적색16진수, 69는 녹색16진수, e1는 청색16진수 태그와 태그는 같이 쓰지 않는 편이 좋다. 둘다 background에 관한 태그므로 충돌을 일으킬 수 있다. BODY태그의 구성요소 Homepage 홈페이지 만들기 홈페이지 꾸미기 홈페이지 멋내기 문단을 바꾸는 태그

문단을 바꾸는 태그로

는 Paragraph를 의미한다. 이 태그를 사용했을 경우에는 우선 줄을 띈 후 다음 문장을 시작한다. 즉 줄을 바꿈과 동시에 한 줄도 띄게 되는 효과가 있다. 이 태그는 종료태그가 없으며 보통 문장의 끝에 사용된다. 문장의 맨 앞에 사용될 수도 있으나 별로 권장하고 싶지는 않다. 또한 아무리 많은

태그를 사용하더라도 결국은 하나의

태그로 인식하게 된다. 일반적으로 다른 태그 안에서 사용하지 않는 것을 원칙으로 한다. 다음의 예를 통해 확인해 보자. 홈페이지 디자인의 기본개념은

여백의 처리에 있다.

이태그를 활용하자

~

align=left, center, right 문서의 단락을 좌측, 중간, 우측으로 배치한다.

WWW월드와이드웹

WWW월드와이드웹

WWW월드와이드웹

줄을 바꾸는 태그
줄을 바꾸는 태그인
태그는 Breaking이라는 말에서 줄여진 말이다.

태그와 아주 흡사하지만 무엇보다도 명확한 차이는 줄은 바꾸되 다음줄에 공백은 만들지 않는다는 것이다. 즉 줄만 바꾸는 태그라고 할 수 있다. 홈페이지 디자인의 기본개념은
여백의 처리에 있다.



이태그를 활용하자 ~ 라는 태그는 화면의 크기에 따라 문단모양이 바뀌는 것을 방지한다. No Breaking의 줄임말이다. 예를 들어,사용자의 모니터가 20인치인 경우 전부 한 줄에 표현되나 14인치의 화면에서는 아래로 밀려내려가는 것을 볼 수 있다. 이때 이라는 태그를 사용하면 비록 전체 글씨는 모두 볼 수 없으나(스크롤바로 전체를 볼 수 있다.) 전체적인 문단 구성에는 영향을 미치지 않아서 좋다. 그런데 만일 이러한 태그 안에서 문단을 바꿔야 한다면 이라는 태그를 사용한다. 이 태그는 화면의 크기에 따라 문단 모양이 바뀌는 것을 방지한다.No Breaking의 줄임말이다. 태그 안에서 문단을 바꿀 때 사용한다. 이 태그는 화면의 크기에 따라 문단 모양이 바뀌는 것을 방지한다.No Breaking의 줄임말이다.

~
사이에 들어가는 문서를 항상 문서 중앙에 위치시킨다
사실 인터넷에 대해서 잘 모르면 홈페이지를 만드는 것이 어려운 일이기도 하다. 그럼 여기서는 인터넷에 대한 기본 지식에 대해서 간단히 알아보기로 하자.
선 그리기
그래픽에 가까운 태그 중에 하나로, 이것은 일종의 경계선이다. Horizontal Line의 준말이다. 문단의 단락을 구분하거나 모양을 낼 때 사용한다.
size는 1~X사이의 숫자를 사용하며,선의 굵기를 표현한다. 물론 1이 가장 얇은 괘선이며 숫자가 커질수록 선의 굵기도 커진다. 하지만 너무나도 굵은 선 그리기는 본래 문장의 단락을 구분하려는 의도에서 벗어날수 있다.
WIDTH는 괘선의 도트수,혹은 전체 페이지 폭에 대한 선의 폭을 비율로 나타낼수 있다. 비율로 지정할 때에는 %를 대입한다.
align=left,center,right ALIGN이라는 단어로 위치시킨다. 여기서 ALIGN=center는 생략해도 무방하다. 즉 왼쪽이나 오른쪽은 ALIGN=left, ALIGN=right등을 사용하지만 중앙 정렬을 나타내는 ALIGN=center는 사용안해도 기본값으로 중앙 정렬이 된다.
만일 입체적인 선이 싫다면 선을 입체적이지 않게 만들 수 있다.
선그리기 태그는 아무런 다른 태그들을 사용하지 않더라도 한줄로 인식이 된다. 따라서 선을 가로로 여러개 그리려면 다음 강좌에서 배울 태그를 사용해야 한다. 아래의 소스는 이를 보여주고 있다.
글자크기 지정하기 ~ n=1~6 표제를 나타내는 태그로,머릿말이라고도 할 수 있는데

~

까지의 6가지 크기로 구성되어 있다. 1이 가장 큰사이즈이고,차례대로 6이 가장 작은 사이즈이다. 이것은 계층적으로 사용하는 것이 좋다.즉 가장 큰 제목은 가장 크게, 소제목은 그보다는 작게 표현한다. 이것은 타이틀과는 달리 길게 사용해도 무방하다. homepage

홈페이지만들기

홈페이지만들기

홈페이지만들기

홈페이지만들기

홈페이지만들기
홈페이지만들기
한글은 영문에 비해 사이즈가 크기 때문에가장 작은 사이즈인
은 영문에 비해 폰트사이즈로 한 포이트정도 더 크다. 글자크기에 대한 아무런 정의가 없다면 기본값으로

정도의 크기가 출력된다. ~ n=1~7 태그의 사이즈와 반대로 1이 가장 작은 사이즈의 폰트이고, 7이 가장 큰 폰트사이즈다. 넷스케이프에서 12포인트는 에 해당하며 아무런 정의가 없다면 과 같은 크기로 글자를 출력한다. 이태그는 반드시 종료태그와 함께 사용한다. homepage 크기가1 크기가2 크기가3 크기가4 크기가5 크기가6 크기가7 상대크기가+2 상대크기가-2 태그와 같이 태그는 이런 기본 폰트 사이즈를 태그 안에서 설정하지 않는 대신 태그 전에 선언되어 문서전체에 기본폰트를 설정할 수 있다. 태그는 라는 종료태그가 필요없다. 문자의 사이즈를 한단계 크게하거나 작게하는 태그이다. 태그는 항상 크기의 설정을 해 주어야하는데 비해 ,태그는 기본폰트()에서 폰트를 한단계 키우거나 한단계 줄이는 것이 가능하다. 글자색상/글자체 지정 태그 안에 color라는 속성을 사용하여 글자의 색상을 지정할 수 있다. 이때 값은 16진수,색상명이다. 또한 HTML문서에서 다른 서체들을 사용하기 위해선 태그내에 face속성을 사용하면 된다. face="폰트서체"를 지원하는 브라우져들은 서체가 이용자의 시스템 상에 존재할 경우에만 그 특정 서체로 텍스트를 디스플레이 할 수 있다. 디자이너들이 환경 설정에 순서대로 여러 개의 폰트들을 지정해 놓으면, 지정한 첫번째 폰트가 없을 경우에는 두 번째 폰트가 사용된다. 아직까지 모든 이용자들이 유효한 모든 폰트들을 설치하고 있지 않기 때문에 이용자들의 브라우져에서 지정된 서체들에 접근할 수 있을런지는 아무도 모른다. 결국, 대부분의 이용자들은 여전히 초기 설정 폰트인 Times와 Courier체로 보게 된다는 것을 기억해야 한다. 가나다라마abcdedg 위 예의 결과를 보면 한글은 돋음체, 영문은 arial체로 출력된다. 글자모양 지정하기 글자모양을 지정하는 태그에는 두 가지가 있다. 글자만이 보여지는 브라우져에선 무시되고 있는 논리적 스타일과 글자가 보여지는 방식을 명확히 규정해 주는 물리적 스타일로 구분된다. 논리적 스타일의 단점은 브라우져마다 태그를 각기 다르게 해석해서 보여준다는 점이다. 예로, 태그는 시작태그와 종료태그 사이에 위치한 글자가 강조되도록 한다. 한 브라우져는 이를 볼드체로 해석하고 다른 브라우져는 단순히 서체를 크게 표현한다. 물리적 스타일은 브라우져가 선택된 텍스트를 어떻게 디스플레이 하는가를 지시해 준다. 이 두 가지를 구분하는 일은 어려운 일이며 네스케이프 2.0 버젼 이상에서는 출력 상에 구별이 거의 없다. 따라서 이번 강의에서는 물리적 태그와 논리적 태그에 상관없이 글자 모양에 따라서 설명하도록 하겠다. 굵은체 강조하기 위해서 굵은 글씨를 나타내는 태그이다. 이것은 볼드체에 해당하며 글자를 굵고 진하게 표현한다. 이탤릭체 이탤릭체란 글자를 약간 기울여서 강조하기 위한 서체를 말한다. 타자체 타자체를 이용한 폰트를 Courier서체라고 한다. 이 서체는 고정 글꼴로 만들어져 있다. 기타 -Definishing Instance -정의되어지는 단어에 대한 것을 말한다. -Citiation -책이나 사진 등의 제목을 나타낼 때 쓰인다. 이탤릭체로 표현된다. -Sample -컴퓨터 상의 메시지를 나타낼 때 쓰인다. -Variable -일반적으로 이택릭체로 표현된다. -Subscript -아래 첨자를 의미한다. -Superscript -윗 첨자를 나타낸다. -Underlined -글자에 밑줄을 긋는 것과 같은 효과이다. -글자가 깜빡거리는 효과를 준다. font physical style Strong
B
EM
I
KBD
CODE
TT
Definishing Instance
Citiation
Sample
Variable
Subscript
Superscript
Underlined
Blink 문자 고정시키기 
~
란 Preformatted를 의미하며 문장과 단락의 형태를 보다 자유롭게 표현할 수 있게 하는 기능을 한다. 
나 
등으로 표현하기에는 너무 복잡한 문장등은 일괄적으로 
태그를 사용한다. 
태그를 사용하면 태그 안의 모든 TEXT들은 그 문장 안에서 유효하게 된다. 즉 여백이나 줄 바꿈등이 전부 유효하게 되는 것이다. 아래의 예에서 
태그의 기능을 확인할 수 있다. 

	
대강 눈치를 
	채신 분도    계실 겁니다.



태그 내부에선 가급적이면 다른 태그의 사용을 피하는 것이 좋다. 헷갈릴 수 있기 때문이다. 만일 
태그 사이에 다른 태그를 넣었을 때 일어날수 있는 오류를 아래에서 볼 수 있을 것이다. 

	
	이 장에서는   문서의
	사용법을 
	배울 수 있습니다.


위의 예에서처럼 
안의 태그는 그대로 출력되지 않는다. <...>를 태그로 인식하지 않고 꺽쇠 괄호로 타이핑 한 것처럼 출력하려면 특수 문자 코드를 사용해야 한다. 참고로 
태그를 사용할 때에는 한 줄에 80글자 수가 넘지않도록 주의해야 한다. 수평 화면은 80개 이상의 글자를 지원하지 않는 브라우져도 있기 때문이다.  또한 
태그를 이용하여 Signature를 홈페이지 상에 올릴 수도 있다. 여기에서 Signature란 글자를 이용한 그래픽을 말한다. 

글자사이에 공백만들기

홈페이지 상에서 글자는 간격을 아무리 많이 띄우더라도 결국 하나의 간격으로 밖에 처리되지 않는다.  따라서 글자사이에 공백을 만드는 방법이 필요하게 되었다.  이번 강좌에서는 글자 사이의 간격을 넓히는 방법에 대해서 알아보자. 

하얀 글자 사용하기

하얀 글자를 사용하는 방법은 만일 홈페이지의 배경색이 하얀색일 경우 하얀색의 글자를 사용하면 아무리 많은 글자를 쳐넣더라도 결국 여백처럼 보인다. 여기서 주의해야 할 점은 반드시 배경의 색상과 일치를 시켜야 한다는 점이다.만일 배경이 파랑색이면 글자도 파랑색이 되어야 글자가 보이지 않게 된다. 

 태그 사용하기 
이 태그를 사용하면 공백이 생긴다. 이 태그를 반복해서 사용함으로써 원하는 크기의 공백을 만들 수 있다. 주의할 점은 반드시 꺽쇠 표시와 함께 사용하지 말라는 것이다. 

	
	공백만들기
	
	
	문서를 작성하다      보면 가끔 의도대로 출력되지 않는 경우가 있다.
	
	

투명 GIF 넣기 

한 픽셀짜리 투명한 GIF화일을 이용한 공백만들기는 두가지 방법이 있다.

첫째로 태그에 WIDTH와 HEIGHT 속성을 이용하여 원하는 가로나 세로 크기 만큼의 GIF이미지를 늘린다.

태그 사용하기
태그는 표면상 페이지의 어느 곳에든지 빈 공간을 만들기 위해 사용할 수 있지만, 현재까지는 네비게이터에서만 특별히 사용할 수 있다. 따라서 일반적으로 사용하는 것은 피하는 것이 좋다. 다른 브라우져들이 이 태그를 인식하지 못하기 때문이다. 태그를 사용하면, "block" 에 TYPE의 속성을 사용하고, "WIDTH"와 "HEIGHT"속성을 사용할 수 있는데, 이들은 모두 픽셀값을 같는다. 

	문서를 작성하다보면 가끔
	의도대로 출력되지 않는 경우가 있다. 

이미지 삽입하기


태그 안에 삽입하고자 하는 이미지 파일 이름을 삽입하면 웹 상에 이미지를 나타내 준다.이 때 이 그래픽 파일은 위의 화일이 존재하는 같은 디렉토리 안에 있어야 한다. 만일 다른 디렉토리에 그래픽 파일이 존재한다면 다음과 같이 그 디렉토리에 관한 URL을 모두 써주어야 한다.

                        

위에서 쓰인 태그 중 IMG란 image의 약어이며,SRC란 source를 의미한다.  이때 사용되는 이미지는 적은 용량에 화질이 선명한 GIF포맷이 주로 사용되며,좀더 압축 효율이 좋은 JPG도 최근 많이 사용되고 있다. 

	
	
		이미지 삽입하기
	
	
	
	
	 

텍스트 웹브라우져에서 또는 넷스케이프나 익스플로러의 경우에 자동 이미지 설정이 안되었거나 STOP버튼을 눌렀을 경우 이미지는 보이지 않게 된다. 이러한 경우에 대비해 ALT="설명"속성을 사용한다면 이미지와 텍스트를 선택적으로 사용함으로써 사람들이 실제로 이미지를 보지 못했다고 하더라도 이 이미지에서 무엇을 이야기하려고 했는지를 알려 줄 수 있게 한다.  그리고 브라우져는 이미지를 다운 받기 전에 "ALT"의 텍스트를 먼저 로딩한다. 그래서 이미지를 로딩하는 이용자들도 이미지를 보기 전에 "ALT"뒤의 텍스트를 먼저 볼 수 있다. 

이미지 크기 조절하기


보다 빨리 로딩되고 있다는 느낌을 주기 위해 태그안에 이미지의 넓이와 높이(픽셀단위) 속성을 포함시킨다. 이것은 이미지가 놓일 자리를 규정하고 이미지가 완전히 로딩되어 표현되기 전에 텍스트페이지가 보이게 하여 준다. 텍스트가 먼저 나타나면 페이지가 더 빨리 로딩되었다는 느낌을 갖게 한다. 이미지의 크기를 재조정하려면 그래픽 프로그램으로 가져가서 크기를 재조정한 후 다시 저장해서 사용해야 한다. 하지만 HTML3.0문서에서는 이러한 그래픽 이미지들의 크기까지 조정할 수 있도록 배려하고 있다.
이미지 크기를 재조정하려면 WIDTH와 HEIGHT를 적절히 조절하면 되는데 먼저 이미지의 기본 크기가 얼마인지를 알아내야 한다. 이미지의 크기를 쉽게 알아낼수 있는 방법은 포토샵과 같은 그래픽 편집 프로그램을 활용하는 것이다.포토샵을 사용하여 이미지를 열면 하단에 이미지에 대한 정보가 나온다. 

	
	
	
	
	
 실제크기 실제크기의 반 폭이나 높이를 더 늘린 경우
 

위에서 알수 있듯이 그림의 실제 크기를 변형했을 경우 이미지의 해상도는 떨어진다.따라서 기존의 이미지 크기를 그대로 나타내는 것이 좋다. 

이미지와 텍스트 정열

이미지를 배치할 때 글자의 위치를 이미지와 연관시켜 배치시킬 수 있다.  'ALIGN=속성'이라는 것을 추가해 주면 된다.  즉,이미지가 글자를 중심으로 볼 때 오른쪽에 위치한다든가 혹은 그림을 중심으로 볼 때 글자들이 그림의 오른쪽 부분에 맨 윗부분부터 차례로 나열된다든가 하는 등 이미지와 글자와의 관계를 정의내려 준다.  다른 태그들과는 달리 따옴표가 적용되지 않으므로 주의해야 한다.

이미지를 중심으로 텍스트를 배치할 경우 

 
align=top,middle,bottom

top -글자를 이미지의 가장 윗부분에 정렬시킨다.
middle -글자를 이미지의 중앙선에 정렬시킨다.
bottom -글자를 이미지의 가장 밑부분에 정렬시킨다.

ALIGN옵션을 사용하지 않았을 때에는 초기값으로 ALIGN=bottom옵션을 사용한 것과 같은 결과을 보게 된다.  그리고 문장이 한줄을 넘어 갈 경우,자동적으로 이미지 밑으로 위치하게 된다는 것에 주의해야 한다.

	나우깨비

	나우깨비

	나우깨비


글자를 중심으로 이미지를 배치할 경우

 
align=left,right,center

left -이미지를 글자의 왼쪽에 정렬한다. 
right -이미지를 글자의 오른쪽에 정렬한다. 
center -이미지를 문서의 가운데로 정렬한다.


나우깨비 

TEXT와 이미지를 혼합배치하기


네스케이프 3.0의 경우 그래픽 이미지의 크기가 클 경우 그 주위에 글자들을 한 줄이 아닌 여러 줄로 표현하는 기능을 갖고 있다. 즉 위의 두 속성들을 다 사용함으로써 이미지를 왼쪽에 TEXT를 이미지의 오른쪽 맨 윗부분에 위치시킨다.

	인터넷이 우리의 생활 깊숙히 들어옴에 따라서
	우리의 생활에 많은 변화가 일어났다. 



이미지에 붙는 문서가 아님을 선언한다. 

	인터넷처럼 빨리 변하는 것은

	없을 것이다.

	어제까지만 해도 존재했던 사이트가

	오늘은 없어지고 없다. 


이미지를 다른 문서에 연결하기

~
위와 같은 태그를 지정한 후 출력해 보면 aaa.gif란 이미지가 뜨고 이 이미지를 누를 경우 ss01l.html이라는 웹문서로 이동하게 된다. 이때 aaa.gif라는 이미지 주위에는 파란색의 테두리가 생기는 것을 볼 수 있다. 만일 여기에 글자를 포함한다면 글자도 파란색으로 바뀌며 동시에 연결의 기능을 담당한다. 

	 이곳을 눌러 주세요 

만일 여기에 테두리가 보기 싫다면 없앨 수도 있다.  이러한 기능은 태그 안에 BORDER=0 속성을 줌으로서 해결할 수 있다.

여백 및 테두리 조정하기


이 기능은 이미지를 부동 이미지로 판별하게 해서 글자가 그 주위에 오지 못하게 하는 것이다.

HSPACE -이미지의 양 옆으로 (가로측) 여백을 지정하는 옵션이며, 값으로는 픽셀값을 입력한다.이렇게 값을 주면 주어진 값만큼 글자와 이미지 사이의 여백이 지정되며 많은 값을 지정할수록 이미지와 글자 사이에 여백이 많이 생기게 된다. 
VSPACE -이미지의 위,아래 여백을 지정한다. 사실 이 옵션은 
나 
등으로도 가능하다.하지만 이미지를 다룰 때에는 이미지 전용의 태그를 사용하는 것이 좋다.

이러한 태그들은 글자와 이미지 사이의 여백 뿐만 아니라 이미지와 이미지 사이의 여백을 처리할 때에도 사용된다.

	인터넷처럼 빨리 변하는 것은 없을
	것이다. 어제까지만 해도 존재했던 사이트가 오늘은 없어지고 없다.

	인터넷처럼 빨리 변하는 것은 없을
	것이다. 어제까지만 해도 존재했던 사이트가 오늘은 없어지고 없다.

한편 그래픽 이미지의 주위에 테두리를 만들 수 있다. 이렇게 테두리를 만드는 이유는 강조를 하기 위해서이다.테두리의 색깔은 일반적으로 검정색으로 나타난다.연결된 이미지의 파란색 테두리와 구별하기 위해서이다.


태그 내의 BORDER속성은 이미지의 테두리를 지정해 준다. BORDER의 크기는 숫자가 커질수록 굵어진다. 만일 이러한 테두리를 없애려면 BORDER=0의 값을 기입한다.

	
	

링크시키기

~
웹상에서 다른 홈페이지와 연결할 때 사용한다.  'A'란 Anchor. 즉 닻이란 뜻으로, '다른 어떤 곳으로 항해를 한 후 닻을 내린다'정도로 해석을 하면 된다. 인터넷이 이처럼 확산되기 위해선 링크란 태그의 역할이 컸다. 

	야후 사이트로 

여기서 HREF에 대한 정확한 해석은 할수 없으나 Hypertext REFerence의 약자일 것이라는 추측만이 있다.  안에는 찾아 가야 할 곳을 써 넣는다.  누를 글자를 나타내는 글씨가 밑줄과 파란색이라는 절묘한 조화로 이루어져 있다는 것을 염두해 두자. 

NAME LINK 
자신의 홈페이지 내에서 연결할 때 사용한다.

이것은 크게 두가지 경우일 수 있다.  첫째는 그 장 내의 어떤 다른 곳으로 바로 이동하는 것이고, 둘째는 자신의 홈페이지의 어떤 곳으로든지 갈 수 있게 연결하는 것이다.
첫번째 경우는 홈페이지의 내용이 너무 길어서 브라우져의 스크롤바를 이용해서 page down을 해야할 필요가 있을 때,바로 지정된 곳으로 화면을 이동시켜 주는 역할을 한다.이것은 한 문서 내의 어떤 단어를 찾아서 이동하는 형식을 띄게 된다.

~ 
~
name=문서의이름 

	속도의 문제 
	홈페이지는 독자들의 인내심을 실험하는 곳은 아니다. 
	속도는 빠르면 빠를수록 좋다 속도를 저해하는 요소들을 과감히 제거하자. 
	TOP 

둘째로 문서 외부로의 연결을 선언한다. 
~ 
~
name=문서의이름 

예를 들어 TOP 라는 태그가 있다면 TOP를 클릭했을 때 ss02.html문서 내의 인 곳으로 이동하게 된다. 


Mail보내기


e-mail address

주소입력 태그란 전자우편 주소를 적어 넣는 태그를 말한다. 어떤 문장 안에서 주소를 집어 넣을 필요가 있을 때 사용한다.

	
  css9338@nownuri.net 
 

이 주소 입력 태그는 보통 이탤릭체로 표시된다. 편기쓰기 태그는 주소입력을 클릭하면 그 주소의 사람에게 전자우편을 보낼 수 있도록 편지쓰기창이 나온다. 

특수문자

HTML문서를 작성하다 보면 홈페이지 상에서 구현하기 까다로운 문자들이 있다.  이것을 특수문자(Escape Sequence)라 부르는데 특수문자란 (C) @등과 같이 키보드로 직접 입력할 수 없는 아스키(ASCⅡ)코드의 문자를 말한다. 
이러한 특수 문자들을 웹 문서 상에서 종종 사용해야 할 경우가 있다.예를 들어 홈페이지의 맨 끝부분에 우리가 흔히 사용하는 
~
라는 태그와 함께 'Copyright(C) All Rights Reserved'라는 문구를 삽입할 때 이러한 특수 문자를 사용하게 된다.특수 문자들은 HTML 문서 상에서 다음과 같이 표기한다. 

	©
	또는
	©

위의 특수 문자 코드를 입력하면 결과는 모두 (C) 로 나타난다. 위에서 알 수 있듯이 모든 특수 문자들은 &로시작해서 ;로 끝난다. 모든 특수 문자 코드는 위와 같이 문자 혹은 ISO8859-1의 숫자로 동시에 표현된다. 여기서 주의할 점은 모두 소문자로 표기해야 한다는 것이다.

	 & < > " 

위의 기호들은 태그와 혼동될 우려가 있으므로 아예 특수 문자 코드로 처리하는 것이다. 다음은 간단한 특수 문자 입력의 예이다.

	" < ® ©
	¥ > " õ © 

	" < & (C) 
	(C) > & " ? 


주석문 달기


주석 태그로, 문서의 내용을 설명하거나 번외로 말해 둘 것이 있을 때 사용한다. 이러한 주석들은 브라우져로 볼 때 무시되고 넘어간다. 한편 기존의 이미지를 잠시 홈페이지 상에서 띄우지 않을 경우에도 사용한다.

	
	
	환영합니다.
	
	
	
	
저의 홈페이지에 방문해 주셔서 감사합니다.
	처음 만들어 보는 것이라서 미숙한 점이 곳곳에 보입니다.
	앞으로 더더욱 홈페이지 되도록 노력하겠습니다.
	감사합니다. 

	
	 
LIST

가끔 목록은 많은 양의 정보를 잘 정리하는데 있어 좋은 방법이라고 할 수 있다. 흔히 논문을 쓰거나 할 일등을 쪽지에 적어 놓을 때 목록을 만드는 경우가 많다. 인터넷 홈페이지 상에서도 많은 경우에 이러한 태그가 필요하게 된다.
예를 들어 홈페이지 상에 "제 홈페이지는 다음과 같은 것들로 구성되어 있습니다"라고 미리 알리거나 제목 등을 좀더 색다르게 표현하기 위해서 목록 정의 태그를 사용한다.
모든 목록 태그에는 종류에 관계없이 
  • 라는 태그를 함께 사용한다. 이 
  • 태그는 단독 태그이다. 즉 종료태그가 필요없다는 뜻이다. 

순서가 없는 목록 


    • ~