Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Using HTML elements

It is quite easy to let ASP use an HTML control. Basically, we put it in the pre-generated form in the ASP page, we give it a runat attribute set to "server", and that it. OK, when used in ASP context the HTML controls require a slight different setting.

For instance the multiple attribute of the select element has to be set to true to show that it is a multiple select, and not to "multiple" as the standard specify. It would be ASP itself to convert it to the HTML code expected on client side.

Here is an example where we create a sort of feedback page for a blog that is about computer programming. We create an HTML input text, myName, where the reader could enter his name; then a multiple select, myLanguages, for the programming languages used; another input text, myOther, for entering more programming languages; another select (but this one is not a multiple one), myInterest, to let the reader give a feedback; a button, myButton, to ask ASP to run the associated C# code; and finally a label, myLabel, where putting the result.

Here is the resulting ASP page:

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
void click(Object s, EventArgs e)
{
myLabel.Text = "Feedback from "
+ (myName.Value.Count() != 0 ? myName.Value : "anonymous") + "<br />"
+ "preferred languages: ";

bool anyLanguage = false;
for (int i = 0; i < myLanguages.Items.Count; ++i)
{
if (myLanguages.Items[i].Selected)
{
anyLanguage = true;
myLabel.Text += myLanguages.Items[i].Text + " ";
}
}
if (anyLanguage == false)
myLabel.Text += "not specified";
myLabel.Text += "<br />";

if(myOther.Value.Count() != 0)
myLabel.Text += "Other: " + myOther.Value + "<br />";

myLabel.Text += "Has been the blog useful? " + myInterest.Value;
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Feedback</title>
</head>
<body>
<form id="myForm" runat="server">
<div>
<h2>Feedback</h2>
<p>Name:<br /><input type="text" id="myName" runat="server" /></p>
<p>Which programming languages do you currently use?<br />
<select id="myLanguages" runat="server" multiple="true">
<option>C</option>
<option>C++</option>
<option>C#</option>
<option>Java</option>
<option>Perl</option>
<option>SQL</option>
<option>Other</option>
</select>
</p>
<p>If other, please specify:<br />
<input type="text" id="myOther" runat="server" /></p>
<p>Have you found anything interesting in here?<br />
<select id="myInterest" runat="server">
<option>Yes</option>
<option>No</option>
</select>
</p>
<p><button id="myButton" onserverclick="click" runat="server">Confirm</button></p>
<p><asp:Label id="myLabel" runat="server" /></p>
</div>
</form>
</body>
</html>

Relatively speaking, we have written quite a lot of C# code in this example.

Go to the full post

Hello ASP

Here is a simple ASP page developed with Visual Web Deveoper.using C# as programming language.

I won't spend time on the (long and boring) time required to install on my machine the developing environment, because I don't not know what to say more than it was a long and boring process.

In any case. I have created a new project for an empty Web ASP-NET application. Then in the application I created a new Web Form, and I kept the proposed name (even if I don't expecially like it), Default.aspx. In the process, another file happened to be created, Default.aspx.cs, that looks quite clearly it is a C# file strongly connected with the ASP page.

Here is the source file for the ASP page, slightly change to provide a HTML page title, and some text in the body:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Hello Simple</title>
</head>
<body>
<form id="form1" runat="server">
<div>
Hello from Simple. Current time is <asp:Label id="myTime" runat="server"/>
</div>
</form>
</body>
</html>

In the first line you see a Page directive where it is specified, among other stuff, that we are using C# as undelying language and the name of the file where to look for the C# code.

In the body we can see that a put an asp:Label, that is nothing more than a label, but it has a funny property runat set to server, obviously meaning that is something that has to run on the server. We keep note also of the other property, ID, that looks like a way of providing access to this element.

Actually, if we have a look to the C-Sharp code, we understand more of the asp:Label, since I put there a line referring to it:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(Object sender, EventArgs e)
{
myTime.Text = DateTime.Now.ToString();
}
}

All this code was automatically generated but the body of the Page_Load() method. Even not knowing a thing of C# and ASP.NET, it looks that here we are dealing with a class containing code related with a web page, that is picked up as default and that its proposed method is called when the page is loaded, passing an "Object" representing the sender and an "EventArgs" that should be the associated event that caused the method to be called.

What we are doing here is simply setting the Text property of the myTime label, defined in the ASP page, using the current system time converted to a string.

When I executed the project I saw an HTML page having this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Hello Simple
</title></head>
<body>
<form method="post" action="Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJ(...)Grg==" />
</div>

<div>
Hello from Simple. Current time is <span id="myTime">13/02/11 22:59:16</span>

</div>
</form>
</body>
</html>

Bad formatting, some funny stuff, but, besides this, the most interesting line is in the body, where our asp:Label has been converted in good HTML code.

Go to the full post

CSS specific style for div id descendant

I give for known div, the useful block element used as a container of other elements, that helps us to give more structure to our HTML page.

Here the problem is that we want to specify the style for an element in a specific div in a page without affecting all the other elements of the same type.

We can do that giving a id to the div we want to customize, and specify the style for the element by the div id and the element type.

Say that all the h2 element in our page should be displayed in gray:
h2 { color: gray; }
But we want the h2 element in the "extra" div being blue.

Here is the HTML for that div:

<div id="extra">
<h2>Mocha Cafe Latte, €2.35</h2>
<p>Espresso, <em>steamed milk</em> and chocolate syrup.</p>
<blockquote class = "brown">
It is what you are looking for<br />
And when you find it<br />
You gonna love it<br />
</blockquote>
</div>

And here is how we specify in the CSS how we want this special effect:
#extra h2 { color: blue; }
Just the h2 included in the container having id "extra" would be affected.

A fun book for HTML beginners: Head First HTML. You will find a lot more details on div in its chapter eleven.

Go to the full post

CSS and id

We have seen how to use an element identified by its id attribute with JavaScript, we know how to use the elements identified by the class attribute with CSS. It shouldn't be strange to think that we can use the id as selector in CSS.

The reason to use id and not class should be self-evident: we have just one single element in our HTML page that we want to comply with a very specific style. For instance, we could use it for the page footer:
<p id="footer">Please steal this page, it isn't copyrighted in any way</p>
In the CSS we write:
#footer { color: red; }
We can be even more specific, and say that the style is defined for the footer attribute on a paragraph element:
p#footer { color: red; }

A fun book for HTML beginners: Head First HTML.

Go to the full post

CSS class

A style could be applied not only to a specific HTML tag, but also to a class. We can create a style for a couple tag/style or just for a class. In the last case all the tags referencing to that class would use that style.

To mark that a specific tag should conform to a specific style class, we set for it the attribute class with the required value. So, this paragraph would use the style defined for the green class:
<p class="green">A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala.</p>
In the CSS file we define a style for a tag in this way:
p.green { color: green; }
We can define a class style that could be used by all tags:
.brown { color: brown; }
In this case we could use the brown style in each tag that supports the class attribute.

A fun book for HTML beginners: Head First HTML. If you are interested in CSS, go to chapter eight.

Go to the full post

CSS basics

In the previous post we had an informal introduction to CSS, now we are giving some more details.

Instead of putting the CSS in the HTML itself, we put it in a dedicated file. So we don't use anymore a style tag, but a link one, like this:
<link type="text/css" rel="stylesheet" href="ch08.css" />
In the href attribute we have a link to the actual file containing the style for the page.

We call "selector" the element to which we are applying a style in the current block, specified before the beginning of the block.

For instance if we write:

h1 {
color: gray;
}

In this context h1 is the selector, and we apply the color style to it.

We could specify more than a selector at time. So, if we want both h1 and h2 having color gray, we write:

h1, h2 {
color: gray;
}

We could have more sections for the same selector. For instance, if we want both h1 and h2 with the same color text (as above) but only h1 having a line below, we can add this section:

h1 {
border-bottom: 1px solid black;
}

A comment in CSS is written using the C-style convention, from slash-star to star-slash:

p {
/* background-color: red; */
color: blue;
border: 1px solid gray;
}

The "cascading" property of CSS is such that the style we specify for a more extern tag is applied to a contained tag, too, if no override is specified in the contained tag.

So, the style specified for body should be applied to all the document:

body {
font-family: sans-serif;
color: red;
}

But, given the previously written style for h1 and h2, in that case the text color would still be gray. And, given this:

em {
font-family: serif;
}

The emphasis is written using a serif font, and not a sans-serif, as specified by the body.

A fun book for HTML beginners: Head First HTML. If you are interested in CSS, go to chapter eight.

Go to the full post

CSS - Cascading Style Sheets

Head First HTML looks a good book to read if you want to have a fun introduction to HTML. Actually, I should consider myself too experienced for it, but I enjoy a lot the "Head First" style, so I'm reading it anyway.

Talking about style, the first real argument in the book, after a couple of dozen of pages, is CSS that stands for Cascading Style Sheets and provides a way to specify the style used of presenting our pages.

As usual, an example should help understanding the concept:

<html>
<head>
<title>Starbuzz Coffee</title>
<style type="text/css">
body {
background-color: brown;
margin-left: 25%;
margin-right: 25%;
border: 2px dotted black;
padding: 10px 10px 10px 10px;
font-family: serif;
}
</style>
</head>
<body>
<h1>Starbuzz Coffee Beverages</h1>
<h2>House Blend, €1.49</h2>
<p>A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala.</p>
<h2>Mocha Cafe Latte, €2.35</h2>
<p>Espresso, steamed milk and chocolate syrup.</p>
<h2>Cappuccino, €1.89</h2>
<p>A mixture of espresso, steamed milk and foam.</p>
<h2>Chai Tea, €1.85</h2>
<p>A spicy drink made with black tea, spices, milk and honey.</p>
</body>
</html>

The only "strange" part in this HTML page is the style tag, in the document head.
In it we are specifying the style for the body. Best way to understand how to work is try the code, making a few changes. All the attributes should be self-explaining; a simple change we can do for the font-family is using sans-serif instead of serif.

I have some spare time, and I'm using it in quite a nerdy way, reading a book on HTML. But at least it is a fun book: Head First HTML.

Go to the full post