A. 링크 태그
- 웹 페이지에서 링크(LINK)란 영문 뜻 처럼 연결한다는 의미로 쓰이고 있는데 좀 더 구체적으로는 웹페이지에서 다른 페이지로 이동할 수 있는 상태를 말한다.
- HTML에서는 <A> 태그가 속성 값을 설정하여 링크 상태를 만들 수 있다.
(형식)
<A HREF="이동경로" TARGET="출력될브라우저이름" TITLE="링크제목">링크텍스트</A>
(예제1) 링크걸기
# 내부 웹 페이지로의 이동 <br>
<a href="test1.html">실습예제1 페이지로 이동</a> ,
<a href="test2.html">실습예제2 페이지로 이동</a> <br><br>
# 외부 웹 페이지로 이동 <br>
구글로 이동 ,
<a href="http://mail.naver.com">네이버 메일</a><br><br>
※ 이외에 여러 사이트로 링크를 걸어 이동을 해봅시다.
(예제2) 타겟 및 제목 설정
# TARGET 및 TITLE 속성 적용 <br>
- TARGET : 링크를 통해 열리는 브라우저 창을 지정하는 속성으로, "_blank"를 기본으로 사용한다. <br>
- 웹 브라우저 창의 이름은 자바스크립을 통해 구현 가능하고, 나중 자바스크립트 시간에 실습 할 예정임. <br>
- 오라클 페이지로 이동 : <a href="http://www.oracle.com" target="_blank">Oracle Home</a> <br>
- TITLE : 말풍선 속성으로, 툴팁(tooltip) 형태로 메세지를 담아 여는 속성 <br>
- 잡코리아로 이동 : <a href="http://www.google.com" target="_blank" title="Google 홈페이지 입니다.">JOB KOREA</a>
B. 주석
- 주석이란 프로그램 실행과 관련 없는 문구를 코딩할 때 사용하며
- 거의(?) 모든 프로그램에는 주석이 존재하여 긴 코팅에 대해 설명을 주로 작성한다.
- HTML에서의 주석은 아래 예제 처럼 특정 기호의 열고 닫음 안에 작성한다.
<!--
요기는 주석 영역으로 설명이나 코멘트 등을 작성하는 공간입니다.
-->
요기는 주석 영역이 아닙니다.
※ 상단 예제의 설명 글에 대해 주석 처리를 해본다.
(심화실습)
다음의 요구사항을 보고 HTML 파일을 작성하시오.
1. IT 관련 대기업을 5개 선별하여 출력한다.
2. IT 관련 중견기업을 5개 선별하여 출력한다.
3. 각 회사명에 링크를 걸어 각 회사 사이트의 홈으로 이동할 수 있게 한다.
C. 이미지 출력 태그
(태그명)
<IMG> : 이미지를 호출하는 태그로 이미지가 있는 경로를 정확히 지정해야 해당 이미지가 출력된다.
( 속성 )
(1) src : 이미지 주소 표기
(2) title : 말풍선 - 툴팁(tooltip) 속성 - 특정 브라우저만 적용됨.
(3) width/height : 이미지의 넓이와 높이
(4) 작성예시
<img src="이미지파일경로" width="크기(넓이)" height="크기(높이)" border="바깥선 굵기" title="묘사내용">
(실습예제) 경로에 대해 심층 테스트를 진행한다.
♣ 실습 파일들의 위치
(1) 파일의 위치 c:/html_test/imgTest1.html
(2) 이미지 위치 c:/html_test/images/xx1.jpg
(3) 이미지 위치 c:/html_test/images/sample1/xx2.jpg
(4) 이미지 위치 c:/temp/xx3.jpg
(5) 이미지 위치 c:/temp/imgs/xx4.jpg
(실습1)
1. 상대경로 표기로 출력한다.
2. 위의 이미지 경로를 절대경로 표기로 작성하여 출력한다.
3. 파일의 위치를 c:/temp로 이동 시키고 출력시킨다.
(실습2)
1. google.com에서 로그(이미지)를 캡처 받아 Html 파일로 출력 시키고 구글 홈으로 이동할 수 있도록 링크를 건다.
2. naver.com에서도 로그를 다운 또는 캡처 받아 네이버 홈으로 이동이 가능하도록 링크를 건다.
D. 문단 태그
(태그명)
<p> : (Paragraph)의 약자로 문단을 구성하는 역할을 한다.
(속성)
- align : left(defualt) , center , right(오른쪽 정렬) , justify(양쪽 맞춤 정렬)
(예제1)
안녕하세요. 오리온시스템 대표 홍길동입니다.
최근 표준경력서 및 단가, 투입가능시기, 출근가능지역 알려주시면 감사하겠습니다.
IBK기업은행 업무 시스템 주요 프로그램 점검 및 개선요구 활동
1.내용 : 수행 A. 주요 업무시스템 프로그램 점검 및 개선요구
2.기간 : 4월 부터 ~ 3개월
3.등급 : 고급 이상 3명
4.장소 : 을지로
5.스킬 : JAVA 및 기타 개발언어 능숙자
(예제2)
- align 태그를 적용시켜서 아래의 내용처럼 출력한다. (화면대비 좌, 중, 우)
[ 데이터베이스 ]
ORACLE
MYSQL
[ 스크립트 ]
JAVASCRIPT
JQUERY
[ 서버프로그램 ]
LINUX
JAVA
E. 마크 태그
<mark> 태그는 특정 문구를 형광펜으로 칠한 것 처럼 해서 출력시키는 태그임, html5에서 새롭게 등장
(예제)
HTML , CSS, <mark>JAVA</mark>
F. 목록 태그
- 목록을 형성해주는 태그로 다음 2가지가 있다.
<ol> : ordered list 의 약자로 , 숫자(기본)나 알파벳 등으로 순서가 있는 목록을 만들 때 사용
(속성)
(1) type : I , i , a
(2) start : 시작 위치 값 설정
<ul> : unordered list의 약자로 , 순서가 없는 목록을 만들 때 사용
type 속성으로 disk(기본-채워진 둥근모양) , square , circle 세가지가 있다.
<h2>학교과목</h2>
<ol> <!-- <ol type="a" start="3"> -->
<li>영어</li>
<li>음악</li>
<li>수학</li>
<li>과학</li>
</ol>
<h2>품사의 종류</h2>
<ul> <!-- <ul type="square"> -->
<li>명사</li>
<li>형용사</li>
<li>동사</li>
<li>부사</li>
</ul>
G. 특수문자
(1) 공간(스페이스바) 하나
(2) < ( 보다 작은 )
(3) > ( 보다 큰 )
(4) £ ( 파운드 )
(5) ¥ ( 엔,일본화페 )
H. body 태그의 속성들
<body bgcolor="#cccccc"
background="aa.jpg"
text="blue"
topmargin="30"
leftmargin="100"
link="green" vlink="red" alink="blue">
(종합실습1)
(종합실습2)
※ 요구사항을 숙지하여 아래의 두 파일을 생성한다.
(1) main.html
(2) java.html
{ main.html }
(요구사항)
(1) 제공된 이미지를 보고 그대로 구현한다.
(2) 교육과정의 Java를 클릭하면 java.html 로 이동시킨다.
(3) 교육과정의 Oracle을 클릭하면 http://oracle.com으로 이동시킨다.
(4) 교육과정의 jQuery를 클릭하면 http://jqueryui.com으로 이동시킨다.
{ java.html }
- 아래의 버튼 이미지는 java.com에서 캡처하여 가져온다.
(요구사항)
(1) 제공된 이미지를 보고 그대로 구현한다.
(2) 무료 Java 다운로드 이미지를 클릭하면 https://java.com/ko/download 로 이동 시킨다.
(3) 메인으로 이동을 클릭하면 main.html로 이동 시킨다.