Posts
Before you start developing ASP.NET websites, we need to first learn HTML or Hypertext Markup Language. HTML is a markup language used to create web pages. The term markup means that you are tagging or annotating a document to give meaning to each of its parts. HTML is what a web browser can render. HTML alone is easy to learn but to give life to your web pages, you need to learn the technologies the compliment it such as CSS, Javascript, and of course ASP.NET. In this lesson, we will have a quick tutorial on HTML.
HTML Tags and Elements
An HTML web page is composed of tags and elements. A tag is a text surrounded with angle brackets which has a corresponding meaning to the page. A pair of an opening tag and closing tag is used to surround a specific content of the web page. For example, the <b> tag stands for "bold". You can surround a text or content to make it bold, but you need to use a closing tag. The following example will make the text "Hello World" bold:
<b>Hello World</b>
As you can see, there are two tags that are at the beginning and at the end of the inner text. The opening tag specifies that everything after it will be modified based on the tag's functionality. The closing tag at the end specifies that the effect of the opening tag will end at that spot. The closing tag which is placed at the end of the text to be affected is the same as the opening tag but has a slash (/) preceding the text of the tag.
The combination of an opening tag, closing tag, and contents between them is called an element. The snippet in Example 1 is an element. Since it is composed of <b> tags, we can call it a <b> element.
Some elements don't need pairs to be valid. An example is the <br> element which renders a line break. It doesn't need a text or content inside it. Instead of writing this:
<br></br>
You can simply write this alternative syntax:
<br />
An element's content can also have another element. Here is an example:
<b>This text is bold and <i>italicized</i>.</b>
This text is bold and italicized.
HTML Attributes
A tag can have one or more attributes. Attributes give additional information or an effect on the content of the element. An example is the anchor tag <a>. A text or content enclosed by the <a> tag will render as a link (mouse turns into a hand when you hover to it). But the <a> tag alone is not enough. You need to specify where the link should go. You can provide an href attribute to it. Here's an example:
<a href="https://www.trickcode.in/">Click Here</a>
This will render Click Here. When you click the link, you will be taken to wherever the href attribute specifies. An attribute starts with an attribute name such as href, followed by the equal sign (=) then the value of the attribute enclosed in either double quotes(") or single quotes('). A tag can also have more than one attribute. Just make sure that attributes are inside the opening tag of the element.
Frequently Used HTML Tags
Figure 1 shows a table of commonly used HTML tags together with their description and example.
| Tag | Description | Example |
|---|---|---|
| <html> | This tag is used to enclose the whole HTML web page. | <html> ....Content of page </html> |
| <head> | Indicates the head section of an HTML page where you can declare pieces of data that will be used by the web page. | <head> ....Content of head </head> |
| <title> | Specifies the title of the page. | <title>My Web Page</title> |
| <body> | Signifies the body of the page where the main content is located. | <body> ...Main Content </body> |
| <a> | Anchor tag. Used to specify a link to another web page, web site, or a file. | <a href="http://example.com"> Go to Example.Com </a> |
| <img> | Renders an image by providing the source of the image. | <img src="sample.jpg"></img> |
| <b> | Used to make the text of the content bold. | <b>Bold Text</b> |
| <i> | Used to make the text of the content italicized. | <i>Italicized Text</i> |
| <u> | Used the add an underline to the text of the content. | <u>Underlined Text</u> |
| <form> | Represents a form where a user can input data that will be sent to the server. | <form> ...Content of form </form> |
| <input> | Used to retrieve input or information from the user. | <input type="text" value="Enter your name" /> |
| <table> <tr> <td> | These tags are used to construct a table of data consisting of rows and columns. The <table> tag is used to start and end the whole table. The <tr> tag specifies a table row and inside it, one or more <td> tags exist which represents the columns of the row. | <table> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table> |
| <ul> <ol> <li> | These tags are used for enumerating and enlisting a list of data. <ul> is for unordered list which is list in which order is not important. <ol> is for ordered list which renders a numbered list. Both <ul> and <ol> contains one or more <li> elements which represents an item of the list. | <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> |
| <h1> <h2> <h3> <h4> <h5> | These are header tags which usually makes the text bigger to provide emphasis or to act as the heading or sub heading of a particular part of a document. | <h1>Types of Animals</h1> <h2>Mammals</h2> <h3>Dogs</h3> |
| <p> | Specifies a paragraph of text. | <p>Paragraph here</p> |
| <span> | Adds additional effect to a block of text or content. | <span style="color:red"> DANGER</span> |
| <div> | Acts the same as the <span> tag but this is typically used to provide layout to the page with the help of CSS. | <div class="wrapper"> <div class="header"></div> <div class="body-main"></div> <div class="sidebar"></div> <div class="footer"></div> </div> |
DOCTYPE Declarations
Every valid HTML page must have a DOCTYPE declaration at the very beginning before the <html> tag. The DOCTYPE is used by the browsers to determine what version of HTML and the rules for validating the web page. Here is an example of a typical DOCTYPE declaration.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Don't worry because you don't need to memorize this every time. You can simply copy-paste it to the beginning of every page. And if you are using Visual Web Developer, then this is already provided for you when you are creating a new page. The DOCTYPE above means that your web page is using XHTML, Transitional DTD which simply means that you can use old HTML tags and that you must follow the rule of closing every element with a corresponding closing tag. You also need to make your tags lowercase. There are more flavors of DOCTYPE declaration but the one presented to you is the most used one. For a list of DOCTYPEs you can use, you can proceed to the following link:
http://www.w3schools.com/tags/tag_doctype.asp
http://www.w3schools.com/tags/tag_doctype.asp
HTML Page Example
To wrap everything up, here is an example of a full HTML page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>My HTML Web Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a simple example of an web page built using <b>Hypertext Markup Language</b>.<p>
</body>
</html>
This lesson only gives a quick look at creating an HTML page. HTML is a large topic and covering them all here is unnecessary as there are already some great sources you can go to to learn HTML. One of these great sources is W3Schools. If you want to learn more about HTML, you proceed to the following link for a full free course on HTML.
Share this article with your friends
Post A Comment:
0 comments: