- To begin: Open Notepad (Start > Accessories > Notepad) on your pc, or TextEdit or SimpleText on your Mac. If you are using a Mac, be sure that your settings will allow you to save as .txt not .rtf. You can make changes by editing your preferences. You will need a software that allows you to save your .html document as strictly text. This is important; we don't want to add any hidden formatting.
- Type the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My First Web Page</title>
</head>
<body>
<h1 align="center">Sharon Kaitner</h1>
<p>This is a paragraph.</p>
<h2>My Skills</h2>
<p>I can do lots and lots of things.</p>
<h3>My Design Philosophy</h3>
<p>This is yet another paragraph.</p>
</body>
</html>
- There are 4 basic tags that always appear on an .html document:
- <html></html>
- <head></head>
- <title></title>
- <body></body>
These form a basic web (.html) page.
- In general, you want to save this page as a text document with the extension .html or .htm. File > Save As > name.html. If you are asked, you want to make sure it is a text document and not rich text format. Occasionally, on a mac, you will also need to make sure that UTF-8 is checked. Here is a helpful link.
- Remember these basic rules for coding a web page:
- Tags always come in pairs. Hypertext Markup Language (HTML) uses these tags to tell the web browser (e.g. Mozilla Firefox, Safari, Internet Explorer, Netscape Navigator, etc.) how to display the page - what you want the page to look like.
- As with most things technology, there are a couple of exceptions like images (the <img> tag) and <link> in your head tag that do not have the close tag.
- We always begin and end the web page with the <html></html> tags. It's like telling the browser that this is a web page so treat it like one...and then when you are through, telling the computer "all done, that's it". So in most cases, if you View > Source in your browser, you will see that the code for the page has <html> as the very first word, and </html> as the very last word.
- We wrap these tags around words or groups of words when we want to attach meaning to them. In the above example, we wrapped the text of the whole page with the <html></html> tags. We can also wrap a tag around a word like this:
<em>emphasis</em>which is telling the browser to show the word emphasized in italics. Example: emphasis - Tags can be "nested" inside of other tags. Any tag we add to a web page that surrounds the information. Your <head></head> tag contains the <title></title> tag. The <title>tag is nested within the <head>tag.
- After the <head> tag is closed, the <body> tag begins. Everything that is seen is contained within your <body></body> tags.
- At the very top of the page, before the HTML begins, we put the doctype, to let the browser know what type of htmlwe are writing. For html5, it is written like this:
<!DOCTYPE html>
- Within the <body> tag, we use other html tags to let the browser what kind of content your wrote, and how you want it displayed. The <p> paragraph tag you used above tells the computer that this is a paragraph, and should be shown that way.
- This is the basic web page. Do a search for html cheatcodes for examples of other tags. Webmonkey offers one of my old time favorites: http://www.webmonkey.com/reference/HTML_Cheatsheet
To save your .html page
- There are two things to remember: Save all your content in one folder, called the root folder. You can add other folders within your root folder to keep your files nice and neat. Common sub-folders or sub-directories names are "images", "css" and "scripts" without the quotes.
- Always call the first page of any folder "index.html" or "index.htm" (without the quotes.)
- We almost always name the very first page of a web site "index.html" or "index.htm". This will be the page a browser looks for when someone types your URL into the address bar of a browser.
- The root folder is the one folder that contains everything related to your web site - all the web pages, images, movies, sounds, scripts, etc.
- We can create sub-folders within our main (root) folder, but ultimately, everything is in one folder.
- We can have more than one index.html. It just means the first page to call in a folder if no other page is requested. However, our homepage named index.html must not be in any folder other than the root folder. Browsers are not smart enough to know which sub-folder you may have put it in, so make sure you don't! Else you get one of those Error! Page Can't Be Found!, or worse yet, Forbidden, pages.
- We do not put any characters (!{at}#$%^&*) or any spaces in the names we save files and folders as.
- All names are in lower case.
- To save, on a pc, File > Save as and save with the name index.html but its type as text (see below).
- I saved the new web page index.html into my root folder "casabasa" and I am not putting it into any of my other folders that I use for organization.
- Knowing your directory, and where you save your work is very important because of paths. Paths tell the browser where to locate our other web pages, and to insert pictures and movies. They are described in our HTML document via the "a href" and the "img src" tags, for instance. With our home page, however, the browser has just been told a URL, like www.casabasa.com, not a specific page. It automatically searches for a page called index.html as the first page.
That's it. Everything else just builds on this basic web page. To preview what your web page looks like in a browser, just open Chrome, Firefox, Safari, Internet Explorer, or whatever browser you use to access the Internet. You do not have to be online - connected to the Internet - to do this. A browser displays HTML content. It is only necessary to connect to the Internet when you want something from another's computer...like to send and receive email, or to view someone else's web site.
In Mozilla Firefox:
- File > Open File
In Internet Explorer:
- File > Open
- In the new dialog box that appears, click on Browse to find your HTML page
To add some "style"
Let's add an internal style sheet to the page. Your book will have you work with style sheets, but here is a "quickie" using an embedded style sheet that uses the <style></style> tags within our <head></head> tags:
<head>
<title>Internal style sheet</title>
<style type="text/css">
<!--
body {
background-color: #CCCCCC;
}
a:link {
color: #003300;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #990000;
}
a:hover {
text-decoration: underline;
color: #0033FF;
}
a:active {
text-decoration: none;
color: #FF3399;
}
-->
</style></head>
In the above example, I used the <style> tag to embed my css directly onto the web page. For ease of use, a better way is to create a separate text document in TextEdit or Notepad, and save it the same way as your .html page, but with the extension .css. Then instead of embedding the style on each page and requiring you to go onto each page and changing the style when you want, you would just have to change one page.
Your web page would now look like this (from our earlier example):
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First Web Page</title>
<meta charset="utf-8" />
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1 align="center">Sharon Kaitner</h1>
<p>This is a paragraph.</p>
<h2>My Skills</h2>
<p>I can do lots and lots of things.</p>
<h3>My Design Philosophy</h3>
<p>This is yet another paragraph.</p>
</body>
</html>
My styles.css page was saved within my root folder, in a sub-folder called "css". I linked my web page to that page, using the <link> tag, one of those exceptions to the rule where there isn't a close linktag. No other text is necessary.
Here is an example of how a external css sheet might look. We call the tag (or class or id) that we use selectors. The browser sees the selector "body" and applies all the instruction between the {} curly brackets.
@charset "utf-8";
body {
color: #000;
font-size: 1em;
line-height: 1.4;
font-family: Verdana, Geneva, sans-serif;
}
h1 {
color: #603;
font-size: 1.8em;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
}
/* Below is displayed how to make exceptions to your css code above, when the user's technology changes */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
/* Style adjustments for high resolution devices */
}
/* ======================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
======================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow:none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
Useful Links: To see a selection of colors that you can describe using the hexidecimal color palette, or browser safe colors, visit John December's http://www.december.com/html/spec/color.html. You should also read one of my favorite web authors, Lynda Goodman: http://www.lynda.com/hex.html.
Inserting images, hyperlinks, email addresses via paths
To add paragraphs, we type what we want to say, then surround each paragraph with the paragraph tags: <p></p>.
<html> <body> </body> |
The spacing I'm showing between tags really don't matter. They are only there to make reading the code easier. HTML tags only tell the browser how you want the page to appear, and unless we specifically add tags that space a paragraph or text, then spacing does not appear (no matter how many times we hit the space bar!)
We can change some tags by adding attributes to the tags. Attributes give specific instructions about a tag. For instance, if we want to align the <p></p> paragraph tags, we can add the attribute "align". It would then read like this:
<html>
<head><title>My First Web Page</title>
</head>
<body>
<p align="center">This is a paragraph.</p>
<p align="right">This is another paragraph.</p>
</body>
</html>
Here is a similar page that had the image and email tags added to them, as well as a link to another page, our portfolio.
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<p>Hello, my name is Sharon</p>
<p>This is my very first web page. I have been practicing making my words <strong>bold</strong> and <em>italicized</em>, and inserting pictures like this: <img src="images/logo_wink.gif" width="75" height="85" alt="my logo"> This is my logo. </p>
<p>Please email me at <a href="mailto:sharon@casabasa.com"> sharon@casabasa.com</a>, because I get lonely. If you are interested, you can visit my <a href="portfolio/portfolio.html">portfolio</a> page. </p>
</body>
</html>
Remember that within the <head></head> tags is information about the web page itself. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> is just saying what is contained on the page. src="*", width="*", and height="*" are all attributes of the <img> image tag. Because there is no </img> close image tag, we close the tag within itself by including the slash "/" at the end of the phrase.
The <a href="portfolio.htm">*</a> anchor tag is what creates a hypertext link. HREF stands for hypertext reference. I am linking my home page, index.html, to another page, portfolio.htm. It's path says that both documents are within the same folder. This is called a relative link. If I wanted to link to a site outside of my web site, I would have to put the complete URL like this: <a href="http://www.yahoo.com/index.htm">Go To Yahoo</a>. This is called an absolute link. (If you want to know how to link using Dreamweaver, visit my tutorial on linking pages, graphics and named anchors.
<img src="images/logo_wink.gif" width="75" height="85" alt="my logo" / > is the path to my graphic, which is an animated .gif. Because my logo graphic is not in the same folder as my home page, the path says go to a folder named "images" and there you will find logo_wink.gif (see below).
The path describes to the computer browser, where it will find something in relation to the document that is being viewed. From index.html, I go to the images/logo_wink.gif. When we link a document or an image, we are telling the browser where it can find the image or other document. Images are not really "on" the web page. We see it because we tell the browser to show it in a certain place on our HTML document, and we tell the browser where it can find the image.
<a href="mailto:sharon{at}casabasa.com"> is the hypertext link and path to email. Essentially, it is a command to send an email by saying "mailto". The phrase
- <p>Please email me at <a href="mailto:sharon{at}casabasa.com"> sharon{at}casabasa.com</a>, because I get lonely.</p>
is saying: [open new paragraph] Please email me at [go to Internet and send an email to the address sharon{at}casabasa] sharon{at}casabasa.com [close the tag so only the words between the tags is blue and underscored], because I get lonely.[close the paragraph tag]
I show the complete email address they are linking to as a courtesy to my viewer. I could have just as easily written "my web address" between the tags. By telling the viewer where they are clicking, if they can't access my email address because of restrictions on a particular computer, they can write down the address and access it from home or their personal email.
Adding a table tag
Table tags are used to show data or information, and can be useful for some kinds of content. An example of that code is below:
<table>
<tr>
<td> </td>
<td> </td>
<td><h1></h1></td>
</tr>
<tr>
<td>
<table>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
I start and end with the <table></table> tags. Each set of <td></td> makes a cell within a table row, <tr></tr>. I have three sets of three table rows, and in each table row, I described three table cells, <td></td>. Td stands for table data. When you stack the table data one on top of the other in the three rows, we create columns. The table would look like this:
Look closely at the code and you will see another <table> table tag inserted within a set of <td> table data cells. This is called nesting a table within a table, and I use it to hold links to my other pages. That table contains three rows, but only one column. Now the table looks like this:
|
|||||
The phrase " " stands for non-breaking space. It's used as a space holder when there is no data within a cell. As soon as we enter text or an image, we remove the " " since it is no longer needed.
Useful links:. I have a tutorial on CSS in general, and another one on attaching a style sheet to an HTML page, if you want to know more. Or visit some of the recommended links from my resources page.
~ peace, polka and piwo