WordPress School: How to View a Web Page Source Code

Starting this Monday, we will be diving into web browsers in preparation for some basic HTML lessons to help you learn more about the inner workings of WordPress, WordPress Themes, and web design as part of Lorelle’s WordPress School free online course.
The first step in the process is learning to view a web page under the hood. Yep, it’s time to peel back the pretty and explore the code.

Go to any web page. This article is a good one.

Right click on the web page in a blank area and select View Page Source, View Source, or something similar. While Chrome and Firefox use the former, different web browsers may use other words for the same thing.

A web browser window will appear displaying the code that displays the website content.

Don’t be intimidated. Relax. In a bit, this will be as familiar as your living room couch, you know, the one you only use for guests. Yeah, that kind of familiar.

What will be familiar is the content area of the code. First yo have to find it.

Look at the original web page or post. What is the title of the post? Look for a word or phrase in the first paragraph. Use either of those in a web page search on the displayed code (not the web page) window:

1. On the keyboard, simultaneously press CTRL/CMD+F to initiate a web page search
2. Type in the words you are searching for
3. If the words are used in the head area of the web page’s code, click the next button on the search to keep going until you find the words within the context of the post or Page content

In the example I used, I searched for “mini-series of tutorials” as that is in the first paragraph of the post I’m exploring.

That’s it. That is how you look at the code WordPress generates to display a web page. Thought there was more?

Okay, there is. Just a little bit.

Why Do I Have to Look at the Web Page Source Code?

The code under the hood of a web page is stuffed full of instructions telling the web browser how to display the web page. It consists of:

• HTML: HTML is the Hyper Text Markup Language created by Tim Berners-Lee and his team at CERN to be the underlying architecture of a web page. When you set something to be bold, instructions must be set in the web page to tell the browser to set the following text as bold. HTML tags wrap around the text to be bolded, and the styles add the visual emphasis such as <strong>this is bold</strong>. Look for bold on the web page’s code by searching for “strong.”
• CSS: CSS is Cascading Style Sheets, the instructions for HTML on how to paint and style the web page. Imagine CSS as the instructions that accompany a building project’s blueprints that tell the workers what size, shape, color, and materials they are to use for each part of the building.
• JavaScript: JavaScript is programming code. It is called dynamic computer programming language as it controls the actions of the web browser and creates actionable effects on a web page. JavaScript is everywhere within a WordPress site.

Look through the code and see if you can identify HTML, CSS, and JavaScript elements.

As we move forward into the code aspects of WordPress, going slowly for the uninitiated, I want you to learn to read web page code like a book. It really is easy to read if you just learn a little of the sentence structure, just as you would learning any new language, but trust me, this language is often easier to learn than your spoken languages.

For example, here is some basic WordPress content HTML code:

<h4>Image Lessons Article Series</h4>
<p><em>Image Lessons is a mini-series within Lorelle’s 
WordPress School to teach you the very basics of how to create and 
modify images for your WordPress site.</em></p>
<ul>
<li><a href="https://lorelle.wordpress.com/2015/03/24/wordpress-school-image-lessons/" 
title="WordPress School: Image Lessons.">WordPress School: 
Image Lessons – Introduction</a></li>
<li><a href="https://lorelle.wordpress.com/2015/03/24/wordpress-lessons-header-art-images/" 
title="WordPress School: Header Art Images.">WordPress School: 
Header Art Images</a></li>
<li><a href="https://lorelle.wordpress.com/2015/03/24/wordpress-school-text-on-images/"
 title="WordPress School: Text on Images.">WordPress School: 
Text on Images</a></li>
</ul>

Read out loud, as if you were reading to a child, you might read out:

Heading 4, Image Lessons Article Series, end heading 4.

Paragraph. Italics, Image Lessons is a mini-series within Lorelle’s
WordPress School to teach you the very basics of how to create and
modify images for your WordPress site. End italics. End paragraph.

Unordered List
List item. Link to Image Lessons Introduction post. End list item.
List item. Link to Header Art Images post. End list item.
List item. Link to Text on Images post. End list item.
End unordered list.

Even with the basic tutorials we’ve had in the course so far, you recognize a heading, paragraph, links, and list HTML tags. Many of these we covered in the tutorial on the HTML tags you need to know for writing content in WordPress.

Try reading the code around the content on the web page source code you are viewing. Can you do it? Most web browsers color code (syntax highlighting) the HTML and links to make them distinguishable from non-code words.

As we go forward, this will become much easier, she says as you think “blah blah code blah blah blah blah code blah blah blah.”

Assignment

Your assignment for this tutorial is to explore your WordPress test site under the hood.

Go to one of your article series posts and view the page source code. Search for the opening paragraph. Read through the code like you would a book. You don’t have to read the actual links but translate the code into simple words as I did above as you read through it. See how many HTML tags you can figure out without looking them up.

Look for links, images, headings, lists, and other HTML elements. These are HTML elements you put into WordPress through the Text and Visual editors.

As you look, you will see HTML paragraph tags around every paragraph. Remember the earlier tutorial on how to make line breaks, a single ENTER in the Text Editor and CTRL/CMD+ENTER in the Visual Editor for addresses and poetry? If you see <br /> or just <br>, that is a line break, added automatically by WordPress. If you see the paragraph tag, that means you hit two ENTERs in the Text Editor or one in the Visual Editor and WordPress automatically wrapped a paragraph tag around the content.

WordPress generates most of the HTML elements for you, so you don’t have to know HTML to create a WordPress site.

If you wish to go further with WordPress, you need to know how a web browser works and the basics of HTML. Coming right up!

Join us in our discussions on this assignment in our WordPress School Google+ Community. The Google+ discussion and location to share your thoughts, in addition to the comments below, is Assignment: How to View Web Page Source Code.

This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see:

• Lorelle’s WordPress School Introduction
• Lorelle’s WordPress School Description
• WordPress School Tutorials List
• WordPress School Google+ Community
• WordPress Publishing Checklist
• How to Give Feedback and Criticism

---