LING 408/508: Computational Techniques for Linguists. Lecture 14

Size: px

Start display at page:

Download "LING 408/508: Computational Techniques for Linguists. Lecture 14"

Elfreda Nancy Flowers
5 years ago
Views:

1 LING 408/508: Computational Techniques for Linguists Lecture 14

2 Administrivia Homework 5 has been graded

3 Last Time: Browsers are powerful Who that John knows does he not like? html + javascript + SVG

4 Client-side web development : structure of content CSS (cascading style sheets): presentation Javascript scripting language DOM (document object model): hierarchical representation of webpage SVG (scalable vector graphics): 2D graphical objects and methods

5 Client/server model web browser: html Javascript SVG etc. Web server scripting: cgi-bin: Common Gateway Interface PHP: Personal Home Page JSP: JavaServer Pages etc.

6 boilerplate inserted by my emacs editor: First line: <!DOCTYPE > signifies 5 Tags: <tag> </tag> html head: title, style, javascript definitions etc. body: body of the document h1: heading level 1 (1-6) address: contact information "self-closing" tags: hr: horizontal rule br: line break optional: <br/> optionally paired: <p>.. </p>: paragraph comment:

7 hypertext (link): <a href=url>text</a> URL: uniform resource locator Examples: Format: protocol://host(:port)/path protocol://host(:port)/path?query protocol = http (hypertext transfer protocol) port = TCP/IP port number (text presented in blue) (PHP) (mod_perl program)

8 Images: <img src=url> attribute: src value: URL (or filename etc.) attribute: alt value: text attribute: height value: pixels attribute: width value: pixels attribute: align value: top bottom middle left right Can embed: <a href=url><img src=url></a> (required) (jpg, gif, png supported, see note below) (supposed to be required) (not in 5) Note:

9 Images can be embedded inside the file via base64 encoding: <img width="70px" src="data:image/png;base64,ivborw0kggoaaaansuheugaaaiiaaab6cayaaa BzwouJAAAMFmlDQ1BJQ0MgUHJvZmlsZQAASImVVwdUk8kWnr+kEJJQAqFICb0 JUqQLhF4FpIONkAQIJUJCULGjiwquXUSxoqsiCq4FkLViwYII9v5AREVZFws2VN6kg K6vnXfPmX++3Ln3zncnd+bMAKBiz8nLy0FVAcgVFohigv1YSckpLFInUAJagA5owIb DFef5RkdHACjD/d/l/S2ASPvrttJY/zr+X0WNxxdzAUCiIU7jibm5EB8GANfm5okKAC C0Qr3J "> On Ubuntu and MacOS: openssl base64 -in imagefile -out encoded.txt

10 Lists: e.g. list item: <li> </li> ordered lists: <ol> </ol> unordered lists: <ul> </ul> Note: lists can be nested arbitrarily deep

11 inline styling applied to text elements: style=" ; " font-size: Npx font-family: name, name color: name (or hex RGB) background-color: name (or RGB) text-align: left right center e.g. #00CC00 note: serif, sans-serif, monospace are generic font families note: X11 color names are okay,

12 Other text element style tags: <em> </em> <strong>.. </strong> <pre> </pre> <tt> </tt> <code> </code> Older style tags: <b> </b> <i> </i> italics bold preformatted monospaced bold italics

13 Tables: <table> </table> <tr> </tr> table row <th> </th> table heading element <td>.. </td> table data (one cell) Attributes: border="size" e.g. 1px colspan="number" e.g. 2 (span next two columns) style=" ; " border: width style color also border-left, border-top, border-right, etc. border-width: top right bottom left border-style: top right bottom left e.g. type=solid dotted dashed double none border-color: top right bottom left border-collapse: collapse separate padding: size text-align: left center right vertical-align: top middle bottom width, height e.g. 100px or 100% Newer stuff: <thead> </thead> <tbody>.. </tbody>

14 General chunks of html: <div style=" " id=" "> </div> <span style=" " id=" "> </span> a division small chunks of inline text (optional) unique identifier id= used to refer to chunk in CSS or DOM

15 Sample webpage

16 Sample webpage <!DOCTYPE PUBLIC "-//IETF//DTD //EN"> <html> <head> <title>a webpage</title> </head> <body> <h1>a webpage</h1> <table style="border: 1px solid blue"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> <tt><h2>first paragraph</h2></tt> <p> Some text. Some more text. <br> A lot more text is needed to see word-wrap. A <a href=" <br> <a href=" width=100 src=" "></a> </p> <p style="font-family: bank gothic;font-size: 60; color:white;background-color:black"> A second paragraph. <ol> <li>first things first. <ul> <li>one</li><li>two</li> </ul> </li> <li>second things second.</li> <li>third things last.</li> </ol> </p> <hr> <address></address> Last modified: Thu Sep 18 17:28:57 MST 2014  </body> </html>

17 Ungraded Homework Exercise Build your own html file. Play with the tags Embed a picture of yourself encoded in base64

HTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space.

HTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space. HTML Summary Structure All of the following are containers. Structure Contains the entire web page. Contains information