Understanding HTML in ASP.NET
HTML is the de facto language for creating web pages and is understood by every web browser that exists today. Since the beginning of the ’90s it has been the driving force of the World Wide Web, the part of the Internet that deals with web pages. HTML documents are simple text files that contain markup, text, and additional data that influences that text. The most recent version of HTML is HTML5. Although the specification of HTML5 is still under development, a lot of modern browsers support important parts of this specification, and this support increases with each new release of those browsers. Despite the fact that not all browsers support HTML5 fully, it isreally the future of HTML-based applications, and therefore I use it in this book and for the Planet Wrox demo website. Don’t worry about the limited browser support too much. All major browsers support all of the HTML5 features you use in this book, or support can easily be simulated by a script library called Modernizr, which you see later in the book.
HTML Elements and Tags
HTML uses text surrounded by angle brackets to indicate how your content should be rendered (or displayed) in the browser. The text with angle brackets is referred to as a tag; a pair of tags holding some text or other content is referred to as an element. Take another look at the HTML you saw in the previous Try It Out where you opened the source window for the page in the browser:
<h2>Hello World</h2>
<p>Welcome to Beginning ASP.NET 4.5.1 on 11/16/2013 4:18:17 PM</p>
The first line of this example contains an <h2> element with an opening tag (<h2>) and a closing tag (</h2>). This element is used to signify a heading at the second level (if you scroll up a bit in the final source in the browser, you also see an <h1> element). Notice how the element is closed with a similar tag, but with an additional forward slash (/) in it: </h2>. Any text between these
opening and closing tags is considered part of the element, and is thus rendered as a heading. In most browsers, this means the text is rendered in a larger font. Similar to the <h2> tag are tags for creating headings up to level six, such as <h1>, <h3>, and so on.
Below the heading element, you see a <p> element, which is used to denote a paragraph. All text within the pair of <p> tags is considered part of the paragraph. By default, a browser renders a paragraph with some additional margin spacing at the bottom, although you can override that
behavior. Many tags are available in HTML, too many to cover them all here. The following table lists some of the most important tags and describes how they can be used. For a complete list of all HTML elements, take a look at the website of the organization that maintains the HTML standard:
www.w3.org/TR/html5/index.html.
<title> Used to define the title of the page. This title will appear in the browser’s title bar. This element is placed inside the <head> element.
Example
<title>
Welcome to Planet Wrox 4.5.1
</title>
<body> Used to denote the start andend of the body of the page. Itscontent is what you see in the browser. This element is placed inside the <html> element.
Example
<body>
...Page body goes here
</body>r />
Example
<body>
...Page body goes here
</body>r />
<header> Used to denote the header of a page. This element and all remaining elements in this table are placed inside the <body> element.
Example
<header>
...<img src="Logo.png" ... />
</header>
<section> Used to denote various sections in your page. You can have multiple sections per page.
Example
<section>
...Content goes here
</section>
<aside> Used to denote content that is not part of the core page, but presented as an aside.
Example
<aside>
...<img src="Banner.png" ... />
</aside>
<article> Used to denote the main piece
of content in a page.
Example
<article>
...Main page content goes here
</article>
<a> Used to link one web page to another or to create links within a page.
Example
<a href="http://www.wrox.com">
Visit the Wrox site
</a>
<img> Used to embed images in a page.
Example
<img src="Logo.gif" />
<form> <textarea>
<input> <select> Used for input forms that enable users to submit information to the server.
Example
<input type="text" value="Some Text" />
<table> <th>
<tr> <td> These tags are used to create a layout with a table. The <table> tag defines the entire table, the <th> is used to denote header cells, and the <tr> and <td> tags are used to define rows and cells, respectively.
Example
<table>
<tr>
<td>This is a Cell in Column 1</td>
<td>This is a Cell in Column 2</td>
</tr>
</table>
<ul>
<ol>
<li> These three tags are used to create numbered or bulleted lists. The <ul> and the <ol> tags define the looks of the list (either unordered, with a simple bullet, or ordered, with a number), and the <li> tag is used to represent items in the list.
Example
<ul>
<li>First item with a bullet</li>
<li>Second item with a bullet</li>
</ul>
<ol>
<li>First item with a number</li>
<li>Second item with a number</li>
</ol>
<span> This tag is used to wrap and influence other parts of the document. It appears as inline, so it adds no additional line break on the screen.
Example
<p>This is some normal text while
<span style="color: red;">this text
appears in red </span></p>
<div> Just like the <span> tag, the <div> tag is used as a container for other elements. However, the <div> acts as a block element, which causes an explicit line break before and after the <div> element by default.
Example
<div>This is some text on 1 line</div>
<div>
This text is put directly under
the previous text on a new line.
</div>
<audio>
<video>
<source> Used to embed audio and video files in your web page. The <source> element is used to define multiple types of audio and video resources.\
Example
<video src="Somevideo.mpg" />
HTML Attributes
In addition to the HTML elements, the examples in the preceding table also showed you HTML attributes. Attributes contain additional information that changes the way a specific element behaves. For example, with the <img> tag that is used to display an image, the src attribute defines the source of that image. Similarly, the <span> tag contains a style attribute that changes the color of the text to red. The value of the style attribute (color: red;) is part of a cascading style sheet (CSS), which is discussed in much more detail in later section. Just as with the HTML elements, there is a long list of available attributes and the elements to which they apply on the W3C website:
www.w3.org/TR/html5/index.html#attributes-1.You don’t need to memorize all these elements and attributes. Most of the time, they are generated for you automatically by VS. In other cases, where you need to enter them by hand, VS offers you IntelliSense to help you find the right tag or attribute. IntelliSense is discussed in the next section. HTML Comments In order to comment something out in HTML, you wrap it in comment tags, like this:
<!-- This is a comment -->
Code you comment out is not processed by the browser (and thus isn’t visible), but it’s still sent to the browser (and thus is viewable by the end user). Because it is still sent to the browser, it adds to the page size, so you should use comments sparingly. In later chapters you see how to comment out code at the server so it’s not sent to the client.
The Rules of HTML5
The rules of HTML5 are pretty simple, and most of the time VS helps you get it right or shows you a list of errors and suggestions for how to fix them. HTML5 is actually more relaxed than the previous version of HTML (called XHTML, which in turn was a reformulation of HTML 4.01 with XML rules) when it comes to enforcing rules.
Close Your Elements
Most elements in HTML must be closed. So when you start with a <div> tag, you must use </div> somewhere later in your page. Some exceptions exist (such as the <p> element if it’s directly followed by some other elements), but I prefer to consistently close my tags. This is also the case for elements that don’t have their own closing tags, like <img> or <br> (to enter a line break). In HTML5, these tags can be written as self-closing tags, where the closing slash is embedded directly in the tag itself
as in <img src="Logo.gif" /> or <br />.
Usage of Attributes
Whenever you write an attribute in a tag, you can write the value wrapped in double quotes, single quotes, or no quotes at all. For example, when writing out the <img> tag and its src attribute, you can write it like this:
<img src="Logo.gif" />
You could also use single quotes to enclose the attribute value, like this:
<img src='Logo.gif' />
Both options work, as long as you use the same type of quote on both ends of the value. For values that don’t contain a space, you can also leave out the quotes:
<input value=yes>
It’s also sometimes necessary to nest single and double quotes. For example, when some special ASP.NET syntax requires the use of double quotes, you should use single quotes to wrap the attribute’s value:
<asp:Label ID="TitleLabel" runat="server" Text='<%# Eval("Title") %>' />
You see this syntax used a lot more in later Section. For consistency, this book uses double quotes where possible in all HTML that ends up in the client, as this is generally the accepted standard.
Nest Your Elements Correctly
When you write nested elements, make sure that you first close the inner element you opened last, and then close the outer element. Consider this correct example that formats a piece of text with both bold and italic fonts: <strong><em>This is some formatted text</em></strong> Notice how the <em> tag is closed before the <strong> tag. Swapping the order of the closing tags leads to invalid HTML:
<strong><em>This is some formatted text</strong></em>
Add a DOCTYPE Declaration to Your Page
A DOCTYPE gives the browser information about the kind of HTML it can expect. By default, VS adds a DOCTYPE for HTML5 to your page:
<!DOCTYPE html>
The DOCTYPE greatly influences the way browsers like Internet Explorer render the page, so if you’re seeing odd behavior on your page, check that your page has the correct DOCTYPE. You can view the complete HTML5 syntax rules at the W3C site at www.w3.org/TR/html-markup/syntax.html. Besides HTML, an ASP.NET web page can contain other markup as well. Most pages will have one or more ASP.NET Server Controls to give them some additional functionality. The next section briefly looks at these ASP.NET Server Controls, but you get an in-depth look at them in Later section.
A First Look at ASP .NET Markup
To some extent, the markup for ASP.NET Server Controls is similar to that of HTML. It also has the notion of tags, elements, and attributes, using the same angle brackets and closing tags as HTML does. One big difference is that the ASP.NET tags start with an asp: prefix. For example, a button in ASP.NET looks like this:
<asp:Button ID="Button1" runat="server" Text="Click Me" />
Note how the tag is self-closed with the trailing slash (/) character, eliminating the need to type a separate closing tag. If you wanted to, you could use a separate closing tag, though. When a server control is processed, it returns HTML. So, the code for the same button ends up like this when rendered in the browser:
<input type="submit" name="Button1" value="Click Me" id="Button1" />
The process of converting the server control to its HTML representation is similar to the code you saw earlier that displayed the current date. The server control is processed at the server by the ASP.NET handler. This processing results in HTML, which is sent to the browser, where it’s displayed.
You see more of this in later section. Now that you understand the basics of an ASP.NET page and the HTML that it generates, it’s time to look at VS again. Knowing how to use the application and its many tools and windows is an
important step in building fun, good-looking, functional websites.
No comments:
Post a Comment
We are happy for leaving comments,we will don't let you bite stay with us