My PHP journey part 7.

Laying out a page template is kind of interesting – and kind of more in-line (from what I understand) with building a WordPress theme. This is going to be a short blog post because I am already embarking on something a bit more exciting… where this could be explained in a bit more detail.

Take a look my article about HTML to get a basic gist of this…

<!doctype html>

<html lang=”en”>

<head> <!– Google likes <title>’s contents to be in desc. order of specificity to the page –>

<title><?php echo $pageTitle; ?> | my blog</title> <meta charset=”utf-8″ /> </head> <body>

<h1><?php echo $pageTitle; ?></h1>

<?php echo $titles; ?>

</body>

<footer>

<?php get_footer; ?>

</footer> 

</html>

Again, this is a very rough generalisation, so any hardcore coders out there – resist the urge to punch the screen, or me! I’ve got some very specific plans for what I want to do with what I am learning and my next project.

I’ll back soon with some awesomeness!

The structure of an HTML document

When you’re writing a HTML document, there is a structure to follow.  You can create these documents using a simple text editor such as Notepad or Notepad++

The HTML document looks like this…

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>TILE</TITLE>
</HEAD>
<BODY>
<B>CONTENT</B>
</BODY>
</HTML>

This looks pretty complicated at first glance. But let’s break it down…

<!DOCTYPE HTML> Very simple, this is just what the document type is, it’s a html document.

<HTML></HTML> This is an open HTML tag, this surrounds the document, it’s all it does. It goes at the top and at the bottom.

<HEAD></HEAD> Here you would put all of your meta data, java or styling into the web page.  Don’t worry, we’ll come to those later.

<TITLE></TITLE> This is the title of the page, this is what would appear at the top of your browser window.

<BODY></BODY> This is the actual content of the document.

Once you save this, be sure to save it with a .html suffix, so for example…. “something.html”

Read up on how to create things inbetween the <BODY> tags here.

An introduction to HTML

HTML stands for…

Hyper Text Mark-up Language.

HTML is made up of…

– Text content (what you see)
– Markup (what it looks like)
– References to other documents (videos, images…etc)
– links to other pages

Let’s get started.

The HTML markup – tags and elements

<name> content </name>
HTML can be made up of opening tag and a closing tag

The whole of the above put together is known as an element.

<b>Contents</b> – b for bold.
<em>Contents</em> – em for emphasis or italics.

HTML Attributes

Attributes have a name and value.

For example:

<tag attr=”value”>Contents</tag>

The most common attribute, is the link.

<a href=”http://www.whatever.com“>derp</a>

<a> stands for anchor.
href‘ is the attribute name, ‘www.whatever.com‘ is the value.

Image tags

<img> – images’

SCR is the source of the image, either your server or someone else’s.
ALT is the text which isn’t displayed when the image doesn’t load. Believe it or not, it’s actually for blind people.

The whole image tag looks like this…

<img src=”url or a link goes here” alt=”text”>

There is no closing end tag. This is known as a void tag, there is no content, but there is, if you know what I mean!

Images appear in-line with text, unless specified.

Whitespace

You can force lines to show underneath each other and create a whitespace or a line.

<br> – again it’s a void tag.

You can also use a <p> tag. P for paragraph. This is not a void tag. It looks like this.

<p>content</p>

Why do we have two different ways of doing the same thing?

The <b> tag is inline, everything is line based. Where as <p> is known as a block tag and that creates a box around the text and pushes things outside of it down a line.

SPAN and DIV’s

<span>text</span> is an inline tag.
<div>text</text> is a block tag.

They are both ways of keeping content in shape, similar to the <p> and <br> tags.

A <div> will create a new line and push everything down a peg. Much like the <p> tag.

Want to see what an HTML document looks like? Click here.