Thursday, July 5, 2012

CSS and HTML 6: Headings


The p tag is just the start of text formatting.
If you have documents with genuine headings, then there are HTML tags specifically designed just for them.
They are h1h2h3h4h5 and h6h1 being the almighty emperor of headings and h6 being the lowest pleb.
Change your code to the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
	<title>My first web page</title>
</head>

<body>
	<h1>My first web page</h1>

	<h2>What this is</h2>
	<p>A simple page put together using HTML</p>

	<h2>Why this is</h2>
	<p>To learn HTML</p>
</body>

</html>
Note that the h1 tag is only used once - it is supposed to be the main heading of the page and shouldn't be used multiple times.
h2 to h6 however, can be used as often as you desire, but they should always be used in order, as they were intended. For example, an h4 should be a sub-heading of an h3, which should be a sub-heading of an h2.

CSS and HTML 5: Paragraphs


Go back to your text editor and add another line to your page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
	<title>My first web page</title>
</head>

<body>
	This is my first web page
	How exciting
</body>

</html>
Look at the document in your browser.
You might have expected your document to appear as you typed it, on two lines, but instead you should see something like:
This is my first web page How exciting.
This is because web browsers don't usually take any notice of what line your code is on. It also doesn't take any notice of spaces (you would get the same result if you typed "This is my first web page       How exciting").
If you want text to appear on different lines, you need to explicitly state that.
Change your two lines of content so that they look like this:

<p>This is my first web page</p>
<p>How exciting</p>
The p tag is for paragraph.
Look at the results of this. The two lines will now appear on two lines.
Think of the HTML content as if it were a book - with paragraphs where appropriate.

Emphasis

You can emphasise text in a paragraph using em (emphasis) and strong (strong emphasis). These are two ways of doing pretty much the same thing, although traditionally, browsers display em in italics and strong in bold.

<p>Yes, that <em>is</em> what I said. How <strong>very</strong> exciting.</p>

Line breaks

The line-break tag can also be used to separate lines like this:

This is my first web page<br />
How exciting
However, this method is over-used and shouldn't be used if two blocks of text are intended to be separate from one another (because if that's what you want to do you probably want the p tag).
Note that because there's no content involved with the line-break tag, there is no closing tag and it closes itself with a "/" after the "br".

CSS and HTML 4:Page Titles



To add a title to your page, change your code so that it looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
	<title>My first web page</title>
</head>

<body>
	This is my first web page
</body>

</html>
We have added two new elements here, that start with the head tag and the title tag (and see how both of these close).
The head element (that which starts with the <head> opening tag and ends with the </head>tag) appears before the body element (starting with <body> and ending with </body>) and contains information about the page. The information in the head element does not appear in the browser window.
We will see later on that other elements can appear inside the head element, but the most important of them is the title element.
If you look at this document in the browser (save and refresh as before), you will see that "My first web page" will appear on the title bar of the window (not the actual canvas area). The text that you put in between the title tags has become the title of the document (surprise!). If you were to add this page to your 'favourites' (or 'bookmarks', depending on your browser), you would see that the title is also used there.

CSS and HTML 3: Tags, Attributes, and Elements


Tags

The basic structure of an HTML document includes tags, which surround content and apply meaning to it.
Change your document so that it looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
	This is my first web page
</body>
</html>
Now save the document again, go back to the web browser and select "refresh" (which will reload the page).
The appearance of the page will not have changed at all, but the purpose of HTML is to apply meaning, not presentation, and this example has now defined some fundamental elements of a web page.
The first line on the top that starts <!DOCTYPE... is to let the browser know that you know what the hell you're doing. You may think that you don't actually know what you're doing yet, but it's important to stick this in. If you don't, browsers will switch into "quirks mode" and act in a very peculiar way. Don't worry about this just yet, you can learn more about "document types" in the HTML Advanced Tutorial if you really want to. For the moment, just remember to shove this line at the top of your web pages and you're laughin'.
To get back to the point, <html> is the opening tag that kicks things off and tells the browser that everything between that and the </html> closing tag is an HTML document. The stuff between <body> and </body> is the main content of the document that will appear in the browser window.

Closing tags

The </body> and </html> close their respective tags. ALL HTML tags should be closed. Although older versions of HTML lazily allowed some tags not to be closed, latest standards require all tags to be closed. This is a good habit to get into anyway.
Not all tags have closing tags like this (<html></html>) some tags, which do not wrap around content will close themselves. The line-break tag for example, looks like this : <br />. We will come across these examples later. All you need to remember is that all tags must be closed and most (those with content between them) are in the format of opening tag → content → closing tag.

Attributes

Tags can also have attributes, which are extra bits of information. Attributes appear inside the opening tag and their value is always inside quotation marks. They look something like <tag attribute="value">Margarine</tag>. We will come across tags with attributes later.

Elements

Tags tend not to do much more than mark the beginning and end of an element. Elements are the bits that make up web pages. You would say, for example, that everything that is in-between and includes the <body> and </body> tags is the body element. As another example, whereas '<title>' and '</title>' are tags, '<title>Rumple Stiltskin</title>' is a title element.

CSS and HTML 2: Getting Started


Most of the stuff on the web is no different than the stuff on your computer - it's just a whole load of files sorted into a whole load of directories.
HTML files are nothing more than simple text files, so to start writing in HTML, you need nothing more than a simple text editor.
Notepad is a common text editor (on Windows this is usually found under the Programs > Accessories menu).
Type this in to your text editor:

This is my first web page
Now create a folder called 'html' in your C drive (or anywhere else you fancy) and save the file as "myfirstpage.html". It is important that the extension ".html" is specified - some text editors, such as Notepad, will automatically save it as ".txt" otherwise.
To look at HTML files, they don't even need to be on the web. Open a web browser such asFirefox or Internet Explorer and in the address bar, where you usually type web addresses, type in the location of the file you just saved (for example, "c:\html\myfirstpage.html") and hit return. Alternatively, go to the File menu of the browser, select Open, and browse for the file.
Pow. There it is. Your first web page. How exciting. And all it took was a few typed words.
We've said here to use a basic text-editor, such as Notepad, but you may be tempted to use a dedicated software program such as Macromedia Dreamweaveror Microsoft Frontpage.
You should be very careful when using these programs, especially if you are a beginner, because they often throw in unnecessary or non-standard code to "help" you.
If you're serious about learning HTML, you should read through a tutorial such as this first, so that you at least have a basic understanding of what is going on.
Software programs such as these will never give you the same control over a web page as coding by hand.


CSS and HTML 1: HTML Basic


This HTML Beginner Tutorial assumes that you have no previous knowledge of HTML or CSS.
It should be quite easy to follow if you work through each step, which are all brought together at the end, before moving on to the CSS Basic Tutorial.
The thing to keep in mind is that HTML and CSS are all about separating the content (HTML) and the presentation (CSS). HTML is nothing more than fancy structured content and the visual formatting of that content will come later when we tackle CSS.
If you have looked at other HTML tutorials, you might have found that they mention certain things that HTML Dog does not. This is because many methods are obsolete, non-standard or just plain bad practice. Getting into the frame of mind of doing things the right way from the start will turn in to much better results in the end.

Contents


CSS Introduction 3:Sample HTML and CSS files


Here we will show you a very basic page and the CSS file that it uses.
First we will use the following HTML code in order to make a simple page with a heading, table and a paragraph of text:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample Page</title>
</head>

<body>
<h1>Heading title of our sample page </h1>
<table border="1">
  <tr>
    <td><strong>Sample column</strong></td>
    <td><strong>Sample column</strong></td>
    <td><strong>Sample column</strong></td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad  minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip  ex ea commodo consequat.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad  minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip  ex ea commodo consequat. </td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad  minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip  ex ea commodo consequat. </td>
  </tr>
</table>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad  minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip  ex ea commodo consequat. </p>
</body>
</html>
 At this point, your page has no CSS file included and should look like this:
Now, let's add some styling to the page. First, add the following line between the <head> and </head> tags in your HTML file:
<link rel="stylesheet" href="sample.css" type="text/css" />
It will tell the browser to load a sample.css file from the same folder your HTML resides in.
Next you should create the sample.css file (a simple text editor will do just fine) and add the following lines to it:
body {
    font-family: arial;
    }
h1 {    
    background-color:#CCC;
    border: 1px solid;
    color:#39F;
    text-align: center;
    }

table {
    background-color: #F60;
    border: 1px solid #39F;
    width: 100%;
    }
td {
    border: 0px;
    text-align: center;
    }
p {
    color:#09F;
    text-indent: 20px;    
    }
In it, we have defined the elements of our sample page. As you can see, after each element we have set different properties. Now save the sample.css file and load your HTML page in a browser. It should look like this:
You can play with the colors, borders and all the other settings in order to get used to working with CSS files. They provide you with the power to create the design you want and the only limit is your imagination!