CHAPTER 2. HTML 기본 요소.

Slides:



Advertisements
Similar presentations
일정 관리 다이어리 제작 JSP Programming with a Workbook. 학습 목표  사용자의 일정을 관리할 수 있는 다이어리에 대하여 알아보자. JSP Programming with a Workbook2.
Advertisements

1/37 한글에는 전문적인 문서 편집을 위한 고급 기능이 있다. 문서를 편리하게 수 정할 수 있도록 도와주는 찾기 / 찾아 바꾸기, 다른 위치로 이동할 수 있는 책 갈피와 하이퍼링크에 대해 알아보자. 그리고 자주 사용하는 서식을 미리 정 해 놓고 쓰는 스타일 활용법과 스타일이.
406 문서에 표를 작성하고 크기를 조절할 수 있다. 표에 서식을 적용하여 다양하게 표현할 수 있다. 표를 편집하여 다양한 형태로 나타낼 수 있다. 학습목표 5 부. HTML 의 기본 4 장. 표를 이용한 문서작성 - 17 주 차시 : 1/3 ∼ 3/3 배당시간 : 18.
보도메일 HTML 소스 사용 안내 Version 1.0( 미디어국 제작)
보도메일 HTML 소스 사용 안내 Version 1.0( 미디어국 제작)
XHTML Basic 제 13 장 1. XHTML Basic의 개요 2. XHTML Basic 기본 문법 3. 표 만들기
Chapter06 폼 HTML5 Programming.
Chapter04 캔버스(2) HTML5 Programming.
Chapter05 HTML 홈페이지 만들기
파워포인트 2007.
2002/3/20 HTML 2002/3/20
CHAPTER 1. 기초 사항.
컴퓨터프로그래밍 1주차실습자료 Visual Studio 2005 사용법 익히기.
HTML과 CGI 프로그래밍 PHP 웹 프로그래밍 (PHP Web Programming) 문양세
예제모음.
Chapter04 HTML 회원 정보 입력 양식 만들기
이 름: 정홍도 (과장) 팀 명: 개발사업팀 일 자:
HTML5 웹 프로그래밍 입문(교수용) 2장.HTML5 문서의 기본.
7. 프레젠테이션 제품 소개나 홍보 등을 보다 효율적으로 하기 위하여 Presentation Software를 사용하고 있다.
홈페이지 만들기 HTML HyperText Markup Language 홈페이지를 만들 때 사용하는 언어
07장. <TABLE> 태그로 표 디자인하기
iframe 사용하기 Chapter 3 Part 2
HTML5+CSS3 실무 테크닉 김은기 저.
16장 설문조사 한빛미디어(주).
로고 화면 만들기 자료번호 애니메이션 기본 화면 구성 및 설명 기본 화면 구성 설명
홈페이지용 그림 활용법 그림 삽입 태그 <IMG> 배경 그림 다루기 그림과 문자열의 어울림
학습목표 학습목차 다른 홈페이지의 HTML 파일 코드를 보는 방법에 대해 알아봅니다.
컴퓨터 프로그래밍 : 실습3 2장 데이터와 식.
In2smile PT Template in2smile.com.
스크래치 언어 이해 스크래치 이용법 습득 고양이가 말을 하며 움직이는 예제 작성
CHAP 12. 리소스와 보안.
HTML5 웹 프로그래밍 입문 (개정판) 2장. HTML5 문서의 기본.
10강. JSP 본격적으로 살펴보기-II 스크립트릿, 선언, 표현식 지시자 주석 Lecturer Kim Myoung-Ho
HTML.
2018년 10월 08일 박성진 Web & Internet [05] CSS3 속성 2018년 10월 08일 박성진
자바응용.
[부록] HTML과 CGI (from PHP 웹 프로그래밍) 문양세 강원대학교 IT대학 컴퓨터과학전공.
인터넷응용프로그래밍 JavaScript(Intro).
Chapter03 캔버스(1) HTML5 Programming.
게임웹사이트운영 [10] 폼 작성.
9장 웹 사이트 초기 화면 제작 한빛미디어(주).
2018년 11월 05일 박성진 Web & Internet [08] 레이아웃 P1 2018년 11월 05일 박성진
Web & Internet [03] HTML5 다양한 태그
HTML5 Canvas 태그 92팸 유승연 안동찬 엄태인 김영재.
마인드 맵.
HTML 문서 작성 PART 1 Chapter 2 Part 1
HTML 문서 작성 PART 2 Chapter 2 Part 2
Adobe 제품 다운로드 및 설치 방법 안내 Adobe Creative Cloud Adobe License 권한을 받으신 분
FileMaker를 이용한 데이터 관리 옥현진(KICE).
게임웹사이트운영 [3] 블록과 목록.
웹디자인
문서작성에 사용되는 기본태그 MARQUEE, A.
Chapter05 HTML 홈페이지 만들기 HTML & JavaScript.
Cold Spring Harbor Laboratory Press 저널 이용 매뉴얼
Chapter03 HTML 포토앨범 만들기
.Net Web Application 2007 컴퓨터공학실험(Ⅰ)
3장 JSP프로그래밍의 개요 이장에서 배울 내용 : JSP페이지의 기본적인 개요설명과 JSP페이지의 처리과정 그리고 웹 어플리케이션의 구조에 대해서 학습한다.
Chapter 10 데이터 검색1.
문서 작성에 사용되는 기본태그 HR, PRE, B, I, U, S.
웹과 모바일 홈페이지의 이해와 제작 CSS 깊이 알기
웹과 모바일 홈페이지의 이해와 제작 HTML태그와 CSS로 꾸미기
슬라이드 쇼의 설정 슬라이드 쇼의 실행 파일과 폴더의 관리 글꼴을 포함해서 저장 웹 페이지로 게시 압축 파일
기악의 연주형태 1. 독 주 한 사람이 하나의 악기로 연주하는 것을 말한다. 대개는 피아노 반주가 따르지만 반주가 없는 무 반주 형식을 취하기도 한다. 독주는 어느 악기라도 할 수 있지만, 주로 가락(멜로디)을 연주하는 악기가 사용된다. 사랑의 슬픔-바이올린독주.
Data Base Web Programming
“Poster Main Title” Author and co-author names
Microsoft Word 2002 제1장 문자열의 삽입과 변경.
오늘의 강의 제목을 입력하세요 소 속 : 인문대학 국어국문학과 이 름 : 홍길동 교수 1.
6 객체.
Chapter 11. 문서 인쇄 및 파일 형식.
타이머를 시작하려면 슬라이드 쇼 메뉴에서 쇼 보기를 클릭하십시오.
Presentation transcript:

CHAPTER 2. HTML 기본 요소

이번 장의 목표

텍스트 표시 텍스트는 특별한 태그없이도 <body>...</body> 안에서 표시할 수 있다. 하지만 단락을 생성하지 않으면 모든 텍스트가 연결되어서 하나의 긴 줄로 표시된다. <!DOCTYPE html> <html> <body> 안녕하세요? 텍스트는 body태그 안에 특별한 태그 없이 입력할 수 있지만 단락을 사용하지 않으면 전체가 연결되어서 한줄로 표시됩니다. </body> </html>

단락 단락(Paragraphs)이란 하나하나의 짧은 이야기 토막 단락의 전후에 빈 줄이 추가된다. <!DOCTYPE html> <html> <body> <p>이것이 하나의 단락입니다.</p> </body> </html>

<br> 태그 강제 줄바꿈 태그 <!DOCTYPE html> <html> <body> <p>여기는 <br>br태그를 사용하여 <br>줄을 바꾸었습니다. </p> </body> </html>

텍스트 입력시 주의할 점 HTML 코드에서 엔터키를 눌러서 줄을 바꾸었다고 해서 웹 브라우저에서 줄이 바뀌는 것은 아니다. <!DOCTYPE html> <html> <body> <p> 아주 먼 옛날 바닷가 어느 왕국에 애나벨리라는 이름을 가진 한 소녀가 살고 있었지요. 그 소녀는 날 사랑했었지요. </p> </body> </html>

<pre> 태그 프로그래머가 입력한 그대로 화면에 표시하는 태그 <!DOCTYPE html> <body> <pre> 아주 먼 옛날 바닷가 어느 왕국에 애나벨리라는 이름을 가진 한 소녀가 살고 있었지요. 그 소녀는 날 사랑했었지요. </pre> </body> </html>

헤딩 헤딩(heading): 웹 페이지의 머리기사(headline) <!DOCTYPE html> <body> <h1>이것이 heading 1 입니다.</h1> <h2>이것이 heading 2 입니다.</h2> <h3>이것이 heading 3 입니다.</h3> <h4>이것이 heading 4 입니다.</h4> <h5>이것이 heading 5 입니다.</h5> <h6>이것이 heading 6 입니다.</h6> </body> </html>

주석 주석(comment)은 코드를 설명하는 글 <!DOCTYPE html> <html> <body> <!--참고: 아래 링크는 나의 배너임 --> <img src="http://www.company.com/pics/f.jpg" height="100" width="400" /> <!-- <input type="text" size="12" /> --> </body> </html>

텍스트 서식

텍스트 서식 <!DOCTYPE html> <html> <body> <p><b>이 텍스트는 bold입니다.</b></p> <p><strong>이 텍스트는 strong입니다.</strong></p> <p><i>이 텍스트는 italic입니다.</i></p> <p><em>이 텍스트는 emphasized입니다.</em></p> <p><code>이 텍스트는 code입니다.</code></p> <p><sub> subscript</sub> 이고 <sup>superscript</sup> 입니다.</p> </body> </html>

수평선 <hr> 태그를 사용하면 수평선을 그릴 수 있다. <!DOCTYPE html> <body> 이것이 수평선입니다. <hr /> 수평선이었습니다. </body> </html>

특수문자 ‘<’와 ‘>’ 같은 문자를 화면에 표시하기 위하여 필요하다.

커피 전문점 웹 페이지

HTML 소스 <!DOCTYPE html> <html> <head> <title>Web Coffee</title> </head> <body> <h1>Web 커피 메뉴</h1> <h2>아메리카노 5000원</h2> <p>에스프레소에 물을 추가한 것입니다.</p> <h2>카페오레 6000원</h2> <p>에스프레소에 우유를 넣은 커피입니다.</p> <h2>카푸치노 6000원</h2> <p>커피 위에 우유거품을 얹은 커피입니다.</p> </body> </html>

리스트 리스트: 항목들을 나열하는데 사용 번호있는 리스트: <ol> 번호없는 리스트: <ul>

번호없는 리스트 <ul> <li>에스프레소</li>

번호있는 리스트 <ol> <li>에스프레소</li>

정의 리스트 정의 리스트(definition list): 항목들과 함께 항목들의 정의(설명)가 표시되는 리스트 <dl> <dt>에스프레소</dt> <dd>- 커피의 기본, 커피의 원액이다.</dd> <dt>아메리카노</dt> <dd>- 에스프레소에 물을 넣은 것</dd> <dt>카페라떼</dt> <dd>- 커피에 우유를 섞은 것</dd> </dl>

링크 하이퍼링크(또는 링크)는 다른 문서로 점프할 수 있는 단어나 이미지

링크 예제 <!DOCTYPE html> <html> <body> <a href="http://www.google.com" target="_blank"> google.com 방문</a> <p> target 속성이 "_blank"이므로 , 링크는 새로운 탭에서 열립니다. </p> </body> </html>

target 속성 target 속성은 각 링크가 클릭되었을 때, 새로운 페이지가 어디에 열리는 지를 지정

예제 <!DOCTYPE html> <html> <body> <a href="http://www.google.com" target="_self"> google.com 방문1</a> <br /> <a href="http://www.google.com" target="_blank"> google.com 방문2</a> </body> </html>

id 속성 <!DOCTYPE html> <html> <body> <a href="#section1">참고 사항으로 가려면 여기를 클릭하세요.</a> <p> Hello World!</p> <hr /> <a id="section1">참고 사항</a> <p> 동일한 페이지 안에서도 점프할 수 있습니다. </p> </body> </html>

이미지 <img> 태그 사용

예제 <!DOCTYPE html> <html> <body> <h2>설악산</h2> <img border="0" src="seolak.jpg" alt="설악산" width="300" height="230"> </body> </html>

이미지 처리 방법

width와 height 속성

alt 속성 브라우저가 어떤 이유로 이미지를 화면에 표시하지 못했을 경우에, 표시되는 대체 텍스트(alternate text)를 지정

이미지의 종류 JPEG 실사사진과 같이 복잡하고 많은 색상으로 이루어진 이미지에 적합 손실 압축 방식을 사용한다. PNG 클립 아트와 같이 적은 수의 색상을 가진 이미지에 적합 무손실 압축 방식 GIF 로고나 클립아트 형태의 이미지에 적합 256 색상만을 지원 투명 배경과 애니메이션을 지원한다.

커피 전문점 예제

HTML 소스 <!DOCTYPE html> <html> <head> <title>Web Programming</title> </head> <body> <h1>Welcome to Web Coffee!</h1> <img src="coffee.gif"> <p> 하우스 로스팅 원두의 신선한 커피를 맛보고 싶다면 <em>공인 1급 바리스타</em>가 최고급 원두만을 직접 엄선하여 사용합니다. </p> <h2>메뉴</h2> 아메리카노,카페라떼,카푸치노,카페모카, ... </body> </html>

썸네일 예제

thumnail.html <!DOCTYPE html> <html> <head> <title>NASA 이미지들</title> </head> <body> <h1>NASA가 제공하는 이미지들</h1> <p> 미국의 NASA는 우주에 대한 고해상도 이미지들을 제공하고 있다. </p> <h2>Hubble Images</h2> 허블 망원경으로 촬영한 이미지로서 우주의 초기의 은하 모습을 보여준다. <a href="photo1.html"> <img src="thumbnails/PIA12110_hithumb.jpg" alt=""> </a> <a href="photo2.html"> <img src="thumbnails/PIA03149_hithumb.jpg" alt=""> </body> </html>

photo1.html <!doctype html> <html> <head> <title>Deep Field</title> </head> <body> <h1>Hubble Image #1</h1> <p> <img src="images/PIA03542_ip.jpg" alt="Deep Field"> </p> </body> </html>

photo2.html <!DOCTYPE html> <html> <head> <title>Deep Field</title> </head> <body> <h1>Hubble Image #2</h1> <p> <img src="images/PIA03149_ip.jpg" alt="Deep Field"> </p> </body> </html>

테이블 <table border="1"> <tr> <td>홍길동</td>

테이블 헤더 <table border="1"> <tr> <th>영화제목</th> <td>라이프 오브 파이</td> <td>2013</td> <td>이안</td> <td>8.68</td> … </table>

테이블 예제 <table border="1"> <tr> <td>100</td>

테이블 경계 <!DOCTYPE html> <html> <body> <table border="1"> <tr> <td>홍길동</td> <td>98</td> </tr> <td>김철수</td> <td>80</td> </table> </body> </html>

테이블 행, 열 병합 <table border="1"> <tr> <th>1열</th> <th>2열</th> <th>3열</th> </tr> <td rowspan="2">1행 1열</td> <td>1행 2열</td> <td>1행 3열</td> <td>2행 2열</td> <td>2행 3열</td> <td colspan="3">3행 1열</td> </table>

테이블 캡션 <table border="1"> <caption> 최근에 본 영화들 <tr> <th>영화제목</th> <th>연도</th> <th>감독</th> <th>평가</th> </tr> ... </table>

테이블 예제

HTML 소스 <table border="1"> <tr> <th colspan="5">평생교육원 강좌 소개 -- 2013년도 2학기</th> </tr> <th>강좌 이름</th> <th>강의자</th> <th>소개</th> <th>강좌코드</th> <th>실습비</th> <td>뎃생과 유화</td> <td>김철수</td> <td>모든 미술영역의 뼈대를 이루는 뎃생의 기본실력을 체계적으로 다루며, 유화에서는 재료를 다루는 방법에서부터 다양한 표현기법에 이르기까지 전문적인 미술인으로 입문할 수 있도록 각 개인의 수준에 맞추어 개인별, 단계별로 지도합니다. </td> <td>H27</td> <td>100,000원</td>

HTML 소스 <tr> <td>바이올린</td> <td>홍길동</td> <td>전반적인 현악기의 특성을 파악하며 기초를 다지고, 에뛰드와 곡을 접하면서 아름다운 음색의 바이올린을 연주할 수 있다. </td> <td>H28</td> <td>200,000원</td> </tr> <td>성악 아카데미</td> <td>김호성</td> <td>강의를 통해 배우고 익힌 곡을 음악회를 통하여 기량을 향상하고 무대를 경험한다. <td>H30</td> <td>300,000원</td> </table>

HTML 소스 <tr> <td>바이올린</td> <td>홍길동</td> <td>전반적인 현악기의 특성을 파악하며 기초를 다지고, 에뛰드와 곡을 접하면서 아름다운 음색의 바이올린을 연주할 수 있다. </td> <td>H28</td> <td>200,000원</td> </tr> <td>성악 아카데미</td> <td>김호성</td> <td>강의를 통해 배우고 익힌 곡을 음악회를 통하여 기량을 향상하고 무대를 경험한다. <td>H30</td> <td>300,000원</td> </table>

HTML 소스 <tr> <td>바이올린</td> <td>홍길동</td> <td>전반적인 현악기의 특성을 파악하며 기초를 다지고, 에뛰드와 곡을 접하면서 아름다운 음색의 바이올린을 연주할 수 있다. </td> <td>H28</td> <td>200,000원</td> </tr> <td>성악 아카데미</td> <td>김호성</td> <td>강의를 통해 배우고 익힌 곡을 음악회를 통하여 기량을 향상하고 무대를 경험한다. <td>H30</td> <td>300,000원</td> </table>

예제: 개인 홈페이지

HTML 소스 <!DOCTYPE html> <html> <head> <title>My Homepage</title> </head> <body> <h2>My Homepage</h2> <p> <img src="programmer.png" width="100" height="100" alt="프로그래머 그림" /> <strong>컴퓨터 프로그래머</strong>를 꿈꾸며 열심히 공부하고 있는 1인입니다. </p> <h3>현재 학습하고 있는 과목</h3> <ul> <li>C 언어 </li> <li>JAVA 언어 </li> <li>웹프로그래밍 <a href="http://www.w3c.org" target="_blank">W3C 사이트</a></li> </ul>

HTML 소스 <h3>이번 학기 시간표</h3> <table border="1"> <caption> 시간표 </caption> <tr> <th> </th> <th>월요일</th> <th>화요일</th> <th>수요일</th> </tr> <td>1교시</td> <td>C언어</td> <td>JAVA언어</td> … </table> </body> </html>

Q & A