Apr
10
HTML & Website Design Basics
Filed Under Main Content | Leave a Comment
I’ve created a fun and useful Introduction to Website Design Presentation. I included a few slides as a very basic intro to HTML or HyperText Markup Language.
I’ve used a variation of this presentation as an introduction to Website Design & HTML in my classroom. It puts the basics into perspective and provides a foundation for my site layout & design projects.
HTML is interpreted by your Internet Browser (IE, Firefox, Opera, etc) to produce the pages that you view online. Of course things get more complicated when you add applications to support things like this Blog, ecommerce and other database applications requiring an advanced scripting language. We’ll stick to the simple stuff for now…
HTML Flash Presentation
So here’s my Website Design Basics (flash) Presentation. I hope you enjoy it.
TG 
Feb
4
Expert HTML
Filed Under Main Content | Leave a Comment
by Sandra Prior
Making your Web Pages Download Fast is the Most Effective way of Keeping Visitors Browsing your Website.
With the Web being the all encompassing, slightly anarchic, global phenomenon that it is, there are no set standards about how to design Web pages. But there is one overriding principle that every Web designer should chant like a mantra as soon as they awake in the morning. ‘Speed is everything’.
Getting your website’s information on to the browsers of your visitors as quickly as possible is still the number one skill to learn when it comes to building web pages, but it often gets overlooked because it doesn’t seem as much fun as fooling around with Java applets or animated GIFs. But don’t be swayed by such fripperies – master the art of building sites that download super-fast and you’ll get people coming back again and again.
With the arrival of broadband, it’s tempting to think that designing web pages to download fast won’t be a concern. People will multitask on the Net as they do with their computers, pushing their internet access connections to the extreme and cursing your Web page if it doesn’t appear instantly. The need for speed is here to stay, so knowing how to optimize your HTML code and graphics will never go out of fashion.
Thunder down the Information Highway
Grease your Graphics
While understanding how to make your HTML super-sleek is vital to streamlining your Web pages, graphics are the single biggest culprit for slow loading websites. The hard and fast rule has to be, if you don’t need a graphic, don’t use it. For example, using graphics for text is a no-no – HTML text looks great if you use a bit of color and judgment.
Try to rescue the graphics you do need on your site throughout your pages. That way, the image gets cached in the user’s web browser and the image isn’t downloaded again. Don’t be afraid of repetition – for example, if you have a groovy logo to use on your site then put it in the same place on every page. It reassures the visitor that they are still on your site.
You should ensure that the full size of the graphics you use are as small as possible. Imaging editing programs will deal with this for you to an extent, but you can’t beat running an image through an online graphic compression tool to get the lowest possible image size.
Keep it Simple
When it comes down to HTML code, the first thing to do is design a look and feel for your site that isn’t massively complex. Simple layout equals slimline code. Ask yourself if you really need that scrolling ticker or Java applet – chances are you don’t.
Frames are also a bad idea for fast pages. Every frame within a frameset is effectively adding another page to load simultaneously when the user arrives at your site, rather than just one page. Coupled with the navigation, search engine and bookmarking nightmares that frames can cause, they’re best avoided.
Nested tables – that is, putting one table inside another – are the main way diligent designers achieve a good layout to their Web page, but be wary of overdoing it. As long as the tables are simple, with only three or four cells, nesting is fine. If you find yourself nesting the equivalent of a chessboard, it might be wiser to start again. Tables take a while to load in Web browsers, and the more complex the code, the longer your visitors will be staring at a blank screen.
Remember that just because your Web page might look simple doesn’t mean that it was simple to put together. Simplicity is not only good for speed but also ease of use which has to be the other design concern.
WYSIWYG Weirdness
WYSIWYG (What You See Is What You Get) editors are great for quickly assembling Web pages without the chore of typing HTML code by hand. However, these editors often add lots of extraneous code which is not actually needed to make the page display correctly. This is why it’s important to have at least a basic grasp of HTML even if you do use a WYSIWYG editor. Knowing what’s going on under the bonnet means you can spot a multitude of sins and streamline your code so it runs faster.
Tag it and Bag it
Times New Roman is the Web’s default font, but Verdana and Arial have become extremely popular too. If you like these fonts enough to want to use them throughout your site, a nifty way on cutting down on coding every paragraph is to use the tag. This changes the default font of your pages.
For example, it will make all the text on your page appear as size 2 Verdana, unless you specify otherwise using the usual tags that doesn’t have a closing tag, so you don’t need to insert a tag anywhere. Best of all, you can avoid the hassle of having to format the majority of your text in one fell swoop, saving coding time and keeping your HTML streamlined.
A Space Odyssey
This is possibly the easiest way of improving an existing site’s download time. Every space in your HTML code isn’t empty spaces to a browser – it’s another bit of info it needs to interpret and process. Many WYSIWYG editors generate indented code with line breaks. Removing all those indents and line breaks will shave several K off the size of your page so it loads much quicker.
It’s here that a half decent Web page editor comes into its own. Using the search and replace function, you should be able to do a sitewide search for spaces. Type several spaces into the Find box, make sure the replace box is empty and it’ll whiz through the whole site eliminating any spaces it finds.
Article Source:
http://www.articlesbase.com/web-design-articles/expert-html-419529.html
Technorati Tags: Html, Web, Pages, Download, Fast, Speed, Website, Design, Browser, Java, Code, Graphics, Tables, Tags
Jan
29
Why Learn HTML Code?
Filed Under Main Content | Leave a Comment
Why Learn HTML?
In today’s world, governed by the Internet, everybody wants to build a website, and the major question comes in: How? The research begins, most of the times on the same media you’re trying to break in, and you end up with more questions than answers. How should you handle this amount of information? The opinions of those that are already in are always different and you end up lost like in the beginning.
This might happen because the answer to the questions “should I learn HTML code or just use a WYSIWYG editor? What’s better for me?” depends most on your expectations, needs and intentions and not only on the characteristics of the tools available. While some people prefer to measure things using a square rule because they have more uses, others prefer the standard rule because it’s more portable. Each object has its advantages and disadvantages and you can’t say exactly which one of them is better. So, to clear the things out, let’s look at the differences between HTML and WYSIWYG editors.
Time to learn
This is the biggest advantage of WYSIWYG editors because building a website with them is easier and more intuitive. Who ever wrote a letter in a text editor or drawn an image in a picture editor knows what this means. For those who have never used them, it’s like opening a website in your navigator and be able to click the text and start editing it, changing the size, the color, moving images, changing them, etc., all through clicks, tool bars and menus.
In the other hand, writing HTML tends to be more complicated, even when it’s an easy language. HTML is a markup language, and the reason why it’s easier than other languages is that the resulting web page is interpreted by a code (it has no cycles, no functions, no changing variables). Anyway, learning HTML may give you long term advantages once you’ve passed through the learning experience.
Time to build
This is a diffuse point, given that many people think that the method they use is better and faster. The truth is that this time depends a lot on the expertise level of the designer but, even when the difference could be depreciable, it’s more probable that a web page could be finished faster with a WYSIWYG editor.
Knowledge
Even when knowledge can be acquired anywhere (if you know how), in this case HTML offers more chances of expanding your mind and rise up your intellectual coefficient. It’s a good point if you’re trying to learn beyond of it. HTML coding will give you practice while, as it’s an easy language, will introduce you to the programming world (also a part of the web design and development).
Portability
While HTML code can be written in any text editor, even the most basic one, you cannot build a website in a WYSIWYG editor if you don’t have the editor. This may become a portability problem for those who don’t know HTML because they will need to have the editor installed in the computer they want to use to build, modify or update a web page (no matter how big or little the update is).
Code standards
When using a WYSIWYG editor, the web page is constructed by the user in a visual way that’s translated to HTML code by the editor engine. This means that the direct responsible of writing the HTML code is the editor, even when the directives are imparted by the designer. This many times makes that the web pages have incorrect, malformed or non-standard code, and very often additional (not wished) meta tag code.
When using HTML, the only person that decides which code goes and which code doesn’t, is the designer. You have the liberty and authority of choosing how the code will be written in your HTML document, if it will respect the standards, if it will be accessible, and many more.
Reach
How far can you go building websites through WYSIWYG editors? Well, as far as the program lets you. Today’s WYSIWYG editors bring easy and advanced solutions to designers incorporating markup languages, server-side languages, client-side languages, plug-ins and more. This will help designers to build up web pages and fill them with effects, functionalities and interactivity. This is good, and is very good if you’re not intended to go to a higher level, given that the functions provided by the editor (or by other sources) will work great with your expectations.
In the other hand, HTML is just HTML, but if you’re visionary, you’ll see that HTML is the doorway to further learning which will have, as we mentioned before, a long term benefit. The best thing of knowing HTML, as any other language, is that you’re not limited to the number of functions that the editor has to offer. You can always create your own customizable functions and code, which will look and feel exactly as you wish them to do.
Credibility
If you’re working for, or trying to catch a client, it’s not that same to say that you know and handle HTML that say that you only can use a WYSIWYG editor. Knowing HTML gives you an extra point: credibility.
A third option comes in if you decide to learn both of them. Most WYSIWYG editors have the option of parallel edition of the HTML code which opens a new possibility. Anyway, you can always modify the HTML files generated by the editor. This way you can get the benefits of both.
In conclusion, the best way to follow depends on your intentions. HTML, harder to learn but more customizable and independent, or WYSIWYG editors, easier but more editor-dependent. If your intention is to “just design a website” then you may find a WYSIWYG editor good enough, but if you’re looking serious to the web design then HTML is a must.
Article Author: Diego Ponce de León from: www.HTMLQuick.com
Article Source: www.articlesbase.com/internet-articles/why-to-learn-html-code-90946.html