컴퓨터와 인터넷 제 4 강 HTML

컴퓨터와 인터넷제4강 HTML 1. HTML 개요 2. HTML 태그 3. HTML 태그와 문서의 특징 4. HTML 문서의 기본 구조 5. HTML 문서 작성 방법

1. HTML 개요 • HTML (Hyper Text Markup Language) • Hyper Text를 만들기 위한 언어 • Hyper Text 문서의 형식 (제목,단락,목록,색상 등) 정의 • HTML 문서는 Text file 형태 • 확장자는 html 또는 htm • HTML 문서는 동적연결 지원 - hyperlink • HTML 문서는 Text, Image, 동영상, 사운드 포함 및 연결 - hyper media • HTML 문서의 번역은 웹 브라우저가 담당

2. HTML 태그 • 태그는 HTML문서의 모양과 행동양식을 정해주는 하나의 명령어 • 형식 : <…….> • 3가지 태그 형식 • <tag> • <tag> 문장 </tag> • <tag 속성 = 인자> 문장 </tag>

예) • <tag> • <br> • <p> • <tag> 문장 </tag> • <html> … </html> • <tag 속성 = 인자> 문장 </tag> • <font color = “red”> 글자 </font>

3. HTML 태그와 문서의 특징 • HTML tag의 특징 • 대소문자 구별을 하지 않는다. • HTML은 구조적 언어 로 Tag가 들어갈 수 있는 곳이 있고 없는 곳이 있다. • HTML 문서의 특징 • 한 칸 공백 이외에 추가로 입력된 공백문자(space문자), tab, enter를 무시 • 구조적 언어

* 구조적 언어 • <center><h3> 잘못된 tag 구성</center></h3> • <h1><h3> 글자크기 </h3></h1> • <h1> 글자 </h1><h3> 크기 </h3>

4. HTML 문서의 기본구조 <HTML> <head> <title> … </title> </head> <body> 웹 페이지의 본문 </body> </HTML>

4-1. <head> … </head> • html 문서에 대한 일반적인 사항을 포함 • html 문서의 머리말 • tag 안에 들어가는 내용은 브라우저 상에 표시되지 않는다.

head 안에 들어갈 수 있는 tag 들 • <title> : 문서의 제목 • <meta> : 문서의 저작자, 문서의 성명, 문서내의 keyword 등 주로 검색엔진에 의해 읽히는 목적으로 사용 • <script> : 자바 스크립트를 포함한 스크립트의 내용을 기술 • <style> : 해당 문서 전체의 글꼴, 링크, 줄간격 등에 대한 내용을 정의

4-2. <body> … </body> • html 문서의 실제적인 내용이 들어가는 곳으로 브라우저 화면에 보여짐 • <body>안에 들어가는 속성 • alink, vlink, link, text, bgcolor, background • 예) <body bgcolor = “white” text = “black” link = “blue” vlink = “puple” alink = “red”>

5. HTML 문서 작성 방법 • 일반 문서 편집기(메모장, edit, vi 편집기) • HTML 전용 편집기 • text 방식 - 핫도그, 홈사이트 • WYSIWYG 방식 (What You See Is What You Get) - 나모, 프론트페이지, 드림위버 • 이미 작성한 문서를 HTLM로 변환 - 한글

컴퓨터와 인터넷 제5강 기본적인 HTML 연습 -문단설정 : <p>, <br> -특별한 텍스트 : <xml>,<blockquote>

1. 기본적인 HTML 태그 <html> <head> <title> 메모장으로 실습합니다.</title> </head> <body> 안녕하세요? <br> 즐거운 실습시간 입니다. </body> </html>

2. 문단설정 - <p>, <br> • <p> • 단락구분 • 종료태그 없이 단독사용 • 속성 : align = left, right, center • <br> • 문장의 줄바꿈 • 종료태그 없이 단독사용

예) <html> <head> <title> 메모장으로 실습합니다.</title> </head> <body> 문단설정을 위한 태그 예제입니다. <br> p태그는 문단을 나누면서 줄바꿈을 합니다.<p> br태그는 문단을 나누지 않으면서 줄바꿈만 해 줍니다.<p> 즐거운 실습시간 입니다. </body> </html>

2. 문단설정 - <pre>, <hr> • <pre> • 작성된 내용 그대로 웹 브라우저에 표현 • 복합태그 • <hr> • 웹 페이지 안에 선을 그리거나 경계선을 나타낼 때 사용 • 단독태그 • 속성 : <hr size = pixel width = pixel 또는 %> • size 가로선의 두께 • width 가로선의 길이를 n개의픽셀 또는 웹 브라우저 너비에 대한 비율로 지정 • align = left, right, center • noshade 가로선의 음영효과를 없애줌 (수평막대는 3차원 형태)

예) <html> <head> <title>pre 태그사용 연습</title> </head> <body> 문단설정을 위한 태그 예제입니다. <br> <pre> ┃┃　　┃┃┏━━━┓ ┃┃┃┃┏━━━━┓ ┃┗━━┛┃┃┏━┓┃ ┃┃┃┃┃┏━━★┃ ┃┏━━┓┃┃♧━┛┃ ┃┃┃┃┃┃　　┃┃ ┃┃　　┃┃┃┏━━┛ ┃┃┃┃┃┃　　┃┃ ┃┃　　┃┃┃┗━━┓ ┃┃┃┃┃♧━━┛┃ ┗┛　　┗♡┗━━━┛ ┗┛★┛┗━━━━┛ </pre> 즐거운 실습시간 연습해봅시다.<br> </body> </html>

예) <html> <head> <title>hr 태그사용 연습</title> </head> <body> 문단설정을 위한 태그 예제입니다. <br> <hr size = "1" width = "100%"> <hr size = "5" width = "50%"> <hr size = "10" width = "20%"> 즐거운 실습시간 연습해봅시다. <br> <hr size = "1" width = "100" align = right> <hr size = "5" width = "500" noshade> <hr size = "20" width = "1000"> 여러가지 선들을 다양하게 실습해보세요.<br> </body> </html>

2. 문단설정 - <center>, <nobr> • <center> • <center>…</center> 안에 포함되는 모든 것은 웹 브라우저의 중앙정렬 • 복합태그 • <nobr> • 웹 브라우저에 의한 임의 줄바꿈 차단 (브라우저 크기 조정 해보기)

예) <html> <head> <title>center 태그사용 연습</title> </head> <body> 문단설정을 위한 태그 예제입니다. <br> <center> center 태그는 모든 것을 중앙으로 정렬합니다. <hr size = "10" width = "100"> </center> </body> </html>

예) <html> <head> <title>nobr 태그사용 연습</title> </head> <body> 문단설정을 위한 태그 예제입니다. <br> <nobr> <center> center 태그는 모든 것을 중앙으로 정렬합니다. <hr size = "10" width = "100"> </center> </nobr> 즐거운 실습시간 더 즐거운 점심시간 </body> </html>

3. 특별한 텍스트 • <xmp> • 태그를 일반 텍스트로 취급하여 그대로 웹 브라우저에 출력 • <listing> • 입력한 내용을 그대로 웹 브라우저 화면에 출력

<blockquote> • 웹 페이지에 인용한 단락표시에 사용 • <address> • 웹 문서안에 전자우편 주소 표기에 사용

컴퓨터와 인터넷 제 4 강 HTML