Download
1 / 18
190 likes | 309 Views
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.
E N D
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 • 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
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
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
Formatting Text <!--주석 처리 --> Heading tag: <h1></h1>, Paragraph: <p></p> Enter key 기능: <br>(</br> 없음)
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”>
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
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:ailab@chollian.net”>가짜ailab주소</a>
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.)
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”>
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사이에 위치
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>
Formatting Web Pages by Using Styles Style Sheet Rules Storing Styles in a Separate File
