Embed Size (px)
DESCRIPTION
Citation preview
INTERNET BASICS
AND
INTRODUCTION TO MARK UP LANGUAGE(HTML)
Presented By:
Ankita Bhalla
WHAT IS INTERNET
Internet is a collection of local, regional, national and international computer networks that are linked together to exchange data and distribute processing tasks.
It converts the whole world into a global village
TYPES OF COMPUTER IN INTERNET
Servers
Computers which offer information to be read. Clients
Computer that read the information offered.
NETWORK Network
collection of computers and other hardware components interconnected by communication channels that allow sharing of resources and information
Types of network
LAN(Local Area Network) MAN(Metropolitan Area Network) WAN(Wide Area Network)
ESTABLISHING CONNECTIVITY ON THE INTERNET
TCP/IP protocol is used to set up communication between a client and a server on the internet
It breaks up data into datagram and guarantees that the data is correctly received at its destination
WORLD WIDE WEB(WWW)
A system of interlinked hypertext documents accessed via the internet.
Computer scientist Sir Tim Berners Lee wrote a proposal for world wide web in 1989.
It is a worldwide information service on the internet.
WWW is an organization which provides information on the internet.
Web server: a system on the internet containing one or more web site
Web site: a collection of one or more web pages Web pages: single disk file with a single file name Home pages: first page in website
Terminology
URL AND HTTP URL(UNIFORM RESOURCE LOCATOR)
It is the global address of documents and other resources on the World Wide Web.
HTTP(HYPERTEXT TRANSFER PROTOCOL)
HTTP defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands
HTML
HyperText Markup Language
the publishing language of the World Wide Web
the standard used to create web pages
defines the structure of information by using a variety of tags and attributes.
How to Create and View an HTML document?
1.Use an text editor such as Editpad to write the document.
2.Save the file as filename.html on a PC. This is called the Document Source.
3.Open Netscape (or any browser) Off-Line
4.Switch to Netscape
5.Click on File, Open File and select the filename.html document that you just created.
6.Your HTML page should now appear just like any other Web page in Netscape
HTML TAGS
•Tags are the instructions that are embedded directly into the text of the documents
•All HTML tags begin with an open angle bracket(<) and end with the close angle bracket(>).
TYPES OF TAGS
Paired Tags•Has a companion tag with it. •Paired tag has to be closed after its usage is complete.•For eg. <B> Hello </B> i.e. bold tag is a paired tag
Singular Tags
•Does not have a companion tag.•No need to close the tag after its usage is complete.•For eg. <BR> tag to insert a line break.
STRUCTURE OF HTML PROGRAM
<html><head><title>title of the document goes here</title></head><body>….visible text goes here….</body><html>
DOCUMENT HEADInformation placed in this section is essential to the inner workings of the document
It has nothing to do with the content of the document.
Information placed within <head></head> is not displayed in browser
Except the title placed in <title></title> which is displayed on the title bar of the browser
DOCUMENT BODY
Tag used:
<body></body>
Attributes of body tag:
Bgcolor ,Background,Text
Example:
<body background="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg" text=red>Hello</body>
TEXT FORMATTING
Paragraph Breaks <p>:
moves onto a new line, skipping one line between previous line and the new line.
Line Breaks <br>:
Same as <p> tag but it does not skip a line.
TEXT FORMATTING
Heading Styles <h1>Largest Heading</h1><h2> . . . </h2><h3> . . . </h3><h4> . . . </h4><h5> . . . </h5><h6>Smallest Heading</h6>
Text Styles:Bold <b>Italic<i>Underline<u>
OTHER TEXT EFFECTS
Example:
<font face=“arial” color=“red” Size=7 >hello</font>
Centering( text, images):<center>text</center>
Controlling Font Size and Color:<font>text</font>
Attributes:Face: sets font to the specified nameSize: sets size of text(between 1-7). Default size =3Color: sets color of the text.
Tag used is <img >
ATTRIBUTESAlign, height, border, width, src, alt
Example:<img src=“imag_name1.jpg” align=“center” height= 100 width =100 alt=“image”>
Images
Tag used is <a href >
To change the color of the links we add the following attributes in the <body>• link• Alink•Vlink
Example:External document references
<a href=“file.html”></a>
Internal document references
<a name=“ location name”><a href=“#location name”></a>
Linking Documents
LISTS• Unordered lists(Bullets)
•Tag used is <ul></ul>•Attributes: •Type
Example:
<ul type=“square”>
<li>apple</li>
<li> banana</li>
</ul>
• Ordered lists(Numbering)•Tag used is <ol></ol>•Attributes:
Type,start,value
Example:
<ol type=“1” start=“5”>
<li value=“6”>apple</li>
<li> banana</li>
</ol>
TABLESExample:
<table border=3 align=“center” cellpadding=2”>
<tr >
<th colspan=2 >…..</th></tr>
<tr>
<td>…</td>
<td>……</td>
</tr>
</table>
Structure of table:
<table>
<tr>
<th>…..</th>
<td>……</td>
</tr>
</table>
Attributes:
Align, valign, width, border,cellpadding, cellspacing, colspan, rowspan
FRAMES
Structure;
<frameset >
<frame>
</frame>
</frameset>
Attributes of <frameset>:
Rows,Cols
Attributes of <frame>:
Src,MarginHeight,MarginWidth,Name,Noresize,Scrolling
Example:
<frameset rows=“30%,*”>
<frameset cols=“50%,50%”>
<frame src=“file1.html” name=“main”>
<frame src=“file2.html” marginheight=“100” scrolling=no>
</frameset>
<frameset cols=“50%,50%”>
<frame src=“file3.html”>
<frame src=“file4.html”>
</frameset>
</frameset>
FORMSTag used:<form></form>
Form Elements:
Text, Password, Button, Checkbox, Radio, Reset,
Submit, Select,TextArea, Hidden
Attributes:
Name,action,value
Example:
<form name=“form” action=post value=“url”>
<input type=text name=t1>
<input type=button name=b1 value=Click>Click
</form>
THANK YOU
