| HTML Code: |
Assignment:
Open a blank word document page: - save the document as a htm or web document
with name you can recognize.
Then go to "View" and open up "Source":
Eliminate or erase everything you see in the source part and then Paste the
following code in the box:
Save the htm document again and open it using the Explorer browser program.
When you open up Explorer, go to File > Open File and find your new htm doument.
If it worked the only thing you should see is the word bold in bold.
<html
|
To compose an html document from scratch, all that is required is knowing the
html code. Although after today's class you won't most likely use this code
to build your pages, you should know what the code is in case your html editor
produces a page that is a bit off ( it can and does happen on occassion even
with good editors) or if you a curious type or would like to claim you produced
your own page from scratch
.
The code itself is not difficult. With a bit of practice and the notes in hand
you can produce a quick page quickly. In fact that is what you and your partner
will do in the next hour and a half.
Each of the boxes below refers to different codes for text, boxes etc. We will
work through parts of the full document - though we may omit sections based
on timing.
Web page authors create plain text files using the Hypertext Markup Language.
This language, known as HTML, consists of a series of simple-to-learn tags.
You can use these tags to mark up a page of text. Tags can indicate page elements,
structure, formatting, hypertext links to other locations, and so on. Web browsers
read the HTML tags and format the text and styles that appear on the computer
screen.
HTML tags usually have a starting and ending tag,
surrounding the text that they affect. The starting tag turns on a feature
(heading, bold, and so on), and the ending tag turns it off. All ending
tags have a forward slash (/) preceding the tag name. Most HTML tags look like this: Text Attributes: to get the words Text line
on the screen, . Text bold Text italic . Text CAPITALIZED Text sizes: </u> for underlined, and <tt> and </tt> for typewriter |
Assignment 1: write a line of type including all the above and check it out with a browser!
Headings are some of the most important tags within
the BODY of your HTML document. You will usually use a heading to tell
what the following section of your page is about. The opening tag for
a heading is <hy> and the closing tag is </hy> with y being
the size of the heading... from 1 to 6. (1 being largest, and 6 being
smallest)
|
Horizontal Rules <hr width=50%> <hr size=7> <hr noshade> You may also use several attributes within one tag...<hr width=50% size=10 noshade> |
| Paragraphs You will often use paragraphs in HTML, just as you do when you write stories. The opening tag for a paragraph is <p>, and the closing tag is </p>. Example of a paragraph... Bob starts to chase the chicken around. Bob trips over a string and goes flying into the pig's mud pit! eww! What a pity! <p>Bob starts to chase the chicken around. Bob trips over a string and goes flying into the pig's mud pit! eww! What a pity!</p> |
|
Aligning: Many tags support ALIGN attributes... if you want something
to be aligned from the left margin, from the center, or from the right
margin. The ALIGN attribute is placed in the opening tag before the >.
|
Links |
Images <img src="http://www.eiglichsite.gif" WIDTH=200 HEIGHT=50 ALT="Iglich Site">
|
Unordered Lists
|
Tables: <table width="200" border="1" cellpadding="0"
cellspacing="0">
|
6. Head Settings:
HTML files are made up of two main sections: the head section and the body section.
The body section is the main part of the document, the visible part containing
text and images and so on.
The head section is invisible, except for the document title, which appears
in window title bars in browsers and in Dreamweaver. Give a title to every page
you create.
The head section also contains other important information, including the document
type, the language encoding, JavaScript and VBScript functions and variables,
keywords and content indicators for search engines, and style definitions. You
don't need to provide all of these elements for every page; you might, for example,
provide keywords and content indicators for your home page only. You can view
the elements in the head section using the View menu, the Document window's
Code view, or the Code inspector.
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
Setting Meta properties
A meta tag is a head element that records information about
the current page, such as the character encoding, author, copyright, or keywords.
These tags can also be used to give information to the server, such as the expiration
date, refresh interval, and PICS rating for the page. (PICS, the Platform for
Internet Content Selection, provides a method for assigning ratings, such as
movie ratings, to web pages.)
Attribute specifies whether the meta tag contains descriptive information about
the page (name) or HTTP header information (http-equiv).
Value specifies the type of information you're supplying in this tag. Some values,
such as description, keywords, and refresh, are already well defined (and have
their own individual Property inspectors in Dreamweaver), but you can specify
practically any value (for example, creationdate, documentID, or level).
Content is the actual information. For example, if you specified level for Value,
you might specify beginner, intermediate, or advanced for Content.
Setting Title properties
There is only one title property: the title of the page. The title appears in
the title bar of the Document window in Dreamweaver as well as in the browser's
title bar when you view the page in most browsers. The title also appears in
the toolbar. Enter the page title in the Title text box.
Keywords
Setting Keywords properties
Many search-engine robots (programs that automatically browse the web gathering
information for search engines to index) read the contents of the Keywords meta
tag and use the information to index your pages in their databases. Because
some search engines limit the number of keywords or characters they index, or
ignore all keywords if you go beyond the limit, it's a good idea to use
just a few well-chosen keywords.
Enter your keywords, separated by commas, in the text box labeled Keywords.
Setting Description properties
Many search-engine robots (programs that automatically browse the web gathering
information for search engines to index) read the contents of the Description
meta tag. Some use the information to index your pages in their databases, and
some also display the information on the search results page (instead of displaying
the first few lines of your document). Some search engines limit the number
of characters they index, so it's a good idea to limit your description to a
few words (for example, Pork barbecue catering in Albany, Georgia, or web design
at reasonable rates for clients worldwide).
Enter descriptive text in the text box labeled Description.
<meta name="keywords" content="primer on html code">
The body: The offical visiable document starts off with the <body
and its attributes....
The page properties for this page are as follows: the background colore
is white, text color is black, links are blue and so on. Note I've set the left
margin to 10 pixels and the top margin to 10 also.
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#0099CC" leftmargin="10" topmargin="10">
You always end the documnent with:
</body>
</html>
| FTP ( from: http://www.davesite.com/webstation/html/chap10_2.shtml While all FTP software looks a little different, they all have the same goal. The goal of an FTP program is to move files from a local host (in this case, your computer) to a remote host (in this case, your web page host's computer), and vice versa. To upload a file is to send ('copy') a file from your computer (the local host) to your host's computer (the remote host). To download a file is to retrieve ('copy') a file from your host's computer to your computer. (The terms of uploading and downloading apply to other forms of Internet communications, not just FTP. You download a file someone sends you via e-mail, and you upload a file when you attach one to an e-mail you send out, although we usually don't call it uploading, instead we call it "attaching.") Oh, and in case you were wondering, FTP stands for File Transfer Protocol. Before you can start FTP'ing, you need FTP software. I suggest WS-FTP or CuteFTP for Windows users. For other FTP programs (and if you are using an operating system other than Windows) I suggest searching for an FTP program at download.com. (If you go to the WS-FTP site, you will find two separate programs, WS-FTP LE, a program free for personal use, and WS-FTP Pro, a shareware program you can purchase for business use.) The examples below describe WS-FTP procedures, although it will be very similar regardless of what FTP software you choose to use. You'll need to gather a few pieces of information from your host before you can upload your HTML files and graphics to your web site. You will need: 1. username and password (usually the same as you would use to log on to the Internet if you are using an ISP for your web space, but it's a good idea to double-check-sometimes it is slightly different for FTP'ing.) 2. remote host address/server name (usually ftp.your-host.com or www.your-host.com, but it can vary. Example: If you are using tripod.com for a host, you will probably use a remote host address of ftp.tripod.com.) 3. the name of the directory where your files are to be placed (Many times this directory is the main directory, but sometimes it may be www or web. If your host does not specify, it is probably just the main directory. If no directory is specified, don't worry about this piece of information.)In addition, you will need to know the location/name of the directory on your computer where you have placed your HTML files. Once you have installed your FTP software, and you start it, you should be prompted with a server profile screen (in WS_FTP, it says session profile). It has areas ('fields') to type your remote host address/name, your username and password, and there is an area to enter your remote directory (In WS-FTP, it's in the Startup tab). Type in your host's name and your username. You can include your password now, or leave it blank. Leaving it blank will require you to type it every time you connect with FTP, and will prevent someone else with access to the computer you use from changing your web site. If your host's documentation specifies a remote directory ('path') enter the name in that box. Otherwise, leave that area blank. Now, you can choose connect to log on. (If you are unable to connect after following these directions, I suggest that you read the FTP FAQ/help section of your host's web site, which may help you figure out the problem.) If all your setting are correct, the files in the right-side window (in WS-FTP, in other programs it probably says remote host somewhere) are the files that are on your server (there may be no files in this directory, or a single temporary index.html, if you've never logged on before with FTP), and the left-side window (in WS-FTP, in other programs it probably says local host somewhere) shows files on your computer. You may need to navigate in the local host window to get to the directory where you've placed your HTML files on your computer. You may see two periods ('..'). If you click that, it will take you one level back in your directory tree. (Example: If you are in /Docs and you've placed your HTML files in /WebPage, one click on '..' will take you from /Docs to /, and then you will see a directory called /WebPage [you may have to scroll down]. You can then click WebPage, and you'll be in the right directory.) Once you have the correct directory loaded on the local host side, and the correct directory loaded on the remote host side, you can begin to upload (and download) files. To upload a file from your computer to your host, select your file in the left side by clicking it once, and then press the arrow to the right towards the remote host side. This will copy that file from your computer to your host. (It will also replace an old file with the same name if you have one on your host. Example: You are uploading index.htm. You have an index.htm on the remote host side of your FTP program. Once you click the arrow towards remote host, you will lose the old file on your server. I only warn you about this because if you set up multiple directories, you may at one time or another accidentally overwrite a file because you were in the wrong directory. Happens to all of us when we are just starting out!) If you want to copy a file from your web host to your computer, select the file you want in the remote host side of the FTP program and click the arrow left towards the local host side. Note: You may see a selection in your FTP software (WS-FTP included) for ASCII mode, binary mode, and auto mode. If auto is available, check it. Otherwise, select ASCII mode when you transfer HTML files, and binary mode when you transfer graphics and music files. |
Look at the code
Take a quick time-out for a look at what Dreamweaver is doing when you add content
to a page. As you add text, images, and other content, Dreamweaver generates
HTML code.
Dreamweaver lets you view your document in either of two ways: Design view (where
the document looks much like it would look in a browser), and Code view (where
you can see the underlying HTML code). You can also use a split view that shows
both Code and Design views.
To view the HTML code for your document:
1. If the Document toolbar isn't already visible, choose View > Toolbars >
Document.
2. In the Document toolbar, click the Code and Design view button.The window
splits, showing the underlying HTML code.You can edit the code in Code view.
Changes you make to the code don't appear in Design view until you refresh the
view.
To make code changes appear in Design view, do one of the following:
• Click anywhere in Design view.
• Click the Refresh button in the Document toolbar.Dreamweaver provides
many advanced features to help you code in Code view; see Editing code in Dreamweaver
for more information.
When you're working on your own pages, you can whichever view is most comfortable
for you. We'll assume for the rest of this chapter that you're using Design
view.
To show Design view only:
1. If the Document toolbar isn't already visible, choose View > Toolbars >
Document.
2. In the Document toolbar, click the Design view button.
Copying and pasting code
You can copy and paste source code from another application or from Code view
itself. You can copy and paste the code as text or as code with tags intact.
To copy and paste source code as text:
1. Copy the code from Dreamweaver or another application.
2. Place the insertion point directly in Design view, and choose Edit > Paste.
To copy and paste source code with tags intact:
1. Copy the code from Dreamweaver or another application.
To copy from Design view, choose Edit > Copy as HTML.
2. Do one of the following:
• In Code view, position the insertion point, and choose Edit > Paste.
If you are using Design view, press F5 to update its display of the document.
• In Design view, position the insertion point, and choose Edit > Paste
as HTML.
JavaScript
Web developers write JavaScript to create small programs that run in the browser.
JavaScript is one of the most popular client-side scripting languages today.
It is supported by almost all browsers on the market. Web developers use JavaScript
to do these actions:
• Validate user actions.
• Create scrolling messages in a browser's status bar.
• Animate text or images.
JavaScript can be inserted in the HTML file. HTML uses tags to mark the start
and end of the code. The <script> tag tells the browser that the following
chunk of text, bounded by the closing </script> tag, is not HTML, but
rather script code to be processed.
Although using JavaScript seems much like inserting HTML content, JavaScript
is more difficult to learn than HTML. For more information about JavaScript,
see any JavaScript primer.
URLs
Every piece of information on the World Wide Web has a unique address. This
address is called a Uniform Resource Locator, or URL. A URL is a pointer to
some bit of data on the web. This information might include a web document,
a file on a FTP site, a posting on Usenet, or even an e-mail address. URLs contain
information about the following:
• How to get the information (what protocol to use: FTP, HTTP, and so
on)
• The Internet host name to contact (for example, www.macromedia.com;
http://localhost/mysite; or ftp.mysite.com)
• The directory or other location to locate the requested information
In addition, you use special URLs to send e-mail and for using the Telnet program.