HTML: Let’s Take It From The Top, People
Written by Allison Day - December 17, 2009 16 Comments
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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
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 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
/*
* Some text here.
*/
?><?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? (The default WordPress header has no navigation, but here on Sirius Graphix and in Sirius Steel theme, the navigation is right up there under the logo.) 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 <?php get_header(); ?> 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 <head></head> tags in your header.php file. So stay tuned! There’s a whole lot more for us to talk about.
Related posts you might also like:
Read the Comments
16 Outstanding Responses to "HTML: Let’s Take It From The Top, People"
Scott Roche on December 17, 2009 at 7:46 am | Permalink
Looking forward to learning more!!
Deb Dorchak on December 17, 2009 at 8:19 am | Permalink
Hey Scott! Thanks for dropping by. You know, Allison is really knocking me for a loop with this series. I find it refreshing to read about coding in easy to understand terms. I told her that when I worked on code before it was like learning to play music by ear. I knew certain things worked when I changed them, but didn’t know *why* those things were there to begin with.
Like I’ve said many times before, I know just enough code to be dangerous
Great job, Sushi!
Scott Roche on December 17, 2009 at 11:03 am | Permalink
Hey Deb! glad to see your new project is starting off with such a BANG. I wish you guys much luck (not that you need it with all the stinking talent you guys have).
Scott Roche’s last blog post… Morality and Righteousness
Wendi on December 17, 2009 at 11:12 am | Permalink
Hey Scott,
Who you calling Stinky!!
It’s wonderful to see you here. Thank you so much for coming by. We hope you will be a regular visitor and commenter and bring a few friends too if you think anyone would enjoy what we have to offer. Sushi is planning on wowing us once a week with techie school ( I am already learning more in two weeks then two years as a blogger) and the rest of us will have our day with one day left for guest posts. So come by often to see what we are up to. Better yet, subscribe! We’ve missed hanging out with you!
Scott Roche on December 17, 2009 at 11:16 am | Permalink
Done and done milady. You’re quite welcome and I shall be sending people here forthwith. Can’t wait to see what you guys bring.
Scott Roche’s last blog post… Morality and Righteousness
Martin on December 17, 2009 at 11:56 am | Permalink
My problem with coding is the same one with music. I can read the notes but I’m not good enough to play or even write it.
And even if I want to code there are a million more possibilities to do it faster and better than me.
But I’m looking forward to this series. (Hey, I would read anything from Sushi.)
Deb Dorchak on December 17, 2009 at 2:47 pm | Permalink
@Martin: I’m with you on the music thing. I think that’s a great analogy. The whole key is what you said:
“…there are a million more possibilities to do it faster and better than me.”
No shame in calling in a pro. That’s what we’re here for
@Scott: Oh, we gots PLENTY to bring! You shall be amazed.
Allison Day on December 17, 2009 at 2:48 pm | Permalink
Scott – It’s great to see you here! I’m looking forward to geeking out every week, teaching you all about the coding side of things. And… hey. We’ve got some very pleasant-smelling talent here, thankyouverymuch.
Deb – You’re making me blush. Again. That’s exactly my goal – to educate people in a way that’s super easy to understand, so they can confidently change the code of their websites without worrying that everything’s going to explode in their face.
Wendi – It always makes me happy to hear how much you’re learning from my posts, and hopefully you’ll continue to learn much, much more from my ‘techie school’ posts.
Martin – I’m so happy that you stopped by! Despite several years of piano lessons when I was very young, and a mother who’s an amazing piano player, I never actually learned to read music… so I know exactly what you mean. But my hope is that these posts will be informative enough and easy enough to understand that they will help learn to code well enough to confidently write it. Looking forward to seeing more of you around here!
Deb Dorchak on December 17, 2009 at 2:50 pm | Permalink
@Sushi: Here’s a question for you (and it could be a post in itself): What programs do you recommend for people starting out in code? I use Dreamweaver, but I know not everyone can afford that. What are some alternatives?
Brett Legree on December 17, 2009 at 9:28 pm | Permalink
TextMate and TextWrangler are good on OS X. Notepad++ is pretty good on Windows.
jEdit is a cross-platform editor that I also use. I suppose what I’m saying is “I use everything!” – there are many options out there, so try a few and see what you like.
(I think out of the ones I mentioned above, only TextMate is not free.)
Brett Legree’s last blog post… 6 weeks 2 days.
Deb Dorchak on December 17, 2009 at 9:36 pm | Permalink
Brett! I feel like it’s homecoming week here! “Use everything.” Yup, good advice.
Allison Day on December 18, 2009 at 1:51 am | Permalink
I agree with Brett (Hi, Brett! Welcome!
)… I use TextMate and Smultron (free, but not quite as nice) on Mac OS X. And, as he said, Notepad++ is a good option for Windows.
I’ve never used Dreamweaver, but from what I’ve heard, I understand it can be used both as a text editor where you code by hand, and a WYSIWYG (What You See Is What You Get) editor where you never actually have to touch the code. (Please, correct me if I’m mistaken.) The aforementioned programs are all text editors, so they do require you to actually work with the code. (They are what I use when I’m editing WordPress files for our websites.)
Having never used any sort of WYSIWYG editor, I can’t recommend any. Personally I would recommend learning to code by hand from the very start… but of course I’m biased, since that’s how I’ve coded ever since I first started. Perhaps, Deb, you and I could collaborate on a post (or a short series of posts) discussing various pros and cons of using something like Dreamweaver vs. coding by hand when you first begin to develop websites.
Brett Legree on December 18, 2009 at 9:49 am | Permalink
@Deb,
Glad to be here! I know it sounds crazy, but there are so many good programs that it’s easy to find one for every use.
@Allison,
I forgot Smultron – I use it sometimes too (and I hope that someone takes over development of it, it is too good to abandon). I also use xPad for light editing (blog posts… when I post…) and I’ve played with Aquamacs (aka Emacs for Mac).
If we’re talking strictly blog editors, I have used Windows Live Writer (which is a WYSIWYG program) and I played with Ecto on my Mac (but I didn’t like it enough to buy it).
I guess I like to edit the code myself and then see it “live” – more control, plus I learn something along the way.
That sounds like a great idea for a post or a series of posts (let’s talk!)
Brett Legree’s last blog post… 6 weeks 2 days.
Rose on December 18, 2009 at 12:37 pm | Permalink
The closest I ever got to coding was helping my younger sister figure out how to get a cool background for her Neopets page. I’m already starting to see that coding doesn’t have to be as scary as I thought it was.
The secrets of the coding universe . . . revealed!
Bless you, Sushi, you virtual Prometheus.
Allison Day on December 18, 2009 at 5:49 pm | Permalink
Brett – I’m the same way… I’d rather have more control over the code, and at the same time develop my skills even more in the process.
Rose – Oh man, Neopets… that just brought back a ton of memories. (That was… hm… middle school, I believe. Almost everyone in my family played.)
I promise, the more you learn about code (and it doesn’t take much), the less scary it is. And I’m of the belief that knowledge should be shared freely. So… virtual Prometheus? Sure! (So long as nobody ties me to a rock, please. I prefer to keep my liver where it is.)
One Trackback
[...] This post was mentioned on Twitter by Scott Roche, Karen D. Swim. Karen D. Swim said: HTML: Let’s Take It From The Top, People | Sirius Graphix http://bit.ly/8Ncoy9 [...]