Quackit Tutorials

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="free tutorials, web, online, web design tutorials, tips, css, Cascading Style Sheets, ColdFusion, ASP, Active Server Pages, XML, XHTML, HTML, Javascript, web servers, database, sql server, sql, ms access."> <meta name="Description" content="Free web development/design tutorials. Includes CSS, Javascript, AJAX, ColdFusion, and HTML tutorials, code examples, layout help and references. Complete list of HTML tags and CSS properties. Also contains resources and background overview of XML, ASP, XHTML, SQL, SQL Server, databases and more."> <link rel="canonical" href="https://www.quackit.com/"> <title>Quackit Tutorials</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="shortcut icon" href="/pix/favicon96.png"> <link rel="apple-touch-icon" href="/pix/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="/common/css/master.45.min.css" rel="stylesheet"> <script async src="https://cdn.fuseplatform.net/publift/tags/2/3499/fuse.js"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3H025ZKLN"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q3H025ZKLN'); </script> </head> <body> <header class="site-header"> <div class="site-header-base"> <div class="site-logo"> <a title="Quackit Homepage" target="_top" href="/"><img src="/pix/quackit_logo_watermark.png" width="87" height="33" alt="Quackit Logo"></a> </div> <button id="site-nav-toggler" class="site-nav-toggler" aria-expanded="false" aria-controls="site-nav"> <span class="sr-only">Toggle navigation</span> ☰ </button> </div> <nav id="site-nav" class="site-nav"> <div class="site-links"> <ul> <li><a href="/"><i class="fa fa-home"></i> <span class="sr-only">Home</span></a></li> <li><a href="/html/">HTML</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/scripting/">Scripting</a></li> <li><a href="/database/">Database</a></li> </ul> </div> <div class="site-search-top"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:98x0fk-bbgi"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="20" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> </div> </nav> </header> <div class="main"> <article class="content"> <div class="cards"> <article class="card"> <a class="wrapper" href="/create-a-website/"> <div class="card-title"> <h2>Create a Website <i class="fa fa-long-arrow-right"></i></h2> </div> <img src="/pix/stock/create-a-website_500x200_1.png" alt="Create a website graphic"> <div class="card-body"> <p>Here I explain the basic concepts of creating a website, from hosting, domain names, to coding. </p> <p>I outline two approaches to creating a website — using a website builder, and coding it yourself.</p> <p>I also show you how to get a free domain name with your website builder or hosting account.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/create-a-blog/"> <div class="card-title"> <h2>Create a Blog <i class="fa fa-long-arrow-right"></i></h2> </div> <img src="/pix/stock/wordpress_logo_500x200.png" alt="WordPress logo"> <div class="card-body"> <p>Here I guide you through the steps in creating your own blog using managed WordPress.</p> <p>This includes a free domain name for your blog.</p> <p>Managed WordPress is a hosting account where your blog is already installed and configured right from the start. It's the easiest way to create a blog and start blogging!</p> </div> </a> </article> </div> <div class="ad">  <div data-fuse="23059883653"></div> </div> <h2><a href="/html/">HTML <i class="fa fa-long-arrow-right"></i></a></h2> <div class="cards"> <article class="card"> <a class="wrapper" href="/html/tutorial/"> <img src="/pix/stock/html_tutorial_500x200_2.gif" alt="HTML tutorial"> <div class="card-body"> <h2>HTML Tutorial</h2> <p>Walks through the basics, such as creating your first web page. Then covers topics including tables, adding color, images, forms, image maps, and more.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/html/templates/"> <img src="/pix/stock/html_templates_500x200_3.png" alt="HTML templates"> <div class="card-body"> <h2>HTML Templates</h2> <p>Free, responsive templates that automatically adjust their layout according to the screen size.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/html/codes/"> <img src="/pix/stock/html_codes_500x200_1.gif" alt="HTML tutorial"> <div class="card-body"> <h2>HTML Codes</h2> <p>Extensive list of copy/paste code examples. Copy and paste straight into your website, blog, or newsletter.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/html/tags/"> <img src="/pix/stock/html_tags_500x200_1.gif" alt="HTML tags"> <div class="card-body"> <h2>HTML Tags</h2> <p>Full list of all HTML elements.</p> <p>This is an alphabetical list of HTML elements, linking to a full page of details for each element.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/html/online-html-editor/"> <img src="/pix/stock/editor_500x200_1.png" alt="HTML editor"> <div class="card-body"> <h2>HTML Editor</h2> <p>Use this online HTML editor to create HTML snippets or a whole web page.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/bootstrap/tutorial/"> <img src="/pix/stock/bootstrap_tutorial_500x200_1.png" alt="Bootstrap tutorial"> <div class="card-body"> <h2>Bootstrap Tutorial</h2> <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p> </div> </a> </article> </div> <h2><a href="/css/">CSS <i class="fa fa-long-arrow-right"></i></a></h2> <div class="cards"> <article class="card"> <a class="wrapper" href="/css/examples/"> <img src="/pix/stock/html_examples.png" alt="CSS examples"> <div class="card-body"> <h2>CSS Examples</h2> <p>Loads of copy & paste code examples. Includes backgrounds, borders, colors, gradients, CSS grid, flexbox, animations, and more.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/css/reference/"> <img src="/pix/stock/reference_2.png" alt="CSS reference"> <div class="card-body"> <h2>CSS Reference</h2> <p>CSS properties, functions, @-rules, data types, color values, and more — all on one page. Filter by keyword.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/css/grid/tutorial/"> <img src="/pix/stock/css_grid_placement_basic_500x200_1.png" alt="Grid tutorial"> <div class="card-body"> <h2>Grid Layout Tutorial</h2> <p>CSS grid layout will soon be an essential skill for any front-end developer's toolkit. Check it out and see all the fuss is about.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/css/flexbox/tutorial/"> <img src="/pix/stock/flexbox_example_1_500x200.gif" alt="Flexbox tutorial"> <div class="card-body"> <h2>Flexbox Tutorial</h2> <p>Learn how to create flexible layouts and widgets without having to resort to floats and clearfixes! </p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/css/tutorial/"> <img src="/pix/stock/css_tutorial_500x200_1.gif" alt="CSS tutorial"> <div class="card-body"> <h2>CSS Tutorial</h2> <p>CSS is the standard way to style web pages. It allows you to set colors, fonts, widths, heights, margins, padding, and much more.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/css/color/"> <img src="/pix/stock/css_colors_2.png" alt="CSS colors"> <div class="card-body"> <h2>CSS Color</h2> <p>Loads of CSS color resources. Color pickers, color charts, converters, generators. Full reference for color properties and color values.</p> </div> </a> </article> </div> <div class="ad">  <div data-fuse="23059883659"></div> </div> <h2><a href="/scripting/">Scripting <i class="fa fa-long-arrow-right"></i></a></h2> <div class="cards"> <article class="card"> <a class="wrapper" href="/javascript/tutorial/"> <img src="/pix/stock/javascript_tutorial_500x200_3.gif" alt="JavaScript tutorial"> <div class="card-body"> <h2>JavaScript Tutorial</h2> <p>JavaScript is the most widely used scripting language on the web. Learn the basics with this beginner's tutorial. </p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/python/tutorial/"> <img src="/pix/stock/python_logo_500x200.png" alt="Python logo"> <div class="card-body"> <h2>Python Tutorial</h2> <p>Python is one of the easiest programming languages for beginners to learn. It's also used by some of the largest companies on the planet. </p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/jquery/tutorial/"> <img src="/pix/stock/jquery_logo_bg_dark_500x200.gif" alt="jQuery tutorial"> <div class="card-body"> <h2>jQuery Tutorial</h2> <p>jQuery is a popular JavaScript library that makes it easy to add JavaScript functionality to your website. This tutorial covers the basics of jQuery.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/json/tutorial/"> <img src="/pix/stock/json_tutorial_500x200.gif" alt="JSON tutorial"> <div class="card-body"> <h2>JSON Tutorial</h2> <p>JSON (JavaScript Object Notation) is a lightweight data-interchange format. JSON is used for exchanging data between applications and different environments.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/coldfusion/tutorial/"> <img src="/pix/stock/coldfusion_tutorial_500x200_1.gif" alt="ColdFusion tutorial"> <div class="card-body"> <h2>ColdFusion Tutorial</h2> <p>ColdFusion is a server-side programming environment for building web applications. This tutorial covers the basics, as well as more advanced topics like sending mail, debugging, etc</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/php/tutorial/"> <img src="/pix/stock/php_tutorial.gif" alt="PHP tutorial"> <div class="card-body"> <h2>PHP Tutorial</h2> <p>PHP is another server-side language that allows you to provide extra functionality on your website. This tutorial is aimed at beginners with no programming experience.</p> </div> </a> </article> </div> <h2><a href="/database/">Database <i class="fa fa-long-arrow-right"></i></a></h2> <div class="cards"> <article class="card"> <a class="wrapper" href="/database/tutorial/"> <img src="/pix/stock/database_tutorial_500x200_1.png" alt="Database tutorial"> <div class="card-body"> <h2>Database Tutorial</h2> <p>This database tutorial is aimed at beginners. It explains basic database concepts.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/microsoft_access/tutorial/"> <img src="/pix/stock/access_tutorial_500x200_1.png" alt="Access tutorial"> <div class="card-body"> <h2>Access Tutorial</h2> <p>Microsoft Access tutorial for beginners. Step-by-step, plenty of screenshots. Create a database with forms, reports, and more.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/sql/tutorial/"> <img src="/pix/stock/sql_tutorial_500x200_2.png" alt="SQL tutorial"> <div class="card-body"> <h2>SQL Tutorial</h2> <p>SQL is the standard language for querying databases. Learn the basics here.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/mysql/tutorial/"> <img src="/pix/stock/mysql_tutorial_500x200_1.png" alt="MySQL tutorial"> <div class="card-body"> <h2>MySQL Tutorial</h2> <p>Learn how to use the world's most popular open source database management system.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/sql_server/tutorial/"> <img src="/pix/stock/sql_server_tutorial_500x200_1.png" alt="SQL Server tutorial"> <div class="card-body"> <h2>SQL Server Tutorial</h2> <p>Learn SQL Server, starting with the basics. Create a database, tables, relationship, and more.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/neo4j/tutorial/"> <img src="/pix/stock/neo4j_tutorial.gif" alt="Neo4j tutorial"> <div class="card-body"> <h2>Neo4j Tutorial</h2> <p>Neo4j is a graph database management system. It is ideal for storing relational/connected data.</p> </div> </a> </article> </div> <div class="ad">  <div data-fuse="23059511727"></div> </div> <h2><a href="/web_hosting/">Web Hosting <i class="fa fa-long-arrow-right"></i></a></h2> <div class="cards"> <article class="card"> <a class="wrapper" href="/web_hosting/tutorial/"> <img src="/pix/stock/web_hosting_tutorial_500x200_1.gif" alt="Web hosting tutorial"> <div class="card-body"> <h2>Web Hosting Tutorial</h2> <p>Explains the basic concepts of web hosting, domain names, FTP, how to choose a hosting provider, and more.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/domain-names/"> <img src="/pix/stock/domain_names_tutorial_500x200.gif" alt="Domain names graphic"> <div class="card-body"> <h2>Domain Names</h2> <p>Explains domain name basics, such as domain extensions, plus how to register or transfer a domain name.</p> </div> </a> </article> <article class="card"> <a class="wrapper" href="/create-a-website/"> <img src="/pix/stock/create-a-website_500x200_2.png" alt="Create a website graphic"> <div class="card-body"> <h2>Create a Website</h2> <p>Explains the basic concepts behind creating a website. From hosting, domain names, to building it.</p> </div> </a> </article> </div> </article> <div class="sidebar"> <nav> <ul> <li> <h3 class="heading-only"><i class="fa fa-thumbs-up"></i> Popular</h3> <ul> <li><a href="/css/css_color_codes.cfm">CSS Color Codes</a></li> <li><a href="/html/online-html-editor/">Online Editor</a></li> <li><a href="/html/codes/">HTML Codes</a></li> <li><a href="/microsoft_access/tutorial/">Microsoft Access Tutorial</a></li> <li><a href="/database/tutorial/">Database Tutorial</a></li> <li><a href="/sql_server/tutorial/">SQL Server Tutorial</a></li> <li><a href="/html/codes/html_marquee_code.cfm">Marquee Code</a></li> <li><a href="/html/html_table_generator.cfm">Table Generator</a></li> <li><a href="/html/templates/">HTML Templates</a></li> <li><a href="/html/tags/">HTML Tags</a></li> <li><a href="/css/properties/">CSS Properties</a></li> </ul> </li> <li> <h3><a href="/html/"><i class="fa fa-html5"></i> HTML</a></h3> <ul> <li><a href="/html/tutorial/">HTML Tutorial</a></li> <li><a href="/html/tags/">HTML Tags</a></li> <li><a href="/html/codes/">HTML Codes</a></li> <li><a href="/html/html_editors/">HTML Editors</a></li> <li><a href="/html/templates/">HTML Templates</a></li> <li><a href="/character_sets/">Character Set Reference</a></li> <li><a href="/bootstrap/tutorial/">Bootstrap Tutorial</a></li> </ul> </li> <li> <h3><a href="/css/"><i class="fa fa-photo"></i> CSS & Design</a></h3> <ul> <li><a href="/css/examples/">CSS Examples</a></li> <li><a href="/css/reference/">CSS Reference</a></li> <li><a href="/css/properties/">CSS Properties</a></li> <li><a href="/css/functions/">CSS Functions</a></li> <li><a href="/css/data_types/" title="">CSS Data Types</a></li> <li><a href="/css/selectors/" title="All CSS selectors.">CSS Selectors</a></li> <li><a href="/css/css3/animations/animatable_properties/">Animatable Properties</a></li> <li><a href="/css/color/">CSS Color</a></li> <li><a href="/css/css_color_codes.cfm">CSS Color Codes</a></li> <li><a href="/css/tutorial/">CSS Tutorial</a></li> <li><a href="/css/flexbox/tutorial/">Flexbox Tutorial</a></li> <li><a href="/css/grid/tutorial/">Grid Tutorial</a></li> <li><a href="/sass/tutorial/">Sass Tutorial</a></li> <li><a href="/web_graphics/tutorial/">Web Graphics Tutorial</a></li> </ul> </li> <li> <h3><a href="/scripting/"><i class="fa fa-cog"></i> Scripting</a></h3> <ul> <li><a href="/javascript/tutorial/">JavaScript Tutorial</a></li> <li><a href="/javascript/examples/">JavaScript Examples</a></li> <li><a href="/jquery/tutorial/" title="Popular JavaScript library.">jQuery Tutorial</a></li> <li><a href="/jquery/examples/" title="Popular JavaScript library.">jQuery Examples</a></li> <li><a href="/json/tutorial/" title="Data format for exchanging data between applications and different environments.">JSON Tutorial</a></li> <li><a href="/python/tutorial/" title="">Python Tutorial</a></li> <li><a href="/coldfusion/tutorial/">ColdFusion Tutorial</a></li> <li><a href="/php/tutorial/">PHP Tutorial</a></li> <li><a href="/vbscript/tutorial/">VBScript Tutorial</a></li> </ul> </li> <li> <h3><a href="/database/"><i class="fa fa-database"></i> Database</a></h3> <ul> <li><a href="/database/tutorial/">Database Tutorial</a></li> <li><a href="/microsoft_access/tutorial/">Microsoft Access Tutorial</a></li> <li><a href="/mongodb/tutorial/">MongoDB Tutorial</a></li> <li><a href="/mysql/tutorial/">MySQL Tutorial</a></li> <li><a href="/neo4j/tutorial/" title="Graph database management system.">Neo4j Tutorial</a></li> <li><a href="/sql/tutorial/">SQL Tutorial</a></li> <li><a href="/sqlite/tutorial/">SQLite Tutorial</a></li> <li><a href="/sql_server/tutorial/">SQL Server Tutorial</a></li> </ul> </li> <li> <h3><a href="/web_hosting/"><i class="fa fa-cloud"></i> Web Hosting</a></h3> <ul> <li><a href="/create-a-website/">Create a Website</a></li> <li><a href="/web_hosting/tutorial/">Web Hosting Tutorial</a></li> <li><a href="/web_hosting/">Find a Web Host</a></li> <li><a href="/domain-names/">Domain Names</a></li> <li><a href="/web_servers/tutorial/">Web Server Tutorial</a></li> </ul> </li> <li> <h3><a href="/xml/tutorial/"><i class="fa fa-file-code-o"></i> XML</a></h3> <ul> <li><a href="/xml/tutorial/">XML Tutorial</a></li> <li><a href="/xml/tutorial/dtd_introduction.cfm">DTD Tutorial</a></li> <li><a href="/xml/tutorial/xslt_introduction.cfm">XSLT Tutorial</a></li> <li><a href="/xml/tutorial/xpath_introduction.cfm">XPath Tutorial</a></li> </ul> </li> </ul> </nav> <div class="ad ad-left">  <div data-fuse="23059883656"></div> </div> </div> <div class="ads"> <div class="ad ad-right">  <div data-fuse="23059511724"></div> </div> </div> </div> <div class="searchbox-bottom"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:npmuvy-i8kk"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="30" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> <script src="//cse.google.com/cse/brand?form=cse-search-box-bottom&lang=en"></script> </div> <footer> <p class="about"><a href="/"><i class="fa fa-home"></i> Home</a> | <a href="/about.cfm" rel="nofollow">About</a> | <a href="/contact.cfm" rel="nofollow">Contact</a> | <a href="/terms_of_use.cfm" rel="nofollow">Terms of Use</a> | <a href="/privacy_policy.cfm" rel="nofollow">Privacy Policy</a></p> <p>© Copyright 2000 - 2024 Quackit.com  </p> </footer> <script src="/common/js/spectrum/spectrum.js"></script> <script src="/common/js/lightbox2-master/dist/js/lightbox.min.js" charset="utf-8"></script> <script> $(document).ready(function(){ $( "#site-nav-toggler" ).click(function() { $( "#site-nav" ).toggle( "slow" ); }); }); </script> <script> $(function(){var a=window.location.href;$(".sidebar nav a").each(function(){a==this.href&&$(this).closest("li").addClass("selected")})}); </script> </body> </html>

CINXE.COM

Quackit Tutorials