HTML Tutorial – Lesson 6: Working with Fonts

June 27th, 2010

Yeah, HTML is good. We’ve gotten pretty deep into text control, but there’s still more ahead so let’s trudge on.

We can control the font in HTML using, what else, the <FONT> tag! We can use the <FONT> tag to control size using the SIZE attribute. The SIZE attribute is used like this:

<FONT SIZE=”x”>
This text font size x.
</FONT>

Where x is a number, from 1 to 7. The size that the formatted text is depends on the viewers preference settings and screen resolution. Generally though, 1 is really small and 7 is really big. Just in case you’re curious, the default font size is 3. There is also a tag called the <BASEFONT> tag, which only can take the SIZE attibute, but is made to change the size of the text on the entire page. We can also add color to our text using the <FONT> tag. Color is added to text using, duh, the COLOR attribute to the <FONT> tag. We use the COLOR attribute the same way as the SIZE attribute:

<FONT SIZE=”4″ COLOR=”blue”>
This is colorful text in font size 4!
</FONT>

To our page’s viewers, it would look like this:

This is colorful text in font size 4!

The COLOR attribute can use these standard colors: black, white, green, red, yellow, blue, aqua, fuchsia, gray, lime, maroon, purple, navy, olive, silver or teal. What? You need more control? Then I suggest you learn the hexadecimal color codes. Hex color codes are used like this:

<FONT COLOR=”#0033FF”>
This text is purple.
</FONT>

For more information on Hex color codes, I suggest you try html-color-codes.com. The last attribute to <FONT> we’ll learn in this lesson is FACE. By defining a font’s face, you can control the appearance of that font. The FACE attribute is used like this:
<FONT FACE=”arial” size=”5″ color=”blue”>
This text is a stunning arial size 5 in blue!
</FONT>

To the viewer, it would look like this:

This text is a stunning arial size 5 in blue!

Yes, this is great, but there’s a catch: for the viewer to see this font change he needs to have the font on his computer. How does it get there? Different computer’s come with different font’s installed. For example, the Arial font is used on PCs, but Macs use a similar font called Helvetica. We can get around this by asking for backup choices in our FACE attribute. This is done like this:
<FONT FACE=”arial,helvetica”>
This text is either Arial or Helvetica.
</FONT>

This will show up as arial on computers that have arial installed, or helvetica if they do’nt have arial but do have helvetica. If they do’nt have either, the font does’nt change. However, you can specify as many back up choices as you want.

Yeah, simple text is great, but what if we need to put some special characters into our page? Well, once again HTML to the rescue! The format for this is & followed by the Numeric Code of the special character, or the mnemonic entity of that character, followed by a ;. Here’s a list of the important special characters:
Character Numeric Code Mnemonic Entity Character Name
” #34 quot Quotation mark
& #38 amp Ampersand
< #60 lt Less Than sign
> #62 gt Greater Than sign
¢ #162 cent Cent sign
£ #163 pound Pound sterling
¦ #166 brkbar Broken Vertical bar
§ #167 sect Section sign
© #169 copy Copyright
® #174 reg Registered trademark
° #176 deg Degree sign
± #177 plusmn Positive or Negative
² #178 sup2 Superscript two
³ #179 sup3 Superscript three
· #183 middot Middle dot
¹ #185 sup1 Superscript one
¼ #188 frac14 Fraction one-fourth
½ #189 frac12 Fraction one-half
¾ #190 frac34 Fraction three-fourths
Æ #198 AElig Capital AE ligature
æ #230 aelig Small ae ligature
É #201 Eacute Accented capital E
é #233 eacute Accented small e
× #215 Multiply sign
÷ #247 Division sign

Hey! Here’s a little secret: to change the Background color of our web page, simply insert the BGCOLOR attribute into your <BODY> tag. It’s used like this: <BODY BGCOLOR=”color or hex number code”>

A little review: How would we put the copyright sign (©) on your website? If you answered &
followed immediately by #169;, you’re correct! You deserve to go on to the next lesson!

HTML Tutorial – Lesson 5: More on Formatting your Text

June 27th, 2010

By now i’ll bet that you’ve got a very informative page with a beautiful link to someplace (this site? please?) on it. That’s great, but i’ll bet you’re hungry to make it look even more beautiful than it already is (or maybe your boss demands it)! Well, read on!

Read the rest of this entry »

HTML Tutorial – Lesson 4: Adding Links

June 27th, 2010

Great! We have a functional page of text! Are you satisfied? No? Well, i’m not either. Let’s expand our
page by adding some links to other web pages on it!

The ability to link to other web pages is what makes HTML hypertext. Hyper means outside
of, and when you link to another web page, you link outside of your own page.
Linking to another page is easy. In fact, you only need to use one tag! This tag is the <A>, or anchor
tag
. The <A> tag uses the HREF argument to specify the site to link to. It looks like this: <A HREF=”http://mylink.com”>This is my link!</A>. Note the “This is my link!” part in between the <A>
and </A> This is the part where you enter the clickable text that’ll show up in the browser. This link text is shown blue and
underlined in most browsers. When Joe Surfer clicks on this text the browser will take him to the link in the href argument -
http://www.mylink.com in this case.

Read the rest of this entry »

HTML Tutorial – Lesson 3: Basic Tags and Formatting

June 27th, 2010

So after lesson 2 you might be thinking “That was too easy. Seriously, TEACH me something!” Be
patient. I think this lesson will give you your fill.

Read the rest of this entry »

HTML Tutorial – Lesson 2: Structure and Method

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

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

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 review of Adobe Flex Builder

January 30th, 2010

Adobe’s FlexBuilder is the Software Development Environment for Flex, Adobes Rich Internet Application platform. FlexBuilder is built on Eclipse, so any computer you run on it should have > 1 GB of ram and a processor > 2 ghz.

FlexBuilder is a very satisfying environment to work in. It is much more natural (as a programmer) to use than the actionscript editors in Adobe Flash. Because you are working in a fairly heavyweight Eclipse environment, those used to working in Microsoft Visual Studio may find FlexBuilder a bit slow. FlexBuilder does have a set of very capable debugging tools however, and these tools alone make the near-$250 price tag worth it. The addition of the powerful Designer mode (much like the Design view in Visual Studio) also adds a lot of value. Because of these features I strongly recommend Adobe FlexBuilder for development, and consider it a worthwhile addition to any Rich Internet Application programmers toolkit.

Rating: 8 out of 10
Pros: Feature packed, Eclipse environment is very configurable, Natural environment for experienced programmers.
Cons: Eclipse is a resource hog, so check to make sure your computer meets the minimum specs before buying.

Google Analytics is made of win

January 29th, 2010

This week, for the first time, I got on the Google Analytics bandwagon. I never thought charts and graphs could be so damn fun. Look at this:

Google Analytics site overlay

Google Analytics site overlay function

That is what Google calls the “Site Overlay” (it’s under the Content menu, if you’re looking for it, Googlers/Bingers). I was FLOORED when I saw it for the first time. The numbered percents everywhat represent the percentage of visitors that clicked the link – but I’m sure you didn’t need to be told that, since the data is clear as day.  WAY TO GO GOOGLE for taking data visualization to the next level.  Mad props.

A Detailed Introduction to SOAP

January 28th, 2010

SOAP stands for Simple Object Access Protocol and is used for communication between applications through the Internet. SOAP is a platform and language independent. It also allows applications to communicate between each other though both applications are on different operating systems. SOAP messages are typically written using XML.

Here is an example of SOAP syntax:
Read the rest of this entry »