Chapter 5
HTML Tutorial
The thing to keep in mind is that HTML and CSS are all about the separation of content (HTML) and presentation (CSS). HTML is nothing more than fancy structured content and visual layout of this content will come later when we discuss CSS.If you've watched other HTML tutorials, you may have found some things that they mention the dog HTML does not work. This is because many methods are obsolete, non-standard or just a bad practice. Enter the mindset of doing things the right way from the start will turn in better results in the end.
We have added two new elements here, starting with the head tag and the title tag (and see how these two closely).
The head element (which begins with the opening <head> tag and ends with the </ head>) appears before the body element (from <body> and ending with </ body >) and contains information on the page. The information contained in the head element does not appear in the browser window.
We will see later that other elements may appear inside the head element, but the most important of them is the element title.
If you look at the document in the browser (save and update as before), you will see "My First Web Page" appears in the title bar of the window (not the actual drawing area). The text you placed between the title tags became the title of the document (what a surprise). If you need to add this page to your "favorites" (or "Bookmarks" depending on your browser), you would see that the title is also used there.
Tables:
The table element defines the table.
The tr element defines a table row.
The td element defines a data cell. They must be enclosed in tr tags as shown above.
If you imagine a 3x4 table, which is 12 cells, there should be four tr to define rows and three td elements in each row, for a total of 12 td elements.
Images:
The
img tag is used to put an image in an HTML document and it looks like this:
<img src="http://www.anutc.com/nst/images/logo.gif" width="157" height="70" alt="mehboob" />
The
src attribute tells the browser where to find the image. Like the a tag, this can be absolute, as the above example demonstrates, but is usually relative. For example, if you create your own image and save it as "alienpie.jpg" in a directory called "images" then the code would be <img src="images/alienpie.jpg"...
The
width and height attributes are necessary because if they are excluded, the browser will tend to calculate the size as the image loads, instead of when the page loads, which means that the layout of the document may jump around while the page is loading.
The
alt attribute is the alternative description. This is used for people who cannot or choose not to view images. This is a requirement in the latest versions of HTML.Forms:
The
input tag is the daddy of the form world. It can take ten forms, outlined below:<input type="text" />is a standard textbox. This can also have avalueattribute, which sets the initial text in the textbox.<input type="password" />is similar to the textbox, but the characters typed in by the user will be hidden.<input type="checkbox" />is a checkbox, which can be toggled on and off by the user. This can also have acheckedattribute, which would be used in the format<input type="checkbox" checked="checked" />, and makes the initial state of the check box to be switched on, as it were.<input type="radio" />is similar to a checkbox, but the user can only select one radio button in a group. This can also have acheckedattribute, used in the same way as the checkbox.<input type="file" />is an area that shows the files on your computer, like you see when you open or save a document in most programs, and is used to enable users to upload files.<input type="submit" />is a button that when selected will submit the form. You can control the text that appears on the submit button (as you can withbuttonandresettypes - see below) with thevalueattribute, for example<input type="submit" value="Ooo. Look. Text on a button. Wow" />.<input type="image" />is an image that will submit the coordinates of where the user clicked on it. This also requires asrcattribute, like theimgtag.<input type="button" />is a button that will not do anything without extra code added.<input type="reset" />is a button that when selected will reset the form fields to their default values.<input type="hidden" />is a field that will not be displayed and is used to pass information such as the page name that the user is on or the email address that the form should be posted to.
Note that the
input tag closes itself with a "/>" at the end.
A textarea is, basically, a large textbox. It requires a
rows and cols attribute and is used like this:<textarea rows="5" cols="20">A big load of text here</textarea><form action="contactus.php" method="post">
<p>Name:</p>
<p><input type="text" name="name" value="Your name" /></p>
<p>Comments: </p>
<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
<p>Are you:</p>
<p><input type="radio" name="areyou" value="male" /> Male</p>
<p><input type="radio" name="areyou" value="female" /> Female</p>
<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>
<p><input type="submit" /></p>
<p><input type="reset" /></p>
</form>
No comments:
Post a Comment