컴퓨터 공부방(임시)
|
|
|
|
|
[2강] HTML 기초와 글자 태그
○ ver 1 (2009.1.19)
□ 지난주 복습
- 컴퓨터 기본 원리 / 인터넷 기본 원리 / HTML
□ HTML, CSS, JAVASCRIPT-x?
- HTML(DHTML), CSS(스타일시트), JAVASCRIPT-x, JavaScript-x,
- 서버 스크립트 : 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)
|
|
■ 관련 태그
|
|
|
|
|
공백
|
|
|
|
|
줄바꿈
|
<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 소스 둘러보기 ( 웹브라우저 메뉴에서 [보기] ⇒ [소스] )
작성일 : 2009-01-19 14:58
|
|
|
|
|
목록(전체 5건)
|
|
|
|
|
|
|
즐겨찾기 |
|
|
|
|
|
|
|
|
![[중앙당] 당원가입](/images/menu_top_ipdang.gif)
239_HTML_2강_기초&FONT.hwp
