HTML 5 Introduction Most of the web standards curriculum is based on the last stable version of HTML — HTML 4.01. The HTML 4.01 spec was completed in 1999, over 10 years ago as of the time of this writing! But unless you’ve been hiding under a rock for the [...]
Currently Browsing
build
Image Optimization
Image Optimization GIF format A compressed file format for indexed images. It uses run-length encoding, which compresses a series of pixels of the same value (in the horizontal direction) as a single entry (e.g. 30 pixels of red), which saves space over specifying each pixel. This means that large blocks of [...]
HTML Basic Tags
HTML – Basic Tags For the HTML tags below, please be sure you understand all tags outlined in the notes below. Remember, if you have any questions on how to use the tag, please take a look at the example located here: HTML Example directory Also, note the name of each [...]
HTML Basics
HTML Basics Markup, the basis of every page HTML is a markup languages composed of elements, which contain attributes (some optional and some mandatory.) These elements are used to markup the various different types of content in documents, specifying what each bit of content is supposed to be rendered as [...]
Why Learn HTML?
Why learn HTML? Given that tools such as Dreamweaver exist, and allow you to create web pages without knowing HTML, you might ask “why learn HTML?” There are several reasons: Dreamweaver does not always do what you want. To get the page to look right, you often need to hand [...]
Creating a Contact Form
Creating a Contact Form Creating a simple contact form can be easy once you know the steps involved in creating one. Below is a how-to on creating the HTML/CSS for a contact form. Making the form active will require a script and is beyond the scope of the tutorial below. [...]
Making WordPress more like a CMS
Making WordPress more like a CMS (and less like a blog) . Install WordPress on your server Add a theme Set permalinks Use more pages and less posts. (Turn off comments) Add plugins Edit the CSS Edit the templates (php) Add social media icons Use widgets Customization 1. Installation on [...]
Code for 1, 2, and 3 CSS Column Layouts
Strategize your plan for the layout Below is the HTML and CSS “starter” code for each of the major column layouts. Normally your design will fall into one of these 3 main structures: 1, 2, or 3 column layout. From there your design may get more complex then the illustrations [...]
CSS Navigation Menu: Drop Down
CSS Navigation Menu: Drop Down Creating a Navigation Menu with drop downs is not hard once you understand the CSS. In this intermediate tutorial we’ll go through the necessary code; both HTML and CSS, you’ll need to understand to build this navigational menu and others like it. We’ll also show [...]
CSS Navigation Menu: Basic
CSS Navigation Menu: Basic Creating a Navigation Menu using CSS is not hard when you know the basic steps involved. In this basic tutorial we’ll go through the necessary code; both HTML and CSS, you’ll need to understand to build this navigational menu and others like it. We’ll also show [...]
VIDEO: Column CSS Layout: EHD (Parts 1- 2)
Column CSS Layout: EHD (Part 1-2) Part 1 covers organizing your files, creating an HTML and CSS file and linking the .css file, and adding content to a column web page including navigation, images, and text. Part 2 covers adding CSS (presentation) to a column web page including styling navigation, [...]
VIDEO: Two Column CSS Layout (Parts 1- 2)
Two Column CSS Layout (Part 1-2) Part 1 covers organizing your files, creating an HTML and CSS file and linking the .css file, and adding content to a two column web page including navigation, images, and text. Part 2 covers adding CSS (presentation) to a two column web page including [...]
VIDEO: One Column CSS Layout (Parts 1- 3)
One Column CSS Layout (Part 1-3) Part 1 covers organizing your files, creating an HTML and CSS file and linking the .css file in preparation for building a one column web page. Part 2 covers adding content to a one column web page including navigation, images and text. Part 3 covers [...]
VIDEO: The Basics of CSS
The Basics of CSS This video tutorial covers the basics of CSS, what is CSS? Basic CSS Properties, Anatomy of CSS, and demonstrates how to link a CSS file in a basic HTML page using a simple text editor like TextEdit.
VIDEO: The Basics of HTML
The Basics of HTML This video tutorial covers the basics of HTML, what is HTML? Basic Tags, Anatomy of HTML tag, and demonstrates how to code a basic HTML page using a simple text editor like TextEdit.
VIDEO: File Organization (Website Directory Structure)
File Organization (Website Directory Structure) This video tutorial covers the basics of organizing your website files. Organize first before you start building your website.
Technical Production
Once the client has “signed off” on the design for the website, you can now get started on building the website in HTML/CSS. Notice that testing the site is necessary throughout the entire process of the technical production. Study the design comps (created in Photoshop), and take a few minutes [...]
File Organization
Also know as Website Directory Structure. When building a website, it’s essential to create a directory (folder) structure correctly at the very start of your project. Referring to the example on the left, please note the following: Create a “root” (master) directory named final_project and inside it, create two folders. [...]
Web File Naming Conventions
When creating your website, you must be very methodical when naming your files. First, never use spaces, uppercase letters, or any special characters in your file names. While your site may seem to work okay using an HTML editor (i.e. Dreamweaver) on your local computer, when you upload the website [...]
Search Engine Optimization
Basic Strategies – Five Basic Steps 1) Add Meta Tags 2) Add Home page title 3) Have “good” Home page content 4) Initiate link agreements with other websites 5) Submit site to search engines and directory services Step 1: Keywords Meta Tag Example from Starbucks Web site <meta name=”keywords” content=”Starbucks, [...]