Using HTML to create a web page

Transcription

1 S.3 Computer Literacy Using HTML to create a web page To create web pages it is best to know HyperText Markup Language (HTML). Markup tags tell the browser how to display text and images on web pages. For example, to make the text bold or italic, to change the text into title format, or to create a hyperlink to another file, When we browse the web page, the raw data obtained from the server is a HTML document. The browser has the ability to interpret HTML commands and display the data, or to obtain further information from hyperlinks according to these HTML codes. Using HTML to create a web page HTML documents are pure text files and thus general text editing tools (like Notepad) can be used to create web pages. When you complete the web page design, save the file as an *.htm or *.html file. <html> <head> <title>this is the title of the web page. </title> </head> <body> This is a simple web page.  Define HTML text including the web content to be displayed. Record the reference annotation in the HTML document or temporarily hide some parts for future use. The various markups in the HTML document use <markup tag> and </markup tag> format to define the function areas. If you need to set attributes for a specific text in the web page, you may use concerned text to handle. Here is an example: 1

2 Web Page Design <html> <body> This is Arial font text. This is 4 points size text. This is blue colour text. This three attributes can be completed within 1 markup. </body> </html> Attributes Attribute Commands Examples Result Font Face = Font name Arial font text Arial font text Size Size = value 4 points size 4 points size text text Color Color = color Blue Blue colour text [blue] colour text We can use some simple markup codes to set the font style. Markup Tags Styles Examples Results and Bold bold Bold and Italic italic Italic and Underline undeline Underline and Subscript subscript Subscript and Superscript superscript Superscript Note that in the above activity, no line break is found in the HTML document of the web page. Use the following simple markup tags to add line breaks to the web page. Break a line Start a new paragraph Insert a blank new row for each inserted. A blank new row will be inserted to separate the next paragraph with the previous one. However a series of will only generate one blank new row. 2

3 S.3 Computer Literacy Knowing JavaScript Try this example of JavaScript: <html><body> Below is a simple javascript demonstration. <script language= JavaScript > document.write( This sentence is suing javascript language to present. ) </script> </body></html> JavaScript can create an interactive effect in web pages. For example, we may add buttons to the web page, so that when a user clicks the button, a reaction created by JavaScript will be initiated. <html> <head> <script> function AlertMessage() { alert( This alert message method is initiated by using Javascript ) } </script> </head> <body> Click this button. <form> <input type = button name = button1 value = Alert message onclick = AlertMessage() > </form> </body> </html> Note the first 3 attribute commands <input type = button name = button1 value = Alert message onclick = AlertMessage() >, in the sentence <input type = button name = button1 value = Alert message onclick = AlertMessage() >, will give a button and onclick = AlertMessage() means that by clicking this button the AlertMessage() function written with JavaScript will run. AlertMessage() is defined by starting with { and ending with } and alert is an alert message initiation method using JavaScript. 3

4 Web Page Design Workflow of Web Page Production (Textbook 3A p.95) Before we start really working on any web page building application softwares (e.g. Microsoft Frontpage, Macromedia Dreamweaver), we should have an overall plan so that we can set up a consistent style, collect information, and decide on ways of presentation before bringing them into truth. All you need is pencil and paper and make up a plan like this: FIRST PAGE ABOUT MYSELF ABOUT MY FRIENDS ABOUT MY INTEREST ABOUT MY PET SCHOOL DIARY PHOTO ALBUM ACTORS / ACTRESSES MUSIC Defining the site (Textbook 3A p.97-98) Remember saving all the working files for the proposed web pages in the same folder on your computer. After completing the web page, all the content in the folder can be uploaded to the proposed web server. Working out the web page (Textbook 3A p ) You can create your own web pages with texts and images with the help of the Insert Bar, and the Properties Inspector. 4

5 S.3 Computer Literacy Typical working environments in Dreamweaver MX 2004 Insert Bar Document Toolbar Standard Toolbar Properties Inspector: Handling images Web page browsers basically support images in *.jpg (Joint Photographic Experts Group) and *.gif (Graphic Interchange Format). Browsers of latest version, e.g. Internet Explorer 6.0 or above, will support the third type of image: *.png (Portable Network Graphics) You can insert picture by clicking this button and Dreamweaver will ask for the location of the image file you prepare to insert. If you have not saved the web page before, a dialogue box will pop up and remind you that the image file is temporarily saved as absolute path until you save the web page. Then Dreamweaver will correct the path of the image file to the relevant folders holding the web page. Hyperlinks It is useful to have a brief idea of URL protocol before going to the discussion of hyperlinks. URL is uniform resource locator, which is an address of the objects in the Internet. For example: 5

6 Web Page Design protocol host resource path Protocol may vary on different services, we may find protocols as: file, ftp, gopher, http, mailto, news, telnet. There are four types of hyperlinks: Absolute path brings you to another web site in the Internet, e.g. Relative path brings you to another page within a web site, e.g. /images/page_1.htm; link evokes the programme in the local computer (e.g. Outlook or Outlook Express) and send to the address quoted, e.g. mailto:webmaster@webpage.com, insert an link by typing the address to the link box or click ; Anchors help user to navigate in a lengthy web page swiftly, by adding anchors to help better navigation on the web. You can add anchor to the planned position by clicking in the Insert Toolbar and give a proper name to each of them. Then you can call the anchors by their name in the link box using #name_of_anchor. Using table Table is not only useful in presenting tabular data, it is frequently used in web page design as a tool for layout. Try to make the good use of the cell functions like: merge/delete cells, column width, cell pad, cell space, background colours of cells, and other function involving the table to create a clean and tidy web page. Table can be inserted by clicking this button: Building frames Frames divide a single browser into several areas, allowing different web contents to be displayed on different areas in the browser. All the frames are kept and managed in a frameset. You can create a frameset by File > New > Frameset, a list of different combinations of frames is available. Special attention should be given when you want to display some web page content on certain frame, you have to define the target frame clearly in the Frame properties panel, e.g. displaying the web page on the _mainframe,_parent, _blank, _self,_top of the frame. [example: Using Behaviours in Dynamic/Interactive web page Dreamweaver helps creating behaviours by using embedded javascripts, making the web page becoming more 6

7 S.3 Computer Literacy interesting. Behaviours involve events and action. The tags for behaviour are usually embedded in the <body> tags or any objects in HTML. Creating a pop-up message box At the Window Menu, please call out the Behaviour panel. At a selected text or image, then click the + in Behaviour and choose Pop-up message. Enter Hello! How are you? and choose the event as onclick. Test the effect by previewing the page (F12). If you read the code window, you will see the embedded codes as followed: <a href="#" onclick="mm_popupmsg('hello! How are you?')">pop-up</a>. For a pop-up message box displayed on leaving, the event onunload should be chosen. Creating a browser without any toolbar This interesting effect is very useful when the monitors of users are of different resolution. In the design process of web page, the size of the browser is fixed. To create this, selected a text or image to be linked to the planned web page to be placed in the browser without toolbar. Add a pound sign # at the link box in the properties panel. Then click + in Behaviour panel and select Open Browser Window, a dialogue box appears showing the attributes of the browser. Fix the value of width and height of the browser and click F12 to preview the web page. Using Timeline Dreamweaver creates a animation/moving object on the web page by using timeline. Browser will carry out different instructions along the flow of the timeline. Ways of making an animation is as followed: 1. Animation element should be placed in Layer in Dreamweaver. Handle of the layer 2. Right-click the handle of the layer on the top-left hand corner, and select Add to Timeline on the quick menu. Click OK to the pop-up box and a Timeline properties panel appears. 3. As setting a simple animation with Flash, select the layer and extent the length of the animation to desired length. At the end frame, move the Layer with Animation element to a new position. Add keyframes if necessary to change the path from straight line to curve by dragging the Layer to other position. 7

8 Web Page Design Timeline Panel 4. To start the movement of the Layer manually by the user, unselect the Autoplay and Loop boxes in the Timeline properties panel. Go the Behaviour and select Timeline > Play Timeline. Choose the timeline on the pop-up box and confirm. At the <img> action, select onclick. 5. To end the movement at the last frame, select the last frame, and go to Behaviour panel > Timeline > Stop Timeline. Choose the timeline to be stopped and confirm. Set the <Timeline> action with the number of the last frame, e.g. onframe45, manually. Embedded background music Putting the following codes between the section <head> and </head> ['Perfidia _ Xavier Cugat.mp3' is the name of the music file] and the music will be looped. Make sure the music file is in the same level with the *.htm. Try altering the parameter to observe the effect. <embed src = 'Perfidia _ Xavier Cugat.mp3' loop=true autostart = start mastersound hidden = true hidden = true width = 0 height = 0> </embed> Remark: besides adding music or background sound as embedded objects, you can add plug-in on the web to evoke corresponding external application to run the files for you. Conclusion Web pages can be anything, anything can make web pages, all you have to use is the orchestration of HTML with the help of different softwares and proper structure. 8