Embed Size (px)
DESCRIPTION
Chapter 27 Creating Web Pages by Hand. Contents HTML Structuring your Web site Starting a Web page Controlling the overall appearance of the page Formatting text Adding pictures & links Formatting your page in frames Formatting Web pages by using styles. HTML. - PowerPoint PPT Presentation
Citation preview
1
Chapter 27 Creating Web Pages by Hand
Contents HTML Structuring your Web site Starting a Web page Controlling the overall appearance of the page Formatting text Adding pictures & links Formatting your page in frames Formatting Web pages by using styles
2
HTML
Developed to provide a way to format text and graphics to be read by Web browser
Markup language rather than a programming language
http://www.w3.org
3
Structuring Your Web Site (1/2)
Tips for making your site easy to navigate Be flexible
Use navigation links to direct readers to other
pages
Consider frames
4
Structuring Your Web Site (2/2)
Tips for making your site easy to read Write short paragraphs Break up the text Keep graphics small and fast
5
Starting a Web page – HTML Tags
6
Formatting Text
<!-- 주석 처리 -->
Heading tag: <h1></h1>, Paragraph: <p></p>Enter key 기능 : <br>(</br> 없음 )
7
Adding Special Characters
8
Presenting Information in Lists & Tables
1 2
3
9
Formatting the Table
Align: <tr align=“right”>
Valign: <tr valign=“top”> (top, center, bottom)
Cellpadding: <tr cellpadding =“5”>
Bgcolor: <tr bgcolor =“blue”>
Background: Width & Height: <tr height =“25” width=“500”>
10
Adding Pictures 기본 형식 : <img src=“picture.gif”> Absolute vs. Relative Pathmanmes:
<img src=“picture.gif”> <img src=“image/picture.gif”> <img src=“../picture.gif”>: directory level 표시
Image Attributes <img src=“picture.gif” height =“25” width=“30” >
Text 배치 속성 : align top(middle, bottom) 그림 주위 여백 관련 속성 : hspace(left/right),
vspace(above/below), border, alt
11
Test-Adding Pictures
12
Adding Links
사이트 링크 : <a href=“http://www.mcgraw-hill.com”> Mcgraw-Hill Books </a>
페이지 링크 : <a href=“schedule.htm”> Schedule </a>
같은 페이지 내에서 링크 <a name=“members”>Book Club Members</a> <a href=“#members”>list of book club members</a>
E-mail address 링크 <a
href=“MAILTO:[email protected]”> 가짜 ailab 주소 </a>
13
Gathering Information in Forms
Form: 직접 정보를 주고 받을 때 feedback 기능 :
<form method=“post” action=“cgi-bin/bookform”></form> Gathering information from readers Performing a survey to find out what readers think Giving readers an opportunity to order products
수행하는 방법 Creating the form page in HTML Creating a CGI script that processes the responses (Chapter 34.)
14
Fill in the Blanks Text boxes: 자료 입력할 수 있도록 함
<input type=“text” name=“source” size=“40”> Radio buttons: 여러 개 중에서 하나를 선택
<input type=“radio” name=“bknumber” value=“three”>Three<input type=“radio” name=“bknumber” value=“four”>Four
Check boxes: 원하는 만큼 선택할 수 있음<input type=“checkbox” name=“media” value=“newspaper”>Newspaper<br><input type=“checkbox” name=“media” value=“magazine”>Magazine<br>
Drop-down boxes: drop-down list 에서 선택<select name=“booktype”><option>Action/adventure<option>Historical</select>
Submit button: 사용자가 웹서버에 정보를 전달<input type=“submit” value=“Submit the form”>
15
View in Browser
16
Formatting your pages in Frames
Main file 에 <frameset>(layout of the page 부여 ), <frame>( 각 frame 에 나타나는 file 이름을 지시 ) 가 있음 . Frame layout: <frameset cols=“20%,*”></frameset> ( 수직 :cols, 수평 rows) <frame>tag 는 <frameset>tag 사이에 위치
17
View in Browser<html>
<head>
<title>Test</title>
</head>
<frameset cols=“20%,*”>
<frame src=“first.html” name=“data”>
<frame src=“secondmain.html”
name=“data”>
</frameset>
<body>
</body>
</html>
18
Formatting Web Pages by Using Styles
Storing Styles in a Separate File
Style Sheet Rules
