Hot HTML / XHTML / CSS How-Tos

How To: Add a background to a CSS image container div

See how to add a background image to an CSS image container div with this handy hand-coder's guide. 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 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: 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: 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: Program the light sensor on a Lego Mindstorms robot

The light sensor on a Lego Mindstorms NXT robot can be used to help the robot navigate obstacles or follow light sources. Learn how to program light sensors and the calibration program in the Lego Mindstorms NXT robotics system using movement blocks within the NXT programming environment. Program the light sensor on a Lego Mindstorms robot.

How To: Hack websites using cross-site scripting (XSS)

In this episode of Full Disclosure we are explaining the website attack known as Cross-Site Scripting (XSS). Cross-Site Scripting is a type of security vulnerability that affects web applications that do not sanitize user input properly. This kind of vulnerability allows an "attacker" to inject HTML or client side script like JavaScript into the website. Cross-Site Scripting is most commonly used to steal cookies. Cookies are used for authenticating, tracking, and maintaining specific informa...

How To: Make a hyperlink (clickable link or image) in HTML

Have you ever gone to websites and seen an entire URL address you have to copy and paste into your browser window? Is the thought of having such an inconvenience on your page making you wish there was a better way? Today is your lucky day because success is going to teach you step by step how to make a HTML hyperlink that user of your website can use to navigate to different portions of your website without the inconvenience of copying and pasting long dragged out links.

How To: Use HTML and open & closed brackets

To open the body of an HTML first open the HTML document, to do so write an open bracket, then html, the close the bracket. Next press enter. Type another open bracket, then type the word body, then type a closed bracket. Next press enter again. Now you can type an open bracket, then a backwards slash. Next type the word body again. Now type a closed bracket. Press enter once again. Now type another open bracket and then type html. Then type a closed bracket. Now you have just opened and clos...

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: 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: 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: 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: 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: Customize a CSS template for your website

Want to create a web site using the latest web standards but don't know where to begin? This tutorial outlines the usage of a CSS website template file designed to help those who are not familiar with programming. This is a great resource that will not only kick-start your first web design project, but it will also help you to learn how to manage your web site layout, fonts, and colors using CSS through simple experimentation of changing values in your style sheet.

How To: Use basic HTML with Notepad

This is an introduction to HTML using Notepad. While some prefer to use a WYSIWYG editor, HTML can be a great benefit if you want to modify your MySpace profile, embed video clips on your blog, etc. The second part of this video series expands on using HTML, introduces a WYSIWIG (What You See Is What You Get) editor into the mix, and gives a basic introduction to Microsoft Front Page.

How To: Use the Lego Mindstorms NXT Editor

The Lego Mindstorms system may seem like a toy at first, but it is actually a very powerful robotics system used by universities, schools, hobbiests, and kids alike. Learn how to use the Lego Mindstorms NXT editing and programming software to program movements for your robot. Use the Lego Mindstorms NXT Editor.

Prev Page