What is a Properly Formed Link?

Featured

I talk about properly formed links or proper HTML anchor tags in all of my articles, workshops, and classes. Let me explain it in depth here for reference.

Links tie the web together, linking one site to another, one web page to another. They are critical to helping us find information and understand what is being written.

In “What You Must Know About Writing on the Web,” I describe a link dump:

Ugly is as ugly does. Don’t clutter up your site with ugly link dumps.

A link dump is when the blogger is lazy and just pastes the link into their post such as http://lorelleteaches.com/2012/10/14/what-you-must-know-about-writing-on-the-web/ instead of the properly formed What You Must Know About Writing on the Web.

Which is easier to read?

A properly formed link makes it not just easier to read the post, it is clean and presents professional looking content. It invites the reader to click.

To create a properly formed link, you may use the Visual Editor toolbar button called link or Hypertext Link, the proper name.
Continue reading

The Skills You Need for Mobile and Web Programming and Development

What it’s like to work as a mobile app developer” by TechRepublic is a simple but solid list of what it takes to be a mobile application developer, but also a programmer, web designer, and web developer.

The skills mentioned include persistence, ability to keep up with trends and changes in the fast pace of technology, testing to the extreme, and the understanding that this is a new and evolving industry and be ready for the shifting terrain in and around you.

I’d like to add two big skills missing from this list, without which makes the difference between a savvy developer and programmer and a mediocre one. It is the ability to pay attention to details and not make excuses.

It is always the details that bite you back. A missed semi-colon, a misnamed variable, a loop that doesn’t close right, validation errors, little simple things that should be a part of the testing environment but slip by.

I’ve seen many programmers and designers, including myself, blaming the software, the code, everyone else except the person who screwed up and missed the detail that caused the issue. Then the excuses start coming out. Not enough sleep, too much pressure, too many interruptions, trouble at home, traffic jam driving into work, family problems…the list is long and all of these can get in the way of your work.

When we let the excuses consume us, we negative the good work we’ve done. A lot of successes happened in the code before the mistake. Yet we spend a lot of energy on the excuses for that mistake instead of recognizing it as something fixable, a lesson learned or relearned, and move on.

We all have the same excuses. We’d all like them to go away so we could have a perfect working environment. They won’t go away so our ability to handle them must improve.

The first step is to acknowledge that we all have interference in our lives, so let them not interfere. Continue reading

This is an Example of a Blockquote

According to Lorelle:

We are all born with two ends. One is used for sitting. The other is not. Success in life depends upon which one you use the most. Heads you win. Tails you lose.

This is great wisdom of the ages, applicable to everyone, especially students.

I’m reminded of the old Hillbillies television show. There was an episode with the son, Jethro, where he decided, after jumping into the cement pond and bashing his head on the bottom, that he had a light bulb idea. He wanted to go to a fancy universiteee and become a world-famous neurosurgeon. His dad took one look at his son, trying to find a reason to feel pride and stay politically correct, and said, “Ain’t hope wonderful.”

Don’t be a Jethro.

How to Add HTML in a WordPress Blog Post

Featured

Most WordPress users spend their blogging life in the Visual Editor, the WYSIWYMG editor. Yes, it is the What You See is What You MIGHT Get editor.

While WordPress does what it can to make the Visual Editor emulate what your content will look like once published within your WordPress Theme, it has limits.

One of the limits is that is appears hard to publish HTML in a blog post. It isn’t. You just need to switch to the HTML or Text Editor on the Post/Page Panel.

Before you can publish code on your WordPress blog, there are some things you must know.

  1. WordPress automatically fixes poorly formed code. If you mess up a link or HTML element, WordPress doesn’t recognize it as properly formed code so it will “fix” it for you by replacing < with &lt; or change other code to make it appear as text.
  2. WordPress automatically strips out unwanted or broken code. If you are on , you are not permitted to publish JavaScript, PHP, or other code within your blog posts or elsewhere. But you can publish HTML if you have written it properly in the HTML/Text Editor.
  3. The WordPress Visual Editor expects everything within it to be publishable text or a shortcode, code that displays video and other media or features.
  4. The WordPress HTML/Text Editor expects everything within it to be HTML or something WordPress can use to generate HTML.
  5. WordPress recently changed the name of the HTML editor to Text editor in WordPress.com. This change may be in an upcoming release of WordPress.

There are 66 HTML codes permitted in WordPress posts, Pages, and widgets, codes you can use to make lists, links, blockquotes, images, headings, whatever content you wish to add to your site. Continue reading

Web Page Annotation and Markup on Live Web Pages

Teaching web publishing with HTML, CSS, WordPress, etc., and working with clients, I long for the ability to just look at a web page or PDF and draw on it. Point out what works, what doesn’t, editing notes, and somehow share it or preserve it. Or make notes. To scribble a note that says “I need to remember this” or “this is cool!”

Well you can.

HongKait offers “Top Web Annotation and Markup Tools,” a huge list of tools that allow you to annotate – write on – web pages. You can highlight sections, draw on them, doodle, whatever.

You can instantly share or save your annotations.

Think of the possibilities. You are working on a WordPress Theme with a client. They can scribble on the page making notes while you are chatting about it on the page at the same time.

Developing a WordPress Plugin? Imagine running tests with this with this level of collaboration. “What if I over it over here? How does this look to you?”

Layers is a tool that allows you to have a conversation on a web page with annotations and image shows the conversation and graphics.In one example, Layers, the tool allows you to add sticky notes, tweets, maps, videos, and images on web pages. Comments can be public or private. You can invite others to participate in an ongoing discussion of the web page to make it highly collaborative. Oh, this so is going to work out nice for students and clients.

Some of these are online apps, some are downloadable programs, and others are web browser extensions and add-ons. There are tons to choose from.

I’m going to use some of these in future classes to markup homework assignments, labs, etc. And what until my clients see these. Wow!

What is a Website Call to Action?

Call to action button called click me with quote that says go on, you know you want to.What is a “call to action” on a site?

Call to action in web design — and in user experience (UX) in particular — is a term used for elements in a web page that solicit an action from the user. The most popular manifestation of call to action in web interfaces comes in the form of clickable buttons that when clicked, perform an action (e.g. “Buy this now!”) or lead to a web page with additional information (e.g. “Learn more…”) that asks the user to take action.
Call to Action Buttons: Examples and Best Practices by Smashing Magazine

It is literally a visual hint (or shout) that encourages a user to click or take some form of action.

Calls to action are used to:
Continue reading

The Basic Structure of a Blog Post

There are many ways to present a post or article on a web page. This tutorial will cover the basic formatting, styles, and structure.

Every WordPress Theme handles the basic elements in a post different, making the headings stand out in a variety of ways, adding borders around images or not, adding design elements to a blockquote…the list is long. I recommend that you test your own WordPress Theme by writing a test post following the examples in this article, or you may use the Sandbox Post for Testing WordPress Themes. It is a text file with HTML code representative of all the HTML tags found in a blog post.

Formatting the Post in WordPress

Before we begin, I will be making references to the formatting toolbar found on the post and Page Edit Screens. It is blow the post title area and directly above the content textarea where you will write your post.

The WordPress Visual Editor Toolbar featuring the Kitchen Sink Button which expands to feature a second row.

By default, you see only one line of buttons in the Visual Editor. The last button on the row is called the Kitchen Sink. If you click it, a second row will drop down. Continue reading

How to Create Seamless Background or Tiled Patterns

One of the ongoing challenges web designers have is with background images. Background images are found within the background of a web page, specific DIVs, menus and navigation, sidebars, all over the place.

Example seamless pattern background image for tiles and tiling on web pages. Source - fractured-sanity.org.

A well designed pattern or texture that is seamless and tiles well is one that repeats gracefully in the background, complementing the purpose of the site and not distracting. A non-distracting background is one that is literally seamless, no distinction between the edges of the graphic. It doesn’t look like a bunch of repeating blocks. It is one smooth, evenly repeating pattern that is flexible, stretching into the background no matter what the width or length of the web page.

The process involves developing graphics that, when tiled together, appear as one single image, or a gentle repeating pattern. This is often done by selecting simple graphics and blurring the edge or positioning the elements to they bookend to each other, repeating the pattern over and over again.
Continue reading

Tutorial: Tools for Evaluating and Testing Web Pages

There are many online tools, web browser extensions, and add-ons to help you evaluate and test web pages. We will be talking about web page validation later, but you can use these tools now to become familiar with such tools and how to integrate them into your web browser.

Most browser-integration tools are browser specific, compared to online tools which sit in web pages, accessible through any browser. Browser-integration tools include extensions, add-ons, and bookmarklets.

How to Add an Extension or Add-on to Your Web Browser

To add an extension or add-on tool to your browser:

Continue reading

Tutorial: How to Inspect, Edit, and Save a Web Page

This tutorial from the HTML Fundamentals Class I taught at Clark College in Vancouver, Washington, is a guide that will show you how to:

  • View the source code of a web page.
  • How to save a web page to your computer
  • How to view a saved web page on your computer
  • How to open a web page in your text editor
  • How to view the CSS/Stylesheet for a web page
  • How to inspect the HTML and CSS of a web page
  • How to view and edit a web page at the same time

To begin this tutorial, have your web browser and text editor open on your computer. It does not matter which browser or text editor you are using. The process is basically the same.

How to view the source code of a web page

  1. Go to a web page such as the test page for the class, Welcome to Lorelle VanFossen CTEC 122 HTML Fundamentals Class on the Clark Web Server.
  2. Right click on an empty space on the web page and choose View Page Source or View Source.
  3. The resulting popup window (or tab) will show you the underlying HTML structure of the page.
  4. You may save this to your hard drive or go back and save the entire web page to your computer.

Continue reading

Links and the Anchor HTML Tag

This is a tutorial from the HTML Fundamentals Class I taught at Clark College in Summer 2012. It applies to HTML and WordPress.

There are five basic forms of links on a web page.

  1. External Links
  2. Internal Links
  3. Jump Links
  4. Image/Multimedia Links
  5. Email Links

Link Basics

Links are the gateway to the web, the interconnected parts of the web that allows a web user to easily move from document to document.

A link consists of the following HTML tag structure.

<a title="Link to article title." href="http://example.com/article.html">Anchor Text</a>
  1. a: The HTML Anchor tag.
  2. title: It is required by US federal law and international law that all links have a descriptive title property. The value text must describe the destination link in a way that will inform the user of what the destination material is about and help them decide to click through. It should be no more than a few words and written in sentence form, a simple instructional form such as “Link to article on links.” This is read out loud by screen readers.
  3. href: The Hypertext Reference is the destination link. In general, it is typically an absolute link written with the full http: address such as http//example.com/article.html.
  4. Anchor Text: This is the text which the HTML Anchor tag wraps around. It is the visible element of the tag on the web page.

Continue reading

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 Recourses 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

Official HTML5 Resources

CSS3 Resources and References

CSS3 Tutorials

HTML5 Resources and References

HTML5 Tutorials

HTML5 and CSS3 Tools

HTML and CSS Structure, Layout, Frameworks, and Wireframe Articles

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

Introduction to WordPress Class 2: What Can You Put in a WordPress Post

In Class 2 -Introduction to WordPress, we cover:

  • Getting Help with WordPress
  • Writing Content Structure and Techniques
  • WordPress Post and Page Editors
  • Writing with HTML
  • Uploading multimedia content into posts
  • Basic Tips for Blog Writing
  • Finding Content
  • Copyright

Homework Assignment

  • Edit your previously published blog posts to meet web standards for content writing written in HTML editor.
  • Write and publish 5 posts with multimedia in HTML.
  • Write and publish 3 posts with blockquotes in HTML (with citations).
  • Write and publish a list post.
  • Create a Policy Page:
    • Add a copyright policy.
    • Go to Creative Commons and find the appropriate license and add it to your Policies Page (with Creative Commons badge/image).
  • Start an article To Do List with ideas for blog posts (anywhere you want, on your blog, Google Doc, etc.). Goal: By the end of week two, you will have a minimum of 5 posts published in every category.
  • Read the Reading Section material.
  • Research and add to schedule:
    • Next WordPress Meetups in Portland (and elsewhere local)
    • Local WordCamps

Reading

The following are recommended reading assignments from the WordPress books in the 24×7 Book program. Please note the notes on book naming conventions and confusion in the class preparation post.

Watching

The following are two very similar videos highlighting the people behind WordPress and how WordPress changes lives. One was done exclusively for the first WordCamp PDX and the other was done for WordCamp Hawaii and the Hawaii Technology Week event.

Extra Credit

During the class, I’ll be offering extra credit opportunities. The first one is to volunteer to answer questions and provide support on the WordPress.com Forums.

The WordPress.com Forums are managed by employees of Automattic and WordPress Community volunteers. I’ve written an article with tips on how to provide support and participate in the WordPress forums. Read “How to Help on the WordPress Support Forums” and its supporting documents before volunteering your efforts.

Please let me know if you are participating on the forum(s). I’ll need to know your WordPress username to verify. And know in advance, WordPress.com users thank you.

Outcome

For those keeping track of overall outcomes, the goals of the second class were:

  • Learning the content management areas of WordPress.
  • Learning the difference and how to use the Visual and HTML Editors.
  • Learning how to include multimedia in a WordPress blog post.
  • Basic blog writing tips with WordPress structure and format.
  • Learning to write in HTML.
  • Overview of WordPress help and support resources.

The 10 HTML Tags You Must Know to Blog

code wordle - group of words that are synonyms and types of codeTalk to the serious blogging and web publishing pros, the ones turning out brilliant content fast, and you will find that they all have one thing in common. They write with HTML.

Writing with HTML in WordPress isn’t complicated nor does it require a degree in foreign languages or web development. We’re not talking about building a web page from scratch every time you publish. We’re only talking about the HTML that goes into the post content.

How much HTML do you have to learn? Only 10 HTML tags. That’s it. Less words than you probably know in Spanish or another foreign language.

The most commonly used HTML tags in the post content area are:

  1. Anchor Link Tag <a href="…">link</a>
  2. Image Tag <img src="…" />
  3. Headings <h2>, <h3>, <h4>, <h5>
  4. Paragraph <p>Text here</p>
  5. Bold <strong> not <b> and Italic <em> not <i>
  6. Lists <ol> and <ul>
  7. Blockquote <blockquote> and <cite>
  8. Line Break <br />
  9. Horizontal Line <hr />
  10. Code <pre> and <code>

How many of these do you use commonly in your blog posts? All of the ten? When was the last time you needed to put code in your blog post? Rarely, if ever. At most, you use 5 of these in most posts you publish. I think you can handle that.

The five are links, headings, bold and italic, lists, and blockquotes – unless you are a poet. Then add the line break to your collection for six easy to remember HTML tags.

Sure, there are more HTML tags you can use in the post content area, but these are the most common. Tables, font colors, etc., are rarely used and if you need to use them, you probably already know how.
Continue reading