Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download HTML - Technion moodle
Document related concepts
Transcript
ניהול מידע ברשת האינטרנט Managing Web Data 096209 1 • מתרגלת :טלי דולב • שעת תרגול :יום ד' 8:30-9:30 • email: [email protected] שעת קבלה -במייל או בתיאום מראש 2 • ציון סופי = 25%תרגילי בית 75% +מבחן. • 3-5תרגילי בית הכוללים תרגילים "יבשים" ו"רטובים" .ציוני שיעורי הבית תקפים. • רב תרגילי הבית יוגשו בזוגות ,אך יתכנו גם משימות אישיות. 3 HTML: Hyper Text Markup Language 4 How does the World Wide Web work? • Web information is stored in documents called Web pages. • Web pages are files stored on computers called Web servers. • Computers reading the Web pages are called Web clients. • Web clients view the pages with a program called a Web browser. (ex: Internet Explorer, Mozilla Firefox) 5 How does the browser display pages? • All Web pages contain instructions for display. • The browser displays the page by reading these instructions. • The most common display instructions are called HTML tags. 6 What is HTML? • A markup language - combines text and extra information about the text • An HTML file is a text file containing markup tags • HTML is used to write web pages: – specify the role of different parts of the page – specify the style that should be used when displaying the page 7 Capabilities of HTML • Content presentation – Structures, e.g. paragraphs, lists, tables, etc. – Decorations, e.g. fonts, images, etc. • Declaration of meta information – e.g. the page title, language, etc. • Link to other pages – i.e. attaching links to components 8 Capabilities of HTML (cont) • Management of user input – e.g. for searching, making reservations, ordering products • Directions for browsers – e.g. refresh, redirect, caching control, etc. 9 Disclaimer • HTML is a broad topic. Only a small part of using HTML will be taught. Links to tutorials and resources for learning HTML are available at the end of this presentation. • You can also learn from pages on the web, by using the “View Source” option. 10 A simple HTML page <html> <head><title>My First HTML Page</title></head> <body><font color=“red”> Hello World Wide Web!</font></body> </html> 11 A simple HTML page • HTML elements contain text, separated by tags • Generally, tags come in pairs, an opening tag and a closing tag • Tags can have attributes, which have values enclosed in quotes <html> <head><title> My First HTML Page </title></head> <body><font color=“red”> Hello World Wide Web!</font></body> </html> 12 Some General Rules • HTML page is surrounded by the html tag • 2 Basic parts: – Head: Consists of things that describe the document (e.g., title – shown on the browser bar) – Body: Consists of the content of the document <html> <head><title> My First HTML Page </title></head> <body><font color=“red”> Hello World Wide Web!</font></body> </html> 13 Some More General Rules • Tags are not case sensitive (<head>, <HEAD>, <Head> are the same), recommended to use lowercase • Whitespace in an html document is ignored • HTML files should end with .htm or .html • In HTML, there is an exception to almost every rule! 14 The Head of an HTML Page • The head element contains general information about a document. • The META tag provides information that is relevant to browsers or search engines. • Examples: <META name="Author” content=“Snoopy”> <META name="keywords“ content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"> <META http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT"> <META http-equiv="refresh" content=“5; url=http://www.technion.ac.il/~mynewpage"> 15 The Body of an HTML Page • Headings: <h1>, …, <h6> where h1 is the largest, h6 is the smallest • Paragraphs: <p> (optional closing tag) • Line breaks: <br> (no closing tag) • Horizontal lines: <hr> (no closing tag) • Formatted text: bold <b>, italics <i>, underline <u> • Font colors and styles: <font color = “red” face=“Arial”> • Comments: <!-- This is a comment --> 16 Another Example <html> <head> <title>Example 2</title> </head> <!-- Here is a comment --> <body> <h1>This is an example of an HTML page</h1> <p>Here is <b>emphasized</b> text and there is also <i>italic</i> text here. <br> Here is a new line </p> <p>Is this <font color=“blue” face=“Arial”>easy</font>? <p><hr>And some parting words... Good Bye </body> </html> 17 <html> <head> <title>Example 2</title> </head> <!-- Here is a comment --> <body> <h1>This is an example of an HTML page</h1> <p>Here is <b>emphasized</b> text and there is also <i>italic</i> text here. <br> Here is a new line </p> <p>Is this <font color=“blue” face=“Arial”> easy</font>? <p><hr>And some parting words... Good Bye </body> </html> 18 Lists • Ordered lists: <ol> • Unordered lists: <ul> • List items: <li> (optional closing tag) <ol> <li>Item 1 <li>Item 2 <ul> <li> Inner list item <li> Another one </ul> <li> Item 3 </ol> 19 Hyperlinks Basic form: <a href = “target-url”> text to be displayed </a> Defining an anchor: When is this useful? <a name = “anchor_name”> text to anchor </a> Examples: 1. Complete Path <a href = “http://www.google.com”>Google</a> When should we use complete paths? When should we use relative paths? 2. Relative Path <a href = “assigments/ex1.html”>Exercise 1</a> 3. Relative Path to Anchor <a href = “assigments/ex1.html#submit”>To Submit</a> 20 More Hyperlinks • <a href= "mailto:[email protected]">Email</a> • <a href=“telnet://[email protected]”> Connect to the Library</a> 21 Images • Adding images to the page can be done using the img tag <img src=“monkey.gif” alt=“Picture of a monkey”> Tells the user what he/she is missing if the browser can’t load images • An image can be used as a link <a href=“monkies.html”><img src=“monkey.gif” alt=“Picture of a monkey”></a> 22 Entities • There are entities that replace symbols: Space   < < < > > > & & & Why are these entities defined? These characters have a special meaning in HTML, and therefore cannot be used in the text. 23 Frames 24 FrameSets • With frames, you can display more than one HTML document in the same browser window • Instead of a “BODY”, the document has a “FRAMESET” element • Size and number of frames is determined by the attributes “COLS” and “ROWS” • Size can be given as a percent (50%) or number of pixels (70) or as “remaining size” (*) 25 Frames • Within FRAMESET elements, there can be: FRAMESETs, FRAMEs, and NOFRAMEs • The <frame> tag defines what HTML document to put into each frame. A FRAME can have the attributes: – src=“url”: The url to be displayed in the frame – name=”frame_name”: Name, used for targeting – scrolling=“yes|no|auto”: auto is default • In a NOFRAMES element put content for browsers that don’t support frames 26 Example <html> <head><title>Frames Example</title></head> <frameset cols=“20%,*”> <frameset rows=“200,*”> <frame name=“frame1” src=“monkey.gif”> <frame name=“frame2” src=“hello.html”> </frameset> <frame name=“frame3” src=“http://moodle.technion.ac.il/”> <noframes> Here is a description of what you are missing since your browser doesn’t support frames. </noframes> </frameset> </html> 27 Frames In Browser 28 Links in Frames • In a link, the TARGET attribute can specify where the new page will be opened: – target=“frame-name” : in the specified frame: <a href ="frame_a.html" target="frame1">Frame a</a> – target=“_self” : in the frame where the link is – target=“_top” : in the same window over the whole screen – target=“_blank” : in a new window of the navigator 29 The target attribute for <a> tag - Example <html> What will the page look like? <frameset cols="120,*"> <frame src="tryhtml_contents.htm"> <frame src="tryhtml_frame_a.htm" name="showframe"> </frameset> </html> tryhtml_contents.htm: <a href ="tryhtml_frame_a.htm" target ="showframe">Frame a</a><br> <a href ="tryhtml_frame_b.htm" target="showframe">Frame b</a><br> <a href ="tryhtml_frame_c.htm" target ="showframe">Frame c</a> 30 The target attribute for <a> tag - Example 31 Inline Frame Example • a frame inside an HTML page <body> <h1>Here are two Web pages:</h1> <p> <iframe src="http://www.technion.ac.il" height="450" width=“300"> Your browser does not support this object!</iframe> <iframe src="http://www.google.com" height="450" width="300"> Your browser does not support this object!</iframe> </p> <h2>Do you know these pages?</h2> </body> 32 33 Frames are Bad • The web developer must keep track of more HTML documents • Focus is on layout instead of structure • URL doesn’t change when clicking through frames • Not compatible with all browsers What should be done? 34 Tables <TABLE Border=“1” > <TR> <TD>Dan</TD> <TD>1493</TD> </TR> <TR> <TD>Yael</TD> <TD>3829</TD> </TR> <TR> <TD>Ofir </TD> <TD>8372</TD></TR> <TR> <TD>Anat</TD> <TD>4827</TD> </TR> </TABLE> 35 Tables <TABLE border="1"> <CAPTION><EM>A test table with merged cells</EM> </CAPTION> <TR><TH rowspan="2"></TH> <TH colspan="2">Average</TH> <TH rowspan="2">Red<BR>eyes</TH></TR> <TR><TH>height<TH>weight</TR> <TR><TH>Males</TH><TD>1.9</TD> <TD>0.003</TD><TD>40%</TD> <TR><TH>Females</TH><TD>1.7</TD> <TD>0.002</TD><TD>43%</TD></TR> </TABLE> 36 Forms • A form is an area that can contain form elements. • Form elements (also called widgets) are elements that allow the user to enter information in a form. • Examples: text fields, textarea fields, dropdown menus, radio buttons, checkboxes, etc. 37 Forms (cont.) • A form has the following structure: <form method="method" action="URL"> HTML with Form Widgets (assignments to form parameters) </form> • The method refers to data transfer: get or post • The action specifies the application that processes the form parameters 38 Forms (cont.) • Each widget is associated with a parameter (which is the widget’s name), the value of which the user can determine • One of the form widgets is a submission button • When this button is pressed, all parameter values are sent to URL GET: form data is encoded (by a browser) into a URL POST: form data appears within a message body. • Other submission mechanisms can be used – e.g., pressing the "enter" key, choosing an item, etc. 39 An Example: Search Google <form method="get" action="http://www.google.com/search"> <p> Type the search term: <input name="q" type="text"> <input type="submit" value="search"> </p> </form> 40 Input Widgets • for typing letters, numbers, etc. in a form. • Text area: Favorite course: <input type="text" name="fcourse" value="DBI"/> • Password area: Password: <input type="password" name="pass" size=“5“/> 41 Checkboxes (Input Widgets cont.) • multiple options can be chosen <input type="checkbox" name="incoffee" value="milk" checked="checked"/>milk<br/> <input type="checkbox" name="incoffee" value="sugar"/>sugar<br/> <input type="checkbox" name="incoffee" value="cocoa"/>cocoa<br/> 42 Radio Buttons (Input Widgets cont.) • only one option can be chosen Gender: <input type="radio" name="gen" value="f" checked="checked"/>female <input type="radio" name="gen" value="m“/>male 43 Menus <form action=""> <select name="fruit" size="1"> <option value="a">apples</option> <option value="b" selected="selected">bananas</option> </select> </form> 44 Menus <select name="vegetable" size="2" multiple="multiple"> <option value="tomato">tomato</option> <option value="cucumber">cucumber</option> <option value=" lettuce">lettuce</option> <option value="carrot">carrot</option> </select> 45 Text Areas Write a story:<br/> <textarea name="story" rows="3" cols="20">Default text...</textarea> 46 Form Widgets - Summary • Input tag, with attributes: – type: text/password/checkbox/radio/submit/reset – name: name of variable that widget defines (not needed for submit and reset widgets) – value: for text/password -> default value for checkbox/radio -> value of the button when checked submit/reset -> label of button – checked: for checkbox/radio -> means checked by default – size: for text/password -> size in characters – maxlength: for text/password -> maximum number of input characters 47 Form Widgets Example <form method=“get” action="http://www.cs.huji.ac.il/~noplace"> Text: <input type="text" name="mytext"> <br> Password: <input type="password" name="mypassword"> <br> Checkbox 1: <input type="checkbox" name="mycheck1" value="1 check" checked="true" > Checkbox 2: <input type="checkbox" name="mycheck2" value="2 check"> <br> Option 1: <input type="radio" name="myradio" value="1 radio"> Option 2: <input type="radio" name="myradio" value="2 radio"><br> <input type = "submit"> <input type = "reset"> </form> 48 Document Type Definitions • Since there are many standards for HTML, you should specify which one you are using. Put a document type definition (DTD) as the first line of your file (before the html tag) • Validate your page - http://validator.w3.org/ checks Web documents for conformance to W3C Recommendations and other standards 49 Document Type Definitions (cont.) • HTML 4.01 - strict (use with CSS) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> • HTML 4.01 - transitional (use with presentational attributes) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> • HTML 4.01 - frameset (when using frames) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 50 Logical vs. Physical tags Logical tags are designed to describe (to the browser) the enclosed text's meaning. (<strong>, <em>,<div> …) Not recommended. Why? Physical tags are messy. They were invented to add style to HTML pages because style sheets were not around. Use style sheets (Cascading Style Sheets). Physical tags provide specific instructions on how to display the text they enclose (<b>,<big>,<font>,<i> …) TIP: Don't use <UL> to indent a block of text, or other such uses of logical tags in illogical ways. 51 Character Encoding • Used to set the Document Character Set • In the Browser you can see the encoding by “View>Encoding” or “View>Character Coding” <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> 52 Hebrew in the Page • Option1: – charset=“windows-1255” Recommendation: Don’t use hebrew in your website!!! – Only good in Explorer – Hebrew text is written from right to left • Option2: – charset=“iso-8859-1” – Can be seen in Netscape – Hebrew text is written from left to right so align=“right” should be added 53 How to create your homepage • Login into your account at t2. Connecting to t2 • Create a directory public_html in your home directory on t2. • Place a file named index.html in this directory. This will be your home page source file. • Use your favorite editor to write into it text in HTML, the markup language used by the World Wide Web. • Make sure that the directory and the file are world-readable by typing : – chmod a+x ~ – chmod a+rx ~/public_html – chmod a+r ~/public_html/index.html 54 How to create your homepage (cont.) • That's it! Now your Home Page will be accessible from any point in the world via the World Wide Web. Anyone who wants to read the information you've put in your ~/public_html/index.html file should refer to the URL: http://t2.technion.ac.il/~login • for example : if your login is s1234567 Your home-page URL (i.e. address) is http://t2.technion.ac.il/~s1234567 • More information about html & www can be found at http://www.technion.ac.il/guides/www.html 55 Connecting to t2 1. Use publicly available programs 1.1 Use ssh instead of telnet: For Windows, the putty utility is simple to use. 1.2 Use sftp instead of ftp. For Windows, use winscp. Both putty and winscp are available at the Technion ftp server: ftp://ftp.technion.ac.il/pub/security/ssh/ 2. Use the X-emulation package Go-Global. It is recommended to try Go-Global as it enables one to open a complete X-Windows environment. For installation instructions: http//tcc.technion.ac.il -> Software (Tochnot) -> Software at the Technion (Tochnot ba-Technion) -> GoGlobal -> GoGlobal Readme Guide 56 Your homepage in iestud • Send request to open iestud account to http://iestud.technion.ac.il/ All other instructions are the same as t2 computer. For iestud or tx you do the same – only change the name from t2 to iestud or tx in the places it is mentioned For iestud use TeraTerm ->ssh instead of telnet 57 The End! These slides are based on those developed for the course: http://www.cs.huji.ac.il/~dbi The examples used in slides can be found in: http://t2.technion.ac.il/~stalid/examples.html More information about html & www can be found at: http://www.w3schools.com/html/default.asp http://www.davesite.com/webstation/html/ http://www.htmlgoodies.com/tutors/basics.html 58
