HTML file format

HTML are really nice files, they are straight text, but with it (well and a few other things) you get what you are looking at now.  So, let’s take a look at what an HTML file consists of:

  • Content encoding
  • Doctype declaration
  • HTML block
  • HEAD block
  • BODY block

So, let’s dive into that a bit, and go through this step by step.

Content Encoding

HTML files are usually encoding in utf-8 unicode format.  Which for “8-bit” characters is pretty close to ASCII (in fact all ASCII characters are coded identically in utf-8, though ASCII at times might have transferred them differently being only 7 bits of significant data) but also allows for “extra characters” due to the fact that the first “block” of characters (8 bits) is only part of the set.  In fact, in utf-8, if you need to encode more than the 7 bits of ASCII you will need more bytes per character.

Using ASCII encoding (declaring it) is relatively rarely done these days.  ASCII encoding was used in about 17% of websites in 2012, while utf-8 was used in about 63% of websites.  Other encodings were used as well.

You probably don’t need to worry at all about this, unless you are using characters outside of the ASCII set, and not escaping them (so they can be represented as ASCII).  I have seen some websites where the ‘ displays as 3 characters that don’t look correct.  This is a problem that somewhere along the way utf-8 encoding has gotten shifted to ASCII encoding, and the result is that rather than a “left single quote” you get a meaningless series of characters.

So, save your file in text format, and be careful if you are transferring the file from one place to another, that the encoding isn’t getting broken.  Then you need to look at what you put into the file itself.

Doctype Declaration

The first part (first line) of an HTML file should be a doctype declaration.  There are a number of options, and in the past the “correct” one was difficult to remeber as it was something like:


which you can see is a lot of specific bits of things to remember, now the current version of the same thing is:

<!doctype html>

Which is a lot easier to remember.

While most browser don’t care much at all about this, in order to have things properly formatted it is “supposed” to be there.  The w3schools says that it is “required” in their information about doctype declaration, and the W3C list of valid doctype declarations, has a list they consider valid (though I believe that there are other ones which can be used, as well).  So, if you open with a proper doctype declaration, that’s a “bonus” in my book, but people who are even more pedantic say it’s “required”.  And by the standard (w3c sets the standard) it is required.

You’re unlikely to have anything break if you forget it.

HTML Block

This is something which has not changed since I started working with web development.  The doctype is not part of html, it is just part of the file.  And it does look a lot like an html tag, but it’s not.  It comes before any html, and the first tag (an opening one, which needs to be closed, but closing comes after opening) that you are required to use (again if it’s missing, probably no browser you’re likely to encounter will have any problems with the file as long as it can determine in other ways that it is an html file) is the html tag.

In its most basic form (and I usually don’t modify this myself until I start to look at finalizing stuff about a page, and mostly for accessibility reasons) is:


Which is really simple. There are a number of attributes you can add, such as:

<html lang="en">

in order to define your entire document (you can use the lang attribute on any tag, as it is a “global” attribute) as being in English. This is helpful in terms of screen reading, or other accessible technologies. It also can help (though usually not by much) search engines to better understand your website.

Once you have that defined (it can only occur once), it needs a closing tag (and also has two required blocks inside it the head and body blocks (again only one of each)), and the closing tag is:


And as with all closing tags, it is only the / and the tag name, and not all tags have required closing tags.

The HTML closing tag should be the last thing in your document, as anything after it is not supposed to be interpreted (I don’t know what the behaviour of any browsers are if there is a closing HTML tag, with content following it, they are not supposed to interpret it at all, or display anything with regard to it, but I can’t guarantee that all of them follow this behaviour.

Now let’s look at the first of the two required blocks within the html block.

HEAD Block

Most of the information you need to know about the HEAD block, is mentioned regarding the HTML block.  They have different attributes (global ones can be used on any html tag), but the basics are the same.

The HEAD block defines “header information”, most of this isn’t displayed (well it’s not displayed on the web page itself), but is used to define the entire document.  The HEAD block starts with a:


tag. This is the minimum you will need to use for that, but as with the html tag, you can include attributes. I’m not going to go into that. If you have included an lang attribute in the html tag, unless you are “changing” it, you don’t need to repeat it, and it should only be used where you are changing it (if I use a French word, I might tag it as such, though it is rarely needed unless you are looking at the highest level of accessibility standards).

Likewise you will need to close your head tag. It’s the same as closing the html tag (though it’s a different tag):


Just that simple.

Now on to your main content in the BODY block.

BODY Block

The body block is where everything that you display goes. There are things which can go into the body block (and certain things may only belong in the body block) which aren’t usually displayed. But everything that is in the “web page” which gets displayed is in the BODY block. (Though there are cases where some of that display is at least partially defined elsewhere)

So, really, not much new to say here:


and likewise there are attributes that can be applied to it. This is where all your content will go.

Likewise you will want to put the closing tag:


after to close your BODY block. As this all falls in the HTML block, your HTML closing block is what you need to do right after that.


Here are a quick list of resources, both general sites (I am starting there) and specific resources for the topics which are included here:

Posted in Education, Web Development, Web Development Basics (edu) | Tagged , , | 1 Response

Looking at basics of web development (starting with HTML)

I have decided that I would like to look at the basics of web development, and I have a bit of an approach I would like to look at for this.  I think that I will probably approach it in this order:

  • HTML
  • CSS
  • PHP
  • JavaScript

I think that makes a fair amount of sense.  I’d like to create a new lesson every week:

HTML Basics

I have been looking at the HTML basics, I’m not really sure where I would like to go with this for sure, but I am going to look at this starting in this order:

  • HTML file format
  • HTML <head> content
  • HTML <body> content
  • <head> tags
  • <body> tags

I know that looks pretty brief, but I think several of these will end up being multiple lessons.

I also would like to be able to provide external resources for most of these things.  In part because I refer to them on a regular basis myself.

CSS Basics

I will do a similar thing with CSS:

  • Inline CSS format
  • Header CSS Format
  • External CSS Format
  • Including External CSS
  • CSS selectors
  • CSS declarations
  • CSS properties
  • CSS values

This is a much longer list, though I think it is more finely broken down.

PHP Basics

PHP is my strongest programming language.  I hear a lot of people complaining about it, so I keep trying to do things in different ways for a variety of things, but I think that it is a reasonable place to start learning a number of basic programming concepts:

  • Writing output
  • Getting input (forms)
  • Processing input
  • Displaying based on new input.

That’s really the very basic structures.  I will probably need to look a variety of different things or not.

JavaScript Basics

JavaScript allows you to do things on a client’s computer.  I use it very minimally right now, and think that I am strongly of the opinion that JavaScript (and CSS) should be able to be turned off, without losing the basic functionality of the webpage.  I can’t really break this down all that easily, but I can work on handling this in a better way along the way.

Posted in Education, Site News, Web Development Basics (edu) | Tagged , , , | Leave a comment

Daily Sketch 2

Just doing another daily sketch.  2 days in a row.  That’s pretty good for me…

4 faces, looking sad, angry, anxious variously.

I am trying to draw a sad face. A lot of these (almost all of these) just don’t cut it. The closest I got was the bottom one, which looks “sad and anxious”.

I think that starting with these expressions right now is a decent place to start. I can see that things aren’t really all that easy even keeping them as simple as I am doing them.

sad/anxious face with greyish background.

Inkscape trace (with original behind it) of the sad/anxious face. I didn’t do too badly with this.

This turned out not bad at all. With the background from the original picture still there, it gives a bit of texture.

Line drawing of sad anxious face. Transparent background.

Dropped the background for this. This is just the inkscape file. Background is transparent (I think it is still).

The transparent background for this might end up being a bit difficult to handle in some contexts. I’m not sure if there is a good way to handle it better.

Posted in Drawing, Graphic Design | Tagged , , , , | Leave a comment

Daily Sketching Day 1…

I’m going to try to get this working a little better than this.

5 quick sketches of a happy face, rotated sideways

Just was trying to do a very basic happy face.

sketch of face, with vector lines drawn on it.

Working with doing some converting my hand drawn sketches, into a vector image. I have created a custom brush that I am using, and this is starting to come together.

Posted in Uncategorized | Leave a comment

sudo and su are very different…

I have been trying to get my computer updated since Friday (almost a week) and I usually use a command like:

sudo emerge -uDaNt @world

When I want to do an update of my “world”. To me this should be very close, if not practically identical to:

emerge -uDaNt @world

And I have found that in a lot of ways, they are very different. I had been having a number of packages which I have been unable to update with the previous command. And someone told me “don’t use sudo”. Which to me sounded like a “really bad idea” as I understood it, because sudo is supposed to allow a person to run a command as another user (usually root) without having to log in on that user’s account.

Apparently, and this is probably a good option, is using:

sudo -i emerge -uDaNt @world

is almost the same as using the “su” version, but not quite.  So, if when using “sudo” you run into problems, there is a good chance that doing “su” will fix this.

Honestly.  This is mostly just a quick note to myself.  By writing this down like this, I remember it far better.

The way I ended up breaking things, and then trying to find something to fix it wasn’t really pretty, but it seems like now I have got the things that I was having so much trouble with for weeks coming up.  This should be the last bit of this part of the update process, and I am working on package 6 of 18.  But it’s a huge package, so that is likely to take a few hours, so I will sign off with this.  I do think I will need to fix a few other things, which I will write more about shortly.  I have a “new” kernel that I need to get working correctly, and somehow in this process, I have managed to break grub badly enough that I’m having to manually start my boot.  But those are for Tomorrow, or Saturday.  Tomorrow is a Open Psychology Work/Drop in day, so may not be working on this stuff in the foreground during that time (10:00-15:00 Pacific Time (Pacific Daylight Time this Friday, and until after the first Sunday in November, thus GMT-7 (or UTC-7 if you prefer that designation))).

So, see you tomorrow for the stream (if it actually works).


Posted in Linux | Tagged , , , | Leave a comment

Setting up QEMU/KVM virtual machine…

This is an odd one.  I am in the midst of setting this up, but I am working on a few different things right now.  First, I needed to get QEMU/KVM up and running, so I looked at this page about setting things up for the Gentoo host.  This looks like it is “mostly correct” at this point, as I have got things up and running.  But the “min size” that they suggest is too small.  I would go with the default qemu 20GB disc to start off, but if you use qcow2 it may be preferable to the suggested “raw” though I’m not sure.  It’s hard to be sure about that.

After having that setup, I ended up installing from Gentoo Handbook. Using the latest “minimal” install CD (it’s about 3 days old).  I looked at the Gentoo Guest Handbook.  And am in the process of setting up GRUB on the guest.  Looking at the two previous posts there are a few things that I missed on the first one (install media, and getting Stage 3).  I need to install kernel, and install grub, and see if this boots.  At that point, if I am successful, I will be quite happy to say that I can now use that as a default VM to build off of.

I wish that this was ready to post, and had got to a point that I could say more.  I’m going to save a draft for now, and see what happens shortly.

I have this virtual machine up and running, I have cloned it, and will be working on getting LedgerSMB working from the base system with a gentoo ebuild which will hopefully allow for installation with a relatively simple install command.

It seems that it worked.  But figuring out networking has kept being a bit of a problem.  I finally found it.

Posted in Computer Support, Linux, Virtual Machines | Leave a comment

More notes on Gentoo install (cheatsheet stuff)…

When I last wrote about my process for getting my machine up and running I was getting the system updated to the latest version of software.  That was a while ago.  But there are a few more things that need to be done before the computer really is bootable, though I have found the order is probably somewhat less important than the documentation suggests.

Continuing on

There are a few steps that are still needed.  Setting up timezone is next on the list I have, then setting up locale, setting up fstab, and there is where my notes get really fuzzy…  But GRUB is what I next have notes on, and that ended up being messy…  That will be a separate post…  But at the end of this, I have a few additional packages that I found I had to install.

Timezone Setup

ls /usr/share/zoneinfo
echo "America/Vancouver" > /etc/timezone

This first line points to where the timezones are defined. The second how to set it (though this itself doesn’t set it right now). The example is what I have used.

Setting Locale

This sets a bunch of different things, it needs to be set, so you need to go through a bit of a process.

vi /etc/locale.gen
source /etc/profile
export PS1="(chroot) $PS1"

The first is editing the locale.gen file, which says what you are running for locale on the system. Then you run locale-gen to create it. The remaining commands are getting you into the newly created locale settings.

Kernel stuff

Creating and installing a kernel is needed to get your system working. Complete instructions for setting this up will require at least one other post. There are a few commands that will get you started for setting up your kernel.

emerge --ask sys-kernel/gentoo-sources
ls -l /usr/src
emerge --ask sys-aps/pciutils

The first command gets you the kernel sources, there are other options for this, but this is the recommended one. The next line checks to see if you have your symbolic link (symlink) set correctly. Then you install the pciutils which gives you the command lspci which can help you to identify your hardware which you’ll need support for.

After you have that information you need to make your new kernel. To do so you will need to go through the process that I have listed as:

make menuconfig
make modules_install
make install

This is a very brief list of commands to go through, but the figuring out what you need to do with the configuration in make menuconfig is probably the hardest part of it. Also, there may be other steps, for example I need to mount my /boot partition before the make install stage.

Setting up fstab

The next thing you need to do is setup fstab. I don’t have any notes here, but you need to have your partitions that you need to run the system listed so they get properly mounted. I do not mount /boot as I mostly don’t need it, and changes that happen there can be a problem, but I still put an entry in for it, because then I can do mount /boot when I need to do that.

Setting up GRUB

Setting up grub should be fairly easy. You need to install the grub package, then install grub to boot, and then create your grub.cfg file.

This was not what happened for me. I will write a post about how I ended up setting up grub, it could be coming shortly. Also, I will need to write something up about setting up the new video card. That was an adventure too.

Useful basic function packages

There are a few packages that I think are important and rather helpful that I installed manually.

  • vim
  • gentoolkit
  • mate-terminal
  • kterm
  • lm_sensors
  • dmidecode
  • pciutils
Posted in Computer Support, Linux | Tagged , , , , | Leave a comment

Gentoo Install Notes

I was working on installing gentoo on a new machine (that will eventually replace this machine I am typing this on) and I was going through the Gentoo Handbook and kept running into problems (I have (and will explain) figured them out) so kept having to go through the same steps and was looking to create some notes.  Initially I wrote these notes in my notebook.

What I did wrong

Gentoo uses a “stage 3” install at an early part of the installation and careful selection of the correct (or close enough to correct) stage 3 is important.  I picked one that on the download stage 3 page it points to that looked “closest” to what I wanted, but really the one I wanted needed to be downloaded from the complete list of stage 3 downloads.  I believe that I am on my way now.

My Cheat Sheet

Here is what I have made notes of the steps involved, with a bit better explanation about why I am doing the various things.

Mounting system root partition

I mount my root partition as one of the first things that I work from on the new system.

mount /dev/sda5 /mnt/gentoo

My device is unusual, it is usually /dev/sda4 for most partition layouts, but for compatibility reasons, and to handle blocking off “reserved” space on the SSD, I have needed more than 4 partitions, which leads to 4, turning into 5, with the spare space on partition 6.

Setting Date

Setting correct date is important, and I’ve found that my system doesn’t have the correct date, so:

ntpd -gq

The first command gives the current date, and you might have a correct date set, the second one sets the date to the date using the ntp protocol. It also starts the daemon running.

Installing Stage 3

Here is where I screwed up, as noted above. I had a stage 3, which it wasn’t easy to switch to a different one. I have replaced that now (and am working on getting it properly updated).

tar -xjpvf stage3-x32-20170803.tar.bz2 --xattrs --numeric-owner

editing make.conf

I have worked on editing the make.conf file which controls how emerge/portage builds new (undated, rebuilt) packages:

CFLAGS="-march=native -pipe -O2"


You need to copy the DNS information before you chroot into the new system (or you won’t have working DNS) so the simple command:

cp -L /etc/resolv.conf /mnt/gentoo/etc

The use of the -L is helpful in case the /etc/resolv.conf is a symbolic link, it will copy the contents, rather than the link.

mounting other filesystems

The other filesystems need to be mounted so they will be in the right places when you chroot to the new system.

mount /dev/sda2 /mnt/gentoo/boot
mount -t proc /proc /mnt/gentoo/proc 
mount --rbind /sys /mnt/gentoo/sys 
mount --make-rslave /mnt/gentoo/sys 
mount --rbind /dev /mnt/gentoo/dev 
mount --make-rslave /mnt/gentoo/dev

The first one is to have your boot partition mounted when it is needed later in the process. The other ones are mounting the proc, sys, and dev filesystems where they will be looked for in the chroot system which you will be entering next.

Entering and setting up chroot

You now need to enter the new environment, you have 3 lines to enter to do so:

chroot /mnt/gentoo /bin/bash
source /etc/profile
export PS1="(chroot) $PS1"

The first line is what puts you in the new install, the next line sets the usual things which you expect when you log in, and the third simply changes the command prompt to remind you that this is the new system.

Setting up portage repo

This is best to do as two steps (I have tested it):

emerge --sync

This will update you to the latest version of portage, the first line taking the latest snapshot, and the next updating to the latest live version.

Checking News items

When you do this, you likely will get some news items which show up, these are supposed to be important to note:

eselect news list
eselect news read N 
eselect news read

This first line lists the news items, the second if you see one which you think you should pay special attention to can be used with N replaced by the item number, the third, will make sure that it doesn’t keep telling you about the same news items.

Setting your profile

This is a similar process to the news one, but this will set how you will be using the system. The commands are:

eselect profile list
eselect profile set N

Here the N is the profile that you want to use. Depending on what you ended up selecting as your stage 3, you may end up with a number of options which will not work (without a lot of fiddling). I recommend before you go to the next step of upgrading your system (which will mean new software when you have changed the profile you are using) checking to make sure that you have selected the correct one.

Updating system

You will need to update your system to the new (or updated profile if you happen to have not changed your profile). The quick (for me) means is:

emerge -uDaNt @world

depending this could end up not working, so if it does I would recommend doing the update in a more phased approach:

emerge -a1 portage
emerge -uDaNt @system 
emerge -uDaNt @word

I should talk about what those options mean, these are all one letter options so they string together like I have used them:

-a ask before proceeding
-u update atom listed
-1 oneshot — this does not add package to @world set
-D check "deeply"
-N check to see if the use flags have been updated since you installed packages
-t Display as a tree.  This also lists the packages with the first package to install on the bottom of the list

Future updates to this

This is the point that I am at with my install, so I will update this with further steps in getting things up to date.

Posted in Computer Support, Linux | Tagged , , , , | Leave a comment

Datse Multimedia Podcast – Episode 2 – Recording

Here we are having a new podcast episode, this is the actual episode.  Previously I posted a version of the script (which is what I worked from to record it), but found enough errors with what I had written to decide to post a new version.

Episode 2 – Recording (PDF – Script PDF, not actual transcript, and little to no attempt has been made to keep it accurate)

About this episode

Hello.  While I get a bit more of the podcast episode actually saved how I hope I want it (let me know of any issues you experience, or any comments on the content, or whatever) to be like, I’ll write a little bit about this podcast episode.

I am trying to focus on essentially two things, one to get better at handling the way I am structuring the podcast (the content of it), and secondly (and hopefully more importantly) to talk about the process of recording a podcast episode.

This episode is still quite a bit longer than I would like episodes of this sort to look like.  But I’m still trying to figure out just how to better handle that.

Posted in Audio, Episode, FLOSS, Podcast | Leave a comment

Podcast coming up…

I am working on the second (or third if you include “episode 0”) podcast episode.  Here is the script I will be working from, though I never really follow it.  I just like to write to get a better idea of what I’m saying.

Episode 2 – Recording

Posted in Audio, Podcast, Site News | Tagged , , , , | Leave a comment