Html / Web Pages - DocsLib

Html / Web Pages

1HTML / WEB PAGES

Assignment: Design and produce your own web page, then upload it to the University computer.

What you need: You will need a University Unix / Neo account, and you must know your account password.

Requirements: You will develop a web page using only html code to display the following elements: frames, including a contents or site map and a display window the mission or purpose of your page (shown on the Home Page) the date your page was developed or last revised (also on Home Page) your photograph, your name, and contact information (email) a page/section about your interests, hobbies, etc. (“About Me”) a section dealing with your major, including a link to your departmental home page links to other web pages dealing with your areas of interests or hobbies (3 minimum) various pictures--animated gifs and digital (scanned) photos a link to return you to the opening page at least one page with a background image a list of some type (a bucket list or “leap” list, for example) a table of at least three rows and three columns with a thumbnail photograph which links to an enlarged or full-size image of itself at least four content pages devoted to various subjects such as family, friends, music, favorite sites, video clips, voices, memories, etc. a long page with internal navigation links You may then use Dream Weaver to produce a display of the following: an image map with “hot spots” linking to three other files/sites.

Note: You should not list your birthday, address, GPR, or other personal information on the web page. This web page will be made public and accessed by students in this class and anyone else who has the address. You will be allowed to remove it from public access after it has been graded at the end of the semester. While it is University policy to delete the pages after you graduate, it is suggested that you consider removing it at the end of your final semester before graduation. Sometimes the University fails to remove it and your page may be viewed by future prospective employers.

1 You may acquire a domain name and develop a page on a non-university server, but that is not a requirement.What is HTML? HTML stands for Hyper-Text Mark-up Language. It is a user friendly (?) programming language which is simple to compose and use in preparing a web (Internet) home page.

Why not use Microsoft Word, Front Page or some other Web Page builder? You can use a variety of programs to develop your own web page. However, using HTML directly will let you learn the principles of page design and will not limit you to the pre-selected formats utilized in specialized programs. With knowledge of HTML, you can fabricate and alter your own page and individualize it in a fashion not always available through the other programs.

Codes:

Correct usage of html codes is critical. Html codes are always enclosed in angle brackets (< >) and some require that they be initiated then turned off in separate commands. Most commands will also have options which may be included within the angle brackets.

All .htm or .html files must be saved as ASCII or text files–do not save them as Word documents or WordPerfect files. Renaming of files to change the extension will not change the nature of the contents. Thus, a file named Myfamily.doc renamed to Myfamily.htm is still a Word document, not an ASCII file.

Both Word and WordPerfect can cause problems by saving files with a double extension. Thus, you may specify that a document be saved as an ascii or text file with the htm extension, but the file in the example above may be saved as Myfamily.htm.txt rather than Myfamily.htm. For this reason, it is recommended that the full MSDOS file extensions be displayed when viewing a listing of files.

When composing your files, use of Notepad or a simple editor program (WordPad) is recommended over use of either Word or WordPerfect. HTML commands can be in either upper or lower case.

Since your web page may be loaded onto various operating systems, if is usually a good idea to abide by MSDOS naming conventions. The file name should not exceed eight characters with a three character extension (eg., filename.ext ) and the name should contain no spaces or other illegal characters (*, ? for example). Using only lower-case letters will also help, especially since the UNIX computer is case sensitive.

HTML codes are listed in the resources section of the web site. Listed below are some of the more common html codes or commands. Note that they are always included in the angle brackets:

This is the initial code which must appear first in all html files. It signifies that what follows is in Hyper-text markup language.

2 This command should be at the very end of every html file. It signifies the end of the html code file. On some servers it may be optional, but others may malfunction if it is not present.

This code signifies that the following text is to appear in the banner line (the top line on your screen). This will print the title for your page in that line. Inclusion of this command is optional. This marks the end of the title which appears in the banner line.

This initiates the header command. Certain commands must be included in the header command in order to run correctly This closes the header command.

This indicates that what follows is the “body” of a document. There are options which can specify the background color (bgcolor), text color (text), color of links (link) and color of visited links (vlink). An example of the use of these options is as follows:

This closes the body text but is not normally required.

This is used to change the size, color and other font attributes. These settings will remain in effect until the command is closed () or superceded by another command. Options include the font size and font color commands. Sizes are indicated by a plus (+) or minus (-) sign to indicate larger or smaller text, followed by a number (usually 1 to 4) to indicate the degree. The color can be specified by its name, in quotation marks, or by its hexadecimal code (#000000 = black, #FFFFFF = white). An example of a font command with options follows:

This signifies a “paragraph break” or inserts a blank line between its location and the next text item. There is no closing command needed.

The “break” command inserts a blank line and can be repeated multiple times. There is no closing command needed.

Makes text bold. Close with . You will sometimes find the command doing the same.

Makes text font italic. Closes with .

3 Used to insert an image on the page. You can utilize either .gif (Graphic Image Format) or .jpg (JPEG or Joint Photographic Experts Group) images on your web page. Other formats are not supported. There are options to reset the display width (width) and/or height (height), frame it within a border (border), and to align its position (align). An example on an image command follows:

Used to set links to other servers/pages. The form used is as follows:

Where the address is of the form http://www.amazon.com and the “Link Name” would be a descriptor such as Amazon Books.

This command, always placed in the header command, allows you to subdivide the page image into frames based on columns, rows, or both, and display different files in each. See the following discussion on the index file for more information on this command.

<… title="…"> This option will cause the appearance of a text message when the cursor is pointed at a picture on the web. It is used with both the image and body commands:

The marquee command is used to set scrolling text. The default yields text which scrolls from right to left, but you can set various options. Setting the behavior option to alternate gives a marquee which "bounces" from side to side but does not disappear.
Welcome To My Web!
You may also set the direction of the movement (up, down, left or right) and you may have multiple marquee commands to provide bi-directional movement. (Note, this may not be supported by all browsers.)
Welcome to my Web! 4
This is html code for a space. It can be repeated as needed.
This code will cause the text to blink on and off until the command is closed with A
Developing your Web Page index.html Your opening file for your web page must be named index.html (note: all letters are in lower case) for it to open properly on the University computer.
It is highly recommended that the opening page contain frames so that the viewer can select from a menu in one frame and see the results displayed in an adjacent frame. The text in the following box displays the contents of the index.htm file that has been saved as a text document after being composed in Notepad.
The first command, designates this as an html file. The title, which appears in the line at the top of web page when displayed in the browser, can be any text of your choice but should describe the nature of the web page. Note that the and commands both are in the head– enclosed by the and command codes. They must appear first in this file after the and codes or they will not take effect.</p><p>The <frameset> command defines the frames by setting the border width in pixels (border=5), the border color (bordercolor=“green”) and specifying whether we are dividing the the page vertically by columns (cols=) or horizontally by rows (rows=). The number and size of each division is indicated by the number of divisions specified and their sizes, either in pixels or as a percent of the total space. Thus, cols=15%,* means two columns, the first with 15% of the available </p><p>5 screen width, the remainder (*) in the second. If the code read rows=15,10%,* it would specify three horizontal divisions, the first of 15 pixels, the second of 10% of the available space, and the remainder in the third frame.</p><p>Before the frameset command is closed, we need to specify the opening contents for each frame (the file to be displayed) and to name the frames so that we can target them later. In this case, the frames are named logically as “left” and “right”. (You may use other names, but this may cause confusion as you continue the web pages.) The contents of each upon opening will be in files to be created which will be named “left.htm” and “right.htm”. Finally, scrolling is set to automatic. If the frames were set horizontally rather than vertically, they might be named “top” and “bottom” instead, and the opening files might be “top.htm” and “bottom.htm” respectively. </p><p>Once the frames have been named, the <frameset> command is closed, then the <head> command is closed, and the <html> command is closed and the file is saved as index.html in text format (as a text document). left.htm Having created the index file, we now begin to define the opening contents of the left frame. This will be our table of contents or menu of selections for files and items which will be displayed in the right or second frame. Your named file might have contents such as found in the following text box.</p><p>Note that in this case you have centered the heading “Contents” which is in a larger than default-sized font and in green. Note also that the name of each referenced file is enclosed in quotation marks and includes the entire filename and its extension in the format filename.ext. The period or dot between the filename and the extension is mandatory. </p><p>Also note that a Word document quotation mark (“) differs from the text (") and will be read differently by the browser used.</p><p>We have also specified that when these files are selected for display, they will </p><p>6 appear not in this menu or contents frame but in the frame named “right” (target=”right”). The text which precedes the closing of the <a> command (</a>) is what will appear as the link on the screen. The link will initially appear in blue color, but will shift after it has been viewed. The <p> code will insert a blank line between each content item. Since the center command in the header was not closed, all items are centered. right.htm The initially displayed screen in the right frame can be left blank or it can contain some welcome message or information you wish to display. It can contain an image (such as an animated gif file) or something that relates to you or your interests. At the least, the blank file should contain the commands shown in the box below.</p><p>An example of a simple opening page appears below.</p><p>Content pages The box below identifies linkages to the pages of several agencies and/or organizations in the area of recreation, parks and tourism. In this case, each link includes a small picture relating to that site–usually the logo of the agency or organization. Since the image is included before the closing of the <a> command it also becomes part of the clickable link, even if no text were present. Such a page might be your favorite.htm page.</p><p>7 Loading to the Mainframe Computer: (from a remote site)</p><p>It is necessary to have a Unix/Neo account and the proper password to place your files on a computer system where they be accessed by others. If you have never used a Unix account, you may set one up through the SCC help desk. If you already have an account but have forgotten your password, take a picture ID and go to one of the appropriate Computer Center locations to have it reset.</p><p>Once you have your account, go to the site http://oalinfo.tamu.edu and select "Web Space Setup" from the Account Services menu. You will enter your neo login id and password, and this will set up an HTML folder called .public_html in which all of your files must be placed. </p><p>There are a few things to keep in mind when designing your page. First, use short file names (8 characters with a 3 character extension) with no spaces. Keep in mind that the Unix server is case sensitive and that references to linkages must be the same (a reference to me.JPG may not locate a file named me.jpg on the Unix server even though it does so on your microcomputer.) Second, the initial file for your web page must be named index.html (index.htm will work on the microcomputer, but not on the unix system). Note also that the index.html file name must be in all lower case letters.</p><p>The next step, after setting up the Unix account, is to transfer files from your drive to the .public_html folder on the main computer. Transfers are done using a secure FTP (for file transfer protocol) program. Initiate the program (winscp.exe), enter people.tamu.edu as the Host name, your login or user name, and your password, then click on the Login button.</p><p>When this has been successfully accomplished, you will have two windows–a left window which displays the personal computer drive and a right window which displays the public_html folder on the Unix. (See image below)</p><p>Go to your P: drive and your web page folder in the left window. In the right window, double click on the public_html folder to open it.</p><p>Select a file or group of files on the left and drag them over to the right side. You will then get a "copy" prompt. Click on the "Copy" button and the file will be placed in your Unix folder.</p><p>8 You may also use Filezilla, another FTP program to transfer you files. If you cannot login to your public_html folder through either Filezilla or WINSCP, try entering you user name in all lower case letters.</p><p>Image Maps</p><p>Image maps are digital images with defined “hotspots” that act as links to other pages or sites. For example, you may have a group photograph and you place a hotspot or link on your picture and have it link to your “aboutme.htm” page. Or it could be a map of Texas with links to your hometown web site, Texas A&M University, favorite waterpark or whatever you wish to identify. Begin by creating a simple file such as this, saving it as imagemap.htm.</p><p>Image Maps Using Dream Weaver</p><p>Open your imagemap file in Dream Weaver. It the image does not show, be certain that it resides in the same folder as your imagemap.htm file. If it still does not open, it have the wrong file extension, no file extension, or it may be a corrupted image.</p><p>You may resize the image by holding down the shift key and left clicking on the square at the bottom right edge of the image. Moving the mouse will make in larger or smaller while maintaining the aspect ratio.</p><p>Next, select the image (click on it) and note the three shapes in the bottom left of the page—a rectangle, circle, and polygon. Use one of these to define and position the first shape. If you get it wrong, use the undo key and start it over. The defined area should be large enough to be easily found by any visitor to your page. Once you release the mouse button, you will be able to go to the link area and enter a hypertext reference. Delete the # sign, then type in the entire link address, including the http://www at the start. You will then set the target—you can type in “right” to have it appear on the right side of your page or you can select “blank” or type in “new” to have it appear in a new window. It is strongly recommended that you always open other pages in a new window—some will not open within a frame.</p><p>When you have finished inserting your links, save the file and test it out to be certain it works properly.</p><p>Image Maps Using Front Page</p><p>Find or capture a digital image of a map of your home town or area (either JPEG or GIF) to use in making the image map. If none is available, you may use a Bryan or College Station map. Copy it into your web page folder. Find the locations of at least three sites which might be of interest to a visitor to the community. If these sites have their own web pages, record those </p><p>9 addresses.</p><p>Open Microsoft Front Page to a new page. Use the insert command to insert your map which you may wish to enlarge or reduce to fit the screen. Click on the inserted picture to select it. At this point, the picture toolbar should appear at the bottom, and you are ready to insert the “hotspots” and the links.</p><p>Select the type of link you wish to make–circle, square/rectangle, or polygon–from the picture toolbar, then draw that figure on your image. Once the figure is drawn, a pop-up box will allow you to enter the link.</p><p>When all of the links are mapped, save the file under the appropriate name and htm extension. You may also be prompted to save the embedded image if it is not in the folder.</p><p>Test the program, making whatever changes are necessary for it to operate in proper fashion–you may need to alter the <a href=...> commands if they do not work properly.</p><p>10</p> </div> <div class="ft-cover"> <a href="#" id="scrollLink"><i class="iconfont icon-top-1-copy i-bottom"></i> Load more</a> </div> </div> </div> </div> </div> </div> <div class="about-item" data-tab-item="article"> <div class="article-container" id="loader"></div> <div class="load-content flex-column-center"> <p class="load-p" id="onLoadMore"><span id="surplus"></span></p> <p class="load-p" id="load-text"></p> </div> <div id="downTop"> <div class="reader-tools-bar"> <div class="tools flex-justify"> <a href="javascript:void(0);" title="previous page" class="tools-prev flex-justify"> <i class="iconfont icon-top-1-copy left"></i> </a> <input type="text" class="page-cur" value="1" /><span class="page-num"> 10</span> <a href="javascript:void(0);" title="next page" class="tools-next flex-justify"><i class="iconfont icon-top-1-copy right"></i></a> </div> <div class="bar-download"> <a href="javascript:;" id="copyLink"><i class="iconfont icon-lianjie i-size"></i> Copy Link</a> </div> </div> </div> </div> </div> </div> </article> <section class="recommend"> <div class="panel-box"> <div class="panel-success"> <div class="panel-heading"> <div class="panel-flex"> <div class="panel-left"> Recommended publications </div> </div> </div> <div class="panel-body"> <ul class="panel-body-ul"> </ul> </div> </div> </div> </section> </div> <div class="rw-right row-pd" id="side-right"> <aside class="side" id="side-list"> <div class="side-download"> <a href="" class="side-load-a flex-justify" title="Download"> <i class="icon-load"></i> <span>Download</span> </a> </div> <div class="side-tag"> <ul class="side-tag-ul"> <li><a href="javascript:;" data-tab-target="featured" class="active">Featured</a></li> <li><a href="javascript:;" data-tab-target="last" class="">Last Commenis</a> </li> <li><a href="javascript:;" data-tab-target="popular" class="">Popular</a></li> </ul> <div class="tab-items"> <div class="tab-item active" data-tab-item="featured"> <ul> <li><a href="/doc/13933273/state-of-california-s18">State of California s18</a></li> <li><a href="/doc/13933272/united-states-v-days-inn-of-america-inc-s1">United States V. Days Inn of America, Inc s1</a></li> <li><a href="/doc/13933271/speech-for-mr-tong-chong-heong-at-the-naming-ceremony-of-fpso-four-vanguard-at-keppel-shipyard">Speech for Mr Tong Chong Heong at the Naming Ceremony of Fpso Four Vanguard at Keppel Shipyard</a></li> <li><a href="/doc/13933270/license-and-services-agreement">License and Services Agreement</a></li> <li><a href="/doc/13933269/u-s-department-of-housing-s1">U.S. Department of Housing s1</a></li> <li><a href="/doc/13933268/performance-evaluation-of-a-private-commercial-bank">Performance Evaluation of a Private Commercial Bank</a></li> </ul> </div> <div class="tab-item" data-tab-item="last"> <ul> <li><a href="/doc/13933267/2013-2014-bill-1216-city-of-cayce-day-south-carolina-legislature-online">2013-2014 Bill 1216: City of Cayce Day - South Carolina Legislature Online</a></li> <li><a href="/doc/13933266/alternative-registration-signature-statement">Alternative Registration Signature Statement</a></li> <li><a href="/doc/13933265/G700-Vs-G350-Comparison-Application-Note-Issue-1-0">G700 Vs. G350 Comparison Application Note - Issue 1.0</a></li> <li><a href="/doc/13933264/kittler-friedrich-on-the-history-of-the-theory-of-information-warfare-in-infowar-springer">Kittler, Friedrich. on the History of the Theory of Information Warfare. In: Infowar Springer</a></li> <li><a href="/doc/13933263/real-time-pcr-was-performed-according-to-the-taqman-method-in-a-25-l-volume-using-1-g-total">Real-Time PCR Was Performed According to the Taqman Method in a 25 L Volume Using 1 G Total</a></li> <li><a href="/doc/13933262/biotemplating-white-beetle-scales-for-isotropic-high-index-photonic-materials">Biotemplating White Beetle Scales for Isotropic High Index Photonic Materials</a></li> </ul> </div> <div class="tab-item" data-tab-item="popular"> <ul> </ul> </div> </div> </div> <div class="adspace"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8519364510543070" data-ad-slot="2167091933" data-ad-format="auto"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> <div class="side-message"> <ul> </ul> </div> </aside> </div> </div> </div> </main> <script> var totalPage = 10; var dId = 13933274; var docId = '501d4420dba594c33c34aa94f3781e05'; </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="/js/article.js"></script> <footer> <div class="container-fluid"> <a href="#Top" data-toggle="tooltip" data-original-title="TO TOP"> <i class="iconfont icon-top-1-copy"></i> </a> <br /> <br /> <span>© 2024 Docslib.org </span><span><a href="/help/feedback">Feedback</a></span> </div> </footer> <script> $(".nav-menu").click(function () { $(".menu-list").toggle(); }); </script> <script type="text/javascript"> var sc_project = 11552861; var sc_invisible = 1; var sc_security = "b956b151"; </script> <script type="text/javascript" src="https://www.statcounter.com/counter/counter.js" async></script> </body> </html>