1 / 18

A Comprehensive Guide to Creating Web Pages by Hand Using HTML and Styles

This chapter outlines the essential elements of creating web pages from scratch using HTML. It covers key topics such as structuring your site for easy navigation, formatting text and images, adding links, and utilizing frames effectively. You'll learn how to make your web pages visually appealing using styles and how to ensure your content is user-friendly. This guide provides practical tips for writing, organizing, and optimizing your web pages, making the process straightforward for both beginners and those looking to refine their skills.

waseemah-duaa
Télécharger la présentation

A Comprehensive Guide to Creating Web Pages by Hand Using HTML and Styles

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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:ailab@chollian.net”>가짜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 Style Sheet Rules Storing Styles in a Separate File

More Related