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.
The following video contains useful web browser tips to help you speed you your browsing, WordPress, and web design work.
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
- Use Built-in Web Developer Tools plus Firebug:
- Measure It: Measure It for Firefox or Measure It for Chrome
- Color Pickers: Colorzilla for Firefox and Chrome
- Copy Link as Proper HTML Link: CoLT for Firefox or Chrome Create Link or Chrome Copy Link Text
- For preserving and sharing code snippets on your site, in comments, forums, and social media use PasteBin: Pastebin for Firefox and Chrome
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:email@example.com" title="Email Fred">email</a>
An obfuscated email address link would look like this:
<a href="mailto:&#102;&#114;&#101;&#100;&#115;&#109;&#105;&#116;&#104;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;" title="Email Fred">email</a>
Free Online Tools to Obfuscate Email Addresses
- Online Email Obfuscator
- Email Harvester Robots, Spam and Email Obfuscation
- Obfuscate email tool – Online tool
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:
Alex Ferguson came up with a way to help us align videos with the text, floating them to the left or right of the post content area so the text will wrap around the video.
NOTE: This is not for the timid nor typical usage. This was an experiment and it works. To embed a YouTube (and most popular video services) video into your blog post, simply paste the URL into the post on its own line with a space above and below.
Let’s see if this works.
It does, but the technique is a little trickier than you might thing. Remember, this is for within a WordPress.com blog, thus we have to work around some of their limitations.
The code involves creating a DIV with the alignment class for left, right, or center, plus the WordPress.com Youtube shortcode with the width and possibly height set.
<div class="alignright"> </div>
In the link to the Youtube video you should see
&w=400&h=450. This sets the width of the video to 400 pixels, narrower than the typical 500 or so, and the height to 350 pixels. Every Theme has a different column width so you will need to play around with these to get them the right size for your WordPress.com site.
This is what we call a “hack,” a way around the typical way of doing things. I recommend you save this in a reference text file so you can copy and paste in the video link next time you try this in a post.
Thanks, Alex, for experimenting with this!
This is the H1 Heading
This is an example of a sandbox post for testing WordPress Themes and web page designs to ensure every design detail within the content area of a Theme meets with your design needs.
To use this sandbox post for your own testing, right click the following link and save the file as a text file. Open it within a text editor and select all of the text and paste it into your WordPress site with the HTML/TEXT editor – not visual editor. Save the post or publish it to view the post content designs.
This sandbox post is available for free. Use as you wish.
At the top of this paragraph should be the H1 heading for your web page. If it is not visible, the design settings for the H1 tag is set to
display:none which many WordPress Themes use to hide the blog title text and replace it with a graphic. Do not use H1 within your blog post area.
If the design in the H1 heading looks like your blog title or blog post title, then that is the style set for that HTML tag and you should not use it within your blog post area.
Inside of this test data section are most of the basic HTML and XHTML and CSS styles that you might use within your WordPress Theme. You need to know what that will look like as part of structuring your styles.
This is the H2 Heading
Above this paragraph should be the H2 heading for your web page. WordPress Themes use the h2 heading for various purposes. Logically, it should be either the post title or the first heading in the post content.
However, it is used all over WordPress Themes including the subtitle, tag line, post title, comment area, sidebar area, and even in the footer. Be specific when styling each h2 headings to ensure you are not styling all of them.
This is the H3 Heading
Is this the same heading as is in your post title or is this the section headings found within your sidebar? Or is it different? This is the post content heading for the HTML tag h3, as is the one below, H4, for section headings within your post to divide up topics. If there is an H3 or H4 tag in your sidebar, you will need to identify the parent HTML and CSS container for the sidebar and style those appropriate in your blog’s stylesheet.
For more information in searching for your styles in your WordPress blog, see CSS: Studying Your CSS Styles.
Also notice how the links in that paragraph are styled so you can style links within your post content area. Links have three styles. There is the link color, link hover color, and visited link color. Be sure and design for each style.
This is the H4 Heading
In this section under the H4 heading, we’re going to look at what the post content, the meat and potatoes of your site looks like. In general, you will have multiple paragraphs, so we will add another paragraph so you can adjust the spacing in between them to the look you want.
Paragraphs are not just for typing your blog babble, they can also hold frame and hold other information within your content area to help make the point you want to make in your writing. For instance, you will commonly have three types of lists.
Talk 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:
- Anchor Link Tag
- Image Tag
<img src="…" />
<h2>, <h3>, <h4>, <h5>
<strong> not <b>and Italic
<em> not <i>
<ol> and <ul>
<blockquote> and <cite>
- Line Break
- Horizontal Line
<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.
There are many ways to give back and support WordPress and WordPress.com, as an experienced user or a coder and developer. The WordPress Forums are the first place to begin.
There are two support forums for WordPress.
The WordPress.com Forums are dedicated to providing help to WordPress.com users. It is staffed by Automattic employees who monitor and moderate forum posts but a majority of the support comes from volunteers, fellow users who want to give back and help others but also learn more about how WordPress works.
The WordPress Support Forums are for those using the self-hosted version of WordPress or WordPress MS (Multisite). This is mostly a volunteer support forum where experienced users help others get their questions answered.
WordPress.com questions will not be answered on the WordPress.org forum, and the reverse is true. Questions must be posted (and answered) in the appropriate forum section as well.