Iswapyou Blog

HTML Tutorial – Lesson 6: Working with Fonts

Justin — Mon, 28 Jun 2010 01:36:46 +0000

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 tag! We can use the tag to control size using the SIZE attribute. The SIZE attribute is used like this:

This text font size x.

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 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 tag. Color is added to text using, duh, the COLOR attribute to the tag. We use the COLOR attribute the same way as the SIZE attribute:

This is colorful text in font size 4!

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:

This text is purple.

For more information on Hex color codes, I suggest you try html-color-codes.com. The last attribute to 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:

This text is a stunning arial size 5 in blue!

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:

This text is either Arial or Helvetica.

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 tag. It’s used like this:

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

Justin — Mon, 28 Jun 2010 01:11:23 +0000

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!

Do you like your name to stand out on your pages? HTML has some special tags that allow us to change the way our text is shown. One of them is the , or boldface tag. You can also make text in italics with the or italics tag. Text can be underlined with the , or underline tag. These tags need both an opening tag and a closing tag, so the format is , , or text to be formatted, , or .In addition to these “regular” formatting tags, there are
lots of “special” formatting tags. Heres a list of them:

Special formatting tags

– Small text

– Big text

– Superscript

_{– Subscript}

~~– Strikethrough text (text with a line through it)~~

– Monospaced (typewriter style) text
– Preserves all format and line breaks in the HTML source
Text formatting is great! Here’s how to align your text. When you align your text, it lines up with that portion of the window. Left aligned text (the default) is lined up with the left side of the window. It works just like if you were using a word processor and clicked the left align button. However, there is no align tag. Instead there is what’s called the align attribute. An attribute is an argument that is put into a tag to change the way that tag works. The align attribute can be put into many different tags to format paragraphs or blocks of text (pictures too-more on this later). If we wanted to make a paragraph aligned to the center of our window, we’d add the align attribute to the tag at the beginning of that paragraph. It would look like this: This paragraph is aligned to the center. This was accomplished by using the align attribute. Here’s how it would show up in the browser window: This paragraph is aligned to the center. This was accomplished by using the align attribute. There is also a way to format multiple paragraphs of text. We can do this by using the , or division tag. The division tag really doesn’t do anything without the align attribute, or another attribute. It’s completely useless without attributes! The tag is used like this: This is the text to be left aligned. I can align lots of text with the division tag! If we put this into our web page, it shows up in a browser like this: This is the text to be left aligned. I can align lots of text with the division tag! The align tag can also be used in headers. If you want your header to be eye catching, align=”center” it! All this stuff is great, but i bet you’re worrying about the small margin space in your pages. Well, that can be fixed with one easy tag: the tag! Simply put a right under that tag, and a right above the , and you’ll have beautiful margins in your page with minimal work! Now you should be an expert in text format and alignment. Take a few minutes to absorb what you’ve just learned, and surf to the next lesson.

HTML Tutorial – Lesson 4: Adding Links Justin — Mon, 28 Jun 2010 00:53:24 +0000 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 , or anchor tag. The tag uses the HREF argument to specify the site to link to. It looks like this: This is my link!. Note the “This is my link!” part in between the and 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. Sometimes you might want to do what is called relative linking. This is when one page on your site links to another page on the same site. If you’re coding page http://mysite.com/index.html and want to link to http://mysite.com/page2.html, you’d simply add a relative link. The format in this case would be: Go to page2 When the link is clicked the browser will display page2.html if it is in the same folder as page1.html. Lazy people like me love having this option! If you want to get a page one directory up from the current one, you simply insert a ../ before the filename of the page. For example, if you’re in http://mysite.com/newstuff/main.html and need to link to http://mysite.com/index.html, this is what you’d do: Go to the index. You can add as many ../’s as you want to get to progressively higher directories. If you want a link that people can click on to send email to, you just add mailto: before your email address. The format is like this: Mail me! For example, a link to my email looks like this: Mail me! Kapish? Ok great! See you at the next lesson! HTML Tutorial – Lesson 3: Basic Tags and Formatting Justin — Mon, 28 Jun 2010 00:33:11 +0000 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. HTML is a language that is coded with tags. They are called tags because they tag parts of a webpage for formatting in a browser. HTML tags are very easy to spot in web page source. They are the things shown that start with a < and end with a >. Most HTML tags have an opening tag () to start formatting text and a closing tag () to end the formatting. There are some HTML tags that are absolutely necessary in an HTML page. Those tags are the ‘’ and ‘’ tags. These are usually put at the top () and bottom () of an HTML page. This tag tells the browser that this page is an HTML page. Other tags: and : This is where information about the entire page is placed. and : This tag needs to be put between the and . This tag gives a name to your page. The name won’t be shown in the the text of the page, but rather in the top of the browser window. and : This tag defines the body portion of the page. Later we will learn how to use the tag to add background colors, text colors, and margins. Now that we know the required tags, I’m going to put my text that I came up with in the last lesson in the proper html format. Justin’s Webpage Welcome to Justin’s Web Page! Hi, my name is Justin. I built this web page because I love coding in HTML! I could do it all day long! I am a lover of programming languages, and love to design and produce web content. Thanks for visiting my page! Yours Truly, -Justin “But wait 1 second!”, you might be thinking. “I typed that, and opened it with my browser, and it doesn’t look like that!” What? Does it look like this: Welcome to Justin’s Web Page! Hi, My name is Justin. I built this web page because I love coding in HTML! I could do it all day long! I am a lover of programming languages, and love to design and produce web content. Thanks for visiting my page! Yours Truly, -Justin Hmm… What’s wrong here? Ohmygod! We forgot the text formatting tags! The tag can add paragraph spacing to your page. The tag adds a single line break to your page. These tags do not need a and , or and , unlike the other tags. So now our page is coded like this: Justin’s Webpage Welcome to Justin’s Web Page! Hi, my name is Justin. I built this web page because I love coding in HTML! I could do it all day long! I am a lover of programming languages, and love to design and produce web content. Thanks for visiting my page! Yours Truly, -Justin Great! We have format! Now i’ll bet you want that first line to be large, right? This can be accomplished by marking some text as a “header”. The header is made as shown below: "header text goes here" Welcome to Justin's Web Page! Note that the html tags are and . Headers can be of size 1-6, with 1 being the largest and 6 the smallest. I chose to use header size 2 (the second largest), which is the size i usually prefer to use for a header at the top of a page. You chould instead use all the way down to if you like. My final page code looks like this: Justin’s Webpage Welcome to Justin’s Web Page! Hi, my name is Justin. I built this web page because I love coding in HTML! I could do it all day long! I am a lover of programming languages, and love to design and produce web content. Thanks for visiting my page! Yours Truly, -Justin Also note that i removed the tag after the header, since headers are automatically on their own line. Go ahead and save your page as “myfirstpage.html” (note the ‘.html’ extension at the end HTML pages all need either .htm or .html extensions), then meet me at the next lesson! HTML Tutorial – Lesson 2: Structure and Method Justin — Sun, 14 Feb 2010 16:47:55 +0000 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 Justin — Tue, 09 Feb 2010 03:18:38 +0000 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 Justin — Tue, 02 Feb 2010 23:26:23 +0000 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. ’ 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: Text=’<%# Container.DataItem(“EmployeeName”) %>’ If you are using a RadioButtonList control to bind data then the syntax is: In multiple data bound Values in a Hyperlink Control with a GridView: ConnectionString=”server=localhost;database=Northwind;uid=x;pwd=y” SelectCommand=”SELECT ProductID, ProductName, QuantityPerUnit, UnitPrice, UnitsInStock, Discontinued FROM Products” /> 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: SelectCommand=”SELECT EmpID, CompanyName, City FROM employees”/> AutoGenerateColumns=”False”> DataTextField=”employeeName” DataNavigateUrlFields=”EmpID,City” DataNavigateUrlFormatString= “http://yoursite.com/showemployee.aspx?id={0}&city={1}” /> 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 Justin — Sun, 31 Jan 2010 06:46:29 +0000 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 Justin — Sat, 30 Jan 2010 00:02:41 +0000 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 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 Justin — Thu, 28 Jan 2010 23:52:30 +0000 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: xmlns:soap=”http://www…./soap-envelope” soap:encodingStyle=”http://www…./soap-encoding”> … … … … … … SOAP Envelope element is a root element and it defines the XMLdocument. xmlns:soap namespace defines the Envelope as a SOAP Envelope. The encodingStyle attribute is used to define which data types are used in the document. SOAP has header element which is optional and contains the information about the application. Body element contains actual SOAP Messages. Fault element is used to indicate errors. Let us see each of them in detail: :- A code which is used for identifying tags. :- Explanation of the fault. :- Whom fault was caused by. :- Further details about the fault. Using a TCP connection, communication is formed between HTTP client and server. Once the connection is made the following messages are passed from client to server. POST /item HTTP/1.1 Host: 189.121.356.314 Content-Type: text/plain Content-Length: 200 If connection is successful then the following messages are returned by the server. 200 OK Content-Type: text/plain Content-Length: 200 SOAP connection means connection between HTTP and XML.The request can be HTTP POST or HTTPGET.In the example below, a GetempSalary request is sent to a server. The request has a empName parameter, and a salary parameter will be returned in the response. The namespace for the function is defined in “http://www.employee.org/salary” address. The SOAP request: POST /salary HTTP/1.1 Host: www.employee.org Content-Type: application/soap+xml; charset=utf-8 Content-Length: mmm xmlns:soap =”http://www.abc.org/soap-envelope” soap:encodingStyle =”http://www.abc.org/soap-encoding”> John A SOAP response: HTTP/1.1 200 OK Content-Type: application/soap+xml; charset=utf-8 Content-Length: mmm xmlns:soap =”http://www.abc.org/soap-envelope” soap:encodingStyle =”http://www.abc.org/soap-encoding”> 20000

Iswapyou Blog

HTML Tutorial – Lesson 6: Working with Fonts

HTML Tutorial – Lesson 5: More on Formatting your Text

HTML Tutorial – Lesson 4: Adding Links

HTML Tutorial – Lesson 3: Basic Tags and Formatting

`"header text goes here"`

`Welcome to Justin's Web Page!`

and

Welcome to Justin’s Web Page!

HTML Tutorial – Lesson 2: Structure and Method

HTML Tutorial Lesson 1: Introduction to HTML

Data Binding using ASP.NET

A review of Adobe Flex Builder

Google Analytics is made of win

A Detailed Introduction to SOAP