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

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

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

Creating a Blogging, Social Media, and Editorial Calendar and Schedule

Nothing to blog about on picture of desert sandsSportsBusiness Journal has one. So does eSchool Media Marketing, GeneaBloggers Genealogy Blog, SheKnows Magazines, and REALTOR® Magazine. Not only do they have one, they redo it every year. What could these very diverse companies have in common? An editorial calendar.

An editorial calendar is critical for the online publisher and web worker today. In traditional media, an editorial calendar was the year planned out in advance on editorial topics, articles, themes, article series, and events. Today, the editorial calendar goes even further covering social media, marketing, advertising, and virtual and direct social interaction. Whether for the individual blogger or a company, an editorial calendar sets goals and deadlines to keep you on track.
Continue reading

2011 Prove It Campaign: Prove Yourself on Your Blog

In January 2012, I started a year long campaign on called Prove It!

I recently learned the true definition of the word “guru.” It means to lift someone up through knowledge and wisdom. It means to teach, to impart wisdom, “to dispel the darkness of ignorance” so that those who go after you will be better for it.

Too often the label is used with arrogance. It doesn’t mean to lord over others as an expert. A true guru probably wouldn’t call themselves a guru. Others would honor them with the title.

After years of being called a guru in WordPress, blogging, and multimedia web publishing and being embarrassed by it, I realized there was more to being a guru than a line on a promotional ad. It’s time to reconsider such self-proclamations without anything to show for it. It’s time to call myself on the carpet to prove my worth, and for others to step up to the plate and prove it themselves.

Here is the article series so far which focuses on proving your personal expertise and experience to back up what you blog about. I just published the last article which includes research on what elements of a website design and content inspire trust in their readers.

Future articles will focus on specific design and content elements with recommendations on WordPress Theme and Plugins to help “prove it” on WordPress sites. I’ll be writing about how to prove it through accuracy in writing, publishing, and interaction with readers, and how to measure the proof of your success through analytics and feedback. I’ll add more articles to this post as the series continues throughout the year.

Email Obfuscation Tools and Scripts

There are a variety of ways to protect and hide emails and other information from email harvesters or just to protect your privacy through obfuscation, a technique on the web that allows displaying of email and content within web browsers so browsers can understand them, but masks them from web crawlers and bots.

A typical email link would be:

<a href="mailto:fredsmith@gmail.com" title="Email Fred">email</a>

An obfuscated email address link would look like this:

<a href="mailto:&amp;#102;&amp;#114;&amp;#101;&amp;#100;&amp;#115;&amp;#109;&amp;#105;&amp;#116;&amp;#104;&amp;#064;&amp;#103;&amp;#109;&amp;#097;&amp;#105;&amp;#108;&amp;#046;&amp;#099;&amp;#111;&amp;#109;" title="Email Fred">email</a>

Free Online Tools to Obfuscate Email Addresses

Instead of doing this manually using HTML Character Entities, there are a variety of free online tools to obfuscate email addresses. The output can be set to be in HTML characters or use JavaScript or other code methods. NOTE: WordPress.com blogs are restricted to only HTML Character Entities.

There are a variety of WordPress Plugins that will handle the job for you automatically, too. Check the WordPress Plugin Directory for the latest versions and options.

For more information on obfuscation, see:

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

Publishing Responsibilities: I’m Responsible for What I Say

I am responsible for what I say. I am not responsible for what you understand.

This is going around the web and it’s a powerful statement:

I am responsible for what I say.
I am not responsible for what you understand.

It’s a simplified version of:

I know that you believe you understand what you think I said, but I’m not sure you realize that what you heard is not what I meant.
Robert McCloskey

Yet, it goes much further.

How does this relate to social media and web publishing?

Creating a Website Feed For a Feedless Site

Feed iconThere will be times when you will want to create a feed to add to your feed reader from a site that doesn’t have a feed so you can monitor the site for changes, updated, or new content. Here are some free, online feed creation services to try. Not all create feeds from sites without feeds equally, so experiment with these to find the right one.

In general, you will want to provide the “front” page or the page with the most active content you wish to follow. For example, if you wish to only follow the WordPress information from a specific site and not the rest of their content, then you would create a custom feed for their WordPress category, subdomain, or search results.

These are not meant to replace the feeds provided by websites but to use them on sites without feeds.

Plagiarism, Copyright, and Fair Use

copyright symbolRule Number One: Ask first, they might say yes.

If it is on the web, it isn’t free.

If it is on the web, it could be free.

Everything on the web was created by someone. It took hard work. It took time, sometimes a lot of time. Hours, days, weeks, months, possibly years.

Everything on the web is copyrighted and someone owns that copyright. It is up to them to decide what those rights are.

They might want to share what they’ve created with the world but only on their space.

They might want to share it for free for use by others and allow it to be used by others as long as credit in the form of links stays with it.

They might want to share only a small bit with a link as credit for use by others. They should tell you how much they will allow to be shared before it is considered plagiarism and copyright infringement. This is called Fair Use. If in doubt, use no more than 10% or 400 words.

They might want to give it away and not care if it is linked, credited, or changed.

It is up to the copyright holder to set the terms of the sharing, copying, and usage, but understand they don’t have to. Always look for their copyright policy, usage license, or Creative Commons license and permissions to verify the rights of the copyright holder. Anything published and shared on the web is owned and controlled with all rights and usages to the copyright holder. Treat it fairly within the rules of Copyright Fair Use.

This applies to written content, pictures, graphics, images, designs, web art, web templates, web designs, video, animation, photographs, audio, podcasts, music, illustrations, artwork, downloadable files, and any other content on the web. It’s all copyright protected. Continue reading