TechShizz | All posts tagged 'HTML'

Custom bullet points / Unordered Lists HTML

If we want to use a custome image for bullet points in html we can make this work with a bit of CSS.
CSS
ul.myclass {
list-style-image: url('/images/custom_bullet.jpg');
}
HTML
<ul class="myclass">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

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" />

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>