HTML I

The World Wide Web
The Web
An infrastructure of information combined and the network software used to access it Web page A document that contains or references various kinds of data Links A connection between one web page and another What are the links used for?
Website A collection of related web pages Web browser a software tool that retrieves and displays Web pages Web server A computer set up to respond to requests for Web pages
Uniform Resource Locator (URL) A standard way of specifying the location of a Web page, containing the hostname, "/", and a file
Figure 16.1 A browser retrieving a Web page
What is the Internet?

The Internet is the largest computer network in the world, connecting millions of computers. A network is a group of two or more computer systems linked together.
WWW Structure
Clients use browser application to send URIs via HTTP to servers requesting a Web page Web pages constructed using HTML (or other markup language) and consist of text, graphics, sounds plus embedded files Servers (or caches) respond with requested Web page
Or with error message
Clients browser renders Web page returned by server

Page is written using Hyper Text Markup Language (HTML) Displaying text, graphics and sound in browser Writing data as well
The entire system runs over standard networking protocols (TCP/IP, DNS,)
About HTML
Hyper Text Markup Language
Constitutes a collection of platform independent styles that define the various component of web document Styles indicated by markup tag
What is HTML really?

Plain-text document can be created using any text editor. WYSIWYG editors are also available.
What is markup language?

One where we can embed special tags or formatting commands in the text. To describe how the text should be displayed/printed.
HTML is markup language

Special formatting codes(called tag) to adjust fonts, create bulleted list, creates forms, display images, create table etc.
HTML Tags
The left and right angle brackets are uesd to enclose all special instruction,called tags Two classes of tags:
Those which appear in pairs. < i >Good Morning< /i > Those which appear individually . < img src=Sunset.jpg>
Browsers interpret the tags to display a HTML page in properly formatted form.
Some Points
Most of the tags belong to the first category.
<tag-name>.directive..</tag-name>
Tags are case insensitive.

<HEAD>,<Head>,<head> are all equivalent.
Tags may be nested.

<html><head></head><body>.</body</html> Most browsers have a VIEW SOURCE menu option. The HTML version of the page can be displayed..
Some points(Contd.)
Browsers ignore all extra spaces and carriage returns within a HTML document. Why?
Browsers have to reformat the document to fit in the current display area.
It is good practice to use white spaces in a HTML document.

improve readability.
Some points(Contd.)
Some tags can have one or more(named) attributes to define some additional characteristics of the tag.
<img src=Sunset.jpg> <body text=white bgcolor=#0000FF> <body text=white bgcolor=blue>
Some points(Contd.)
Unrecognized tags
Browsers normally ignore tags it does not recognize.
Comment lines
Comments are included between . Comments cannot be nested .  Another comment in
two lines --->
HTML Document Structure

A HTML document consists of two major portions: Head
Contains information about the document, like the title and meta data describing the contents.
Body
Contains the actual matter of the document . Gets displayed within the browsers window.
Simple HTML Document

<HTML> <HEAD> <TITLE> Title of the Document </TITLE> </HEAD> <BODY text=white bgcolor=blue> This is the content of document. This is an <i> italic </i> font </BODY> </HTML>
View
Structured HTML Tags

<HTML></HTML>
Used to bracket an entire HTML document. Optional for most browser. Attributes
Lang=language code Language code indicates primary language of the document Bn-Bengali he-hindi en-english
Structured HTML Tags (Contd.)

<head>.</head>
Used to provide information about a web page. Nests within itself other tags like <base>,<meta> and <title>
<base>
Attributes :href=url Specifies the base pathname for all relative URLs in the document. No end tag.

<meta>
Used to provide information about document Keyword or description to aid search engines.
<title></title>
Specifies the title of a HTML document Usually appears on the title bar of the browser window.

<Body>..</body>
Used to bracket the body of a HTML document Attributes
background=url ->specifies an image file to be used as tiling background bgcolor=color ->set the background color of the document. Text=color ->set the default color for the normal text in the document.

alink=color ->Sets the color of active links link=color ->Sets the default color for all the links in a document vlink=color ->Sets the color for the visited link.
How to specify colors?

Two ways
By specifying the red green and blue or RGB component.
Each color encoded in 8 bits 00 means that the color is turned off and FF means fully turned on. Example
<body text=#FFFFFF bgcolor=#0000FF>
Example
<body text=white> <body bgcolor=yellow>
16 Basic Colors
1. WHITE 2. BLACK 3. RED 4. GREEN 5. BLUE 6. MAGENTA 7. CYAN 8. YELLOW 9. AQUAMARINE
Color Codes
1. #FFFFFF 2. #000000 3. #FF0000 4. #00FF00 5. #0000FF 6. #FF00FF 7. #00FFFF 8. #FFFF00 9. #70DB93 10. #5C3317 11. #9F5F9F 12. #B5A642 13. #B87333 14. #FF6EC7 15. #FF7F00
10. BAKERS CHOCOLATE 11. VIOLET 12. BRASS 13. COPPER 14. PINK 15. ORANGE
Text Formatting in HTML
Paragraphs and Headings

<Hn>.</Hn>
Used to generate headings.1<=n<=6 Six different levels of headings <H1> is the largest and <H6> is smallest.
<p>
Paragraph marker, used to separate text into paragraph. End tag </p> is optional. A series of paragraph tags <p><p>.<p> with no intervening text is treated as a single <p>
<BR>
Used to indicate that text following <BR> should begin on the next line. The amount of line spacing is less than that of <p> break. Example
This is the 1st line <br> This is the 2st line <br> This is the 3rd .
<HR>
Produces a horizontal line, which can be used to delimit sections Length of the line can be specified Example
<hr> <hr size=20> [noshade option possible] <hr width=75%> <hr align=right width=120> Across full width of browsers 20 pixels thick ,75% of available page width and 120 pixels right justified.
<Address>..</address>
Supplies the contact information of the author. Generally formatted in italics with a line break above and below Example
<address> A-11,Shriram darshan ph-2<br> S/N-82/3/1D opp savant vihar<br> Katraj-pune,India<br> E-mail:asd@gmail.com<br> </address>
Appearance of Text
<b>..</b>
Displays the enclosed text in bold.
<i>..</i>
Displays the enclosed text in italics
<cite>.</cite>
Tells the browser that this is citation. Usually displayed in italics.
<pre>..</pre>
Allows browser to display carefully laid out text. Used to display program listing. Example
<pre> Main() {
Int i,j; abc();
</pre>
<sub>..</sub> <sup>.</sup> <font>.</font>

Specify the styles of the enclosed text. Attributes:
Color=color name Face=typeface size-=value [1 to 7; 3 is the default]
<Center></center>
Centers the enclosed elements horizontally on the page.
<p align= option> .</p>

Used to align a paragraph Option can be left ,right or center.
Example
<HTML> <HEAD> <TITLE> Title of the Document </TITLE> </HEAD> <BODY text=white bgcolor=blue> This is the content of document. This is an <i> italic </i> font. and this is <b> bold </b>. </BODY> </HTML> View
<HTML> <HEAD> <TITLE> Demonstration of heading </TITLE> </HEAD> <BODY text=#FFFFFF bgcolor=#0000FF> <H1> This is first level heading</H1> <H2> The second level</H2> <H3>The Third Level </H3> <H4> Fourth level </H4> <H5> Fifth level</H5> <H6>And Finally , the Sixth. </H6> A small amount of plain non-heading text. </BODY> </HTML> View
<HTML> <HEAD> <TITLE> Paragraph Aligning </TITLE> </HEAD> <BODY text=#FFFFFF bgcolor=#0000FF> <H3> <p Align=center>This paragraph will be aligned at the center. Even as the browser window size changes ,the alignment remains the same.</p> <p align=left>This demonstration left alignment</p> <p align =right>How about aligning by the right </H3> </BODY> </HTML> View margin</p>
<HTML> <HEAD><TITLE> <BODY
Layout Features </TITLE></HEAD>
text=yellow bgcolor=blue>
<H2> <pre> begin if(a>b) then max:=a; else max:=b; end; </pre> </H2> <hr size=8 width=50%> <hr> <hr size=20 width="75%" noshade>
</BODY>
</HTML> View
<HTML>
<HEAD> <TITLE> Superscript and Subscript </TITLE> </HEAD>
<BODY text=#ffffff bgcolor=#0000FF> <H1> y=x<sup>3</sup> +2x <sup> 2</sup> +4 </H1>
<br>
<H2>W<sub>total</sub></total>=x<sup>2</sup>-5</H3>
</BODY> </HTML> View
Question?

HTML I

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

HTML I

Diunggah oleh

Hak Cipta:

Format Tersedia

The World Wide Web

Figure 16.1 A browser retrieving a Web page

What is the Internet?

Clients browser renders Web page returned by server

What is HTML really?

What is markup language?

HTML is markup language

Tags are case insensitive.

Tags may be nested.

It is good practice to use white spaces in a HTML document.

two lines --->

HTML Document Structure

Simple HTML Document

Structured HTML Tags

Structured HTML Tags (Contd.)

Structured HTML Tags (Contd.)

Structured HTML Tags (Contd.)

Structured HTML Tags (Contd.)

How to specify colors?

1. WHITE 2. BLACK 3. RED 4. GREEN 5. BLUE 6. MAGENTA 7. CYAN 8. YELLOW 9. AQUAMARINE

Text Formatting in HTML

Paragraphs and Headings

<sub>..</sub> <sup>.</sup> <font>.</font>

<p align= option> .</p>

<HTML> <HEAD><TITLE> <BODY

Layout Features </TITLE></HEAD>

<BODY text=#ffffff bgcolor=#0000FF> <H1> y=x<sup>3</sup> +2x <sup> 2</sup> +4 </H1>

</BODY> </HTML> View

Anda mungkin juga menyukai