TechShizz | All posts tagged 'XHTML'

XHTML | Tables

Here are examples of how we can use tables in XHTML

<table border="1px">
		<tr>
			<td>Row 1 Cell 1</td>
			<td>Row 1 Cell 2</td>
		</tr>
		<tr>
			<td>Row 2 Cell 1</td>
			<td>Row 2 Cell 2</td>
		</tr>
		<tr>
			<td>Row 3 Cell 1</td>
			<td>Row 3 Cell 2</td>
		</tr>
</table>

<table border="1px">
		<tr>
			<td><b>Cars</b></td>
			<td><b>Fruits</b></td>
		</tr>
		<tr>
			<td>Ferrari</td>
			<td>Banana</td>
		</tr>
		<tr>
			<td>Mercedes</td>
			<td>Oranges</td>
		</tr>
</table>

<table border="1px">
		<tr>
			<td><b>Cars</b></td>
			<td><b>Fruits</b></td>
		</tr>
		<tr>
			<td>Ferrari</td>
			<td rowspan="2">it works!</td>
		</tr>
		<tr>
			<td>Mercedes</td>
		</tr>
</table>

<table border="1px" cellpadding="25px">
		<tr>
			<td><b>Cars</b></td>
			<td><b>Fruits</b></td>
		</tr>
		<tr>
			<td>Ferrari</td>
			<td rowspan="2">it works!</td>
		</tr>
		<tr>
			<td>Mercedes</td>
		</tr>
</table>

<table border="1px" cellspacing="20px">
		<tr>
			<td><b>Cars</b></td>
			<td><b>Fruits</b></td>
		</tr>
		<tr>
			<td>Ferrari</td>
			<td rowspan="2">it works!</td>
		</tr>
		<tr>
			<td>Mercedes</td>
		</tr>
</table>

 


Results


XHTML | Images

Here is how to insert an image with XHTML

<img scr="image1.png" />

If we want to set the width and height we can do that like this

<img scr="image1.png" width="200px" height="200px" />

<img scr="image1.png" width="auto" height="200px" />

<img scr="image1.png" width="200px" height="auto" />

We should always set alt and title tags for images

<img scr="image1.png" alt="Image description here" title="This shows on mouse over" />

XHTML | Hyperlinks

Here are many examples of how to use hyperlinks in XHTML.

Text Link

<a href="https://www.google.co.uk">Link Text Here</a>

Link to webpage in child folder

<a href="parentfolder/childpage.html">Link text here</a>

Link to webpage in parent folder

<a href="../parentpage.html">Link text here</a>

Open link in new window

<a href="page.html" target_"blank">Link text here</a>

Jump to link

To make a link to jump to part of a page we can create an anchor point in the page, then link to it.

<a name="Jumpto1">Content to jump to</a>

The we use this to create a link to that content.

<a href="page1.html#Jumpto1">Link text here</a>

Hyperlinks from Images

<a href=https://www.google.co.uk><img scr="image1.png" alt="Image description here" title="This shows on mouse over" /></a>

 

HTML | General Layout

Here is the general layout of an XHTML page, blank with only Doctype, Head, Title and Body tags - No Divs or formatting. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>Page Title</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<meta name="keywords" content="keyword1, keyword2, keyword3" />
		<meta name="description" content="This is my website description" />
		<meta name="author" name="Company Name" />
		<!--This tag  is an auto forward to another html page
		<meta http-eqiv="Refresh" content="10; url = https://www.google.co.uk" />
		-->
		
	</head>

	<body>

	</body>

</html>