Because I’ve been spending all my time studying lately, the only thing I’ve had time to write is study notes. So I thought that I’d make the most of them, share a bit of my new knowledge with you, and give you a quick crammer’s guide to some of the topics from each of my subjects this semester. The information probably won’t mean a whole lot to you if you’ve never learnt anything about the topic before, but if you have, hopefully, this’ll clear up a few things for you.
This one’s about Web Programming. This subjects covers HTML4, HTML5, XHTML, CSS, JavaScript, PHP and a little bit of HCI.
Differences between HTML & XHTML
So, you’re probably aware of HTML. It’s the stuff that makes up (at least a little bit of) every webpage on the internet. HTML stands for HyperText Markup Language, and it’s actually a pretty simple language to learn. I implore you, if you don’t already know a bit of HTML, learn some!! It’ll come in handy, I’m sure. It’s not technically a programming language; you can’t write an app with it because there’s not way to execute anything. It’s what’s called a markup language, which means it’s for laying out and styling things.
XHTML, on the other hand, is something you’ve probably not heard of. Although related, it’s not to be confused with XML. XHTML stands for eXtensible HyperText Markup Language, which basically means it uses XML’s syntactic structure to allow extension and adaptability to HTML. Counter-intuitively, it’s actually much stricter and more rigid than HTML, or the Strict version of it is, at least. Here are the main differences:
- Must have DOCTYPE & XML namespace declared in head
- Must have
<html>,<head>,<title>, &<body> - Tags must be nested correctly/closed in the correct order
- All tags must be closed, even “empty” tags
E.g.
<img src="boo.jpg" /> - Tags and attributes must be lowercase
- Attribute values must be in quotes
- Attributes cannot be minimised
E.g.
<a disabled >not acceptable <img>must havealt=
CSS Pseudo
On top of HTMl, you have CSS, which stands for Cascading Style Sheets. This is the language that styles everything on the page to make it look nice. Mostly this is done by creating classes of elements, which all have a particular style applied to them. But CSS can be much more reactive and used much better for contextual styling if you know how to use it. There are two types of pseudo-selectors in CSS: pseudo-classes and pseudo- elements.
Pseudo-classes are special classes that an element can enter when it is in a particular state. The most obvious, and well known, of these is when you alter the appearance of links depending on if they’ve been visited, or not. There are also pseudo-classes for if a input is the focus, or is disabled.
To use them, you just add the relevant pseudo-class selector to the end your normal selector, like so:
a.navbar:hover{color: #313370;}Pseudo-elements are used to refer to areas relative to elements that would be particularly difficult to define normally. This includes the area before or after elements, the first child of an element, or even the last occurrence of an element. Usually, you’d have to define a specific class for these areas, but this way it’s all innate. This means less work for you, plus one less thing you have to remember to add on every page.
They’re used exactly the same as above, but here’s another example anyway:
p.article:first-line{font-weight:800;}A full list of pseudos can be found on W3Schools. It’s a good idea to investigate a few, as well as seeing some of the other crazily-specific selectors you can define (like select any elements with a particular attribute defined to a particular value, e.g. select all inputs that are disabled), as they might come in handy when you least expected!
PHP Tips
- All variables start with
$ @at the start of a line can be used to repress any errors about that line- Variables can be nested when being evaluated, e.g.
$foo = a; $a = red; $$foo = red; - Anything can be used as an index for an array, as long as it’s unique, e.g. both
$foo[bar], and$foo[2]are valid Print_rcan be used to dump the content of an array, including any nested items.- PHP or HTML files can be concatenated or combined into a PHP file by using the
include()orrequire()functions. The difference between the two is that if the specified file is missing,require()will cause the PHP to stop executing, while theinclude()will simply spit an error. There are also two equivalent functions that check that the file being added hasn’t already been combined in, calledinclude_once()andrequire_once().
Until Next Time,
Nitemice
Related articles
- Best Reasons to Convert HTML to XHTML (webdesign.answers.com)
Nitemice 
Reblogged this on Web Bloggers Red Design 2.0+.
LikeLike
Reblogged this on High on Science & Tech – H.O.S.T.
LikeLike
Spot on with this write-up, I absolutely think this website needs far
more attention. I’ll probably be returning to read through more, thanks for the information!
LikeLike