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

&nbsp<table class="plain">

</table>

<tbody>

</tbody>

<tr>

</tr>

<td> </td><td> </td><td> </td>

<tr>

</tr>

<td> </td><td> </td><td> </td>

&nbsp TextText

Text

Text