Archive for the ‘HTML’ Category

HTML Tutorial – Lesson 2: Structure and Method

Sunday, February 14th, 2010

I’ll bet you’re thinking “Structure and Method? What is this… some kinda textbook???” Well, no, in this lesson you’ll be learning about the Structure of HTML and the Method that is used to make them.

HTML does not need to be coded with some special “HTML tool”, and you don’t even need some special program like Microsoft FrontPage or Macromedia Dreamweaver (In fact, I discourage their use until you know the ins and outs of HTML code). All that you DO need is a simple text editing program like windows built in Notepad. You’re probably thinking “Wait just one second, you’re telling me I can code up another Yahoo! with my puny little Notepad? Yes! That’s part of the beauty of HTML! In fact, this entire tutorial was created in TextPad, a simple and very cheap text editor.

When you make a Web page the first thing you need to do is gather your content. For our first page ever, we’ll be making an informative page about ourselves. For example here is mine:

Welcome to Justin’s Web Page!

Hi, My name is Justin. I built this web page because I love writing HTML code! I could do it all day long (and sometimes, i do). I am a lover of programming languages, and love to design and produce web content. Thanks for visiting my page!

Yours Truly,
-Justin

Go ahead and think up a few paragraph’s like this, and meet me at the next lesson.

HTML Tutorial Lesson 1: Introduction to HTML

Monday, February 8th, 2010

Welcome to my HTML tutorial!

Soon you shall be on your way to building great Web Pages and vast Web Sites, but first lets go over a thing or two about what a “Web Page” is, how they work, and what we can do with them.

For this tutorial you will need:

  • An Internet ready computer
  • A web browser

Because you are reading this on my blog, I will assume that you have both of these things.

Let’s jump right in to the lesson!

In the beginnings of the Internet, it was very hard to exchange data. So with great vision and foresight, Tim Berners-Lee created a way to connect text on the Internet through Hypertext Links (References to other text on the Internet). This wasn’t a new idea, but his Hypertext Markup Language (HTML) was very popular and caught on better than other competing projects.

HTML is not a “Programming Language” per se, but rather a scripting language that marks up the page with formatting commands. Your Web Browser then reads these commands and shows the formatted page on your screen. Because the popularity of the Web programmers began writing Web Browsers that could display graphics and a wide range of other content. Thousands of people started to create web pages ranging from personal “homepages” to business information pages and rich internet applications.

Today billions of people access the web, and a there is a huge diversity of sites that have sprung up for their each of their needs. Before going on to the next lesson, I suggest that you go out and view many pages that are out there on the Web. As you are viewing them, to view the HTML behind the page click View->Source if you’re using Microsoft Internet Explorer, or View->Page Source with Firefox.

Lesson 2

Data Binding using ASP.NET

Tuesday, February 2nd, 2010

Data Binding creates a link between a particular control to a specific column of a table in the database or to an entire table in the database. With ASP.NET data binding you can also bind any server control to the output of different methods and expressions.

On ASP.NET pages when we are doing databinding it is necessary to use the basic syntax for all expressions.

For example:

<%# EmpID %>  This syntax is for a simple property.

<asp:ListBox datasource=’<%# firstArray %>’ runat=”server”>  This syntax is for a collection.

<%# (emp.First Name + ” ” + emp.LastName ) %>  This syntax is for an expression.

<%# GetSalary(EmpID) %>  This syntax is for the result of method GetSalary().

If you are using a list control the following syntax is used:

<asp:Label runat=”server”

Text=’<%# Container.DataItem(“EmployeeName”) %>’

If you are using a RadioButtonList control to bind data then the syntax is:

<html>

<body><form runat=”server”>

<asp:RadioButtonList runat=”server” />

</form></body>

</html>

In multiple data bound Values in a Hyperlink Control with a GridView:

<form runat=”server”>

<asp:SqlDataSource runat=”server”

ConnectionString=”server=localhost;database=Northwind;uid=x;pwd=y”

SelectCommand=”SELECT ProductID, ProductName, QuantityPerUnit,

UnitPrice, UnitsInStock, Discontinued FROM Products” />

<asp:GridView DataSourceID=”datasource1″ runat=”server” />

</form>

If one wants to navigate between the fields then the syntax is:

DataNavigateUrlFields=”ProductID,SupplierID,ProductType”

In the following example, the code below uses a feature to provide a hyperlink that contains two values, both extracted from the current row of the employees table, for the href attribute:

<asp:SqlDataSource runat=”server”

SelectCommand=”SELECT EmpID, CompanyName, City FROM employees”/>

<asp:GridView DataSourceID=”datasource1″ runat=”server”

AutoGenerateColumns=”False”>

<Columns>

<asp:BoundField DataField=”EmpID” HeaderText=”BoundField” />

<asp:HyperLinkField runat=”server”

DataTextField=”employeeName”

DataNavigateUrlFields=”EmpID,City”

DataNavigateUrlFormatString=

“http://yoursite.com/showemployee.aspx?id={0}&city={1}” />

</Columns>

</asp:GridView>

The resulting value for the href attribute will be something like this:

“http://yoursite.com/showemployee.aspx?id=00123&city=Mumbai”

In the above example city of the employee is “Mumbai” and employee id is “00123”.

Databinding simplifies applications; and with less code a fast execution is done. .Net helps the programmer by reducing his/her work and time spent coding a data abstraction layer.

A chat with a professional designer

Tuesday, December 11th, 2007

If you are, work with or want to be a professional designer, you MUST READ THIS…

I had a chat with MD, a professional designer friend of mine. I wanted to get an idea of what his design process is, as well as his thoughts on the current “Web 2.0″ situation and what it means for professional designers right now. He graciously agreed to allow me to post the conversation to the blog!

(more…)

New updates to iswapyou.com

Tuesday, December 11th, 2007

Theres been a lot of new functional changes made to iswapyou in the last two weeks. Summary is listed below.

(more…)

How to add Google Adsense to your WordPress blog posts

Sunday, December 2nd, 2007

Theres a few ways to add Google Adsense to your WordPress blog posts. One of the easiest ways is to simply switch to the “Code” tab when writing a post, and then post your adsense code from Google Adsense. See the images below for if you’re not sure where either of these is.

(more…)

How to make your wordpress banner navigate to your blogs homepage

Thursday, November 29th, 2007

The default wordpress template leaves much to be desired in the way of user navigation. For instance, when you navigate from the index of a blog to an article, you have no easy way to get back to the homepage! To fix this, I decided to make my banner navigate to my homepage – a very easy mod that took ~5 minutes worth of template editing.

(more…)

Finally – updates to iswapyou.com!!

Thursday, August 9th, 2007

I completed a lot of updates that were in the works on iswapyou.com today. The site search was updated to make it easier to use – instead of having multiple options on it, it now searches and gives results for everything. I changed it on the advice of a few usability experts.

(more…)

Integrating phpBB in to a community site – part 2

Saturday, June 16th, 2007

Whenever i create a website, i like to try my best to create a consistent look and feel for the entire site as much as possible. If you change UI elements such as navigation links when you go to an installed web application on your site you WILL confuse your users.

That said, it isn’t always practical to shoehorn your entire main site design in to an application without downgrading that applications functionality. With phpBB for example, if I wanted to use the Iswapyou main site design I would need to have two navigation bars (the main site nav and phpBB’s nav) on every phpBB page. This would take up too much space on the page and introduce more clutter than i wanted to, so I instead put my iswapyou main sites navigation links into phpBB’s navigation bar.

(more…)

Googlejacking, two years later

Tuesday, June 12th, 2007

I submitted a story to 2600 magazine in the summer of 2005 about a shady technique for getting pageviews called “Googlejacking”. The story was accepted, and I received a few issues of the mag, a shirt, and a bit of internet fame in the coming months.

For those of you who don’t have an IV needle in to the internet like I do, googlejacking is a technique using either a HTML 302 redirect or a META REFRESH to redirect from one page to another. When you performed the redirect from your site to a target site, YOUR REDIRECT LINK (for example, “http://www.iswapyou.com/redirect.php?www.cnn.com”) would be published by google, msn live search, Ask Jeeve’s, or any other search engines spiders instead of the destination link. If you find out that this is happening you can then steal all of the search engine traffic from your redirections destination (!), as described in the article.

(more…)