HTML stands for Hypertext Markup Language is a standardize system for tagging files to achieve font, color, graphic and hyperlink effects on World Wide Web pages.The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. It makes the web page more interactive with all the images, links and tables input.
One thing to be reminded, the browser does not display the HTML tags but uses the tags to interpret the content of the page. So you guys don't have to worry about it!
Let's start with the simplest tagging input.
1. Open the note pad and type..
<html>
<body>
<h1>My first heading</h1>
<p>My first paragraph.</p>
</body>
</html>
2. Press File>Save as..> at File name section, type intro.html>at Save as Type, choose All File>Ok
3. This will be the outcome of the above HTML.
Now that you have learnt about HTML, lets get working.
A webpage would be more interesting with a few image or even gif in it. however the question is how to insert in into your webpage?
The format is quit simple n constant, just type
into your Notepad
Still doesn't understand? or are you still confused?
- IMG = stands for "image." It announces to the browser that an image will go here on the page. Yes, the image will pop up right where you write in the image tag.
- SRC = stands for "source." This again is an attribute, a command inside a command. It's telling the browser where to go to find the image. Again, it's best for you to place the images you want to use in a subdirectory called "images". This way you can call for the image by name with just the subdir name in front of it, like this:/images/imagename.gif. You could also direct the source to some other place online, such as an image you have stored on Photobucket, for instance, by using the full URL of the image, such as http://www.photobucket.com/youraccount/imagename.jpg. Right now, let's just get it to work.
image.gif = is the name of the image. Notice it's following the same type of format as your HTML documents. There is a name (image) then a dot and then there is a suffix (gif).
- ALT = stands for "alternate text". This tells the browser that if it can't find the image, then just display this text. It also tells anyone who can't view your image what the image is about. For example a disabled user using a screen reader, or dare I mention it, Search Engines. When you mouse over the image, the alternate text pops up.
"some text" is where you put the text describing your image.
- WIDTH = stands for just that, the width of the image in pixels. It can range from 1 pixel to, well, just about any number, but generally will be less than the width of the web browser.
- HEIGHT = stands for, as you might guess, the height of the image in pixels. Again, the height can be just about anything, but generally will be less than the height of the web browser.
Now, how to put a moving image?
It is basically the same as inserting an image but with a slight change in its format. just enter the moving image link at the same place you have entered you image link.
Well then, Good Luck inserting image in your webpage~
Link HTML.
As the other HTML specific codes, there are some important notation to be known.
* HTML links are actually HTML anchors constructed using anchor tags (<a>).
eg : <a>I am a link</a> will result as "I am a link "
* A Hypertext Reference (href) is an HTML attribute of an anchor (link) tag that requires a valid URL in order to properly direct a user to a different location.
Please refers to the image below:
HTML Tables
Tables are defined with the <table> tag.
A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc
.
Table Example
<table border="1">
<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>
</table>
without cell padding
| Row 1, cell 1 | Row 1, cell 2 |
|---|---|
| Row 2, cell 1 | Row 2, cell 2 |
HTML Tables and the Border Attribute
If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful, but most of the time, we want the borders to show.
To display a table with borders, specify the border attribute:
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
HTML Table Headers
Header information in a table are defined with the <th> tag.
All major browsers display the text in the <th> element as bold and centered.
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<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>
</table>
with Cell Padding
| Header 1 | Header2 |
|---|---|
| Row 1, cell 1 | Row 1, cell 2 |
| Row 2, cell 1 | Row 2, cell 2 |
| Header 1 | Header2 |
|---|---|
| Row 1, cell 1 | Row 1, cell 2 |
| Row 2, cell 1 | Row 2, cell 2 |
No comments:
Post a Comment