Programming Codes Series: July 2016

Tuesday, July 12, 2016

Hello!

If have any problems regarding programming of any topic comment in the section below and I will try to solve your problem ASAP. -NerdyCoder

In this tutorial, we are going to learn about how to design tables in HTML with the help of CSS (Cascading Style Sheets). I took a look at wiki and made a decision to make a tutorial regarding video games. I have 5 games and their info and have designed it.

HTML code

	<html>
	<head>
	<meta charset="utf-8"/>
	<title> Styling Tables </title>
	<link rel="stylesheet" href="styling tables.css">
	</head>
	<body>
	<table border="1">
	<caption> Best selling games according to Wiki</section>

	<thead>
	<tr>
	<th> Rank </th>
	<th> Title </th>
	<th> Release year </th>
	<th> Copies Sold </th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td> 1 </td>
	<td>Tetris</td>
	<td>1984</td>
	<td>143 million</td>
	</tr>
	<tr>
	<td> 2 </td>
	<td>Wii Sports</td>
	<td>2006</td>
	<td>81.99 million</td>saying th
	</tr>
	<tr>
	<td> 3 </td>
	<td>Minecraft</td>
	<td>2009</td>
	<td>49.5 million</td>
	</tr>
	<tr>
	<td> 4 </td>
	<td>Super Mario Brothers</td>
	<td>1985</td>
	<td>35.53 million</td>
	</tr>
	</tr>
	</tbody>
	<tfoot>
	<tr>
	<td colspan=4> info from wikipedia </td>
	</tr>
	</tfoot>
	</table>
	</body>
	</html> CSS table{ border:1px solid black; border-collapse:collapse; } th,td{ border:1px solid black; padding:5px; } tr:nth-child(2n) { background-color:#a0a0a0; } thead{ background-color:#ccddee; } tfoot{ background-color:#ddccee; text-align:center; } Output

Sunday, July 10, 2016

HTML- Using anchor tag

	Hi guys, in this code you are going to learn about the effects of three different tags in HTML.In this code, we will learn about the effects of anchor tag. I hope this code is going to help you progress in HTML. It is simple, all you need to do is copy the code and paste it in your document where you write codes. The remaining editing depends on you. Feel free to leave a comment no matter whether it is positive or negative. Follow these steps 1. Open two tabs in the document where your code. 2. Name one as home.html and the other as another.html and save it. Code <!DOCTYPE html> <html>
	<head> <meta charset= "utf-8">
	<title> Anchor Tag </title>
	</head>
	<body>
	<h1> My Home page</h1>
	<p> Would to like to go to the <a href="another.html">another </a>home page? </p>
	</body>
	</html> Output

Saturday, July 9, 2016

HTML- Line Breaks,Paragraphs and Headers

Hi guys, in this code you are going to learn about the effects of three different tags in HTML. I hope this code is going to help you progress in HTML. It is simple, all you need to do is copy the code and paste it in your document where you write codes. The remaining editing depends on you. Feel free to leave a comment no matter whether it is positive or negative.

Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> Headers, Paragraphs and Line Breaks </title>

</head>
<body>
<h1> This is a biggest header. </h1>
<h2> This is a second biggest header. </h2>
<h3> This is a third biggest header. </h3>
<h4> This is a third smallest header. </h4>
<h5> This is a second smallest header. </h5>
<h6> This is a smallest header. </h6>
<p> The paragraph tag has starting and closing tag. It is used to create paragraph effects in a HTML document </p>

This is the line break tag. It is used to </br> break the lines.
</body>
</html>

Output

HTML- Audio Tag

Before you start coding, follow these instructions-

1. Create a folder and name it Audio Tag
2. Save an audio there- Eg. Perfect
3. Go to the coding document, and save the file in the folder Audio Tag with extension .html

Code

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8"/>
	<title> Audio Tag </title>
	</head>
	<body>


	<audio controls autoplay loop>
	<source src="perfect" type="mp3/mpeg">


	</audio>


	</body>
	</html>

Programming Codes Series