umn Introduction to Web Designing & HTML Documents * Historical Roots of HTML. In 1989, Ti eae eis ae ® researcher at the Conseil Europeen pour Recherche Nacleire (CERN) laboratory in Geneva, Swiveriand had the ask of creating hypertext poreb oder this inform ae be used as an interface to scientific information, and that NeXT Workstati Bi lation equally well on Macintosh systems with small screens, eee che eriet M PCs, and a variety of other platforms. Rather than give up eee of the variations in screen support, Berners-Lee developed the first versions of , opting to concentrate on providing the content and structure first and worry about the presentation later. s This made sense, because the group for whom he was designing the environment consisted of scientists looking at technical information- ee SE Late latest in fonts and graphic design techniques. The presentation would be left up to the browser. The HTML language eventually was defined as an application of Standard Generalized Markup Language (SGML), which serves as a base for defining markup languages. * Web Page : Aweb page is a document that is suitable for the World Wide Web and web mq browsers. A web browser displays a web page on a monitor or mobile device. The web page is what displays, but the term also refers to acomputer file, usually written in HTML or comparable markup language. Web browsers coordinate the various web resource elements for the written web page, such as style sheets, scripts, and images, to present the web page. Typical web pages provide hypertext that includes a navigation bar or asidebar menu to other web pages via hyperlinks, often referred to as links. (On a network, a web browser can retrieve a web page from a remote web server. On a higher level, the web server may restrict access to only a private network such as a corporate intranet or it provides access 10 the World Wide Web. On a lower level, the web browser uses the Hypertext Transfer Protocol (HTTP) to make such requests. * Web Site Awebsite is a collection of related web pages, including multimedia content, typically identified with a common domain name, and published on at least ene web server. A web site may be accessible via a public Internet Protocol (IP) network,such as the Internet, or a private local area network (LAN), by referencing a uniform rsource Jocator (URL) that identifies the site. All publicly accessible websites collectively constitute the World Wid: Web, while private websites arc typically a part of an intranet. Web pages, whch are the building blocks of _ websites, are documents, typically composed in plain extinterspersed with formatting instructions of Hypertext’ Markup Lingsuage . XHTML). They may incorporate elements from other website. ‘markup anchors. oats Web pages are acc HTTP). which may Scanned with CamScannerprovide security and privacy for the user. ‘The user's 4 I ; renders the page content according to its HTML markup instructions onto a display terminal. * The Phases of Web Site Development 7 ! The following are the four basic phases of Web site development (professionals versed it mginecring- should note-the-basie-similarity- ‘ always followed, process of software development): : : Planning Setting goals, specifying content, organizing content, and setting the user interface to navigate content. 7 > Implementing Creating content, implementing navigation and the user interface, and coding the site, which may include HTML, programming, and database é development. | > Testing User, browser, and system testing. f 8 » Maintenance Maintaining and updating the site, questioning old goals, and i returning to the planning stage.” ’ mee ou 4 * (Extra Notes) * } * HTML (HyperText Markup Language) x Hypertext: 4 Hypertext is ordinary text that has been up with extra features such as S formatting, images, multimedia and link.to other ents. It enables us to read and navigate text and visual information in nonlinear way. 1 Markup: § Markup is the process of taking ordinary text and adding extra symbols i.e. é applying formatting to it. sua type of markup. Each of the symbol used for tellSsthe web browser how to display the text. e markup in HTML is command.that tell e Markup language: i It is a special kind of language in which we starts with the text of our WEB page * and add some special tags around words and paragraph i.e. applying formatting to it. on Steps to create HTML pa; ¢ vial ital , in that write the code. ¢ r Netscape Navigator. % om our disk and display it in browser. Scanned with CamScannerpecneanneereaz1c) any _ 7. We can work independently from our computer so we need not to depend on party (dealer) or on any software. sual 8. We can work on our web site from any point of the world means except Our ¥ computer. Disadvantages of HTML: 1. It provides only static output. (read only information.) . HTML is not a perfect programming language. , . Any simple mathematical or logical operation cannot be done in HTML. 2 3 4. It can not be used to apply operation on strings and date. . Tags start with a less than sign (<) followed by a keyword, concluded with greater than Sign (>). These symbols are knows as angle brackets. Every tag in HTML has a meaning and it is usually straight forward. It have a starting information and ending information. Some tags comes with or without pairing. But if tags are in Pairing there are two tapes of tag, “ ¢ used to begin and effect and end tags are used to end tha epeal the keyword with a forward slash in front, ee »» SMATML> 3 Scanned with CamScanner* Structure of HTML documents and Basic Tags Actual document. This means a horizontal rule that is 200 unit wide. In browser, the tags themselves are not displayed but their effect is displayed. Any tags ~ and attributes that are unknown are ignored. ee \ & The first page structure tag in every HY he HTML tag and it indicates that the contents of this file is in HTML language e text and HTML commands in ing your HTML page should be start with the,bet For ex. ginni ending HTML tags. > 5 9 y : {4 y > > ’ ’ ’ ’ ’ \ |, which is not displayed within the between beginning and ending IEAD> section we have write web page and is it is frequently “There should be Scanned with CamScanner -Ss Ss Ss Ss Ss Ss Ss Ss Ss web Technology Your Page. :- ‘The reminder of HTML page is enclosed within the and tags and the contents of the body tags are shown in the window of the web browser as the actual contents of the web page. It acts as a container of the HTML document and it appears after the tag. Forex. Your Page. “ \ \ Mi Attributes of tag ho] AN User can define appearance of documh ‘These attributes let us declare background and foreground colors of our page’s text and links as well as a background image. Colors in HTML ean be specifiedspy a color name or by color code known as RGB code. RGB stands for Red, Green’ . There are 16 color names in HTML. They are Black, Silver, Gray, White, fed, Purple, Fuchsia, Green, Lime, Olive, Yellow, Navy blue, Teal and Aqui jode are always six numbers first two numbers specify an amount of Red, fp numbers that specify amount of Green and last lor. By mixing different amount of three primary ate dnyscolor. RGB uses hexadecimal numbering system. ode is: #0000RF BGCOLOR: 1 indicates background color of the document or web page shown ira the browser Example ODY BGCOLOR = “RED"> , ies BACKGROUND: This attribute is used to specify the filename with it’s path which is displayed as a background for our web page in web browser. Example: < G ‘FARAJJPEG”> 3 LINK: This attribute is used t0 indicate the color of byperlink text usin The document are not al Visited by the bro " - Example: ample: BGPROPERTIES: It specifies behavior of the background image. BES a FIXED indicates that the background image remains in place as we scrol focument: Ttis useful for creating watermark effect. Example: hist TOPMARGIN: It specifies the width in pixels of a margin of white spac 1p xels of a margin of white space from the left edge of the document. Example: scrolling is possible Je Yocument. possible and if wa sel je to NO then * Formatting Tags closing t Avithin paragraph codes

and that we are created by pressing enter key. i must specially define a paragraph in the code ~ using a ee * Example:

This is its code continues over several lines, but will be displayed as a single rowser.

and this is second paragraph in’a browser.

et example: output of above Epvalues are Scanned with CamScanner we gl eee, 6 ln ew Ot ew eo Se ewewveuvwvTevwVv Ve? GUweb Technology B) List Tag (

):- : -

is a list tag. There are three main types of lists: 1. Unordered list, 2. Ordered lists and 3. Definition lists. e ies Ordered lists are numbered in some fashion, while unordered lists are bulleted. Definition lists consist of a term followed by its definition. ; Both ordered and unordered lists require start and end tags as well as the use of @ special element to indicate where each list item begins i.e.

tag. 1. Unordered List (

): Unordered list can be preceded by one of the several bullet circle, an open circle or a square. The tags for unordered lists are < Example: _ a closed E «1
• Software Engineering L
• Visual Basic \ NY
• Web Technology
• TCPAP

ai The list will be displa © Software Engineer Visual Basic Web Technology ~ TCP/IP . . SUL> ta: Scanned with CamScanner= Ordered list can be preceded by Arabic “upper ee ee mete taeses eS are

and

. ; Example:

1. Software Engineering
2. Visual Basic” \
3. Web Technology
4. TCP/P

; \ xv The list will be displayed as: . 1. Software Engineering ‘\ J 2. Visual Basic 3. Web Technology 4, TCP/IP ne Example: ‘ ;