HTML With Daniel Piechnick
Learn HTML and CSS with Daniel Piechnick (2012)
Behind what you see on a web page, is a page of (usually HTML) code. This fairly simple code contains the information for the contents and layout of the page. Your web page editor will create this code for you.
You don't need to know HTML unless you're using a web page editor, and want to alter the design of your website.
Most web page editors have a Code view button, so you can see your code. The "Split" view button shows you your page and its code, at the same time.
HTML is basically made up of text, and "tags".
The top box here shows you a piece of HTML code.
The box below it shows how that code would look if you viewed that code in your browser.
<p>Welcome to HTML with Daniel Piechnick!</p>
<p>Thanks for visiting.</p>
In this case, the text is surrounded by the <p> tag. This just makes the text into a paragraph. Notice that each paragraph starts with <p> (the opening tag), and ends with </p> (the closing tag). Most tags work this way.
Let's use another tag.
<p>Welcome to Website Setup Guide!</p>
<p>Thanks for visiting.</p>
<p>You can learn how to set up a website here.</p>
Here, I've also used the <h1> tag. It just makes some big text. Use this for headers. Just like the <p> tag, this tag starts with <h1> and ends with </h1>.
Now that you've got the hang of this, let's use a whole lot more tags.
Tags can be inside other tags.
<h1>Learn about HTML!</h1>
<p>At <em>Website Setup Guide</em>, you can learn how to use HTML.</p>
<h2>More things to learn</h2>
<p>There's <strong>lots</strong> more to learn about HTML.</p>
<h2>Here's another subheader</h2>
<p>And another paragraph of text.</p>
I've used a few new tags here. <h2> is a smaller header. Typically a page will contain one <h1>, and multiple <h2>'s. You can go to <h3> and <h4> etc in really long documents.
<em> is emphasis. It italicises your text.
<strong> makes your text bold.
<img src="orange.jpg" />
<p>Visit <a href="http://websitesetupguide.com">Website Setup Guide</a> to learn more about oranges.</p>
The img tag inserts an image. The src= part is the name of the image file. Also notice that the img tag has no closing tag. It closes itself. That's what the / at the end is for.
The a (anchor) tag inserts a link. The href= part is the web address the link goes to.
HTML really is that simple. Now that you know the basics, you should now be able to look at the HTML code of most web pages, and have a good idea of what's going on (right-click the page, and click "View Source"). If you're using my template, in a web page editor, have a look at the HTML code of the page.
The examples here have been very drab. That's because they're just HTML. The next step is to add some visual styles to the HTML, to make an attractive web page. To do this, we use CSS, or Cascading Style Sheets. CSS is stored in a separate file to the HTML, and is a different language to HTML.
If you like, you can continue on and learn CSS now.