Docstoc

Thank you_

Document Sample
Thank you_ Powered By Docstoc
					                          Creating a Webpage I
Welcome to Student Computing Education!
      Information Technology Division (ITD) – http://itd.ncsu.edu
      Computing Services (CS) – http://www.ncsu.edu/it/essentials
      Student Education – http://www.ncsu.edu/it/education/students

Instructor: Jen Riehle – jen_riehle@ncsu.edu

Handout written by Don Schmidt and Jen Riehle

Objectives:
   What is HTML?
   Useful Terminology
   Computing at NC State University
   HTML Coding
   What is Dreamweaver?
   Dreamweaver Layout
   Dreamweaver Site Management
   Creating Your Web Page
         o Preview the page
         o Edit Page Properties
         o Creating Links
         o Indents and Lists
         o Adding Images
         o Linking Images
   Microsoft Word and the Web

Materials:

This class does have some pre-created files to be used during the class. Please
navigate to the ‘Webpages II’ folder in: I:\\Dept\ITTC\ITD\StudentEd using ‘My
Computer’. If you have any problems with these instructions, please notify your
instructor.


Evaluation:

Please evaluate this class by going online within 24 hours of the end of class to
http://www.ncsu.edu/it/education/students/evaluations .

Thank you!
Information Technology Division | Student Education | Creating a Webpage I




         What is HTML?
         HTML stands for HyperText Markup Language. HTML is a standards based tag
         language used to define the layout and attributes for the displaying of a World Wide
         Web document, as well as to create links between documents, and images, audio and
         video.

         By a “language;” we actually mean a set of special “tags” used to markup plain ordinary
         text that so that it can be interpreted by browsers to display Web pages. Each tag
         produces a specific result. Some tags are used for structure, others are used for
         formatting, and others for linking, etc. Most tags also have one or more “attributes” that
         allow you to specify various options for color, size, etc. The application of HTML tags
         and their attributes allow you to achieve the desired results for the way a Web page
         appears.

         Note: Not all Web browsers interpret HTML tags and their attributes the same way. In
         addition, if a Web browser encounters a tag or an attribute that it doesn’t know or
         doesn’t know how to interpret fully, it will generally ignore the tag or the attribute and
         treat it is if it did not exist.

         HTML may appear intimidating at first but once you begin to get the feel of it, there is
         very intuitive. The best place to start learning about HTML is its source, the W3C’s
         Home Page for HTML, http://www.w3.org/MarkUp/. There are numerous other HTML
         resources available to assist you; a list of these resources can be found at the back of
         this document. Or you can use a Web search engine like Google to look for “HTML
         Tutorials” or “HTML Tags”. Here at NC State, a couple of the (many) resources
         available to you are: Create a Web Page and How to publish your own WWW home
         page which we will use today.

         HTML is limited by its very nature. It is not meant to control heavy layouts or fancy
         actions. That is why other languages such as Java and JavaScript are used and why
         HTML is continuing to evolve into other languages such as DHTML and XML. The
         combination of HTML and JavaScript is also called DHTML (Dynamic Hypertext Markup
         Language).

         Please note that Java Script and JAVA is not the same thing. JAVA is a full featured
         programming language and is not dependent on HTML. Javascripting works with HTML
         to perform “actions”. By the way, it is generally usually not fruitful to ask a JAVA
         programmer to help you with a JavaScript problem (or visa versa).

         Useful Terminology and Explanations
         Linking (hyperlink)
         One of the most powerful features of HTML is the ability to link. You can link to other


                                                                                               Page | 2
Information Technology Division | Student Education | Creating a Webpage I



         web pages, documents, other locations within the same file or to multimedia resources,
         etc.

         A link usually appears as underlined text or a color different from the rest of the
         document so that it can be distinguished easily. It is also possible to use another page
         element, such as an image to represent the link.

         Categories of links
         There are three categories of links:
             An absolute link – These usually begin with http://... and specifies the full URL
               (Universal Resource Locator). Usually to an external resource.
             A relative link usually has a short path name to an internal resource i.e., another
               file within the same site (folder or group of folders). You will usually see
               something like.../, or ../../ before the file name.
             A named anchor (or ID anchor) link connects to another location in the same
               document or a specific location within another document. It is specified by a
               unique name or ID.


         What is a URL (Uniform Resource Locator)?
         A URL, Uniform Resource Locator is the electronic address that goes in the address bar
         at the top of the web browser. Officially the term URL (Uniform Resource Locator) has
         been replaced by the term URI (Uniform Resource Identifiers), but “URL” is still more
         commonly used.

         URLs are structured addresses that comply with W3C standards. URL’s are unique to
         each document and generally begin with: http:// or https://..., but there are other options
         such as ftp://..., etc. To learn more about URLs visit the W3C Naming and Addressing
         Home Page, http://www.w3.org/Addressing/.


         URLs are sometimes case sensitive and they should not contain any blank spaces. If a
         URL is not entered exactly correctly, the site will not open.
         You may have noticed that you do not always have to type in “http://”. That is because
         most modern browsers assume that http:// is a given – they automatically plug it in for
         you. Many pages, however, do not use a ‘www’, which is why we still need it. Likewise,
         pages addressed to https:// require that you type it in. Sometimes websites are also
         registered several different ways. i.e., http://www.gopack.com, http://gopack.com,
         gopack.com, or http://gopack.collegesports.com/ will all get you to the same place.




                                                                                               Page | 3
Information Technology Division | Student Education | Creating a Webpage I



         HTML file extensions
         When naming HTML files, keep in mind that Web browsers require the file name to
         have an ".html" or ".htm" extension. It does not make any difference which extension
         (htm or .html) you use. Pick one as a naming convention and then be consistent in
         using it.

         Computing at NCSU
         Everyone actively associated with NCSU, students, faculty and staff, has a unique Unity
         ID. This is what you use to access your Unity email account (Webmail), login into labs
         and authenticate to view webpages such as TRACS. The University also provides your
         Unity account with 150 megabytes of file space. This space can be used for mail
         storage or filespace that will store Web pages and other files (your k:// drive).

         If you have not used your Unity file space before or if you have not yet set up access
         controls, i.e., define a space for Web pages and restrictions to who has access to your
         files, then you need to use the WWW Setup Utility. Go to
         https://sysnews.ncsu.edu/tools-bin/www-setup and be sure that you have our Unity ID
         and Password. If you have any problems, your instructor can assist you.

         HTML Coding
         HTML coding follows a simple structure; markup elements contained within angle
         brackets (“< >”), called tags. Almost all tags follow a simple “open” and “close”
         structure.

         The opening tag:                                             < attribute >
         The closing tag:                                             </ attribute >

         Any information that is applicable to the tag attribute will fall in between the opening and
         closing tags.

         Under the older versions of HTML, not all tags were required to have an end tag. Under
         the latest rules for XHTML and XML, all tags are required to have an end tag. A few
         HTML commands remain that do not have to have closing tags and we will discuss
         them as we go.

         HTML tags are not case sensitive, however, XHTML and XML tags are. XML tags need
         to be lower case and therefore, you should develop the habit of using lower case.

         Attributes
         Most HTML tags have attributes. These are options for modifying the default effect of
         the tag. For example you can change color, alignment or font face. One or more
         attributes can be used within a tag. The general format for coding tags and their
         attributes is:

                   <tag attribute=”value” attribute=”value,value”> CONTENT </tag>


                                                                                               Page | 4
Information Technology Division | Student Education | Creating a Webpage I



         Changing the color of an object is possibly the most commonly used attribute. HTML
         does this one of two ways. The more common method is by using a hexadecimal chart,
         which has assigned a combination of letters and numbers to represent hundreds of
         different colors.
         The second method involves entering the name of the color. Unlike the hexadecimal
         number, only a few dozen colors have specific names, but this can be an easier way to
         remember to stick with a specific color.
          A full spectrum of named colors and hexadecimal colors can be found at
         http://www.htmlclinic.com/colorchart.php.

         Special characters
         Sometime you will need to enter special characters or expressions in your web page but
         HTML/XHTML may not be able to accept them directly as entered from the keyboard.
         i.e., the expression A>B (A is greater than B) would be interpreted as having a markup
         tag, or some characters – like the “&” symbol - have special meaning to XHTML. These
         characters or expressions would have to be entered by using a special code, either a
         “character reference” or an “entity reference”. For more information and a complete
         listing of these codes see:
         HTML Codes - ASCII Special Characters at:
               http://www.w3.org/MarkUp/html-spec/html-spec_13.html
               http://webdesign.about.com/library/bl_htmlcodes.htm
               http://www.w3.org/TR/REC-html40/sgml/entities.html
               Also see, HTML Codes - ASCII Special Characters:
                 http://webdesign.about.com/library/bl_htmlcodes.htm

         Core Tags for an HTML Page
         The “core” tags for a webpage are those that need to be included on all web pages.
         Webpage editor applications, such as Dreamweaver often include these tags for you
         automatically.

                   <html>
                   <head>
                         Head tags (title, style or link, meta, script)
                   </head>
                   <body>
                         Page content
                   </body>
                   </html>

         All HTML pages begin with the <html> tag and end with the </html> tag. The pages
         must also include two sections; the Head and the Body:
              The Head contains information about the page. This is helpful to browsers so
               they will know how to best interpret the code. Information needed for
               javascripting and other information is included in the head. The Head begins with
               the <head> tag and ends with the </head> tag signifying that it is the end of the


                                                                                           Page | 5
Information Technology Division | Student Education | Creating a Webpage I



                   Head component of document. With the exception of the “title”, the contents of
                   the Head are not displayed by the browser.
                  The Body contains the information to be displayed by the browser, according to
                   the specifications contained within the HTML markup tags (and their attributes).
                   The Body begins with the “<body>” tag and ends with the “</body>” tag. The
                   body tag has a large series of attributes related to defining the properties of the
                   web page (default font color, size, font, page background color or patter, page
                   layout etc.)

         HTML Tags
         There are dozens of HTML tags that can be modified in thousands of different ways to
         display your age in any way you wish. For a full list of tags, look in the Appendix of this
         document.


         What is Dreamweaver?
         These days, HTML Editor Applications, such as Dreamweaver, GoLive and FrontPage
         are very common and take most of the work of the coding out of your hands.

         You may ask why, if these tools do such a great job of developing Web pages and
         generation the HTML code for me, do I need to know HTML coding? Unfortunately,
         sometimes these applications cannot do everything the way you would like it done.
         Occasionally it is necessary to modify the code directly to get the results you want. If
         you are familiar with HTML and how it works, you will better be able to use and
         understand the HTML editors and get them to do the things you would like to do or do
         the things that the tools can’t do.

         In addition to its extensive Web page development and site management capabilities,
         Dreamweaver also has features that allow developers to:
            1. Automate production and enhance team efficiency.
            2. Integrate and interact with other Macromedia applications, Microsoft Office and
                leading e-commerce and application servers.
            3. Customize Dreamweaver by importing “extensions” for additional functions.
            4. Customize Dreamweaver’s workspace to make it convenient for you and to suit
                your style of work. You can even rearrange the workspace, change colors of
                items and create your own hot keys or shortcuts.
            5. Develop advanced Web sites using HTML, XHTML, JavaScript, CSS, PHP and
                XML etc.
            6. Develop Web based applications using a wide variety of “scripting” languages.
                e.g., ASP JavaScript, ASP VBScript, ASP.NET C#, CFML, ASP.NET VB,
                ColdFusion, ColdFusion Component, JSP and PHP.
         Scripting languages and Dreamweaver’s many advanced capabilities for advanced Web
         page design, Web applications development and database interaction will not be
         covered in these workshops.


                                                                                                  Page | 6
Information Technology Division | Student Education | Creating a Webpage I




         Dreamweaver Layout




              1. Title Bar – Document (file) name, location and type of document
              2. Menu Bar – Dreamweaver’s main menu bar (File, Edit, View, etc.). Edit >
                 Preferences is where you can set up default attributes for your style of work for
                 developing Web pages and where Accessibility features are activated.
              3. Insert drop down menu - The Insert feature contains either drop down or tab
                 options for selecting common objects and functions to insert into your Web page.
                 There are several categories under the drop down menu. The “Common”
                 category is usually the default. Each category provides a variety of commonly
                 used functions, such as tables, templates, forms, meta tags and special
                 characters.
              4. Document title tabs - The name of each document that is open will be placed in a
                 separate tab across the top of the document tool bar. This provides for rapid
                 switching between documents. Multiple documents can also be viewed

                                                                                            Page | 7
Information Technology Division | Student Education | Creating a Webpage I



                  cascading, vertically or horizontally by selecting Window (from the main menu
                  bar) then selecting the preferred option (near the bottom of the selections).
              5. Document Tool Bar:
                     o Views on the Document Toolbar:
                              Code view - Shows the editable HTML source tags.
                              Split (code and design View) – Shows both the HTML source and
                                 the design views of your document in a split window.
                              Design view – Displays the “What-You-See-Is-What-You-Get” view
                                 of the document in the window.
                              Live Data View – For testing applications. Not used in these
                                 workshops.
                     o Title – Here you can enter the Document’s Title. This title will appear at
                          the top of the page when viewed by a Web browser. It is also used by
                          many search engines to help locate your Web page.
                     o No Browser Check Errors – A tool to help you check various browsers for
                          compatibility with your Web page.
                     o File Management functions - Used to move your Web page (files) to and
                          from the Web server.
                     o Preview/Debug in Browser - Used to look at your Web page through a
                          Web browser.
                     o Refresh – Updates the site cache.
                     o View Options – More options to help develop and test web pages.
              6. Tag View Document Window (main workspace) - Provides a view of the code as
                  you would see if you were using a traditional text editor to hand-write the page.
                  Can be edited directly.
              7. Design View Document Window (main workspace) - Provides a What-You-See-
                  Is-What-You-Get display of your Web page approximately as it will appear in a
                  browser such as Internet Explorer, Mozilla or Opera, etc.
              8. Window Size & Download Speed – Settings for the size of the document window
                  and an indicator of the size of the Web page and approximately how long it
                  should take to download to a visitor’s browser.
              9. Properties Inspector (at the bottom of the screen) - A context-sensitive window
                  that displays the properties (specifications) for the object currently selected.
              10. Panels - a variety of docked panels that appear on the right side of the screen.
                  These panels provide quick access to commonly used functions. They are
                  customizable and moveable. We will be using the Files panel in all of these
                  workshops.

         You can set up Dreamweaver’s workspace to suit your individual style of work so that
         you may work as efficiently or as comfortable as you desire. This is accomplished by
         setting or changing “Preferences. To edit Preferences and to set up various options, go
         to Edit > Preferences and select the functions and their attributes for your style of work.
         This is also where Accessibility features are activated.




                                                                                               Page | 8
Information Technology Division | Student Education | Creating a Webpage I




         Dreamweaver Site Management
         Professional Web developers usually maintain two sets of their Web files (pages,
         documents, files, etc.), a working copy and a production copy. For that reason,
         Dreamweaver was designed with the capacity for “defining a site” and storing that
         information.

         Defining a site means that the web server and folder in which your webpage exists are
         saved, and can be accessed repeatedly. For some people who manage multiple sites, it
         is useful to save each of their sites so they can move between the files they need with
         great ease.

         These sites can be accessed in multiple ways. If they site is located in a drive on the
         machine you are on, a site can be created directly linking to the source of the
         webpages. In many cases however, the source of the webpage is web server that is not
         directly linked to the user’s machine. If that is the case, a site can be setup to FTP to the
         web server to move the files back and forth as needed. Additionally, the Files Panel will
         also allow you to expand the window to view all files in each folder and even move
         between folders.

         In the case of this class, as long as you have logged in with your Unity ID and password
         you should be able to directly access the k:// drive, and hence the source of your
         webpage. To define the site we will simply
             1. Click on the drop-down menu under “Files” and select “Network Drive (K:)
             2. Dreamweaver should automatically populate the Files window with all the
                documents in your K:// drive.
             3. To make changes to this site, or others, click on the drop down menu again and
                select “Manage Sites”. This menu will allow you to choose a site and view or
                modify its properties.

         Occasionally, when working with sites Dreamweaver will “Create Cache” for your site.
         This means taking a complete inventory of everything within the site and checking for all
         links and relationships so that it can manage the site. It may do this after each time you
         reboot your machine, or if someone else has modified files within the site from another
         location.


         Creating Your Web Page
         Before we start the page, we must consider that many times we need to look at what
         the page looks like in a real browser.
         Preview your page in a Web browser
         There are several methods that can be used to preview your page in a Web browser:
                   Method 1:
                             From the main menu, select File > Preview in Browser > iexplorer (there
                             are ways to select other browsers)

                                                                                                 Page | 9
Information Technology Division | Student Education | Creating a Webpage I



                   Method 2:
                             On the document menu bar select the round icon of the world > Preview in
                             iexplorer
                   Method 3:
                             Press F12
         You should now be able to see your Web page as it would be seen on the World Wide
         Web – but it’s not there. It’s only on your local computer. No one else can see it – yet.
         Editing the Page Properties
         Remember the <head> tag that we mentioned as a vital part of the page, that didn’t
         display anything? Here’s where its work comes in. To edit the entire page, use the Page
         Properties; Modify > Page Properties.




             Change the color of the background or use a background image.
             Change the color of all the text on the page.
             Change the color of all the links on the page.
             Save your work (File > Save or CTRL + S).
             Preview your work in the browser (F12)
         Most of the changes made to the entire page will appear in the <body> tag as attributes,
         or within the <head> tags. These preferences for page background, link properties and
         other effects, when saved and stored to multiple web pages are known as Cascading
         Style Sheets.




                                                                                               Page | 10
Information Technology Division | Student Education | Creating a Webpage I



         Inserting a Horizontal Rule
         A horizontal rule is actually a line that can divide your page into sections. You can select
         the length and width of the rule and whether or not it should have shadowing. We will
         insert two in two separate ways.
         1. For the first one:
                   a. Use you cursor to click after the <body> tag on the code view section of
                       the main screen.
                   b. Type in: “<hr>

                 c. Click on the circular arrow     in the Document Tool Bar. This will refresh
                     the Design view of the page to show changes made in the code view.
         2. Second choice:
                 a. Use your cursor to select anywhere on the Design view section of the
                     main screen.
                 b. Go to the “Insert” menu and select HTML, then Horizontal Rule.
                 c. The rule will appear on your screen and, while selected, changes to the
                     length, width and shadow can be made using the Properties Inspector.

         Creating a Link
         As mentioned earlier, there are three types of links: absolute, relative and anchors. For
         a refresher on these links, look on page 3. Let’s start by putting an absolute link into our
         pages.
         Exercise 1 – Absolute Links
         1. Highlight “Link to Travel Deals Website”
         2. Look in the Properties Inspector and enter the full URL in the “Link” box.
            Use http://www.expedia.com or another well known travel site.
         3. Preview your work in the browser (F12)
         4. Test your link.

         Exercise 2 – Relative Links
         In a previous exercise, you inserted some Absolute Links.
         Now we will learn how to insert another type of link – a Relative Link.


              1. Highlight “Pictures from Spring Break 2004”.
              2. Inserting the relative link address into the link box in the properties – three
                 methods:
              3. Method one – Type in the relative address.
                    a. In the link box type in the relative address. If you do not know, or are not
                        sure of the relative address, try using one of the other methods.
              4. Method two – Browse to the file.
                    a. To the far right of the link box are two icons, one that looks like a little
                        clock and the last one, a little yellow tab folder. Select the yellow tab

                                                                                              Page | 11
Information Technology Division | Student Education | Creating a Webpage I



                      folder icon and navigate (browse) to the file you want to link to and select
                      it (sb2005/index.html). The relative address should now appear in the link
                      box.
              5. Method three – Point to the file.
                   a. Just to the right of the link box is an icon that looks like a little clock.
                      Click on it, the Point to File wheel, and drag your cursor to the tables.html
                      file in the Files Panel. This will establish the link to the page.

         In a previous exercise, you inserted some absolute and relative links.
         Now we will learn how to insert another type of link – a Named (or ID) Anchor Link.
         Anchor links are primarily used to “jump” from one place in a Web page to another place
         in the same page. This is often helpful if the page is a long one.


         Exercise 3 - Inserting Named (ID) Anchors and links
         1. Click at the beginning of the first in the list of information about vacation spots:
            “Bahamas”
         2. Click on the Anchor icon in the Insert bar (Common category).
         3. Name it “bahamas”
         4. Highlight the word “Bahamas” in the “Information about:” list
         5. Insert the link to the anchor – two methods:
                    a. Method one – In the link box in the Property Inspector, type in the anchor’s
                       address (name) with a “#” before it: “#bahamas”. Be sure to spell it exactly
                       the way you named it.
                    b. Method two – Point to the file. Just to the right of the link box is an icon
                       that looks like a little clock. Click on it, it’s the Point to File wheel, and
                       drag your cursor to the “bahamas” anchor that you created next to the
                       Bahama’s paragraph.
         6. Repeat this process for each of the five potential Spring Break vacation spots.
         7. Save your work (File > Save or CTRL + S).
         8. Preview your work in the browser (F12)
         9. Test your link(s).

         If you want to link to a named anchor within another page all you have to do is add a #
         symbol and the anchor’s name (i.e., #anchor_name) at the end of the URL or the end of
         the relative address. For example, go to:
         http://www4.ncsu.edu/~jmriehle/othrlinks.html#homestar


         There is a fourth type of link, and this is a link to send an email to someone.
         Exercise 4 – Email Links
         1. Go to bottom of the web page.
         2. Highlight the words “Vote by emailing Jen Riehle”
         3. Complete one of the following:

                                                                                              Page | 12
Information Technology Division | Student Education | Creating a Webpage I



                   a. Method One - In the Insert bar (Common category), select the “Email link”
                      icon (it looks like an envelope). The information in the “Text” box should
                      be the same as the information you highlighted on the Web page. Type in
                      the email address you want to refer the user to. Make sure it is typed in
                      correctly!
                   b. Method Two – In the link location of the Properties Window type in
                      “mailto:[insert email address here]”.
         4. Click on OK
         5. Save your work (File > Save or CTRL + S)
         6. Preview your work in the browser (F12)




         Indents and Lists
         Indents and lists are an important way of formatting the structure of your page and
         organizing the content in a way that is attractive and legible.
         Exercise 5 - Indents
         1. Indenting and Outdenting:
                   a. Select some information that you would like to indent.
                   b. From the Properties Inspector, use Indent and Outdent functions to
                      structure information.
                   c. Try this in several different areas of the page.
         2. Nesting Indents:
                   a. Try inserting an indent inside another indent.
                   b. Notice - it is not really indenting. True indenting is usually only on the left.
                      Here it indents on both sides. These are called “blockquote” tags in
                      HTML.
         3. Save your work (File > Save or CTRL + S).
         4. Preview your work in the browser (F12)

         Exercise 6 - Lists
         1. Take a look at the bulleted list of potential vacation spots
         2. View the indents with the “Bullets” button and the “Numbering” button selected in the
            Properties inspector.
         3. Note that the coding changes slightly based on the type of list you have selected.
                   a. Bulleted lists = “<ul>” or “unordered lists.
                   b. Number lists = “<ol>” or “Ordered lists.
         4. You can also control how the list look by specifying the “Type” attribute:
                   a. <ol type=1> “1., 2., 3.,…”

                                                                                                Page | 13
Information Technology Division | Student Education | Creating a Webpage I



                  b. <ol type=A> “A., B., C.,…”
                  c. <ol type=a> “a., b., c.,…”
                  d. <ol type=I> “I., II., III.,…”
                  e. <ol type= i> “i., ii., iii.,…”
                  f. <ul type=disc> “●”
                  g. <ul type=circle> “○”
                  h. <ul type=square> “■”
         5. Nesting Lists:
                  a. Try inserting a list inside a list.
                  b. Select a list item(s) and use the Indent/Outdent function.
                  c. For a real challenge, create the list in the “code” window
         6. Save your work (File > Save or CTRL + S).
         7. Preview your work in the browser (F12)

              Note: Although not covered in this class, there is a third type of list, Definition List.
              These are generally used for description or glossaries applications.


         Exercise 7 - Adding Images:
         Let’s add a couple of images to the Web page. The images you will need are in the
         “Images” folder on the I:// drive.
                  Position your cursor below the paragraph about the Bahamas
                  From the Insert bar (with the Common Tab selected) click on the Image icon (the
                   one with the little tree on it). This will open the Select image dialog box. (You
                   can also select Insert from the main menu then select Image.)
                  In the Look in window, navigate to the Desktop > WebPages > images folder and
                   select the “bahamas.jpg”
                  The alt text dialog should now stop you. Type in “Bahamas”. Click on OK.
                  Repeat these steps for photos of each of our potential vacation spots.
                  You may want to format the way the photos look. Using the properties inspector
                   you can:
                       o Alter the image size
                       o Add an “alt” tag (as discussed above)
                       o Add a border to the photo
                       o Align the photo on the page
                       o and much more we will learn later…
                  Save your work (File > Save or CTRL + S).
                  Preview your work in the browser (F12)




                                                                                                  Page | 14
Information Technology Division | Student Education | Creating a Webpage I




         Exercise 8 - Adding Links to Images
         Sometimes it’s helpful for an image to be the link to another resource. Let’s make the
         images at the top and the bottom of the page link to somewhere.
                  To add links to an image:
                      o Select the image.
                      o In the properties inspector, in the Link box, type in
                          “http://www.bahamas.com”.
                      o Click away or press enter to lock it in.
                  Save your work (File > Save or CTRL + S).
                  Preview your work in the browser (F12)
                  Test the links

         You should always test a link before adding it to your page to ensure that it is correct
         and that you know where the link goes.

         Microsoft Word and the Web
         You can use Microsoft Word to save a document as an HTML page. While this is an
         easy and convenient way to create an HTML page, you'll notice that Word doesn't
         always save the original formatting, nor does it use standard HTML tags. And it adds a
         lot of its own codes, which can cause problems when the document is edited later.
         Exercise 10 - Convert a Microsoft Word document to HTML for use with Dreamweaver
         Open PowerPoint.htm
         If you look at the code view you will notice that there is a great deal of coding there that
         we have not discussed. This is a different type of coding and it is very difficult to make
         changes to the html document with this type of coding.
         Some of this coding can be cleaned up by going to “Commands>Clean Up Word
         HTML”.
         Dreamweaver also gives you the opportunity to clean up some of Microsoft's code by
         importing.
         Import a Word Document directly into Dreamweaver:
         A new feature added to Dreamweaver MX 2004 is the ability to directly import Word
         documents into your Web pages. The import feature “cleans up” the files as it imports
         them.



                                                                                               Page | 15
Information Technology Division | Student Education | Creating a Webpage I



         To do this in Dreamweaver:
            1. Create or open a new or position the pointer in an already open file.
            2. Switch to Design view. - The command will not work from within Code view.
            3. From the main menu, select File > Import > Word Document…, then browse to
                the location where the file is stored and select the file.
            4. Click on OK.
            5. The (cleaned up) information should now appear in your Web page.
            6. Save your file.
            7. Preview in browser.

         Copy and Pasting from Word into Dreamweaver
         Another new feature in Dreamweaver MX 2004 is the ability to copy content from Word
         and Paste it directly into Dreamweaver. The content that you copy can be anything,
         text, tables, pictures, etc. This should be used if the file is small enough or has only
         limited amounts of fancy formatting. It can also be done when moving content from
         Excel!
         The pasted content will be nicely formatted and ready for use.




                                                                                           Page | 16
Information Technology Division | Student Education | Creating a Webpage I




         Appendix
         Other HTML help:
             Basic XHTML Tag Library:
               http://webdesign.about.com/cs/htmltags/a/bl_index.htm
             http://www.ncsu.edu/it/edu/html_trng/html_basics.html
             http://www.web-source.net/216_color_chart.htm (hexadecimal color chart)
             NC State Help Knowledgebase http://help.ncsu.edu
             Web based forms at NC State http://www.ncsu.edu/tools/inform3.html

         Coding Tutorials:
            XHTML Tutorial:
              http://www.w3schools.com/xhtml/default.asp
            Programming Languages Assistant
              http://www.bigwebmaster.com/
            Writing HTML Tutorial:
              http://www.mcli.dist.maricopa.edu/tut/lessons.html
            HTML Goodies HTML Tutorial:
              http://www.htmlgoodies.com/tutors/
            How Can I Learn HTML?
              http://webdesign.about.com/cs/beginninghtml/f/bl_faq2-1.htm

         Dreamweaver Tutorials:
         Following are just a few Dreamweaver resources available to you:
                  Numerous Dreamweaver books
                  Within Dreamweaver:
                   o press the F1 key to access “Using Dreamweaver topics”
                   o Click on “Help” on the Dreamweaver menu bar
                  On line Dreamweaver resources (just a few):
                   o Macromedia’s Dreamweaver support site
                      http://www.macromedia.com/dreamweaver/support
                   o Dreamweaver top hints
                      http://www.macromedia.com/devnet/mx/dreamweaver/articles/dwmx_top_tips
                      .html
                   o Lynda Weinman’s Application Tips: http://www.lynda.com/tips/
                   o Dreamweaver Depot - http://www.andrewwooldridge.com/dreamweaver/
                   o Macromedia’s developers support site http://www.macromedia.com/desdev
                  You can find many other Dreamweaver resources on the Web by using a Web
                   search engine.

         Web Ethics, Copyright, Fair Use and Intellectual Property Issues:
                  NCSU’s Computer Use Rules and Regulations
                   http://www.ncsu.edu/it/essentials/rules_and_regs/overview_rules_and_regs.html
                   #computer

                                                                                          Page | 17
Information Technology Division | Student Education | Creating a Webpage I




                  NCSU’s Policy Statement on Copyright Infringement
                   http://www.ncsu.edu/copyright/policy_statement.html
                  NCSU Administrative Regulation on Copyright Infringement
                   http://www.ncsu.edu/copyright/index.html
                  10 Big Myths about Copyright explained
                   http://www.templetons.com/brad/copymyths.html
                  CyberLaw
                   http://www.cyberlawusa.com/
                  Web Law FAQ
                   http://www.patents.com/weblaw.htm
                  Copyright Website
                   http://www.benedict.com/

         Other Resources:
                  Build a Web site
                   http://www.learnthenet.com/english/section/webpubl.html
                  Build a personal Web page:
                   http://personalweb.about.com/library/bl_tutorial.htm

         Accessibility:
         As a public institution, we are required to comply with Section 508 of the Rehabilitation
         Act. requiring "any item, piece of equipment, or product system, whether acquired
         commercially off the shelf, modified, or customized, that is used to increase, maintain,
         or improve functional capabilities of individuals with disabilities.” This means that our
         web pages must be accessible to persons with disabilities.

         To do this in Dreamweaver:
            1. From the main menu
                Select Edit (from the main menu bar)
            2. Select Preferences (near the bottom)
            3. Select Accessibility (the second item in the list)
            4. Turn on, place a check in, all of the options – Images, Tables and Forms, etc.
            5. Click on OK

         Time may not permit us to use all these options in this class, but you should make a
         habit of keeping these options activated at all times.

         More about assistive technology:
              1. NC State is committed to supporting accessibility, see:
                 http://www.ncsu.edu/it/access
              2. For information on operational, technical and training support for assistive
                 technology (AT), see:
                 http://www.ncsu.edu/it/dss

                                                                                                Page | 18
Information Technology Division | Student Education | Creating a Webpage I



              3. NC State Libraries Assistive Technologies Center (ATC), see:
                  http://www.lib.ncsu.edu/risd/atc/
              4. US Federal government requirements for accessible Web pages. For detailed
                  technical information about making Web pages accessible compliant, see:
                  Web-based Intranet and Internet Information and Applications
                  http://www.access-board.gov/sec508/guide/1194.22.htm
              5. W3C Web content accessibility guidelines, see:
                  http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/checkpoint-list
              6. Macromedia’s accessibility support site, see:
                   http://www.macromedia.com/macromedia/accessibility/.
              7. Sample of “reading” a Web page, see:
                  http://www.websavvy-access.org/resources/formexample.php
              8. Techniques for Web Content Accessibility Guidelines 1.0, see:
                  http://www.w3.org/TR/WCAG10-TECHS/
              9. Web Accessibility Initiative (WAI), see:
                  http://www.w3.org/WAI/
              10. LTS Improving Your Web Site Accessibility, see:
                  http://lts.ncsu.edu:8170/guides/accessibility/




                                                                                       Page | 19
Information Technology Division | Student Education | Creating a Webpage I




                                                     Basic HTML/XHTML Tags

          Skeletal Tags
          <html>the entire HTML document</html>                              Defines the beginning and end of an
                                                                             HTML document.
          <html attribute(s)="value">the entire HTML document</html>
          <head></head>                                                      Defines the beginning and end of the
                                                                             "head" part of an HTML document.
          <head attribute(s)="value">content of the head</head>              Sets off the title and other information
                                                                             that isn't displayed on the Web page
                                                                             itself.
          <body>content of the document body</body>                          Defines the beginning and end of the
                                                                             "BODY" part of an HTML document.
          <body attribute(s)="value">content of the document                 Sets off the visible portion of the
          body</body>                                                        document.


          <!-- comments in the source -->                                    The Comment tag is used to contain
                                                                             textual matter that appears in the
                                                                             source code of the document but is
                                                                             not rendered by the browser.
          <frameset>content of the frameset</frameset>                       Defines a collection of frames and
                                                                             framesets and controls their spacing
                                                                             and borders. Replaces the <body> tag
                                                                             in a frames document; can also be
                                                                             nested in other framesets.
          <frameset rows="value,value"></frameset>                           Defines the number and width (value)
                                                                             of the rows within a frameset. Values
                                                                             are in pixels or percentages of
                                                                             frameset width.
          <frameset cols="value,value"></frameset>                           Defines the number and width (value)
                                                                             of the columns within a frameset.
                                                                             Values are in pixels or percentages of
                                                                             frameset width.
          <frame>content of the frame</frame>                                Defines a single frame — or region —
                                                                             within a frameset.
          <noframes>message to be displayed by browser that is not           Defines the message that will be
          frame-compliant</noframes>                                         displayed by a browser that doesn't
                                                                             support frames.


          Header Tags
          <title>title of the document</title>                               Displays the name of the document in
                                                                             the browser's title bar for the
                                                                             displayed document.
          <meta>information about the document</meta>                        Meta tag(s) provide additional
                                                                             information about the document. May


                                                                                                              Page | 20
Information Technology Division | Student Education | Creating a Webpage I




          <meta attribute(s)="value">information about the                   be used by search engines to locate
          document</meta>                                                    the document.
          <style>style properties</style>                                    Used to create properties to control
                                                                             the display of the body content for the
          <style attribute(s)="value">style properties</style>               entire document.
          <script>executable script to be processed by the                   Defines one or more scripts that can
          browser</script>                                                   be invoked by elements within the
                                                                             document. Some scripts are invoked
          <script attribute(s)="value">executable script to be processed     by code or attributes within the
          by the browser</script>                                            "body".



          Body Tag and Commonly Used Attributes
          <body bgcolor="value">document content<body>                       Specifies the background color, using
                                                                             the name or hex value of the color.
          <body background="url of the image" (or "path to the               Uses an image for the background.
          image")>document content<body>
          <body text="value">document content<body>                          Specifies the text color, using the
                                                                             name or hex value of the color.
          <body vlink="value">document content<body>                         Specifies the color of followed links,
                                                                             using the name or hex value of the
                                                                             color.
          <body alink="value">document content<body>                         Specifies the color of links on click.


          Text Markup Tags
          <pre>text to be preformatted</pre>                                 Displays preformatted text. Preserves
                                                                             all spacing and text characteristics.
          <h1>headline content</h1>                                          Displays the largest headline.
          <h6>headline content</h6>                                          Displays the smallest headline.
          <b>text to be displayed in bold</b>                                Displays bold text.
          <i>text to be displayed in italic</i>                              Displays italic text.
          <tt>text to be displayed in teletype style</tt>                    Displays teletype or typewriter-style
                                                                             text.
          <cite>information to be cited</cite>                               Displays a citation, usually in italic.
          <em>text to be emphasized (italic)</em>                            Emphasizes a word (currently with
                                                                             italic).
          <strong>text to be emphasized (bold)</strong>                      Emphasizes a word (currently with
                                                                             bold)
          <font face="value">text to be displayed in a certain font</font>   Specifies font face (e.g., Arial,
                                                                             Courier, Times Roman)
          <font size="#">text to be displayed in a certain font</font>       Specifies font size, from 1 to 7.
          <font color="value">text to be displayed in a certain font</font> Specifies font color, using the name or
                                                                            hex value of the color.


                                                                                                                 Page | 21
Information Technology Division | Student Education | Creating a Webpage I




          Hyperlink Tags
          <a href="url" (or "path")>text to be displayed as a link</a>       Displays a hyperlink.
          <a href="mailto:emailaddr@somewhere.com"></a>                      Displays a mailto link.
          <a name="name of the target"></a>                                  Displays a target location within a
                                                                             document.
          <a href="#name of the target"></a>                                 Displays a link to a target location
                                                                             from elsewhere in the same
                                                                             document.


          Formatting Tags
          <p>content of the paragraph</p>                                    Begins a new paragraph or inserts a
                                                                             double line break.
          <p align="value">content of the paragraph</p>                      Aligns a paragraph to the left, right or
                                                                             center.
          <br />                                                             Inserts a single line break.
          <blockquote>text to be indented</blockquote>                       Indents text from both sides.
          <dl>list of definitions</dl>                                       Defines the beginning and end of a
                                                                             definition list.
          <dt>term to be defined</dt>                                        Displays each definition term.
          <dd>definition of the term</dd>                                    Displays each definition.
          <ol>ordered (numbered) list</ol>                                   Defines the beginning and end of a
                                                                             numbered list.
          <li>individual item in a list</li>                                 Displays a list item and its number.
          <ul>unordered (bulleted) list</ul>                                 Defines the beginning and end of a
                                                                             bulleted list.
          <div align="value">content to be formatted<div>                    A generic tag used to format large
                                                                             blocks of HTML. Also used for
                                                                             stylesheets.


          Tags for Graphic Elements
          <img src="path to the image" or "url of the image"></img>          Inserts an image.
          <img src="path to the image" or "url of the image"                 Aligns an image: left, right, center;
          align="value"></img>                                               bottom, top, middle.
          <img src="path to the image" or "url of the image"                 Specifies thickness of the border
          border="#"></img>                                                  around an image.
          <hr></hr>                                                          Inserts a horizontal rule.
          <hr size="#"></hr>                                                 Specifies the thickness (height) of a
                                                                             rule.
          <hr width="#" (or "%")></hr>                                       Specifies the width of a rule, as a


                                                                                                              Page | 22
Information Technology Division | Student Education | Creating a Webpage I




                                                                             percentage of the page width or an
                                                                             absolute value (pixels).
          <hr noshade></hr>                                                  Creates a rule without a shadow.


          Table Tag and Attributes
          <table>entire table contents</table>                               Defines a table.

          <table attribute(s)="value">table row contents</table>
          <caption>text of the caption</caption>                             Displays the caption for a table. The
                                                                             caption tag must be inside the table
                                                                             tag.
          <table border="#">entire table contents</table>                    Specifies the width of the border
                                                                             around a table.
          <table align="value">entire table contents</table>                 Specifies the horizontal alignment of
                                                                             the table on the page. Options are left,
                                                                             center and right.
          <table cellspacing="#">entire table contents</table>               Specifies the amount of space
                                                                             between table cells.
          <table cellpadding="#">entire table contents</table>               Specifies the amount of space
                                                                             between a cell's border and its
                                                                             contents.
          <table width="#" or "%">entire table contents</table>              Specifies the width of a table — as a
                                                                             value in pixels or as a percentage of
                                                                             document width.
                                                                             Specifies the background color of a
                                                                             table. Value must be a color's hex
                                                                             number or one of the approved color
          <table bgcolor="value">entire table contents</table>
                                                                             words. This attribute can also be used
                                                                             to specify the background color of a
                                                                             table row or of an individual cell.


          Table Row Tag and Attributes
          <tr></tr>                                                          Displays a row in a table. Table row
                                                                             tags and their content must be inside
          <tr attribute(s)="value">table row contents</tr>                   the <table></table> tag.
          <tr align="value">table row contents</tr>                          Specifies the horizontal alignment for
                                                                             cell(s) (left, center or right).
          <tr valign="value">table row contents</tr>                         Specifies the vertical alignment for
                                                                             cell(s) (top, middle or bottom).


          Table Data Cell Tag and Attributes
          <td>content of a data cell</td>                                    Displays the contents of a cell in a
                                                                             row. <td> (data cell) tags and their
                                                                             content must be placed inside a

                                                                                                               Page | 23
Information Technology Division | Student Education | Creating a Webpage I




                                                                             <tr></tr> tag.
          <th>content of a table column heading</th>                         When placed inside the first row of a
                                                                             table tag, <th></th> tags display
                                                                             column headings in bold, centered
                                                                             text.
          <td width="value">content of a data cell</td                       Specifies the width of a cell.
          <td align="value">content of a data cell</td>                      Specifies the horizontal alignment for
                                                                             the content of an individual cell (left,
                                                                             center or right).
          <td valign="value">content of a data cell</td>                     Specifies the vertical alignment for the
                                                                             content of an individual cell (top,
                                                                             center, middle, baseline or bottom).
          <td colspan="#">content of a data cell</td>                        Specifies the number of columns a
                                                                             cell should span.
          <td rowspan="#">content of a data cell</td>                        Specifies the number of rows a cell
                                                                             should span (default=1).
          <td nowrap>content of a data cell</td>                             Prevents the lines within a cell from
                                                                             being broken to fit.


          Frame Tag and Attributes
          <frame src="url of the document to be displayed in the             Specifies the HTML document to be
          frame">content of the frame</frame>                                displayed within the frame.
          <frame name="name of the frame">content of the                     Names the frame, or region, so that it
          frame</frame>                                                      may be targeted by other frames.
          <frame marginwidth="#">content of the frame</frame>                Specifies the left and right margin
                                                                             widths for the frame; must be equal to
                                                                             or greater than 1.
          <frame marginheight="#">content of the frame</frame>               Specifies the top and bottom margin
                                                                             widths for the frame; must be equal to
                                                                             or greater than 1.
          <frame scrolling="value">content of the frame</frame>              Determines whether the frame has a
                                                                             scrollbar; values are "yes," "no" and
                                                                             "auto." The default, as in ordinary
                                                                             documents, is auto.
          <frame noresize>content of the frame</frame>                       Prevents resizing a frame.


          Form Tags
          HTML creates only the appearance of a form. For the form to
          work properly, a script is needed on the server. The script
          processes the transaction after the "Submit" button is
          pressed.
          <form>content of the entire form</form>                            Displays a form.
          <select multiple name="name" size="#"></select>                    Displays a scrolling menu. Size sets
                                                                             the number of menu items visible


                                                                                                              Page | 24
Information Technology Division | Student Education | Creating a Webpage I




                                                                             before you need to scroll.
          <select name="name"></select>                                      Displays a pulldown menu.
          <option>description of a menu item</option>                        Labels a menu item.
          <textarea name="name" cols="#" rows="#">text or instruction Displays a text box area. "Cols" value
          to be displayed inside the box (usually left blank)</textarea> sets the width; "rows" value sets the
                                                                         height.
          <input type="checkbox" name="name">text to be displayed            Displays a checkbox and its
          next to the box</input>                                            associated text (label).
          <input type="radio" name="name" value="x">text to be               Displays a radio button and its
          displayed next to the button</input>                               associated text (label). Value
                                                                             indicates the symbol or text that will
                                                                             be sent to the server if this option is
                                                                             selected.
          <input type="text" name="name" size="#">text to be                 Displays a one-line text area. Size
          displayed next to the area</input>                                 indicates the number of characters
                                                                             that the user can type in the box.
          <input type="submit" value="name">text to be displayed next        Displays a "Submit" button
          to the button (often left blank)</input>
          <input type="image" border="#" name="name" src="path to Displays a "Submit" button using an
          or url of the image">text to be displayed next to the image (often image.
          left blank)</input>
          <input type="reset">text to be displayed next to the button        Displays a "Reset" button.
          (often left blank)</input>


          Deprecated Tags (outdated, to be discontinued)
          The following tags are currently supported by HTML 4.01
          and XHTML 1.0, but their use is discouraged.                                    Use instead:
          <applet> - Embedded Java or other language applet                  object
          <basefont> - Default font properties                               cascading style sheets (CSS)
          <center> - Centered block of text                                  CSS
          <dir> - Directory list                                             ul tag and CSS
          <font> - Inline text font properties                               CSS
          <isindex> - Queryable document (text query interface)              input element inside a form
          <menu> - Menu list                                                 ul tag and CSS
          <s> - Strike-through text style                                    CSS
          <strike> - Struck-out text style                                   CSS
          <u> - Underline text style                                         CSS
          URL - Uniform Resource Locator. An informal term (no longer        URI - Uniform Resource Identifier.
          used in technical specifications) associated with popular URI      The generic set of all
          schemes: http, ftp, mailto, etc.                                   names/addresses that are short
                                                                             strings that refer to resources.




                                                                                                               Page | 25
Information Technology Division | Student Education | Creating a Webpage I




         Thank you for your interest in Student Education. We hope that this class has been
         helpful. If you have additional questions or comments about this class or any others,
         please contact us at classreg@ncsu.edu or leave us feedback at out webpage,
         http://www.ncsu.edu/it/education/students.




                                                                                           Page | 26

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:2
posted:2/24/2012
language:
pages:26