Humanities Home page   Office of Digital Humanities
Back     BYU LiveCode Lessons Gateway

DigHT 310
Overview of HTML
HTML Coding Exercise

Part I.

After completing the HTML Introduction tutorial at http://www.w3schools.com/html/html_intro.asp you should have a basic understanding of how HTML markup works and how to use common HTML tags. In this exercise you will use HTML to format some text so that it looks like the sample page.

As you work you may find it helpful to consult a basic HTML reference or tutorial to remind you of what tags are available and their syntax. There are many good references on the web, such as this one at https://www.w3schools.com/html/.

You can write your HTML document using any plain text editor (even the one you wrote in LiveCode!) But you may find it easiest to use a text editor that has built-in HTML tools to speed up the coding process. In our labs we have BBedit on the Mac and NotePad++ or JEdit on Windows.

On the DigHT 310 server in the Templates folder, inside a folder called HTML, are several files you will use in this assignment. The file HTMLsample.txt contains unformatted text that you will apply the HTML code to. The file HTMLsample.pdf shows what your page should look like when finished. Finally the file HTMLlogo.png is an image file that you should display in your HTML page. (Obviously, you can also just save the same files from these links if you want.)

When you are done you should copy your page to your student folder on the DigHT 310 server, so that it can be viewed in a web browser by going to a URL something like this:

http://chum310.byu.edu/students/yourname/somefolder/sample.html

Part II.

As you have probably guessed, hand-coding HTML documents can get a little tedious, especially if when creating pages with dynamic content or very detailed formatting. You're also aware by now that LiveCode offers you the tools for automating complex and repetitive processes. In this part of the exercise we use LiveCode to build HTML code that will produce a calendar that we can use on our web page.

In class we examined how you would go about creating an HTML table that displayed a calendar for a given month. You could hand code it, producing a table whose HTML code looks something like this:

<p><strong>February</strong></p>
<table border="1">
  <tr align="right">
    <td>&nbsp;</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
  </tr>
  <tr align="right">
    <td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td>
  </tr>
  <tr align="right">
    <td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
  </tr>
  <tr align="right">
    <td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td>
  </tr>
  <tr align="right">
    <td>28</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
  </tr>
</table>

As you can see, this can quickly become very messy and tedious. So we wrote a handler in LiveCode that can build this code for us. In a simple stack containing just a field and a button, we wrote these handlers in the button script. (They are together in this example for conciseness; in a real stack everything but the on mouseUp handler would probably be in the stack script or even in a library stack.)

 

on mouseUp
   put makeCalendar("April", 6, 30) into fld "code"ƒ
end mouseUp

function makeCalendar pMonth,pStartDay,pEndDate
   put 1 into tDate
   put "<p><strong>" & pMonth & "</strong></p>" & return into tCalCode
   put "<table border=" & q("1") & ">" & return after tCalCode
   repeat with tRow = 1 to 6
      put "<tr align=" & q("right") & ">" & return after tCalCode
      repeat with tCol = 1 to 7
         if (tRow = 1 and tCol < pStartDay) OR (tDate > pEndDate) then
            put " " into tContents
         else
            put tDate into tContents
            add 1 to tDate
         end if
         put "<td>" & tContents & "</td>" after tCalCode
      end repeat
      put return & "</tr>" after tCalCode
      
   end repeat
   put return & "</table>" after tCalCode 
   return tCalCode
end makeCalendar

function q pString
   return quote & pString & quote
end q

Using these example handlers, make your own stack that will produce a calendar table. You can modify the code in any way you want to improve it. For example, one thing we left out was table headers that give the days of the week. That is easy to do with the <th> tag in HTML. The <th> tag works just like the <tr> tag, but produces bolded header row:

<table border="1">
  <tr>
    <th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th>
  </tr>
  <tr align="right">
    <td>&nbsp;</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
  </tr>

  etc...

See if you can modify the handler above to also produce a header row in the table. When you are done with your calendarCodeMaker stack, you should copy your calendar HTML table code into the page you formatted for Part I (i.e., a calendar table will appear at the end of your page.) Then you should copy the completed page to your student folder. To get credit for this assignment you need to:

  1. Mail your instructor with the URL to your page;
  2. Drop the calendarCodeMaker stack, with your name on it, into the Assignment Drop folder.

Due next class period.


Back     BYU LiveCode Lessons Gateway
Maintained by Devin Asay.
Copyright © 2005 Brigham Young University