HTML. A computer network is a collection of computers linked through cables or wireless means.

Transcription

1 What is a computer network? HTML A computer network is a collection of computers linked through cables or wireless means. What is Internet? Internet is a network of computers of different sizes and configurations around the globe. What do you need to set up Internet? In order to setup Internet, we need a computer, MODEM (external or internal) and a telephone connection. How do you set up Internet? To set up the Internet, the computer has to be connected to the telephone through the MODEM. The user has to register with an Internet Service Provider (ISP) with a username, who in-turn gives an Internet registration address on the computer which shall be used to connect the computer to the Internet. This registration address is called the IP address. What is a MODEM? A MODEM is the short form of Modulator and Demodulator. The MODEM converts the Analog signals received from the telephone line to digital form for the computer and vice versa. What are internal and external modems? Internal modems are those which can be fixed inside the computer. They are available in the form of printed circuit boards with connecting outlets. External modems are those, which are to be connected to the computer and placed outside the computer. They are available as separate units. What is a browser? A browser is a software which helps to receive and send information, designed using HTML, between two computers. There are different types of browser, the text browser which displays only text. Graphics cannot be displayed on these browsers. Graphic browsers display text as well as graphical information. Internet Explorer and Netscape Navigator are two examples of browsers. What is HTML? HTML stands for Hyper Text Markup Language. This language is used to design information that can be displayed on browser and transmitted across the Internet.

2 What are tags? Tags are commands used in HTML programming. There are two main types of tags Container tags and Empty tags., <BR>,, What are container tags? Container tags are those, which are in pairs. Other tags and messages are typed between the pair. e.g., What are empty tags? Empty tags appear as single tags. e.g. <BR>, <HR> What are attributes of tags? Attributes of tags are the properties of the tags that have special functions to perform such as BGCOLOR gives the background colour, BORDERCOLOR gives a color to the border of a table. Let us see the tags used to design the HTML pages. All HTML pages begin with and end with. This is a container tag. An HTML page has two main sections, the header and the body. The header section of the HTML is designed using the <HEAD></HEAD>. This container tag contains another container tag <TITLE></TITLE>. Any information typed between <TITLE></TITLE> tags appear on the title bar of the browser window in which the HTML page is displayed. The body of an HTML page is designed using the tags. The information which has to be displayed on the browser is enclosed between the and tag. The following example shows the usage of the above-discussed tags. <HEAD> <TITLE>MY PAGE</TITLE> </HEAD> This is my first HTML page. The message MY PAGE is displayed on the title bar

3 The message This is my first HTML page." appears as the body of the HTML page. The text typed in the body of the HTML page appear continuously. It can be broken into multiples using the <BR> tag. This is an empty tag. It inserts a line break and pushes the text after the cursor to the next line as shown in the example below <HEAD> <TITLE>MY PAGE</TITLE> </HEAD> This is my first <BR>HTML page. TEXT-FORMATTING : Modifying the appearance of the text during the presentation on the browser pages. The text can be formatted using three simple container tags as shown in the example <HEAD><TITLE>MY PAGE</TITLE></HEAD> This text is <B>bold</B>. <BR> This text is in <I>italics</B>.</BR> This text is <U>underlined</U>.

4 HTML provides a set of six sizes of headings which can be used with the help of six pair of tags. The following example illustrates the usage of the tags <HEAD> <TITLE>DIFFERENT TYPES OF HEADINGS</TITLE> </HEAD> <H1>HELLO</H1> <H2>HELLO</H2> <H3>HELLO</H3> <H4>HELLO</H4> <H5>HELLO</H5> <H6>HELLO</H6> We can create new paragraphs using the tag <P>. Paragraphs can be aligned to the left of the page, right of the page or at the center of the page using the attribute ALIGN of the tag <P>. The following example explains the difference between the <BR> and the <P> tags and the ALIGN attribute of the tag <P>. <HEAD> <TITLE>PARAGRAPHS</TITLE> </HEAD> The BR tag moves the cursor to the<br> beginning of the next line.<br> The P tag inserts a blank line and then<p> moves the cursor to beginning of the line after the blank line. <P ALIGN=LEFT> This part of the text has <B>left.</B> alignment. <P ALIGN=RIGHT> This part of the text has <B>right </B> alignment. <P ALIGN=CENTER> This part of the text has <B>center</B> alignment.

5 Superscript and Subscript Certain situations arise which displaying formulae on the HTML pages. These involve special type of formatting. For example, when we need to display formula such as H 2 O, CaCO 3, H 2 SO 4, or x 2, 3x 3, we use special tags to either raise the text above or push them down below the normal line of writing. Tabs to display the text like x 2, 3x 3 are called superscript tags and those used to display text such as H 2 O, CaCO 3, H 2 SO 4 are called subscripts tags. Tag used for superscript formatting is <sup></sup>. To display x 2, 3x 3 the HTML code will be as follows x 2 = x<sup>2</sup> 3x 3 = 3x<sup>3</sup> Tag used for subscript formatting is <sub></sub>. To display H 2 O, CaCO 3, H 2 SO 4 the HTML code will be as follows H 2 O = H<sub>2</sub>O CaCO 3, = CaCO<sub>3</sub> H 2 SO 4 = H<sub>2</sub>SO<sub>4</sub> WORKING WITH GRAPHICS Graphics are any pictures drawn using a computer. The pictures are also referred by the name images. There different formats of storing images. Different formats have different extensions in their filenames..bmp - Bit Map Picture format..gif - Graphics Interchange Format (can be still pictures or animated).jpg - (JPEG) Joint Photographic Experts Group.TIF - Tagged Image File format. PNG - Ping format The best formats used on HTML pages are GIF, JPG and PNG. The GIF occupies less memory space but the quality in colour transperancy is not appreciable. The JPG and the PNG format occupy less memory space and retain the colour transperancy of the original picuture. We cannot use the cut-paste or copy-paste technique to display images on the HTML pages.

6 <IMG> tag is used to insert pictures on an HTML page. The important attribute of <IMG> tag is the SRC which specifies the path and the name of the source file that contains the image (picture). Given a picture rabbit1.jpg, the following code uses the IMG tag to insert the picture into an HTML page. The output of the code will be as given. This picture does not have any border. <IMG SRC= rabbit1.jpg > To provide a border of a specified thickness, we have to use the attribute BORDER. In the example, the border of thickness 3 pixels has been specified. <html> <body> <img src="rabbit1.jpg" border="3"> </body> </html> In order to place this picture as a background for the entire HTML page, we use the following code and the output will as shown in the picture. <html> <body background="rabbit1.jpg"> <img src="rabbit1.jpg" border="3"> </body> </html>

7 HTML - Hyperlinks Hyperlinks play very important role in connecting pages in the same website or pages across websites. They also connect different location in a large document. The hyperlinks which connect across sites are known as External hyperlinks, while those which connect the locations within the document are known as Internal hyperlinks. The tag which is used to create hyperlinks is the <A></A> container tag. This is tag is also called Anchor tag. EXTERNAL LINK External links are created with <A></A> tag in the following manner: <A HREF= >Google</A> Link text Absolute path Hyperlink reference INTERNAL LINK Internal links are created in two stages. First the location to be liked is marked using the name attribute as follows: <A name = position1 ></A> Second step is linking this location using the HREF. <A HREF= #position1 >Position 1</A> Link text Named location Hyperlink Inserting the attribute target= _blank inside the tag <A> will open the page in a new window.

8 COLSPAN HTML- Tables COLSPAN and ROWSPAN Colspan is the attribute of the tag<table>. The purpose of COLSPAN is to indicate width of a columns in terms of the specified number of columns. The following example and the illustration display the action of COLSPAN. <TABLE> <TR> </TR> <TR> </TR> <TR> </TR> </TABLE> <TH>Product</TH> <TH COLSPAN=2>Amount</TH> <TD>COMPUTER</TD> <TD>$1299</TD> <TD>95c</td> <TD>MOUSE</TD> <TD>$15</TD> <TD>95c</TD> Product Amount COMPUTER $ c MOUSE $15 95c The column containing Amount spans two columns. ROWSPAN Rowspan is the attribute of the tag<table>. The purpose of ROWSPAN is to indicate height of a row in terms of the specified number of rows. The following example and the illustration display the action of COLSPAN.

9 <html> <body> <table border=1 bordercolor="black"> <th rowspan=5>parts of a Head</th> <td>eyes</td> <td>nose</td> <td>mouth</td> <td>ears</td> <td>chin</td> </td> </table> </body> </html> Parts of Head Eyes Nose Mouth Ears Chin The row containing Parts of Head spans five rows