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.
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.
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.
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.
- Downloadable Versions:
- Online Versions:
- Browser Add-ons:
Learn More About TIDY
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
- CSS current work & how to participate
- CSS Flexible Box Layout Module
- CSS3 Template Layout Module – W3C
Basic HTML and CSS Resources and References
- Basic Structure of a Web Page » HTML Elements| Learn HTML – Tags – Tutorials – HTML Cheat Sheet
- CSS Reference | Mozilla Developer Network
- The Shapes of CSS – CSS Tricks
- CSS Structure and Rules
- Terminology, Syntax, & Introduction – A Beginner’s Guide to HTML & CSS
- CSS Examples – Sitepoint
- CSS Portal – Templates, Tutorials, Books, Software, Code Examples
- CSS layouts – Max Design
- CSS Layouts: 40+ Tutorials, Tips, Demos and Best Practices – Noupe
- Selectors Level 3 – W3C
- Why Percentage-Based Designs Don’t Work in Every Browser
- Tips, Tricks and Best Practices for Responsive Design – Webmonkey
- Conversation With X/HTML 5 Team
- An Inside View of the CSS Working Group at W3C
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
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.