Pt2 Learn HTML to make a website
Category : How to make web game Tags : tutorial html script
You got to learn to walk before you run and don't even think about leaping. Learning how to create a web page is the very first thing you need to know before proceeding to the complicated stuff like programming an application, like games.
HTML and CSS is the basic thing you must learn in order to design your web interface. Although there is a lot of great software out there which allows you to design a cutting edge website with just some mouse click, still you got to understand what happen behind the scene, the source code.
You should begin with learning HTML or Hyper Text Markup Language and create a web template for your website.
You do not necessary need any special software to code HTML. I just use Notepad which comes with any Windows OS to code my website.
Creating a html file
Open the Notepad.exe program and then type the code as below;
<head>
<title>
This is my first webpage
</title>
</head>
<body>
Welcome to my first web page.
</body>
</html>
Next, save the file with the filename 'index.html'. You could then open the file again using a web browser and see your first web page.
HTML code uses mark called tag which looks like <html> or <title> and so on. Each tag has its own function and most tag has an open tag and a close tag. An open tag looks like this, <title> and the close tag looks like this, </title>. Note that the close tag has a slash (/) mark right before the text in the tag.
For the code above, you may notice this code;
This is my first webpage
</title>
Your web page content will be the text in between <body> and </body> and in this case, you will see the "Welcome to my first web page." text displayed on your browser.
So, this is the basic structure of a web page. It consists on the header zone and the body where your web content is placed. Now, lets continue to learn more about creating your web content with several more tags.
There are a whole lots of HTML tags out there but here I will only specify only a few commonly used tags. So let?? get started with some simple ones.
<br> tag is a very common used tag. It is use to break lines between the text. Although you could press Enter button to write your text in a new line, but that doesn't appear the same way in the browser. You must put a <br> tag in order to break the lines.
Code:Then second line here
This is the first lineThen second line here
Code:
Then second line here
This is the first line
Then second line here
*Note that there is no close tag for <br>. The new standard will write <br> tag into <br/> to indicate it is a self close tag. Whether <br> or <br/>, they both still works the same.
<b> tag is used to format your text into bold syle.
Code:
This is a bold text.
<i> tag is used to format your text into italic style.
Code:
This is an italic text.
<u> tag is used to format your text into underline style.
Code:
This is an underline text.
You could combine several text formatting tags by opening the few tags and then close it one after another in the reverse sequence as it was open.
Code:
Combine Formatting
*Note on the closing tag. The <u> is the last open tag in the sequence and it must be close first.
<img> tag in used to insert image into your content. The src='' attribute is where you input the image file location. You could also put a full url of the image location. The alt='' attribute is the alternate text to display in case if the image file is not found.
Code:
<font> tag it used to format text style. Although CSS is the mostly used method to format text nowadays, guess you should know about this too.
Code:
Text in red
<center> tag is used to display the content to be aligned in center.
Code:
This text is aligned in center.
</center>
<a> tag is used to create a hyperlink to link one page to another.
Code:
This is a Link
<table> tag is used to create rectangular table with several rows or columns. This tag might be a bit difficult at first since it has three different tags altogether and it must be open and close in the correct sequence in order to make it work accordingly.
Below is a simple rectangular table.
Code:
This is some text
</td></tr></table>
| This is some text |
The set of code must be written in this sequence. <table> tag to open the table mark followed by <tr> to open the row and finally <td> to open the cell. And each of the tag must be close in the reverse order in which the last tag opened has to be close first. Your content has to be placed after the <td> tag as that is where the cell area for content was.
Now, lets create a table with several cells within one same row.
Code:
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
</tr>
</table>
| Cell 1 | Cell 2 | Cell 3 |
This time, We will create a table with severals rows and 1 single cell on each row.
Code:
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
<tr><td>Row 4</td></tr>
</table>
| Row 1 |
| Row 2 |
| Row 3 |
| Row 4 |
Code:
<tr>
<td>Links </td>
<td> Content </td>
</tr>
<tr>
<td> Link 1<br/>Link2<br/>Link 3</td>
<td> Some content here </td>
</tr>
</table>
| Links | Content |
| Link 1 Link2 Link 3 |
Some content here |
So, now you have learn some basic knowledge on how to create a web page and it is time to put more time into practical excercise. Only with more excercise will let you to become a master. So, start to think of a simple web page design and try to code it out.
There are also a whole lots of resources out there in the internet which provide full tutorial and discussion about web programming. Just browse around and you would gain more and more knowledge and skill into building a better website.
Post Your Comment Here
