In the first video in this two-part series, we’ll take you through building a webpage from scratch by using a good text editor.
Don’t Fear Starting
From Scratch Part 1: HTML
Hello my patient futurenerds, (finally) time for another installment of Don’t Fear the Internet! In this episode, we cover a lot of ground. I go over a few text editor options and recreate our example site from thin air using just basic html. By the end of this video, you should be able to go forth and make a basic html webpage and by the end of the NEXT video, set up a css style sheet and add some pizazz to your page. Apologies for the audio being a little wonky occasionally—we don’t have the fanciest microphones here—and to explain what I mean by “weirdo accent characters” toward the end of the video, here’s a handy link for all the codes to type accented characters and less common glyphs in html.
Various Text Editors
As recommended by Twitterfolk
We can only personally recommend a few
As recommended by Twitterfolk
We can only personally recommend a few
- PAID
- Coda
- Textmate
- Espresso
- CSSEdit - CSS only
- skEdit
- BBEdit
- Zen Coding
- Coffee Cup
- Taco
- E-Texteditor (windows)
- FREE or free-ish
- MacVim
- Notepad++ (windows)
- Fraise
- Smultron
- Aptana
- Sublime Text
- TextWrangler
- Geany
- Komodo Edit
- NetBeans IDE
There are two types of HTML tag: paired and unpaired. I think the best way to explain the difference is that paired tags go AROUND the thing they’re describing, whereas unpaired tags ARE the thing they’re describing.
As an example of a paired tag,
<p>marks a portion of text as a paragraph, so it and its corresponding closing tag go around that text. Similarly, the<ul>tag denotes a list, so the pair go around the list items.In contrast, unpaired tags don’t ‘contain’ anything, they just are. For example, the
<br>tag is simply a marker that says “here is a line break” – it doesn’t surround or contain anything.Another more complex example of an unpaired tag is
<img>: it does not surround any image data – that would be difficult to type in a text editor – it is simply a marker that says “here is an image”. Unlike the<br>tag it almost always has attributes that provide more information, such as the source of the image data, and possibly its dimensions.I have a question: in the video you ended every line except for the image line that you inserted. That line read: src=”http://www.jessramsay.com/design/NK/images/nk6.jpg”>
Why does this line not need to be ended?
Hey, Sam. As Andy pointed out above, some HTML elements are “unpaired”, which means instead of containing content, they ARE content. The <img> tag is a perfect example because it is an image, it doesn’t contain an image. A line-break (<br>) is similar in that it doesn’t contain a line-break, it is the line-break. Here’s a list of the common unpaired HTML tags:
Is it possible to use Dreamweaver as a text editor?
Absolutely!
If you are building your site on your desktop using a text editor, do your images need to already be online so that you can enter the source into the code? What are the steps to do this?
Your images do not need to be online first in order to include them. The easiest thing to do is to create a folder for all of your website’s files. Inside that main folder store your HTML, CSS and any other document type. Then create another folder inside the main folder called ‘images’. Throw all of your images into that folder. When you link to them in your code, you can user a relative path instead of a global path like so:
. This ensures that when you finally upload all of your files to your hosting server, those relative paths still work.
with regards to paired or unpaired elements … is it not a good practice to “close” the tags in this fashion? (or am I just too old-school, now):
<br />
<hr />
<input stuff inside />
<img src=”blah/blah” />
<link src=”blah” />
<meta stuff />
cheers.
My understanding is that it’s not necessary unless you’ve chosen to use XHTML strict as your doctype. It’s my further understanding that the W3C is moving away from actively developing XHTML in favor of HTML (namely HTML5) and it’s further variants. So, long story short, most people won’t have to worry about this. If this is something you have to worry about then you’re working at a far more advanced level than these tutorials are meant to cover, so bravo!