We are halfway through the new year and I am still getting a lot of questions about Internet connections for Globe, PLDT and Sky Cable Broadband. I have decided to expand this on my site by writing three best practice pages, three new categories and making three updated yearly posts.
Here we will test to see if your .htaccess file is turned on, and if it is working properly. This is easy for those new to .htaccess Before you begin trying to make your first .htaccess file, let’s make sure you have things set up correctly. It is simple, here is all you need to do…
Continue reading Bitesize .htaccess – Testing – Beginners Guide
The best first steps in PHP is just to jump in!
Set PHP Variable
You can set a temporary storage device, called a PHP Variable or “$var” for short.
$my_page_title = 'My First Page Title!';
Continue reading Bitesize PHP – First Steps in PHP!
In this lesson we create a structured layout for our file folders. We learn to set a PHP variable and to use that variable in a template format. This is the first steps in PHP!
In Bitesize HTML5 – Switch from HTML to PHP Coding we switched the file extension from .html to .php. Some of you may have tried to open and view the pages in you browser and it did not work. That is because .php scripts Must be served by a server, no exceptions are allowed! If you have a hosting account, perhaps on Ubuntu running Apache, you can put your pages there. If not, you can try putting your .php pages on one of the following. All of these are Apache Web Servers with the .htaccess file working.
– Works Great on Linux Mint with the Mate desktop (what I use). Any Linux can run this. Just search the Internet to get started. This is really the best because it is the same as your Linux Hosting Company uses!
Continue reading Bitesize HTML5 – Building a Website Folder Format – Layout
The Artajo’s Cafe code that Ranz Artajo (one of my students) sent to me, has now been validated at W3C for XHTML and CSS3. You can view both the original code and the improved code at http://artajocafe.a143.net/
Marie Pelin did a great job of validating and correcting the little site. The corrected site has links on the footer to the XHTML and CSS3 tests.
It is on my list to convert the XHTML to HTML5 at this time. However, I noticed it would be far easier to change to PHP first. Therefore, let’s activate the PHP Hypertext Preprocessor on every page at this time…
Continue reading Bitesize HTML5 – Switch from HTML to PHP Coding
Ed. I decided it would be easier to switch to PHP before switching to HTML5. Therefore Please follow the following pages before doing this…
Bitesize HTML5 – Switch from HTML to PHP Coding
Continue reading Bitesize HTML5 – Convert any hypertext to HTML5
I took on a new student this last week to tutor. He had built a small website for an imaginary Coffee Shop. He has no server so I told him to just email the files to me. When I received his email, he had attached his files, one by one. A number of images, html files and css that all downloaded into the same folder..
The problem was, he had just attached the files to the email, so when I downloaded them, they all ended up in one folder. When I opened his index file, the site was all messed up!
The problem was that these were all lumped together in one folder, but his design was to have separate folders for the images and the css. I had to manually sort out and recreate the file structure, before I could view and evaluate his work.
A far better way for him to send this to me attached to an email would have been for him to ZIP the files and folders together first.
Continue reading Bitesize HTML5 – Zip-a-Dee-Doo-Dah – File Transfer!
Attributes, within tags, need a proper syntax also. This is easy, but often it is so very wrong. Here I will present a couple easy to follow “Best Practices!”
Continue reading Bitesize HTML5 – Attribute Quote Syntax
Attributes and Tags
All tags and attributes must be written in lowercase (small letters). Additionally, attribute values should be lowercase when the purpose of the text therein is only to be interpreted by machines. For instances in which the data needs to be human readable, proper title capitalization should be followed.
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<a href="http://example.com/" title="Description Here">Example.com</a>
And this pair of tags,
This last example was not valid in any version of hypertext, even 30 years ago!
All of these examples would have failed XHTML Validation.
Moving on to Bitesize HTML5 – Attribute Quote Syntax
Building on what we learned in Bitesize Programming – Polyglot Markup and Bitesize HTML5 – The W3C Validator let’s take a look at our old friend, the break tag and other…
All tags must be properly closed. For tags that can wrap nodes such as text or other elements, termination is a trivial enough task. For tags that are self-closing, the forward slash should have exactly one space preceding it:
rather than the compact but incorrect:
The W3C specifies that a single space should precede the self-closing slash (source).
Empty Element Tags
Another name for an empty Self-closing Element is an Empty Element or Empty Tag. Things like <hr/> and <img … />. For example, this week I received a website declared to be written in XHTML and containing the following code.
<img class = "main_image" src ="images_artajo/logo5.jpg" alt ="scrambled eggs in english muffin" align ="left">
Polyglot Markup mandates it to be markup would be written:
<img class="main_image" src="images_artajo/logo5.jpg" alt="scrambled eggs in english muffin" align="left" />
However there is another error on this img tag that is much harder to see. The image was actually a beautiful cup of coffee, not “scrambled eggs in english muffin”. If it was scrambled eggs, the alt attribute is human readable and should have had proper human punctuation, like: “Artajo’s scrambled eggs in English muffin.” So this tag should actually have looked like this…
<img class="main_image" src="images_artajo/logo5.jpg" alt="An inviting cup of Artajo's coffee." align="left" />
Let’s now consider Bitesize HTML5 – Attributes and Tags.