View
391
Download
3
Embed Size (px)
Citation preview
www.le.ac.uk/studentdevelopment
Student Development
Intro to HTML
www.le.ac.uk/studentdevelopment
Paragraph Mark-up
<P> Start Paragraph
<STRONG> Bold
<I> Italics
<STRONG><I> Bold and Italics
</P> End Paragraph
</br> Line Break
www.le.ac.uk/studentdevelopment
I’ve started so I must finish!
<P>
</P>
<STRONG>
</STRONG>
Write Your Text Here
www.le.ac.uk/studentdevelopment
Headings
<H1>Heading One</H1> Heading One<H2>Heading Two</H2> Heading Two
<H3>Heading Three</H3> Heading Three
<H4>Heading Four</H4> Heading Four
<H5>Heading Five</H5> Heading Five
We use different heading styles to break-up page content
Increased number
= Smaller heading
www.le.ac.uk/studentdevelopment
TablesTables can be used to arrange content in a more
organised or attractive way
www.le.ac.uk/studentdevelopment
Tables<table class="plain">
</table>
<tbody>
</tbody>
<tr>
</tr>
<td> </td><td> </td><td> </td>
<tr>
</tr>
<td> </td><td> </td><td> </td>
www.le.ac.uk/studentdevelopment
Tables<table class="plain">
</table>
<tbody>
</tbody>
<tr>
</tr>
<td> </td><td> </td><td> </td>
<tr>
</tr>
<td> </td><td> </td><td> </td>
ABC
Row
Cell
www.le.ac.uk/studentdevelopment
Tables – Merging Cells<table class="plain">
</table>
<tbody>
</tbody>
<tr>
</tr>
<td> </td><td> </td><td> </td>
<tr>
</tr>
<td> </td><td> </td><td> </td>
www.le.ac.uk/studentdevelopment
Tables – Merging Cells<table class="plain">
</table>
<tbody>
</tbody>
<tr>
</tr>
<td> </td>
<tr>
</tr>
<td> </td><td> </td><td> </td>
colspan
<td colspan=“2”> </td>
Number of Cells needs to be equal
Delete Replace Cell
www.le.ac.uk/studentdevelopment
Tables – Merging Cells<table class="plain">
</table>
<tbody>
</tbody>
<tr>
</tr>
<td> </td><td> </td>
<tr>
</tr>
<td> </td><td> </td>
rowspan
<td rowspan=“2”> </td>
Delete Replace
Cell
www.le.ac.uk/studentdevelopment
Tables – Merging Cells<table class="plain">
</table>
<tbody>
</tbody>
<tr>
</tr>
<td> </td><td> </td>
<tr>
</tr>
<td> </td><td> </td>
rowspan
<td rowspan=“2”> </td>
colspan
Text Text
www.le.ac.uk/studentdevelopment
Tables – Merging Cells<table class="plain">
</table>
<tbody>
</tbody>
<tr>
</tr>
<td> </td>
<tr>
</tr>
<td> </td><td> </td><td> </td>
rowspan
</td>
colspan
<td colspan=“2”>
Title across all the row
Text Text Text
www.le.ac.uk/studentdevelopment
Strange HTML
 <table class="plain">
</table>
<tbody>
</tbody>
<tr>
</tr>
<td> </td><td> </td><td> </td>
<tr>
</tr>
<td> </td><td> </td><td> </td>
  TextText
Text
Text