There are many ways I could go about teaching you the technical side of websites. I could easily dumb everything way down and only tell you what you absolutely need to know to customize a WordPress theme.
But I think… no, I know you’re smarter than that. And you deserve better. So we’re going to start at the beginning – we’re going to take it from the top.
Out With The Old, In With The New
The very first line of every single website out there should be something like this:
<!DOCTYPE html>
This tells your web browser what version of the markup language you’re using. Hold on, technical term… markup language? HTML or XHTML are what we refer to as markup languages. But what’s the difference between the two?
Don’t worry about it. Just keep your code properly formed. Make sure tags are nested properly, always closed, etc. (don’t worry, we’ll go into this more in a future post). If you’re not a super-advanced web developing guru, the differences between HTML and XHTML aren’t going to be important to your code.
But why is the doctype declaration important? In the past, people had to write messy, technically incorrect code to get their websites to display properly in old versions of Internet Explorer.
These days most browsers are W3 standards compliant, and there’s no need to write sloppy code to make things work. The doctype declaration is there to tell the browser whether it needs to try to make sense of an older website or if it can just assume that it’s a modern website where the code is properly formed.
If you’re familiar with HTML/XHTML, W3Schools has a pretty decent explanation of what the different doctype declarations mean. And if you really want to geek out, download the actual doctype declaration – it defines every single tag and attribute for the markup language you’re using.
If you’re new at this whole coding thing, just remember this: a doctype declaration line should appear at the top of every webpage.
You also might notice a line that looks something like this xmlns="http://www.w3.org/1999/xhtml" in the <html> tag right after the doctype declaration. If you’re using XHTML (as stated in your doctype declaration), this is required – it tells the browser that you’re using XHTML rather than another version of XML. If you’re using HTML instead, this line isn’t necessary.
Teacher, Teacher! I Have a Question…
“You said that the doctype declaration has to go at the top of every webpage. But… I looked in my WordPress theme. Only a few of the files in there have the doctype declaration at all. Did they do something wrong, or are you lying to me?”
Neither. That, my dear, is the beauty of PHP. If you look, you’ll find that the name of nearly every single file in your theme ends with .php. PHP files are, in essence, the main files that produce what you see in the web browser. For now we’re going to ignore the styling (CSS) and special effects (JavaScript), and just focus on basic functionality.
Go look at the file called header.php. You’ll see that it has the doctype declaration at the top. (But what if it doesn’t? Sometimes you’ll see something like
<?php /* * Some text here. */ ?>
at the top. That’s okay. We’ll go into what that is in later posts, when we talk more about PHP.) Now go check out almost any other file in your theme (like index.php). You’ll see that it says <!--?php get_header(); ?--> at the top. This tells you that it’s taking the header.php file and putting it in front of everything in this file.
Piecing it Together
Think of your webpage as a puzzle. Every page has certain pieces that are always there – the header, the footer, the sidebar, the content. The content is usually going to be different on every page. But the header and footer will probably always be the same. The sidebar might be different on, say, the front page and the inner pages, but there usually will be at least a few pages that all have the same sidebar.
Technically, you could put the same block of code for the header at the top of every single file, and do away with the header.php file altogether. After all, it’s not that difficult to copy and paste, right?
However, let’s say you want to change something about the header. Want to put your navigation up there? You could go into every single file and add the code for the navigation. But if you forget to update a page or mess something up… that’s a headache you don’t need to deal with.
Which is why we love the header.php file. You only have to change the code in that one file, and it applies the changes to every single webpage that has at the top of it. Same goes for the sidebar.php and footer.php files. Isn’t it wonderful?
But Wait, There’s More!
Next week, we step into the head of the webpage. That’s right, we’re going to dive into all that stuff between the tags in your header.php file. So stay tuned! There’s a whole lot more for us to talk about.
4 Comments
Pingback: HTML: Keep a Good Head On Your Shoulders – SushiCodes
Pingback: HTML: A Classy Identity – SushiCodes
Pingback: PHP: Getting Functional – SushiCodes
Pingback: HTML: An Intro To Headers – SushiCodes