MANIPULATING CODE
Here you will see functional examples of my manipulated "Code Blocks" created using the code generators from the SACTAS.weebly com page...
IMAGE CODE
![Photo of the Remarkables mountain range in Queenstown, New Zealand.](https://s.hswstatic.com/gif/frog-1.jpg)
Code for the above image: I modified the source and size of the image, thickness and colour of the border:
<!-- Codes by HTML.am -->
<!-- CSS Code -->
<style type="text/css" scoped>
img.GeneratedImage {
width:300px;height:225px;margin:10px;border-width:12px;border-color:#66CC00;border-style:solid;
}
</style>
<!-- HTML Code -->
<img src="https://s.hswstatic.com/gif/frog-1.jpg" alt="Photo of the Remarkables mountain range in Queenstown, New Zealand." class="GeneratedImage">
<!-- Codes by HTML.am -->
<!-- CSS Code -->
<style type="text/css" scoped>
img.GeneratedImage {
width:300px;height:225px;margin:10px;border-width:12px;border-color:#66CC00;border-style:solid;
}
</style>
<!-- HTML Code -->
<img src="https://s.hswstatic.com/gif/frog-1.jpg" alt="Photo of the Remarkables mountain range in Queenstown, New Zealand." class="GeneratedImage">
TABLE CODE
ALWAYS | SOMETIMES | NEVER |
---|---|---|
Skate | Wait | Hate |
Thai | Italian | Sushi |
Skate | Wait | Hate |
Here is a table I produced from downloaded code that I then modified:
I expanded it to display three columns and modified the cell content some of my favourite things:
<!-- Start Styles. Move the 'style' tags and everything between them to between the 'head' tags -->
<style type="text/css">
.myTable { width:600px;background-color:#eee;border-collapse:collapse; }
.myTable th { background-color:#000;color:white;width:33.3%; }
.myTable td, .myTable th { padding:5px;border:1px solid #000; }
</style>
<!-- End Styles -->
<table class="myTable">
<tr>
<th>ALWAYS</th><th>SOMETIMES</th><th>NEVER</th>
</tr>
<tr>
<td>Skate</td><td>Wait</td><td>Hate</td>
</tr>
<tr>
<td>Thai</td><td>Italian</td><td>Sushi</td>
</tr>
<tr>
<td>Skate</td><td>Wait</td><td>Hate</td>
<tr>
<tr>
</tr>
</table>
I expanded it to display three columns and modified the cell content some of my favourite things:
<!-- Start Styles. Move the 'style' tags and everything between them to between the 'head' tags -->
<style type="text/css">
.myTable { width:600px;background-color:#eee;border-collapse:collapse; }
.myTable th { background-color:#000;color:white;width:33.3%; }
.myTable td, .myTable th { padding:5px;border:1px solid #000; }
</style>
<!-- End Styles -->
<table class="myTable">
<tr>
<th>ALWAYS</th><th>SOMETIMES</th><th>NEVER</th>
</tr>
<tr>
<td>Skate</td><td>Wait</td><td>Hate</td>
</tr>
<tr>
<td>Thai</td><td>Italian</td><td>Sushi</td>
</tr>
<tr>
<td>Skate</td><td>Wait</td><td>Hate</td>
<tr>
<tr>
</tr>
</table>