Truly Beautiful HTML Cheat Sheet

Chris Coyier of CSS-Tricks is one of the brilliant minds ripping and tearing web design apart and putting it back together so we understand it even better than before.

In “What Beautiful HTML Code Looks Like,” Chris shares a beautiful cheat sheet for what beautiful HTML really does look like.

Chris Coyier - CSS Tricks Cheet Sheet on creating beautiful HTML

It includes HTML5, JavaScript references, and everything you need to know to make beautiful music with your web page code.

Lorem Ipsum: Resources for Dummy Content

The traditional Lorem Ipsum site front page.The granddaddy of all Lorem Ipsum services is Lorem Ipsum – Lipsum generator. Lorem ipsum has been used for hundreds of years to generate dummy content for prototypes, wireframes, and galleys. Created originally for print material, it has evolved online beyond the original Latin to a variety of forms, formats, and “languages” for web use.

Selection of Lorem Ipsum types can be tricky. If you are working on a project for fun, you can use anything that tickles your fancy. If you are building a wireframe or prototype for a client, while Lorem Ipsum might be appropriate and professional, choosing dummy content that matches the intent and purpose of the site might be wiser, such as using the Cupcake Ipsum for a food site, a Lorem Ipsum alternative that features names of deserts with Latin, Pasta Ipsum – for all your macaroni product lorem ipsum needs for pasta lovers, or Veggie Ipsum – the vegetarian lorem ipsum generator for an organic restaurant or farmers market seller.

Mustard salsify welsh onion cucumber earthnut pea okra brussels sprout. Yarrow green bean gumbo garlic welsh onion wakame pumpkin wattle seed yarrow sierra leone bologi taro gram. Catsear amaranth celery wattle seed sorrel shallot pumpkin.

Onion wattle seed quandong parsley fava bean rutabaga courgette cucumber. Celery potato melon bok choy epazote zucchini artichoke fava bean beetroot groundnut desert raisin onion black-eyed pea jícama coriander celery. Lotus root spring onion endive arugula tomatillo sorrel pea dulse chickweed turnip gourd plantain cauliflower tatsoi bush tomato komatsuna rutabaga. Water chestnut endive pea sprouts gram lentil spinach chicory lettuce soybean melon turnip greens celery parsnip artichoke okra swiss chard eggplant aubergine. Water spinach garlic tomatillo tigernut catsear peanut amaranth melon garlic.

Consider Bacon Ipsum for carnivores or Cheese Ipsum for cheese lovers.

Cheese slices lancashire jarlsberg. Monterey jack fromage say cheese pepper jack fondue cheese strings blue castello cheese triangles. Cheesecake squirty cheese cheesecake fromage frais mascarpone cheese and wine edam cheesecake. Stinking bishop stinking bishop.

Manchego rubber cheese cheesy grin. Fromage frais port-salut camembert de normandie port-salut port-salut manchego camembert de normandie cheese triangles. Bocconcini bocconcini cheesy feet cheese triangles macaroni cheese cheese slices paneer cut the cheese. Edam.

Cheese on toast who moved my cheese the big cheese. Queso cheddar pecorino fromage frais parmesan mozzarella brie lancashire. Jarlsberg smelly cheese lancashire cheddar stinking bishop roquefort port-salut cheesecake. Cheese and wine fondue blue castello smelly cheese emmental pecorino parmesan.

For serious sites and clients, the traditional Lorem Ipsum is a wise choice, but like the food versions of Lorem Ipsum, there are more content specific alternatives such as Corporate Ipsum for corporate speak, and Not Lorem Ipsum for industry based Lorem Ipsum generator. These create dummy content based upon the specific industry of the company such as app development, advertising, banking, cafes, restaurants, accounting, car sales, dentists, and more.

Check out this dentist version of Lorem Ipsum.

We are a friendly team of dentists, hygienists and receptionists who work together to ensure that you receive the best treatment that you require at a time that suits you. All of our dentists are accredited by The British Dental Association Good Practice Scheme, so you can rest assured that your smile really is in good hands.

We offer NHS dental treatment to children and have a very easy private payment scheme for our adult patients. We encourage everyone to visit the dentist regularly so that we can prevent any problems from occurring and the more you visit the less likely it is that we will have to do anything “scary!”

If you are working on a static HTML site, <html>ipsum is Lorem Ipsum set within HTML tags for paragraphs, lists, forms, tables, and more. Several alternative Lorem Ipsum generators offer the option for HTML including One-Click Lorem Ipsum Generator and Loripsum.net.

Web 2.0 Ipsumr is a popular alternative Lorem Ipsum generator using nonsensical Web 2.0 startup names in keeping with the naming of things like Google, Woopra, Orkut, Zynga, Squidoo, Meebo, etc. Hipster Ipsum is for the younger generation with lines such as:

Sriracha tofu ethical, cardigan wayfarers bushwick butcher kale chips scenester mcsweeney’s sustainable jean shorts Austin. Gastropub VHS farm-to-table, lomo whatever authentic thundercats street art. Iphone gentrify pour-over street art, small batch food truck keffiyeh DIY american apparel artisan high life cray twee fingerstache. Forage mumblecore readymade next level, single-origin coffee keytar swag cliche mcsweeney’s american apparel squid chambray. Occupy vice whatever forage, brooklyn next level direct trade messenger bag pitchfork.

Why stop with clever nonsense Web 2.0 names. Use Twipsum to generate your own Twitterverse originals in Lorem Ipsum fashion.

Continue reading

Cleaning Up Your HTML and CSS Code

Dirty Markup interface for cleaning html, css, and javascriptTeaching HTML Fundamentals at Clark College in Summer Quarter 2012 was a step back into history and a good learning lesson for me about teaching but also about HTML.

I’m sharing a lot of the tutorials and guides I created for the class here which you can find in various categories but specifically under the HTML tag.

I’d like to share with you one of the great tools I uncovered. It’s called Dirty Markup and describes itself as the “Tidy and Beautify your HTML, CSS, and JavaScript code tool.”
Continue reading

Tutorial: Tidy Your HTML and CSS Code

The following is a tutorial for the HTML Fundamentals Class for Clark College. The information pertains to all web design, development, and WordPress fundamentals in WordPress Theme and Plugin development.

There programs designed to "tidy" your HTML and CSS into a format that meets typical standards for code layout. These take hard-to-read markup (code) and clean them up into a consistent format.

These tidy programs will not fix your broken code, but they may identify errors to help you fix it yourself.

Example of Tidy HTML cleaner before and after

Tidy programs were originally created by Dave Raggett to help clean up the HTML code. HTML TIDY now supports HTML5 and HTML exported from Google Docs, Word, and other publishing programs.

There is now a community supporting TIDY and you can learn more on TIDY Sourceforge Project.

There are also CSS TIDY programs. These work the same as the HTML versions. They include: CSSTidy and CSS Formatter and Optimiser/Optimizer (Online).

TIDY is available for cleaning up online or offline, and is incorporated into many text editors and programming editors. it is available for a variety of operating systems and in different programming languages such as Java, Perl, and Python.

To use these, follow the instructions provided by the developer. Always save a backup of the original file, called "about.bak" or something similar, just in case.

For online versions, it is as simple as uploading the file to be cleaned or pasting the file contents into the form. Copy the cleaned code and paste it into a copy of the file name or create a new version of the file and rename it to the desired name.

Learn More About TIDY

HTML and CSS Resourses List

The following was compiled specifically for the Clark College HTML Fundamentals Class but can be useful to WordPress and web design in general.

The following are helpful HTML and CSS references and resources.

W3C Guidelines and Standards

Basic HTML and CSS Resources and References

Continue reading

HTML and CSS Basics Tutorial [Video]

The following video is for Clark College’s HTML Fundamentals Class and covers the basics of HTML and CSS you need to know for building and fixing web pages. It also applies to understanding the underlying architecture for WordPress Themes.

CTEC 122 HTML and CSS Basics You Need to Know from Lorelle VanFossen on Vimeo. Continue reading

Web Browser Tips for WordPress, HTML, and Web Design

The following video contains useful web browser tips to help you speed you your browsing, WordPress, and web design work.

Basic Web Browser Tips by Lorelle VanFossen for Clark College from Lorelle VanFossen

Please note that the video refers to the Windows keyboard shortcuts using the CTRL key. This is the equivalent to the CMD key on Mac.

For mobile devices, long presses usually activate the equivalent of keyboard shortcuts and right clicks, though not all of them may be available in the apps you are using.

Here are some of the specific tips covered in the video.

  • Editing (just like in a word processor)
    • CTRL+C = Copy
    • CTRL+X = Cut
    • CTRL+V = Paste
    • CTRL+Z = Undo
  • CTRL+T = Open New Tab
  • F5 = Reload/Refresh Page
  • Zoom in and out of a web page (magnify): CTRL+Plus and CTRL+Minus
  • Right click on links on the page brings up the right click menu to access link specific options and features.
  • Right click on blank or empty spaces on a web page brings up the right click menu for page specific options and features.
  • Learn to open web pages in tabs not windows. This saves on computer memory issues and speeds up your browser process.
    • Use Mouse and Keyboard shortcuts: CTRL + Left Click on Link = Opens Linked Page in New Tab
  • Fast Navigation through Browser Tabs
    • CTRL+T = Opens New Tab
    • CTRL+1 = Goes to Tab #1
    • CTRL+ 2, 3, 4, etc. goes to that tab number
    • CTRL+Arrow = moves focus to next and previous tab
  • Working on web page design or WordPress? Refresh and you don’t see changes? You need to clear the cache and do a "hard" clearing page reload. F5 or SHIFT+F5 OR do a Cache Refresh
    • CTRL+F5 (Firefox and Chrome)
    • CTRL+Shift+R (Firefox)
    • CTRL + R (Chrome)
    • (You may have to repeat a couple times)
  • To view the source code of a web page: Right Click > View Page Source
  • Web Developer Tools

Copyright: How to Quote and Cite Sources

Reprinted and expanded upon with author’s permission from How to Blog Part 11: Copyright and Citations on Blog Your Passion.

There are two issues to cover as part of this ongoing How to Blog series: Copyright and Citation.

Copyright

In “What Do You Do When Someone Steals Your Content,” I wrote:

Having been the target of copyright thieves, and working with writers, authors, and photographers on copyright protection and laws for over 25 years, I thought I’d talk a little about what to do when someone steals your content.

First, you noticed that I didn’t say “if” someone steals your content. That was on purpose. With the glut of information on the Internet, it’s now a matter of “when” not “if”.

The first step in learning about what you can do when someone steals your content is to know that it will happen, so the more prepared and informed you are, the better your chances of prevention and having a plan in place when they steal.

There are many reasons people take and use content that isn’t their own. The two most common reasons are “I didn’t know any better” and laziness.

The “didn’t know any better” excuse doesn’t work with me. If you went to school in the last few hundred years, you would have learned from elementary school on that copying someone else’s work is not just bad, it can get you punished by being kicked out of school, lose your degree, or even your job.

The Internet is no different than the real world.

Learn how to link and quote from published material to stay safe and on the right side of International Copyright Laws.
Continue reading