Website Construction for Visual Artists
HTML and XHTML Pocket Reference by Jennifer Niederst (originally, HTML in a Nutshell) is the book I originally learned HTML with. I carried a copy in my backpack until it was in tatters.
HTML, XHTML and CSS (Visual Quickstart) by Elizabeth Castro is what I assign to my beginning web-design students nowadays. I like it because of the ample visuals.
Years ago, I originally posted this tutorial outlining only oldschool (1990's-style) HTML, but I have retooled it to present basic HTML and basic CSS simultaneously. That should be no cause for alarm. Both scripting languages (notice that I said "scripting" and not "programming" -- there is no programming introduced in this tutorial) are very similar in syntax, and a rudimentary knowledge of both will allow you to create a handsome website. The main reason for this combination, aside from the fact that the 90's are over and done with, is that a single CSS document can control numerous -- even hundreds -- of individual HTML pages! By "control", I mean that the CSS document has directions for how backgrounds and text will be colored, the sizes of different types of fonts, the margins of the browser page, the margins/borders around blocks of content, etc. When a visitor clicks on each new HTML page, the browser reads the CSS document to know how to present that page (actually, the CSS information is cached -- "stored in short-term memory" -- by the browser, which makes things even quicker).
Originally, HTML was designed for sharing whitepapers between academics, with hypertext (text that is a link) that could allow these scholastic papers to interconnect, or supply connections to cited sources. It wasn't braced to handle the jobs we expect of it now: formatting pages, arranging images, embedding media players, etc. As a result, HTML pages became very overstuffed and clunky, and not always reliable across different platforms. The World Wide Web Consortium (W3C) created CSS as a remedy in the mid-1990's. It's similar to HTML, but it is designed primarily for handling presentation. When CSS is provided as a linked (external) file, it allows the HTML pages to be much slimmer and easier to look at, since they are reduced to their core job: providing content and links.
In fact, as you design your own page, you should make a habit of looking at these sources. This is how you "steal" other designers' scripting (it's not really stealing -- this is a time-honored and legitimate way to learn scripting, and to improve your website).
HTML is basically a shorthand language that triggers our browsers' pre-programmed abilities to format a page and its text content, call forth images, create links, and other such simple functions common to any page on the Web. It is not a "code" -- it does not require the HTML writer to teach the browser how to commit actions. Programmers must learn very rational languages to create programs (learning to think like machines while writing the code, in a sense). Making HTML pages is much easier. This site was created in HTML with CSS, using only a fraction of either language possibilities.
Let's say I open a text-editor (like Notepad, Wordpad or SciTE on Windows; Smultron or TextWrangler on Mac) and type* the following:
If I save it with a name like "webpage.htm" and drop it on my Firefox browser icon, I'll see the following:
The browser spits up all the text from my text-editor document, because browsers are very good at that. Unfortunately, my line-breaks didn't register. This is because a text-editor is much simpler than a word processor: line-breaks, extra spacebar spaces and tabs have no meaning. So, I'm going to add a bit of HTML (<br>) to create line-breaks:
Since browsers are good at spitting up the text that they read, it is necessary for me to hide my HTML in < > brackets. This <br> is an example of an HTML tag.
Just for kicks, I'm going to make the word "Holothuroidea" appear in italics like this:
The <i> tells the browser to "begin intalicizing" and the </i> closes the tag, so that the whole paragraph doesn't end up being italicized. Most often, the content that the viewer is seeing is being nested inside of HTML "opening" and "closing" tags.
Here's the new result in my browser (after I resaved webpage.htm and refreshed the browser window):
Now what I've made is a legitimate webpage -- meaning that it does function in a browser window -- but it's not a proper webpage. There is a simple protocol for laying out a webpage which allows it to be more sophisticated than my examples above.
The basic structure of an HTML document is as follows:
Everything must be properly nested within the HTML tags. Notice that the <html> </html> tags enclose the entire document (this tells the browser that the script is in HTML format). The majority of your HTML scripting and information will fall between the <body></body> tags.
Here's the sea cucumber example in a proper HTML document:
Under Webpage templates, I have provided a HTML document.
Next: HTML links Top
Basics of HTML
HTML and XHTML Pocket Reference by Jennifer Niederst (originally, HTML in a Nutshell) is the book I originally learned HTML with. I carried a copy in my backpack until it was in tatters.
HTML, XHTML and CSS (Visual Quickstart) by Elizabeth Castro is what I assign to my beginning web-design students nowadays. I like it because of the ample visuals.
XHTML is HTML, but written according to particular standards.
You needn't worry about it if your'e a beginner with web-design.
You needn't worry about it if your'e a beginner with web-design.
Years ago, I originally posted this tutorial outlining only oldschool (1990's-style) HTML, but I have retooled it to present basic HTML and basic CSS simultaneously. That should be no cause for alarm. Both scripting languages (notice that I said "scripting" and not "programming" -- there is no programming introduced in this tutorial) are very similar in syntax, and a rudimentary knowledge of both will allow you to create a handsome website. The main reason for this combination, aside from the fact that the 90's are over and done with, is that a single CSS document can control numerous -- even hundreds -- of individual HTML pages! By "control", I mean that the CSS document has directions for how backgrounds and text will be colored, the sizes of different types of fonts, the margins of the browser page, the margins/borders around blocks of content, etc. When a visitor clicks on each new HTML page, the browser reads the CSS document to know how to present that page (actually, the CSS information is cached -- "stored in short-term memory" -- by the browser, which makes things even quicker).
Originally, HTML was designed for sharing whitepapers between academics, with hypertext (text that is a link) that could allow these scholastic papers to interconnect, or supply connections to cited sources. It wasn't braced to handle the jobs we expect of it now: formatting pages, arranging images, embedding media players, etc. As a result, HTML pages became very overstuffed and clunky, and not always reliable across different platforms. The World Wide Web Consortium (W3C) created CSS as a remedy in the mid-1990's. It's similar to HTML, but it is designed primarily for handling presentation. When CSS is provided as a linked (external) file, it allows the HTML pages to be much slimmer and easier to look at, since they are reduced to their core job: providing content and links.
HTML
HTML (Hyper Text Markup Language) is a simple language that tells Web browsers how to format data. If you click "View" at the top of your browser and select the option to view the "Source" (or "Page source"), you can see the HTML scripting (and other forms of scripting) that make up webpages.In fact, as you design your own page, you should make a habit of looking at these sources. This is how you "steal" other designers' scripting (it's not really stealing -- this is a time-honored and legitimate way to learn scripting, and to improve your website).
HTML is basically a shorthand language that triggers our browsers' pre-programmed abilities to format a page and its text content, call forth images, create links, and other such simple functions common to any page on the Web. It is not a "code" -- it does not require the HTML writer to teach the browser how to commit actions. Programmers must learn very rational languages to create programs (learning to think like machines while writing the code, in a sense). Making HTML pages is much easier. This site was created in HTML with CSS, using only a fraction of either language possibilities.
Let's say I open a text-editor (like Notepad, Wordpad or SciTE on Windows; Smultron or TextWrangler on Mac) and type* the following:
The sea cucumber is an echinoderm of the class Holothuroidea, with an elongated body and leathery skin, which is found on the sea floor worldwide.
It is so named because of its cucumber-like shape. Like all echinoderms, sea cucumbers have an endoskeleton just below the skin.
Sea cucumbers are generally scavengers, feeding on debris in the benthic layer.
It is so named because of its cucumber-like shape. Like all echinoderms, sea cucumbers have an endoskeleton just below the skin.
Sea cucumbers are generally scavengers, feeding on debris in the benthic layer.
* I cut-and-pasted this from Wikipedia
If I save it with a name like "webpage.htm" and drop it on my Firefox browser icon, I'll see the following:
The browser spits up all the text from my text-editor document, because browsers are very good at that. Unfortunately, my line-breaks didn't register. This is because a text-editor is much simpler than a word processor: line-breaks, extra spacebar spaces and tabs have no meaning. So, I'm going to add a bit of HTML (<br>) to create line-breaks:
The sea cucumber is an echinoderm of the class Holothuroidea, with an elongated body and leathery skin, which is found on the sea floor worldwide.<br><br>
It is so named because of its cucumber-like shape. Like all echinoderms, sea cucumbers have an endoskeleton just below the skin.<br><br>
Sea cucumbers are generally scavengers, feeding on debris in the benthic layer.
It is so named because of its cucumber-like shape. Like all echinoderms, sea cucumbers have an endoskeleton just below the skin.<br><br>
Sea cucumbers are generally scavengers, feeding on debris in the benthic layer.
Since browsers are good at spitting up the text that they read, it is necessary for me to hide my HTML in < > brackets. This <br> is an example of an HTML tag.
Just for kicks, I'm going to make the word "Holothuroidea" appear in italics like this:
The sea cucumber is an echinoderm of the class <i>Holothuroidea</i>, with an elongated body and leathery skin, which is found on the sea floor worldwide.<br><br>
It is so named because of its cucumber-like shape. Like all echinoderms, sea cucumbers have an endoskeleton just below the skin.<br><br>
Sea cucumbers are generally scavengers, feeding on debris in the benthic layer.
It is so named because of its cucumber-like shape. Like all echinoderms, sea cucumbers have an endoskeleton just below the skin.<br><br>
Sea cucumbers are generally scavengers, feeding on debris in the benthic layer.
The <i> tells the browser to "begin intalicizing" and the </i> closes the tag, so that the whole paragraph doesn't end up being italicized. Most often, the content that the viewer is seeing is being nested inside of HTML "opening" and "closing" tags.
Here's the new result in my browser (after I resaved webpage.htm and refreshed the browser window):
Now what I've made is a legitimate webpage -- meaning that it does function in a browser window -- but it's not a proper webpage. There is a simple protocol for laying out a webpage which allows it to be more sophisticated than my examples above.
The basic structure of an HTML document is as follows:
<html>
<head>
<body>
</html>
<head>
Information goes here that helps the document relate to browsers and search engines. For beginners, this will consist of a <title> tag for giving the page a name at the top of the browser window, and a link to an external CSS document which is controlling the presentation for the whole website.</head>
<body>
Everything (text, images, formatting) that you see on the webpage goes here.</body>
</html>
Everything must be properly nested within the HTML tags. Notice that the <html> </html> tags enclose the entire document (this tells the browser that the script is in HTML format). The majority of your HTML scripting and information will fall between the <body></body> tags.
Here's the sea cucumber example in a proper HTML document:
<html>
<head>
<title>Sea Cucumbers!</title>
</head>
<body>
</html>
<head>
<title>Sea Cucumbers!</title>
</head>
<body>
The sea cucumber is an echinoderm of the class <i>Holothuroidea</i>, with an elongated body and leathery skin, which is found on the sea floor worldwide.<br><br></body>
It is so named because of its cucumber-like shape. Like all echinoderms, sea cucumbers have an endoskeleton just below the skin.<br><br>
Sea cucumbers are generally scavengers, feeding on debris in the benthic layer.
</html>
Working with text-editors
Again, your free text-editors:- SciTE (Windows)
- TextWrangler (Mac OSX)
- Smultron (Mac OSX Leopard)
If you are using text-editors for Windows, when the Save as console opens, you should select "All Files" in the Save as type bar.
If you open an HTML document, and the script extends beyond the right edge of your text-editor window, you should "wrap" your text so that you can view it all without horizontal scrolling. Generally, this option will be found in your top bar under Options (in the case Of SciTE) or Text (in the case of TextWrangler). I haven't noticed this problem on Notepad or Wordpad in Windows.
Under Webpage templates, I have provided a HTML document.
Next: HTML links Top