[2강] HTML 기초와 글자 태그

○ ver 1 (2009.1.19)

□ 지난주 복습

- 컴퓨터 기본 원리 / 인터넷 기본 원리 / HTML

□ HTML, CSS, JAVASCRIPT?

- HTML(DHTML), CSS(스타일시트), JAVASCRIPT, JavaScript,

- 서버 스크립트 : CGI(Common Gateway Interface ; PHP, ASP, Perl, C/C++, 자바, VB스크립트...)

- PHP, ASP, Perl, C/C++, 자바, VB스크립트

- 웹 브라우저 ; 인터넷 익스플로러, 파이어폭스, 네스케이프, 모자이크...

- DB(mySQL, ORACLE...), ActiveX

□ 단축키 기초 (^:CTRL키,  @:ALT키, ~;Shift키, #:윈도우키)

○ 공통 단축키 : ^C(Copy;복사하기), ^V(붙어넣기), ^X(오려두기), ^A(All;전체선택),

○ 문서 편집 : ^O(Open;불러오기), ^S(Save;저장하기), ^N(New;새문서), ^F(Find;찾기), ^H(바꾸기), ^P(Print;인쇄), ^Z(실행취소)

○ #E(탐색기;익스플로러), #R(실행)

○ 인터넥 익스플로러에서 주소창 : @D

□ HTML 문서의 작성

- TEXT 편집기(메모장, Edit Plus, Ultra Edit,,,), 웹에디터(나모 웹에디터, 드림위버...)

□ HTML 문서의 기본구조

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY>

<!-- 주석문 -->

~ 본문 내용 ~

</BODY></HTML>

□ 메타 태그 : 문서의 속성 설정

<META http-equiv="Content-Type" CONTENT="text/html; charset=euc-kr">

=> 한글 문자 셋

<META http-equiv="Content-Type" CONTENT="text/html; charset=iso-8859-1">

=> 영문 문자 셋

<META http-equiv="refresh" content="5; URL=http://이동할주소">

=> 0초 후 이동

<META NAME="keywords" CONTENTT="컴퓨터, HTML, 검색어, 키워드">

=> 주요 키워드 입력

□ 주석

<!-- 이 안의 내용은 보이지 않는 주석문입니다 -->

□ 글자 : <FONT> 태그

내용	태그	속성	비고
■ 기본 형식	<font size="1" face="궁서" color='red">~</font>
글자크기	size="1"	1~7
폰트	face="바탕"	바탕,궁서...	일반적인 폰트를 쓰자
색상	color=“blue" / color="#FF0000"	red(#FF0000),green(#00FF00),blue(#0000FF), white(#FFFFFF), black(#000000)...	RGB(Red,Green,Blue) /CMYK(Cyan,Magenta,Yellow,Black)
■ 관련 태그
공백	&nbsp;
줄바꿈	<BR>
문단 나눔	<P>	~
이태리	<I>~</I><EM>~</EM>
굵게	<B>~</B><STRONG>~</STRONG>
밑줄	<U>~</U>
취소선	<S>~</S>
가운데 정렬	<CENTER>~</CENTER>
정렬	<p align="left">~</p>	left, right, center
위첨자	<SUB>~</SUB>
아래첨자	<SUP>~</SUP>
타자체	<TT>~</TT>
텍스트 크기를 더 크게/작게	<BIG>~<BIG> / <SMALL>~</SMALL>		중복사용 가능
목록1	<UL><LI type="disc">~</UL>	disc(●), circle(○), square(■)
목록2(순차적)	<OL start="2"><LI type="disc">~</OL>	1(1,2,3,...), A(A,B,C,D..),a(a,b,c,d..), I(I,II,III,IV,,), I(i,ii,iii,iv...)
자간,줄바꿈을 그대로 보이기	<PRE>~</PRE>

★ 실습 :

1) Edit Plus(또는 Ultra Edit) 설치하기 (쉐어웨어 버전도 상관 없음)

2) HTML 작성하기

- title 태그를 사용하여 타이틀을 이용하고 웹 브라우저로 확인

- font 태그를 이용하여 글자를 다양하게 꾸며보기

- 메타 태그를 이용하여 5초 후 다른 사이트로 이동시키기

3) 메모장으로 HTML작성⇒HTML로 저장(확장자를 htm으로)⇒웹브라우저로 보기⇒EditPlus로 불러오기

5) 사이트 HTML 소스 둘러보기 ( 웹브라우저 메뉴에서 [보기] ⇒ [소스] )