Office of Digital Humanities
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
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> </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> </td><td> </td><td> </td><td> </td><td> </td><td> </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> </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:
Due next class period.