Hot HTML / XHTML / CSS How-Tos

How To: Use web application Sumo Paint

In this video, we learn how to use the web application, Sumo Paint. First, go to the website Sumo Paint and the website will start to load in a new window a Flash application. Once it's fully loaded, you will be able to add an image and then start to edit it. There are several different tools available on the side, whether you need to resize, crop, erase, or anything else to your picture! This is a great website for editing and makes everything simple. There is also a toolbar on the top where...

How To: Insert HTML content over Photoshop slices

If you already know how to make Photoshop slices and bring them into Dreamweaver for use on your website, there's really only one more thing you need to know to utilize these slices properly on your website: how to insert HTML content over the sliced images to make your website both functional and cool-looking. What more could you want your site to be?

How To: Use Stock.Xchng to access free stock images

In this Computers & Programming video tutorial you will learn how to use Stock.Xchng to access free stock images. The site is at SXC. Go to this site and you will find a large number of stock images that are free to use. And every day new photos are being added. You can search for an image by category by clicking on the search box and scrolling down to find your category. You can also type in the search box to find a photo of your liking. The image also tells you what is the screen size, prin...

How To: Create a free flash website using Wix

In this video, we learn how to create a free flash website using Wix. First, log online and go to "www.wix.com" and either create a screen name or log into your account. Now, click on "create" and choose a premade template or make one from scratch. Now, change the background to a color you prefer, then add in a frame and different media to your page. You can also add a title to the website by clicking on the "text" section. You can play around with the different effects and additions, making ...

How To: Use and work with CSS attribute selectors

In this free video CSS tutorial, you will learn how using attribute selectors easily add images to download links and email links. Whether you're using a fancy WYSIWYG (or what-you-see-is-what-you-get) page editor like Adobe Dreamweaver CS5 or a barebones text editor like Notepad, if you want to build websites, you'll need to have some understanding of HTML (for the structure of your web pages) and CSS (for their style). And this free coder's guide will get you started along that path.

How To: Use floats and absolute & relative positioning in CSS

In this free video CSS tutorial, you will learn how to use floats and absolute and relative positioning. Whether you're using a fancy WYSIWYG (or what-you-see-is-what-you-get) page editor like Adobe Dreamweaver CS5 or a barebones text editor like Notepad, if you want to build websites, you'll need to have some understanding of HTML (for the structure of your web pages) and CSS (for their style). And this free coder's guide will get you started along that path.

How To: Create a simple two-column layout with CSS

See a very simple way to create a two-column layout with pure CSS. Whether you're using a fancy WYSIWYG (or what-you-see-is-what-you-get) page editor like Adobe Dreamweaver CS5 or a barebones text editor like Notepad, if you want to build websites, you'll need to have some understanding of HTML (for the structure of your web pages) and CSS (for their style). And this free coder's guide will get you started along that path.

How To: Add an external style sheet to an HTML document

This clip will show you how to add external CSS stylesheets to an HTML document in a number of different ways while explaining the significance of ordering. Whether you're using a fancy WYSIWYG (or what-you-see-is-what-you-get) page editor like Adobe Dreamweaver CS5 or a barebones text editor like Notepad, if you want to build websites, you'll need to have some understanding of HTML (for the structure of your web pages) and CSS (for their style). And this free coder's guide will get you start...

How To: Create pure CSS drop-down menus without JavaScript

This clip will show you how to create pure CSS drop down menus without any JavaScript. Whether you're using a fancy WYSIWYG (or what-you-see-is-what-you-get) page editor like Adobe Dreamweaver CS5 or a barebones text editor like Notepad, if you want to build websites, you'll need to have some understanding of HTML (for the structure of your web pages) and CSS (for their style). And this free coder's guide will get you started along that path.

How To: Create a photo gallery with CSS

Learn how to easily create a CSS photo gallery with a unordered list and a little bit of CSS. Whether you're using a fancy WYSIWYG (or what-you-see-is-what-you-get) page editor like Adobe Dreamweaver CS5 or a barebones text editor like Notepad, if you want to build websites, you'll need to have some understanding of HTML (for the structure of your web pages) and CSS (for their style). And this free coder's guide will get you started along that path.

How To: Create a parallax background effect with CSS

In this clip, you will see how to create a cool parallax effect with some CSS and images. Whether you're using a fancy WYSIWYG (or what-you-see-is-what-you-get) page editor like Adobe Dreamweaver CS5 or a barebones text editor like Notepad, if you want to build websites, you'll need to have some understanding of HTML (for the structure of your web pages) and CSS (for their style). And this free coder's guide will get you started along that path.

How To: Create a basic layout for a web page with CSS

In this free web developer's guide, you will learn the basic of creating a basic CSS layout. Whether you're using a fancy WYSIWYG (or what-you-see-is-what-you-get) page editor like Adobe Dreamweaver CS5 or a barebones text editor like Notepad, if you want to build websites, you'll need to have some understanding of HTML (for the structure of your web pages) and CSS (for their style). And this free coder's guide will get you started along that path.

How To: Style a webform with Cascading Style Sheets (CSS)

Forget tables, start using list items and some css to start styling your forms. In this CSS tutorial, you learn just that. Whether you're using a fancy WYSIWYG (or what-you-see-is-what-you-get) page editor like Adobe Dreamweaver CS5 or a barebones text editor like Notepad, if you want to build websites, you'll need to have some understanding of HTML (for the structure of your web pages) and CSS (for their style). And this free coder's guide will get you started along that path.

How To: Style list items with Cascading Style Sheets (CSS)

With help from this free video tutorial, you'll learn how to style list items with CSS. Whether you're using a fancy WYSIWYG (or what-you-see-is-what-you-get) page editor like Adobe Dreamweaver CS5 or a barebones text editor like Notepad, if you want to build websites, you'll need to have some understanding of HTML (for the structure of your web pages) and CSS (for their style). And this free coder's guide will get you started along that path.

How To: Create rollovers with CSS

This video shows how to turn a single image into a rollover button with a little XHTML and some CSS. Whether you're using a fancy WYSIWYG (or what-you-see-is-what-you-get) page editor like Adobe Dreamweaver CS5 or a barebones text editor like Notepad, if you want to build websites, you'll need to have some understanding of HTML (for the structure of your web pages) and CSS (for their style). And this free coder's guide will get you started along that path.

How To: Write basic HTML and CSS

Whether you're using a fancy WYSIWYG (what-you-see-is-what-you-get) page editor like Adobe Dreamweaver CS5 or a barebones text editor like Notepad, if you want to build websites, you'll need to have some understanding of HTML (for the structure of your web pages) and CSS (for their style). And this free coder's guide will get you started along that path.

How To: Wrap text around images in HTML 4

First of all you have to open the 'notepad'. Now you have to type in "<html>" in first line. Write "<head> in second line. Write "<title>this website contains text wrapped around images</title>". In the fourth line you have to type '<body bgcolor="#999999">'. This shall add a light orange color. Now find out the name of the image. Here the name of the file is 'image.png'. Then in the next line you have to type in "<img src="image.png">this text should hopefully wrap around the outside of the ...

How To: Alter text on MySpace using HTML codes

In this Computers & Programming video tutorial you will learn how to alter text on MySpace using HTML codes. Here are a few basic html codes used to change the look of text on your profile or in a bulletin. <b> for starting bold text and </b> for ending bold text. <i> this text will be italicized</i>. For underlining text use the code <u> </u>. <b><i><u> This text will be bold, italicized and underlined </b></i></u>. To change color of your text to ‘red’ use the code <font color=”red”> </font...

How To: Make an image map without additional software

This video is a quick lesson on how to make an image map for free without the software. You use image mapping if you are creating a website or you are a partner with http://youtube.com. From your PC or Mac you go to http://www.image-maps.com and that is where most of the free image maps are available. Then you click on "start mapping my image" and you will see a preview, and then you follow the steps in the tutorial. The video was very informative and precise on a step-by-step process to do t...

How To: Create buttons with CSS

In this tutorial freetutorials teaches you how to create navigation style buttons using cascading style sheets, or CSS, in this the first in his series of "HTML Tips & Tricks". As you follow along, you will be shown how to setup and link your cascading style sheet to your HTML document, and where to place it in the document. Once you have done that, he will show you how to create a CSS, add a body and code the buttons in the CSS using notepad.

How To: Create rounded corners in CSS

This is a video related to Computers and Programming. This is the video regarding CSS Rounded Corners: Dreamweaver Tutorial. They have discussed some images regarding CSS rounded corners. CSS is not just chatting about and doing stuff. There's a CSS book regarding all this computers and programming. Due to this, it is very much easy to implement. We do not need to face any problem. It's a great book. In this video, they have given the full video about how we can create rounded corners in CSS....

How To: Change your HTML font and size

Learn how to change your HTML font and size with this video. First go to edit menu> preferences and then select fonts. Here there are many fonts that have their own categories-proportional font, fixed font and code view. On the right hand side, one can even change the size. Once the settings are changed, click on "OK". That's it, the font as well as its size are changed. It will help while working on the software for better viewing in case of small screens.

How To: Make a simple HTML hyperlink

This how to video shows how to put an HTML hyperlink on a web page. It starts with the basic code to simply insert the link and have that link open in the same window. The code appears as follows: <a href="http://www.website.com">Text that will show up on the page </a>. The example used is Google, so it would be, <a href="http://www.google.com">Google</a>. The video then explains how to create a hyperlink that shows up in a new window. Sticking with the Google reference it would read <a href=...

How To: Design visual elements in CSS

Have you seen extravagant graphics on web pages or in the GUI (Graphical User Interface) of a commercially published program? Do you wish you could create graphics comparable to published works? Now you can! This tutorial will take you step by step in creating visual elements in CSS. Cascading Style sheets are the present and future of web pages and this tutorial will make sure you are not left behind. The visual aspect of web pages are of utmost importance and the major determinant of a user...

How To: Use CSS and JavaScript in StyleVision

See how to use CSS and JavaScript to visually design style sheets for publishing XML and database data in Altova StyleVision, a visual style sheet designer for rendering XML and relational data in multiple formats. In this video, you'll learn more about how StylevVision interfaces with CSS and JavaScript.

How To: Design for the WordPress blogging CMS

WordPress is a hugely popular blogging content management system, or CMS. This video offers a walkthrough of designing for WordPress. In part one, you will be downloading and installing WordPress. Then you will install the "Starkers" theme by Elliot Jay Stocks to start with a completely fresh slate for our new design. No sense starting with the default theme; it's more trouble than it's worth! In part two, you will go over the theory behind designing for WordPress and how it's much like "work...

How To: Create rounded corners for boxes on a CSS website

Here are five different techniques you can use to create rounded corners for boxes on a website. There are always different ways to do things with CSS and rounded corners is a great example of that. Each of these five techniques has advantages and disadvantages. Knowing all of them so you can choose the perfect one in each situation is the kind of thing that makes you the best CSS ninja you can be! So if you want to make cool Internet websites and be the best designer around, why not start he...