Home » Posts Tagged "HTML"

HTML & CSS Cheat Sheet

Download the HTML & CSS Cheat Sheet for FREE! The Digital Workshop Center provides free cheat sheets on many popular software applications. If you are looking for a quick HTML and CSS reference sheet, then we’ve got just the thing for you! The HTML5 & CSS3 cheat sheet includes basic concepts and common elements to help you be more efficient and confident while working in code. Several of these concepts and elements are included in our hands-on Web Design with HTML and CSS training class, so if you need more HTML & CSS help please contact the Digital Workshop office.  Stay tuned for more cheat sheets coming soon! Click the link to download the cheat sheet in PDF format: HTML & CSS Cheat Sheet...

read more

Slice Tool to Blend Photoshop and Web Projects

A project in Adobe Photoshop can be finished in print or on the web. For each, there are many considerations to make including a color model, file size, and the overall layout design. However, the Slice tool in Photoshop empowers you to transition a Photoshop project to the web easily. The Slice tool allows you to create unique sections (or Slices) of your project. The actual Slice can be created by using the Slice tool and drawing it manually, or you can use existing guides and create your slices from the guide intersections by clicking the ‘Slices from Guides’ option in the toolbar. After a Slice is created with the Slice tool, you can use the Slice Select tool to control and manipulate it. Each Slice has options and can be named and controlled independently as needed. In addition, you can set a background type, exact dimensions, URL, Target, Message Text, and Alt tag property in the Slice options dialog box. When you have finished fine-tuning all of your Slice options and are ready to export to the web, you are ready to use the ‘Save for Web and Devices’ command. This feature of Photoshop allows you to prepare every Slice individually or all of them as a whole for the best optimized web file type and performance. Lastly, when you click ‘Save’ from this screen, the next dialog box will give you two additional options than normal: ‘Settings’ and ‘Slices’. Settings will allow you to choose between different output styles for your Photoshop project including an HTML table or HTML/CSS ‘div’ tags. You should always use the div tag option if this project is an entire layout for a web page. The ‘Slices’ option of the ‘Save’ dialog box will allow you to save all slices or individually selected slices. This gives you the flexibility to update one section of your design and re-output it, while not having to completely start from scratch. In the end, Photoshop will save each Slice as a separate image file and generate the necessary HTML/CSS to get your web page started. For simple web pages, this may be all you need. However, more complex pages may require additional work to complete the web design. I always try to start a web design in Photoshop as a wireframe and then convert it to a web page. The Slice tool allows me the freedom to do this with no additional effort or web programming necessary. The next time you are using Photoshop, try out the slice tool for yourself and see if it helps you as well. [Originally posted in the Coloradoan on...

read more

Web Development: No Better Substitute for Learning HTML

[Originally published in The Coloradoan on 8/31/12] When prospective students approach me about enrolling in some of my beginner web design classes, they often ask if they should learn HTML or purchase Adobe Dreamweaver to edit their website. Everyone’s needs are different, but I always give the same answer. HTML, or Hyper-Text Markup Language, is the fundamental language of the Internet, while Adobe Dreamweaver is a tool to help you write that language better. The analogy I typically use is that of a learning any foreign language. Let’s pretend for a moment that you’re interested in learning Russian. You could study books, talk to other people who speak the language, and purchase an electronic translator. When you use the translator, it will understand what you are trying to say in Russian the majority of the time. However, there will be times where the language just won’t be interpreted properly. You may ask it to teach you how to ask “where is the nearest Internet cafe?” When you say it to a native Russian speaker, you may get some strange looks because the phrase you’re given doesn’t exist. Now, use the same analogy for learning the language of the Internet. Today, HTML is a vast, evolving language with many twists and turns, depending on what you want to do with it. The large number of scripting languages that have branched off of HTML could be thought of as different dialects. When you use Adobe Dreamweaver or a similar HTML editor, it’s similar to using an electronic translator. Dreamweaver will get it right most of the time. But, when it translates wrong, you need to understand how to actually read the code and speak the language to fix it properly. The program can only interpret what you tell it to do, and, therefore, it will inevitably translate something wrong. Dreamweaver offers a design view, which is a what-you-see–is-what-you-get editor. This is fantastic for novice developers who need to make simple changes, like editing plain text or adding an image. However, when the page won’t format correctly and additional code is needed, there’s a code view that becomes a necessity. Each view has its advantages, but any coder would tell you that staying in code view becomes the only way to go to over time. Why? Because the program can’t translate what you want to say with your code properly. The top thing to remember when jumping into any web design is to not get discouraged, and be sure to add as many tools to your tool belt as possible. Only then will you know if Dreamweaver is right for you. Stu Crair is the owner and lead trainer at The Digital Workshop Center, providing digital arts and computer training instruction in Fort Collins. Reach him at (970) 980-8091 or...

read more

CSS3 Features Add New Level of Excitement to Web Work

[Originally published in The Coloradoan on 3/9/12] The ability to create interesting web pages today continues to advance as the specifications of the Internet languages we use evolves as well. The foundational language of all web pages is HTML, or Hyper-Text Markup Language, and CSS, or Cascading style sheets. As I wrote last week on the latest in HTML, it seems appropriate to mention why the new features of CSS3 are so exciting. CSS3 is the latest specification of the CSS language from the Worldwide Web Consortium, or W3C. This new version of CSS allows for many design elements to be coded through style sheets as never done before. For example, in the past, the only way to create rounded corners of any division of your site was to use some image techniques, and trick users into letting them think the corners of a box were rounded. Now, with CSS3, there is a property available to handle this popular design element. No additional images are needed, which improves the site’s download speeds and makes for an easier page development. In addition to rounded corners, there are other popular design features available in CSS3 such as shadows, gradients, opacity and much more. What is an even better advantage of the use of these new properties is that CSS3 allows certain design elements, that would have had to have been created as an image in the past to display properly, to now be displayable as plain text. And plain text is searchable for search engines such as Google or Bing, which means your page will have a higher ranking. This is a huge bonus for any person or business interested in improving their Search Engine Optimization. The only disadvantage to these new CSS3 rules is that some older browsers, most notably Internet Explorer, will not understand the new rules and, therefore, cannot display them as intended. But, as long as you use techniques for graceful degradation, which means allowing the CSS code to degrade to older properties while still looking good in a browser, then your page will not suffer. For examples of how to use these new CSS properties, you can visit www.css3please.com to test the properties in real time. As with HTML5, the new features of CSS3 have added a whole new level of excitement to the web development world. I am always amazed at what people can do with CSS coding on the web, and this new set of tools will allow all web designers to show off their creative talents that much more. Stu Crair is the owner and lead trainer at The Digital Workshop Center, providing digital arts and computer training instruction in Fort Collins. Call him at (970) 980-8091 or emai...

read more

The Great Debate: HTML5 vs. Flash

[Originally published in The Coloradoan on 3/2/12] For more than 15 years, Adobe’s Flash has been at the forefront of bringing rich, interactive multimedia content to web browsers and standalone applications. About 98 percent of the world’s computers have the Flash plug-in to be able to view Flash content with ease. However, the recent HTML5 specification from the World Wide Web Consortium, or W3C, has begun to change the game for multimedia content developers. With HTML5, the W3C has replaced the need for Flash altogether, creating a controversy over whether Flash will be as prevalent in the near future or not. As a sign of things to come, Adobe, the creators of Flash, have even begun rolling out a new piece of software called Edge, intended to combine the powers of HTML5, Cascading Style Sheets, or CSS, the Javascript programming language, and Canvas tags. In an interview in PC Week, Arno Gourdol, director of engineering for Adobe Flash, said, “We think our customers are going to be able to take advantage of Web standards in some cases where before the only option would have been to use Flash.” With the new specifications of HTML5, the W3C has provided a way for developers to be able to create the same rich multimedia content as in the past, but without the need for expensive software, plug-ins or development costs to build Flash content. So, does this mean the end of Flash as we know it? Not exactly. First, the fact that HTML5 is brand new means that older browsers will not be able to understand these new specifications. Therefore, it will be quite some time before the general population is on board with HTML5 compliant browsers and able to view the content with no issues. Another factor to consider is that the creators of Flash are not going to stop enhancing its functionality. According to Gourdol, “generally speaking, a single company like Adobe can develop and implement features on a platform more quickly than a standards body.” “We’re going to continue to push Flash forward and bring new innovations to it,” Gourdol promises. Lastly, the use of HTML5 is still being adopted by many web designers, while Flash continues to dominate a large portion of the multi-media content we all see on the web. So, until the development community catches up to speed on using HTML5, we should not expect to see Flash going anywhere anytime soon. In the coming years, the debate about HTML5 versus Flash will certainly continue to heat up. However, until HTML5 becomes as much of a household name as Flash, and as long as Adobe continues to move forward with new innovations for Flash content, the Flash development community should not yet be concerned. Stu Crair is owner of The Digital Workshop Center. Reach him at (970)...

read more