1 / 58

Introduction to HTML and Web Data Management

This course covers the fundamentals of HTML and web data management, including the structure and function of web pages, the role of web servers and clients, and how browsers display HTML content. Participants will learn about essential HTML tags, document structure, and the capabilities of HTML for presenting information online. The course includes hands-on assignments where students will create basic web pages using HTML. A final assessment will contribute to 25% of the overall grade, with home assignments making up the remaining 75%.

shaine-hodges
Télécharger la présentation

Introduction to HTML and Web Data Management

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. ניהול מידע ברשת האינטרנטManaging Web Data096209

  2. מתרגלת: טלי דולב • שעת תרגול: יום ד' 8:30-9:30 • email: stalid@t2.technion.ac.ilשעת קבלה - במייל או בתיאום מראש

  3. ציון סופי = 25% תרגילי בית + 75% מבחן. • 3-5 תרגילי בית הכוללים תרגילים "יבשים" ו"רטובים". ציוני שיעורי הבית תקפים. • רב תרגילי הבית יוגשו בזוגות, אך יתכנו גם משימות אישיות.

  4. HTML:Hyper Text Markup Language

  5. 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)

  6. 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.

  7. 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

  8. 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

  9. 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.

  10. 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.

  11. A simple HTML page <html> <head><title>My First HTML Page</title></head> <body><font color=“red”> Hello World Wide Web!</font></body> </html>

  12. 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>

  13. 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>

  14. 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!

  15. 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">

  16. The Body of an HTML Page • Headings:<h1>,…,<h6>whereh1is 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 -->

  17. 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>

  18. <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>

  19. 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>

  20. Hyperlinks Basic form: <a href = “target-url”>text to be displayed</a> Defining an anchor: <a name = “anchor_name”> text to anchor </a> Examples: • Complete Path <a href = “http://www.google.com”>Google</a> • Relative Path <a href = “assigments/ex1.html”>Exercise 1</a> • Relative Path to Anchor <a href = “assigments/ex1.html#submit”>To Submit</a> When is this useful? When should we use complete paths? When should we use relative paths?

  21. More Hyperlinks • <a href= "mailto:managingwebdata@technion.ac.il">Email</a> • <a href=“telnet://aleph@ram0.huji.ac.il”>Connect to the Library</a>

  22. Images • Adding images to the page can be done using the img tag <img src=“monkey.gif” alt=“Picture of a monkey”> • An image can be used as a link <a href=“monkies.html”><img src=“monkey.gif” alt=“Picture of a monkey”></a> Tells the user what he/she is missing if the browser can’t load images

  23. Entities • There are entities that replace symbols: Space &nbsp;&#160; < &lt;&#60; > &gt; &#62; & &amp; &#38; Why are these entities defined? These characters have a special meaning in HTML, and therefore cannot be used in the text.

  24. Frames

  25. 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” (*)

  26. 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

  27. 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>

  28. Frames In Browser

  29. 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

  30. The target attribute for <a> tag - Example What will the page look like? <html> <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>

  31. The target attribute for <a> tag - Example

  32. Inline Frame Example • a frame inside an HTML page <body> <h1>Here are two Web pages:</h1> <p> <iframesrc="http://www.technion.ac.il"height="450"width=“300"> Your browser does not support this object!</iframe> &nbsp; <iframesrc="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>

  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, drop-down menus, radio buttons, checkboxes, etc.

  37. <formmethod="method"action="URL"> </form> HTML with Form Widgets (assignments to form parameters) Forms (cont.) • A form has the following structure: • The method refers to data transfer: getorpost • 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 asubmissionbutton • When this button is pressed, all parameter values are sent to URL • Other submission mechanisms can be used • e.g., pressing the "enter" key, choosing an item, etc. GET: form data is encoded (by a browser) into a URL POST: form data appears within a message body.

  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: <inputtype="text"name="fcourse"value="DBI"/> • Password area: Password: <inputtype="password"name="pass"size=“5“/>

  41. Checkboxes (Input Widgets cont.) • multiple options can be chosen <inputtype="checkbox"name="incoffee"value="milk"checked="checked"/>milk<br/> <inputtype="checkbox"name="incoffee"value="sugar"/>sugar<br/> <inputtype="checkbox"name="incoffee"value="cocoa"/>cocoa<br/>

  42. Radio Buttons (Input Widgets cont.) • only one option can be chosen Gender: <inputtype="radio"name="gen"value="f"checked="checked"/>female <inputtype="radio"name="gen"value="m“/>male

  43. Menus <form action=""> <selectname="fruit"size="1"> <optionvalue="a">apples</option> <optionvalue="b" selected="selected">bananas</option> </select> </form>

  44. Menus <selectname="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/> <textareaname="story"rows="3"cols="20">Default text...</textarea>

  46. Form Widgets - Summary • Inputtag, 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">

More Related