This action might not be possible to undo. Are you sure you want to continue?
Benedicto B. Balilo Jr.
Benedicto B. Balilo Jr.
This course covers Web site development using three methods: handcoding HTML using a text editor; building Web pages using a WYSIWYG editor like Dreamweaver; and using the most modern method, a Content Management System like joomla that separates design from content while making it easy for non-technical users to update a site. We will cover design principles, Cascading Style Sheets, server-side vs. client-side technologies,Web browsers, and Web servers. Consideration of XHTML and XML.
It is assumed that you«
know the fundamentals of HTML have a general understanding on how Web servers and client browsers works know at least 1(one) web application tool
introduce the concept of Internet and world wide web know the difference between static and dynamic web page be familiar and gain understanding on the different HTML tags
At the end of the presentation you are expected to design a static web page using Notepad application. Your design should focus on school information with minimum links covering about, home, profile, contact The presentation should include pictures, links and appropriate template.
³The Internet and Web technologies have changed the way we view and interact with information.´ ± IS226 UPOU Previously the information is based on documentcentric model which is static. But, today we have shifted our concept of information to dynamic model, which is both structured and unstructured information presented in a Web browser. We have shifted our expectations of the quality of information we interact with. And, information must be timely.
The beginning of information system evolution come along in the 1950¶s which is the change of manual to a computer system come technical. The 1970¶s was characterized as the Era of Effectiveness. Organizations aimed for improved managerial and organizational effectiveness. In the 1980¶s, the Era of Competitiveness began. IS were used as a tool for competitive advantage.
The INTERNET is a global connection of computers, allowing organizations to exchange information internally or to communicate externally with other organizations. Internet technologies and capabilities allow users to retrieve and offer information. Electronic Mail (E-mail) Usenet Newsgroups (Forums) ± people share information on a defined topic Chatting File Transfer Protocol (FTP) ± access a remote computer and retrieve files from it or upload files to it.
The World Wide Web consists of:
pages of information accessed (Web Pages)
servers on which the pages of information reside (Web Servers)
client software you use to access the pages (Web Browsers)
network between your computer and the Web server/s with which you interact.
Why GO online?
The strengths of e-Business depend on the strengths of the Internet. E-Business can take advantage of the strengths of the Internet, namely: Global Accessibility and Sales Reach Closer Relationships Free Samples Reduced Costs Disintermediation Time to Market Customer Loyalty
Reasons why a company needs an online presence
Expanding Market reach Generating visibility Strengthening business relationships Responsiveness Offering new services Cost reduction Just-in-Time inventory
Concerns About Going Online
Channel Conflicts Competition Copyright Customer Acceptance Legal Issues Loyalty Security Viability
Internet Business Models
Category Virtual Store Desciption Examples Sells physical goods Amazon.com or services on-line Virtual instead of through a vineyards physical storefront ore retail outlet. Provides service and support for hardware and software users Provides information on particular academic org. Government agency CyberMedia TuneUp.com
Category Marketplace concentrator
Description Concentrates information about products and services from multiple providers at one central point Provide product, pricing, and availability information. Provides auction-like settings for products where price and availability are constantly changing. Creaes revenue by providing content.The customer may pay to access the content, or revenue may be generated by selling advertising space
Examples InternetMail DealerNet InsureMarket
PartNet Travelocity AutoByTel Bid.com OnSale
Wall Street Journal Quote.com Tripod
Introduction to the Web and the Internet
Understand the basic structure of the networks and the Internet Define the World Wide Web
Explain the concepts behind some of the common uses of the Internet and the Web.
History of Internet
1969 ± network of four computers called ARPANET (Advance Research Project Agency)- computer sharing network 1971 ± fifteen nodes in ARPANET 1972 ± 37 nodes
Throughout the years, the network grew through its decentralized structure, which could accommodate different kinds of machines. Those came the term ³Internet´
Network and Internetwork
Network is a group of interconnected systems sharing services and interacting by means of shared communication link. something to share (data) a physical pathway (transmission media) rules of communication (protocols)
Internetwork is two or more networks that are connected so that they can exchange messages and share information
Is the world¶s largest Internetwork. Each computer in the Internet has an assigned IP address. An IP address consists of four numbers between 0 and 255 separated by period 184.108.40.206 An organization called InterNIC gives IP addresses to various ISP¶s. These ISP¶s then distribute these addresses to computers in their network.
Domain name system (DNS) 220.127.116.11 www.companyx.com
Cybersquatting an act of owning or grabbing a domain name that technically belongs to or is the trademark of someone else. Internet uses client-server relationship. All computers connected to the net are the same. Servers are special types of computers that are capable of delivering information and data. Clients are computers that may only receive data.
Static vs Dynamic
content doesn¶t change until the author updates it no interaction with visitors
content changes depending on the data supplied (customizable actions) there is user interaction
A system that accesses a service or a resource request from another computer or program
A system that fulfills requests or provides services
processing is done entirely by the client -> ex. HTML
Business Logic Tier
volume of processing is in the server or in the middle tier
HTML is a way of defining the formats of text in a web page. HTML is a sub-language of SGML, or Standard Generalized Markup Language. SGML is a system that defines and standardizes the structure of documents. HTML tags are used to define areas of a document as having certain characteristics. The tags used in HTML usually consists of a code in between two ´wicketsµ. These codes are called container tags because the formatting described by the tag affects only the text contained between the tags. ex. <B> « </B>
Sample HTML code
<html> <head><title>Sample HTML Tag</title></head> <body bgcolor="white"> <table width="400" cellpadding="3" cellspacing="5"> <tr> <td id="tablePropsWidth" width="400" colspan="2"><font id="LID1" style="COLOR: black; FONT: 8pt/11pt verdana">Internet Explorer is unable to display this page when you are not connected to the Internet.</font></td> </tr> <tr><b>Make available offline</b> check box.<br> </li> <li id="instructionsText3">On the <b>Tools</b> menu, click <b>Synchronize</b>. </li> <h2 style="font:8pt/11pt verdana; color:black" id="ietext">Internet Explorer </h2> </table> </body> </html>
WEB BROWSERS A browser is a piece of software that acts as an interface between the user and the inner-workings of the Internet. also referred to as Web Clients, or Universal Clients because in the client/server model, the browser functions as the client program. The browser acts on behalf of the user. (1) contacts a web server and sends a request for information (2) receives the information and then displays it on the user·s computer. can be graphical or text-based. A text-based browser shows the user only the textual matter. A graphical browser allows the user to see more of what the WWW has offer such as graphics, photographs and multimedia. text-based browser is Lynx graphical browsers includes IE, FireFox, Mosaic, Opera, Amaya, HotJava.
HyperText Markup Language The language of web pages Describes the structure of a document File Extension: html or htm Not case-sensitive Its elements are called tags
<HTML> <HEAD> <TITLE>Page¶s Title </TITLE> </HEAD> <BODY> contents here« </BODY> </HTML>
Basic elements of the Web
HTML ± the coding language of the www that informs browsers how to display a document¶s text, links, graphics, and other media
Webmaster ± individual responsible for maintaining and updating the content of the www document.
Domain name ± name given to any computer registered on the www as an official provider of information and files.
URL ± Uniform Resource Locator serves as identification for all www documents.
Web site ± a collection of www documents, usually consisting of a home page and several related pages.
Home page ± the ³cover´ of a particular web site. The home page is the main, or first page of an organization¶s or person¶s web site.
Link ± short for ³hyperlink´. A link provides a path that connects you from one part of a www document to another part of the same document.
± a link that takes you to a different part of the same web
Image map ± enables you to click various locations in a graphic image to link to different documents. Frame ± presents text, links, graphics, and other media in separate portions of the browser display. Table ± presents documents in row and column format.
Uses of the Internet
email three(3) elements - user ID ± user identification like vince10 - @ - µat¶ sign connects the user ID with the third element - Domain example: email@example.com
Different headers concerning sending an email -To: - From: - Subject: - CC: - BCC - Attachments:
Uses of the Internet
Acronyms associated with email SMTP ± Simple Mail Transfer Protocol refers to the standard rules that many e-mail clients use to handle outgoing e-mail message. POP3 ± Post Office Protocol version 3, the standard rules that many email clients use to handle incoming email messages. MIME ± Multipurpose Internet Mail Extensions, a format for turning an email attachment, such as a Word file, into ASCII text so it can be sent from one email account to another.
Uses of the Internet
chatting ± sending and receiving messages directly with another person or group of people. IRC ± Internet Relay Chat, a multiuser version of a program called µtalk¶, allow only one-to-one conversations. - developed by Jarkko Oikarinen - using IRC, large groups of people can simultaneously participate in discussion groups called µchannels¶.
getting files ± FTP is one of the most popular methods of obtaining software and documents on the Internet.
Navigating the Web
One of the most uses of the Internet is to obtain information. It is important to know the basic parts of a Web URL or the address of an Internet file. It consists of four parts: - protocol - server (or domain) - path - filename http://microsoft.com/windows/default.php
Navigating the Web
Search Engine ± a service that indexes, organizes, and often rates and reviews web sites. Some major search engines: - Yahoo! - Google - MSN Web Search - Infoseek - Snap - MetaCrawler - AltaVista - Bing
Protocols are defined as ways in which computers communicate with each other. They determine how data is send, how data is received, what must be done to ensure that data received is correct, what kind of data is sent, and so on. SEVEN layers of OSI 1. Physical layer ± lowest level, concern with electrical signals 0,1 2. Data link layer ± how bits are sent, detecting and correcting errors in transmission in the physical layer 3. Network layer ± data grouped into packets, correct path 4. Transport layer ± make sure packets received from other end 5. Session layer ± keeps track which computer is currently talking 6. Presentation layer ± concerned with the meaning of bits 7. Application layer ± just a collection of protocols email, ftp, etc
was adopted as the standard by the developers of the Internet. TCP/IP is a combination of TCP and IP. TCP resides in the transport layer while IP coincides with the network layer. IP ± a protocol that contains addressing information and some control information that enables packets to be routed. TCP ± provides reliable transmission of data in an IP environment. This means it includes error-detection and correction. TCP is also responsible for sending acknowledgements that data have been received correctly.
HyperText transfer protocol - HTTP
HTTP is the WWW application-layer protocol. It is implemented in two programs: - a client program - a server program HTTP defines how Web clients (browser) request pages from Web servers and how Web servers transfer Web pages to Web clients.
Uniform Resource Locator (URL) ± refers to the address of a resource on the Web. Components of URL site address (host) ± identifies the site address of the computer http://18.104.22.168 http://www.ics.uplb.edu.ph port number filepath and filename http://www.yahoo.com/index.html fragment identifier http://facultyportal.com/faculty/syllabus.html#it26 parameter http://facultyportal.com/it26/exams/quiz1.cgi?id=123+passw ord=*****
Stages of Web Development
Analysis of the Project: This is the very basic stage of web development in any web development company. Before starting off it is required to gather some of the basic information about the project. The objectives and purpose of developing a site is to be known. It is also important to know for whom the site is going to be developed. Documentation: Once the project analysis is complete, it is required to know whether it is feasible to carry out the project. The cost has to be also calculated. Documentation is prepared which is passed on to the clients for their approval. Designing a Site: Site designing starts once a project and its pricing are approved between the client and a web development company. Now the look and feel of the site is planned and designed. Developing a Site: This is one of the essential parts of web development. Development of a site comprise designing a database and prepare proper coding for a site. This is a back end coding that helps to run a site.
Stages of Web Development
Testing: Once designing and development of a site is complete, it is given for testing. The test engineers are assigned with the duty to check whether the site is properly working or not. On finding errors they are conveyed to the developers of the site for required modifications. The testing process is continuously carried out until the site is completely error free. Setting it Up: After the testing engineers it is the client·s turn to check the site. Following a customer·s feedback it is either sent back to the developers or if it is approved then preparations are taken to set it up. Regular Maintenance: This is the last but not the least stage of web development. A site after going live needs regular maintenance. A site should be also regularly updated from time to time.
Elements of Web Design
Factors to consider when creating a Web site
Fluid and user friendly interface.
Remember, only you can make site use easy for your visitors.
Good organization and presentation are important. Site visitors need to scan a page and find the materials offered. Many visitors never scroll down a page. Long pages can have internal links (anchors) to section headings at the top of the page. Download speed is today's bottleneck. The majority of Web users are downloading on modem connections at 56 Kbps. File sizes and graphic sizes should be kept to the minimum needed for the page. Linked thumbnails can be used to present large graphics. Web pages are a nonlinear information distribution medium. Links can lead in many directions. You provide the pathways to information. Easy to understand navigation and/or visible site organization assists the user. Make your organization apparent.
Attractive graphic design.
The end user's page layout is not entirely under the control of the page creator. Layout suffers from certain limitations. Browsers can change font size. Browsers can change window size. Computers have differing monitor display sizes: (512 x 384), (640 x 480), (800 x 600), (1024 x 768), and larger. Monitors have different resolutions and can make pages look smaller or larger. Some Internet users are displaying the Web on television screens, palmtops, text-only devices or Braille readers. Will your page retain a logical sequence? Users can turn off graphics for faster downloading and to limit transition time. Different browsers and different versions of browsers can use different settings for the same HTML tags.
Theoretically, the Web is capable of the same features as a CD-ROM. Because everything on the Web is transmitted on a network, the download time limits what sites actually do? Print graphics might be 20 MB in size. A slow modem can take a minute to download a single Web page. Until bandwidth increases, using the smallest possible files to execute your ideas is best.
HTML capabilities are changing. The World Wide Web Consortium (W3C), a standards committee, presides over development of the HTML changes. The current version is HTML 4.0. Browsers might add support for new capabilities faster than they are adopted. This means that the great page you create today may soon be a cyber dinosaur. At the same time, some clients are using old browsers that may not support your 4.0 tags.
Web Site development process.
Goal and definition. Understand your audience and know the target software. Information Architecture. What are your site's functions. Do you want to deliver information or sell a product? Do a storyboard diagram of the pages and their hyperlink structure. Page architecture. What will the pages look like? Interface design. How will the pages be linked? Content creation. Scripting and programming. Testing. Publishing. Publicizing. This might be the most important aspect of the process if you are doing a commercial site.
Elementary Rules of Usage
Make sure your links work. This will prevent disappointed readers. The best way to make sure this doesn't happen is to test the pages several times - from different domains if possible, at minimum from different machines. Then check the error logs on a regular basis to make sure others aren't finding bad links on your pages that you missed. Page content should be limited. The axiom less is more holds particularly true for the web. The nature of browsing has allowed us to break information into suitably digestible pieces, with a quick link to the next piece in the flow. This also give the reader a chance to change their mind before going on without the necessity of loading a very long document to decide. Exceptions to the rule exist - if the sole reason a document exists on the web is to have someone print it out, then the content being on a single page is quite handy. On the other hand if you're just doing that so you don't have to produce a real html version of the document you're being lazy.
Consider white-space balance As in art, balance between objects, between dark and light, is necessary. Look at the page from a moderate distance - do you mostly see dark or light? If the former, consider modifying the page to lighten it up. Information is easier to absorb if it doesn't saturate the page. Maintain stylistic coherence with graphics This is just a common sense design approach - continuity of design elements. Carry it throughout your pages. Another way to say this is that buttons and icons should look like they were created by the same artist. Avoid dead-end links Give your readers a "way out" of your pages that is to your advantage. Don't make them dependent on the back button to see more. Perhaps after reading one section of your information the next logical place to go would be to another section, and not necessarily back to the top. Give them a choice to take either path. Place important information at or near the top of the page It should be visible when the page first appears. If someone needs to scroll to see it they may miss it. This is particularly true with What's New links and chronological listings - the latest information should be first.
Indicate size on large files that will be downloaded This is a courtesy to modem users in particular! Place links on the word that describes where the link goes - never on the word "here" Need any more be said? Avoid "generic web information" Don't waste your own space helping users get to NCSA or CERN - they came to your pages to read about you (exception - if you're providing an web indexing service you will certainly include those types of links!) Make titles very descriptive Titles show up at the top of browsers, get saved on bookmark lists and hotlists they need to say more than "stuff" for them to be a good reference back to your pages. Read Elements of Style This little book by Strunk and White gives a lot of good advice about writing in particular, but also about style in general. It's short and to the point, but useful in the design of web pages or any other medium of textual information.
Keynotes of Web Design Elements
Simplicity of Design The simplicity of web application functionality is both mirrored in the design and style of today¶s webpages. Simplicity of today web design simply means focused, clean and straightforward. Web designers have moved from the stage of squeezing every single pieces of information into our webpages to eliminating the unnecessary, at the same time presenting a clean and simple interface for visitors. They are also attempting to engage the lifespan of visitors by capturing their attention instantly to what is important, rather than trying to overwhelm them with everything under the sun. Columns Reduction and Centered Design The ancient layout of floating left and right pages with numerous columns has been replaced by the stylistic centered design trend. Designers are able to present information in a sleeker and self-assured centered orientation. As fewest numbers of columns is used, the simplicity increases simultaneously. It's practical as well in the area of viewing because it's much more compatible with various screen resolutions and sizes.
Arrangement & Whitespace Readability is a critical factor to bring your message across. Instead of cramping your texts, website designer are keeping a simple and clean layout by increasing line heights and adding lots of whitespace to pages. Web designers are also focusing on the essentials of improving the viewing pleasure of visitors by producing crisply, sharp and fresh pages. Checkout App has a high level of readability on its site with nice level of spacing. It has also arranged their section neatly to provide organized and clean pages.
Choice Of Colours Today¶s websites used a mixture of strong and complementary colours to emphasize important concepts as well as creates distinctness between areas of the site. Certain colours has been perceived to be more effective and safer for designers to adopt. Designers also have a variety of Web 2.0 colour tools available to test-drive and enrich their design.
Variation of Fonts Sizes Bold use of large fonts is often used by new websites to point out their key concepts to visitors, or to convey a focus and clear message about their website¶s main objective or mission. It's like an ³elevator pitch´ or limited self promotion. The font sizes of today¶s new websites have increase to improve the readability of the visitors. More utilization of lower case fonts and different selection of comfortable typography could also be seen to create a casual and comfortable rapport with the visitors. Kissmetrics uses different variety of typography and font sizes to differentiate the weight of each statement. Its mission is to "Keep It Simple" whether it's their design or application.
Sticky And Simple Navigation This new trend of navigation set apart from the busyness of the site content and the body of the page. There are usually a hierarchy of navigation bars displayed distinctively with each specifically fulfilling their intention. Web designers has realized the importance of effective navigation so they have built the navigation into something that is simple and could be found on every pages without you trying to look for it. Envato present site navigation in a new and interesting dimensional way. Its navigation bar slides down into an umbrella chain of community sites at the same time remains firmly on the bottom.
New Age Logos The designers have restudied the logos design capability and reinvented the logos into something which is daring and confident. Significant large logos are often used to establish a prominent brands business and gave an intriguing feel to visitors. WP Coder boosts a logo that is cleverly related to it's scope of work. Not only has the logo been imbued together with the text, it has shown that logo design could be bold and adventurous, at the same time forging a brand with incorporating attitude, tone of voice, and first impression.
A New Feel And Look Subtle use of drop shadows, gradients, mirrored images, glossy and shinny surfaces has added a realistic 3D effect and classy edge to the once dull interface. The effect of creating a reflective logo, surface or image could be found on many new websites to make them more engaging. The site not only become more entertaining in visual and life-like but enhances the qualitative feel of the design. These little touches make our visual interface feel more solid and real. Realistic effects of water droplets, shiny plastic surfaces, glass reflections have been very popular and may also remind us of certain tactile or aesthetic qualities of real-world objects. Two Toasters has shinny icons, gradient background and shadows images to make the website more visually interactive.
Engaging Icons The old school of stock photography or marketing images with happy business people shaking hands has gradually been replaced by simple and engaging icons. These impressive and richly detailed icons draw the attention of your visitors and does not put them off by those rigid traditional pictures. These may well include exciting and idiosyncratic shapes or star-shaped labels which has a call to action effect, often utilized to promote and highlight a free or particular service. Cabomba make uses of intriguing icons and labels to engage their visitors. Those icons are not only sharp and clear, its also bring out their intended meaning perfectly without using huge human life pictures.
Introduction to HTML
Objectives: be familiar with the different HTML tags, its attributes and uses know the structure in creating web page know the different physical and logical formatting styles
Introduction to HTML
- developed by Tim Berners Lee ¶father of HTML·, ¶father of the Internet· - a graphical Internet service that provides a network of interactive documents and the software to access them. - It is based on documents called ´pagesµ that combine text, pictures, forms, sound, animation and hypertext links called hyperlinks. - also referred W3 or simply ´the Webµ is the universe of information available via hypertext transfer protocol (HTTP).
A web page is a single unit of information, often called a document that is available via the A web page can be longer than a computer screen and may require more than one piece of paper when it is printed. A web page is created using HTML, an HTML consists of standardized codes or ´tagsµ that are used to define the structure of information on a web page.
Basic Elements of HTML
<!doctype> - document type declaration - function is to give information on the name and version of the mark-up language being used in the document. <!doctype html public ³-//3C//DTD HTML 3.2 Final//EN´> <!doctype XML 1.0> <html> - Is the single most important tag to remember when building a web page. <head> - contains descriptive information about the document like script code, references to supplementary files. This section includes <title>, <link>, <meta>, <style>, etc.
<BODY> - contains all the displayable information of the documents like text, literature, graphics, and any other multimedia presentation.
attributes: ALINK, BACKGROUND, BGCOLOR, BGPROPERTIES, CLASS, ID, LEFTMARGIN, LINK, TEXT, TOPMARGIN, VLINK
consist of a left angle bracket (<), a tag name, and a right angle bracket (>) it is usually paired to start and end instruction
ex: <HEAD> </HEAD> it has attributes ex: <FONT FACE=³Arial´ size=10>
Core HTML elements
Headings Paragraph Break Center Division Blockquote Address Preformatted Horizontal Rule <h1>«</h1> <p>«</p> <br> <center>«</center> <div>«</div> <blockquote>«</blocl quote> <pre>«</pre> <hr> Align=¶left,center,right· Align=¶left,center,right· None None Align=¶left,center,right· None
<address>«</address> None None Align, size, width
HTML has two types of styles for individual words or sentences: 1. Logical. Logical styles tag text 2. physical. indicate the specific appearance of a section.
Physical formatting elements
Bold Italics Strikeout Monospaced Underline Big Subscript superscript <B> bold text <I> italic text <TT> typewriter text, e.g. fixed-width font. <b>«</b> <i>«</i> <s>«</s> <tt>«</tt> <u>«</u> <big>«</big> <sub>«</sub> <sup>«</sup>
Logical formatting elements
Abbreviation Citation Code Definition Emphasis Keyboard Sample strong variable <abbr>«</abbr> <cite>«</cite> <code>«</code> <dfn>«</dfn> <em>«<em> <kbd>«<kbd> <samp>«<samp> <strong>«</strong> <var>«</var>
<DFN> for a word being defined. Typically displayed in italics. (NCSA Mosaic is a World Wide Web browser.) <EM> for emphasis. Typically displayed in italics. (Consultants cannot reset your password unless you call the help line.) <CITE> for titles of books, films, etc. Typically displayed in italics. (A Beginner's Guide to HTML) <CODE> for computer code. Displayed in a fixed-width font. (The <stdio.h> header file)
<KBD> for user keyboard entry. Typically displayed in plain fixed-width font. (Enter passwd to change your password.) <SAMP> for a sequence of literal characters. Displayed in a fixed-width font. (Segmentation fault: Core dumped.) <STRONG> for strong emphasis. Typically displayed in bold. (NOTE: Always check your links.) <VAR> for a variable, where you will replace the variable with specific information. Typically displayed in italics. (rm filename deletes the file.)
Other HTML tags
Use the <PRE> tag to generate text in a fixed-width font. This tag also makes spaces, new lines, and tabs significant (multiple spaces are displayed as multiple spaces, and lines break in the same locations as in the source HTML file). Example: <PRE> #!/bin/csh rm * </PRE> display as: #!/bin/csh rm *
Use the <BLOCKQUOTE> tag to include lengthy quotations in a separate block on the screen. In the example: <BLOCKQUOTE> <P>Business newsline</P> <P>Manufacturing growth slowed down in May. </P> --William Strunk, Jr., 1918 </BLOCKQUOTE> the result is: Business newsline Manufacturing growth slowed down in May. --William Strunk, Jr., 1918
The <ADDRESS> tag is generally used to specify the author of a document, a way to contact the author (e.g., an email address), and a revision date. It is usually the last item in a file. For example, the last line of the online version of this guide is: <ADDRESS> A Beginner's Guide to HTML / NCSA /firstname.lastname@example.org / revised April 96 </ADDRESS> The result is: A Beginner's Guide to HTML / NCSA / email@example.com / revised April 96 NOTE: <ADDRESS> is not used for postal addresses.
A definition list (coded as <DL>) usually consists of alternating a definition term (coded as <DT>) and a definition definition (coded as <DD>). The following is an example of a definition list: <DL> <DT> BU <DD> Bicol University <DT> UP <DD> University of the Philippines </DL> The <DT> and <DD> entries can contain multiple paragraphs (indicated by <P> paragraph tags), lists, or other definition information.
Forced Line Breaks
The <BR> tag forces a line break with no extra (white) space between lines. Using <P> elements for short lines of text such as postal addresses results in unwanted additional white space. For example, with <BR>: National Center for Supercomputing Applications<BR> 605 East Springfield Avenue<BR> Champaign, Illinois 61820-5518<BR> The output is: National Center for Supercomputing Applications 605 East Springfield Avenue Champaign, Illinois 61820-5518
Escape Sequences (a.k.a. Character Entities)
Character entities have two functions: escaping special characters displaying other characters not available in the plain ASCII character set (primarily characters with diacritical marks) Three ASCII characters-- (<), (>), and (&)± have special meanings in HTML and therefore cannot be used "as is" in text. (The angle brackets are used to indicate the beginning and end of HTML tags, and the ampersand is used to indicate the beginning of an escape sequence.) Double quote marks may be used as-is but a character entity may also be used ("). To use one of the three characters in an HTML document, you must enter its escape sequence instead: < the escape sequence for < > the escape sequence for > & the escape sequence for &
To make an unnumbered, bulleted list, 1. start with an opening list <UL> (for unnumbered list) tag 2. enter the <LI> (list item) tag followed by the individual item; no closing </LI> tag is needed 3. end the entire list with a closing list </UL> tag Below is a sample three-item list: <OL type=³A´> <UL type=³desc´> <LI> Chapter 1</LI> <LI> Chapter 1</LI> <LI> Chapter 2</LI> <LI> Chapter 2</LI> </OL> </UL>
Presentation and Layout
All HTML elements that contain attributes bgcolor or background can accept color. <BODY bgcolor=³english name | #RRGGBB´ background=³url to graphic file´ text=³english color name´ link=³english color name´ alink=³english color name´ vlink=³english color name´> <TABLE bgcolor=³english name | #RRGGBB´ background=³url to graphic file´ > </TABLE>
Inserting table <TABLE></TABLE> <TR> - table row <TD> - table data
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0> <TR><TD>Cell 1</TD> <TD>Cell 2</TD> </TR> </TABLE>
<FONT color=³english name | #RRGGBB´ face=³font family´ size=³1 to 7 (default 3)´> « document text </FONT>
<IMG align=³bottom | left | middle | right | top´ border=³integer pixels´ height=³integer pixels´ hspace=³integer pixels´ src=³URL´ vspace=³integer pixels´ width=³integer pixels´>
Relative pathnames versus Absolute Pathnames
You can link to documents in other directories by specifying the relative path from the current document to the linked document. For example, a link to a file NYStats.html located in the subdirectory AtlanticStates would be: <A HREF="AtlanticStates/NYStats.html">New York</A> These are called relative links because you are specifying the path to the linked file relative to the location of the current file. You can also use the absolute pathname (the complete URL) of the file, but relative links are more efficient in accessing a server.
In general, you should use relative links because: 1. it's easier to move a group of documents to another location (because the relative path names will still be valid) 2. it's more efficient connecting to the server 3. there is less to type However use absolute pathnames when linking to documents that are not directly related. For example, consider a group of documents that comprise a user manual. Links within this group should be relative links. Links to other documents (perhaps a reference to related software) should use full path names. <A HREF=http://www.ncsa.uiuc.edu/General/WWW/HTMLPrimer.html> NCSA's Beginner's Guide to HTML</A>
Links and Addressing
Anchor element <A>«</A> implements HTML¶s hyperlinking capabilities. <A href=³URL´ name=³string´ target=³_blank | _frame_name | _parent | _self | _top´ title=³advisory text´ > « linkable content </A>
Layout with Tables
The <TABLE> element allows you to present text, images and other information objects in table form. <TABLE aligh=³center|left|right´ background=³url´ bgcolor=³color name´ border=³integer pixels´ cellpadding=³integer pixels´ cellspacing=³integer pixels´ cols=³number´ height=³integer pixels´ width=³percentage´> </TABLE>
Multimedia refers to using various types of media to convey or present information. Animation refers to the ability to see continuous movement of something that would be stationary. There are two types of animation currently implemented: 1. animated text <MARQUEE> 2. animated pictures <EMBED> <MARQUEE behavior=³alternate | scroll | slide´ direction=³down | up | left | right´> <EMBED src=³url with extension .swf´ width=³integer´, height=³integer´ type=³application/x-showckwave-flash´ plugin=³path´>
Hope you enjoy and understand what really HTML and creating web pages really is all about« You are now equipped with HTML technologies and ready to control web page design parameters using Cascading style sheets«
Reference: http://www.granneman.com/teaching/washingtonunive rsity/webdesign/syllabus.htm Concepcion, Khan, Bonto-Kane, Marivic, ´Web-based Information Systemsµ, UPOU
This action might not be possible to undo. Are you sure you want to continue?
We've moved you to where you read on your other device.
Get the full title to continue reading from where you left off, or restart the preview.