Lab1 HTML

Professional Lab I /II Lab 1
Jan 12, 2012
Contents and Evaluation

8 turns: database related programming Weightage: 70~80% The aim is to learn to develop a full-fledge application in client server environment To be able to work on back end and front end Evaluation:
Class participation: 10% Lab assignments and exercises: 50% Final exam: 40%
1/13/2012 2
Tools to be learned
Front end design Server platform Dynamic program Database HTML Apache PHP MySQL
1/13/2012
HTML
Hyper Text Markup Language. It is a markup language and has a set of markup tags. It is used mostly in World Wide Web to describe web pages. HTML files are text files with additional formatting markup
sequences of characters telling web browsers what parts of text should be bold, where the headings are, or where tables, table rows and table cells start and end.
1/13/2012 4
HTML
HTML may be displayed by a visual web browser, a browser that reads the text of the page to the user. What do you need?
an editor (to write HTML pages); and
Plain text editors: Notepad/Notepad++ for Microsoft Windows, TextEdit for Mac, or Vim, Emacs for Linux Commercial HTML editors: Adobe Contribute CS5 and Dreamweaver CS5 (both Win/Mac), and Microsoft's Visual Web Developer (Win)
a web browser (to preview HTML pages).

Microsoft Internet Explorer, Google Chrome, Mozilla Firefox, Safari, and Opera
1/13/2012 5
How HTML is Displayed

http:// www.google.com / Use HTTP, the Hypertext Transfer Protocol. Contact a computer over the network with the hostname of www.google.com. Anything after the hostname is regarded as a document path. In this ex., the document path is /.
HTML
Http protocol (HyperText Transfer Protocol)
URL:http://www.google.com/
Browser Command
HTML Display
render
1/13/2012
Text & binary data
How HTML is Displayed From Remote Site
HTML CGI ASP PHP
http request
Browser Command
URL:http://www.yahoo.com
User
HTML Display
DB
Remote Web Server
Client Site
1/13/2012 7
How HTML is Displayed From Client Site
Browser Command HTML

URL:c:\my_page.html
User
HTML Display
Client Site
1/13/2012 8
HTML Tags
HTML markup tags are usually called HTML tags. HTML tags are keywords surrounded by angle brackets like <html>. HTML tags normally come in pairs like <b> and </b>. The first tag in a pair is the start tag, the second tag is the end tag. Start and end tags are also called opening tags and closing tags.
1/13/2012 9
Head and Body

An HTML document is divided into two basic sections
head : It contains title and meta data of a web document. body : It contains the information that we want to display on a web page.
1/13/2012
10
Contd
1/13/2012
11
Example
<html> <head><title> Title of the page </title></head> <body> Content of the page. </body> </html>
Output:
When you save an HTML file, you can use either the .htm or the .html file extension.
1/13/2012
RUN
12
Basic Tags
Tag <!DOCTYPE> <html> <head> <title> <style> <body> <h1> to <h6> <p> <br > <hr >  Description Defines the HTML document type. Defines the HTML document. Defines information about the document. Defines title of the HTML document. Embed style rules in the document. Defines the documents body. Defines HTML headings. Defines a paragraph Inserts a single line break Defines a horizontal line Defines a comment
HTML tags are not case sensitive: <P> means the same as <p>.
1/13/2012 13
HTML Element
Starts with a start tag / opening tag and ends with an end tag / closing tag. The element content is everything between the start and the end tag. Some HTML elements have empty content.
Empty elements are closed in the start tag.
Start tag * <p> <a href="default.htm" > <br />
1/13/2012 14
Element content This is a paragraph This is a link </p> </a>
End tag *
HTML Attributes
Most HTML elements can have attributes.
Attributes provide additional information about an element. Attributes are always specified in the start tag. Attributes come in name/value pairs like: name="value"
<html> <body> <a href="http://www.iiitdmj.ac.in"> visit my institute</a> </body> </html>
1/13/2012
HTML links are defined with the <a> tag. The link address is specified in the href attribute.
Attribute values should always be enclosed in quotes. Attribute names and attribute values are case-insensitive. 15
Standard Attributes
The attributes listed below are standard:
Attribute class id style title id Style text Value classname Description Specifies a class name for an element. Specifies a unique id for an element. Specifies an inline style for an element. Specifies extra information about an element.
1/13/2012
16
HTML Elements and Their Attributes
<!Doctype>
It should be the very first thing in an HTML document, before the <html> tag. It is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in. It refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly.
1/13/2012 18
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN "http://www.w3.org/TR/html4/strict.dtd"> <html> Output: <head><title> Title of the page </title></head> <body> Content of the page. </body> </html>
RUN
1/13/2012 19
<html>
The <html> element is also known as the root element. The <html> tag tells the browser that this is an HTML document. The <html> tag is the container for all other HTML elements.
1/13/2012
20
<head>
All data in the header section of an HTML document is considered "meta-data", meaning "data about data". The information in this section is not normally displayed directly. Instead elements, such as style, affect the appearance of other elements in the document.
1/13/2012
21
<body>
Used to display the contents of an html document.
Attribute alink background bgcolor link text vlink Value colorvalue URL colorvalue colorvalue colorvalue colorvalue Description Specifies the color of an active link in a document Specifies a background image for a document Specifies the background color of a document Specifies the default color of unvisited links in a document Specifies the color of the text in a document Specifies the color of the visited links in a document
1/13/2012
22
Color Values
Defined using a HEX notation for the combination of RGB values. The value ranges from 0 (in HEX: 00) to 255 (in HEX: FF). HEX values are specified as 3 pairs of two-digit numbers, starting with a # sign. A color is most often specified by: a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" a color name - like "red
1/13/2012 23
Example (Color)
<html> <head> <title> Title of the page </title> </head> <body bgcolor = #b0c4de text = red> <h1>Content of the page.<h1> </body> </html>
RUN
1/13/2012 24
Example (Style)
<html> <head> <title> Title of the page </title> <style type="text/css"> body{background-color:#b0c4de; color:red;} </style> </head> <body> <h1>Content of the page.<h1> </body> </html>
1/13/2012
RUN
25
Example (Heading)
<html> <body> <h1>My first HTML document at level 1.</h1> <h2>My first HTML document at level 2.</h2> <h3>My first HTML document at level 3.</h3> <h4>My first HTML document at level 4.</h4> <h5>My first HTML document at level 5.</h5> <h6>My first HTML document at level 6.</h6> </body> </html>
RUN
1/13/2012 26
Example (<p>)
<html> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <p>yet another paragraph.</p> </body> </html>
RUN
1/13/2012 27
Example (<br />)

<html> <body> <p> To break<br />lines <br />in a<br /> paragraph,<br /> use the br element. </p> </body> </html>
1/13/2012
Output:
RUN
28
Example (hr)
<html> <head><title> HTML Document </title></head> <body> <h2><p> Hello</p></h2> <hr> <p> Welcome<br><br> To my HTML document.</p> </body> </html>
1/13/2012
Output:
RUN
29
<a>
<a> defines an anchor. It is used to create a link to another document. It is usually referred as a link or a hyperlink. <a href="URL location" target="target">Alias</a>;
Attribute href Target Value URL _blank _parent _self _top framename Description Specifies the URL of the page the link goes to Define, where the object being linked is to be opened.
1/13/2012
30
Hyperlinks
<html> <body> <h1>This is my Main Page</h1> <p>This is some text.</p> <p><a href= page1.htm target =_blank> This is a link to Page 1</a></p> <p><a href= page2.htm target =_top> This is a link to Page 2</a></p> </body> </html>
RUN
1/13/2012 31
Example
<html> <body alink = blue bgcolor = plum text= #ffffff vlink = rgb(255,0,0)> <p>This is some text.</p> <p><a href="page1.htm"> This is a link to Page 1</a></p> <p><a href="page2.htm"> This is a link to Page 2</a></p> </body> </html> RUN
1/13/2012 32
Formatting Tag
Tags <b> <big> Description Defines bold text Defines big text Tags Description
<strong> Renders as strong (highlighted) text <dfn> <code> Defines a definition term Defines a piece of computer code Defines sample output from a computer program Defines keyboard input Defines a variable part of a text Defines a citation Renders as emphasized text
<center> Defines centered text <font> <i> <small> <u> <var>
Defines font, color, and size for <samp> text Defines italic text Defines smaller text Defines underlined text Defines a variable <kbd> <var> <cite> <em>
1/13/2012
33
Formatting Tag - Example

<html><body>
<b> Bold </b> <br /> <big> big <big> <br /> <center> center alignment </center> <br /> <font size = 5 color = red type= "times new roman" > test font color type and size </font> <br /> <i> itallic font </i> <br /> <small> small text</small> <br /> <u> underline text </u> <br /> <em>Emphasized text</em><br /> <strong>Strong text</strong><br /> <dfn>Definition term</dfn><br /> <code>A piece of computer code</code><br /> <samp>Sample output from a computer program</samp><br /> <kbd>Keyboard input</kbd><br /> <var>Variable</var><br /> <cite>Citation</cite><br /> RUN </body> </html>
1/13/2012 34
Formatting Tag - Output
1/13/2012
35
<img>
It is used to put an image in the html document.
Attribute alt src align text URL Top , bottom, middle, left, right Pixels Pixels % Pixels Pixels Pixels % Value Description Specifies an alternate text for an image. Specifies the URL of an image Specifies the alignment of an image.
border height hspace vspace width

1/13/2012
Specifies the width of the border around an image Specifies the height of an image Specifies the whitespace on left and right side of an image. Specifies the whitespace on top and bottom of an image Specifies the width of an image
36
Example (<img>)
<html><body> <img src = 2.jpg alt = smile" width = 200 height = 150 border = 5 hspace = 100 vspace = 100> <p align = Middle> <h3>Smile</h3></p> </body></html>
1/13/2012
Output:
RUN
37
Tables
The <table> tag defines an HTML table. An HTML table consists of the <table> element and one or more <tr>, <th>, and <td> elements.
<TABLE> <CAPTION> <TR> <TH> <TD>
Table tag optional table title table row table column header table data element
1/13/2012
38
Table example
<TABLE BORDER=1> <CAPTION>Table Caption</CAPTION> <TR><TH>Heading1</TH> <TH>Heading2</TH></TR> <TR> <TD>Row1 Col1 Data</TD> <TD>Row1 Col2 Data</TD> </TR> <TR><TD>Row2 Col1 Data</TD> <TD>Row2 Col2 Data</TD></TR> <TR><TD>Row3 Col1 Data</TD> <TD>Row3 Col2 Data</TD></TR> </TABLE>
Run
1/13/2012 39
Table attribute
Attribute align bgcolor border cellpadding cellspacing frame rules summary width Value Left, center, right rgb(x,x,x), #xxxxxx, colorname Pixels Pixels Pixels Description Specifies the alignment of a table according to surrounding text Specifies the background color for a table Specifies the width of the borders around a table Specifies the space between the cell wall and the cell content Specifies the space between cells
Void, above, below, hsides Specifies which parts of the outside borders that should be visible lhs,rhs, vsides, box, border None, groups, rows, cols, all Specifies which parts of the inside borders that should be visible text pixels % Specifies a summary of the content of a table Specifies the width of a table
1/13/2012
40
Table example
<body text = red>
<TABLE BORDER=10 bgcolor= #0025ff cellpadding = 1 cellspacing = 1 width = 30% height = 10%> <CAPTION>Table Caption</CAPTION> <TR><TH>Heading1</TH><TH>Heading2</TH></TR> <TR><TD>Row1 Col1 Data</TD> <TD>Row1 Col2 Data</TD></TR> <TR><TD>Row2 Col1 Data</TD> <TD>Row2 Col2 Data</TD></TR> <TR><TD>Row3 Col1 Data</TD> <TD>Row3 Col2 Data</TD></TR> </TABLE> </body>
RUN
1/13/2012 41
Lists
Lists <ul> <ol> <li> <dir> <dl> <dt> <dd> <menu> Description Defines an unordered list Defines an ordered list Defines a list item Defines a directory list Defines a definition list Defines an item in a definition list Defines a description of an item in a definition list Defines a menu list
1/13/2012
42
<ul>
Attribute compact type Value compact disc, square, circle Description Specifies that the list should render smaller than normal. Specifies the kind of marker to use in the list
<html><body> <ul compact = compact type = disc> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body></html>
1/13/2012
Run
43
<ol>
Attribute compact start type Value compact number 1, A, a, I, i Description Specifies that the list should render smaller than normal Specifies the start value of an ordered list Specifies the kind of marker to use in the list
<html><body> <ol compact = compact type = A start = 2> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body></html>
1/13/2012
RUN
44
<dl>
The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list). Example: <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> RUN
1/13/2012 45
Frame
Used to display more than one HTML document in the same browser window. Each frame is independent of the others. Disadvantages:
Not expected to be supported in future versions of HTML. Difficult to use. Web developer must keep track of more HTML documents.
1/13/2012 46
Frame
Frames <frame > <frameset>
Contd
Description Defines a window (a frame) in a frameset Defines a set of frames Defines an alternate content for users that do <noframes> not support frames. Defines an inline frame and is used to display a <iframe> web page within a web page.
1/13/2012
47
<frame>
The <frame> tag defines one particular window (frame) within a <frameset>.
Attribute Value Description Specifies whether or not to display a border around a frame Specifies the top and bottom margins of a frame Specifies the left and right margins of a frame Specifies the name of a frame Specifies that a frame is not resizable Specifies whether or not to display scrollbars in a frame Specifies the URL of the document to show in a frame
frameborder 0,1 marginheight pixels marginwidth pixels name name noresize noresize scrolling src Yes, no, auto URL
1/13/2012
48
Example
<html>
<frameset cols="25%,50%,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset> </html>
RUN
1/13/2012 49
Example
<html> <frameset rows="10%,10%,10%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset> </html>
Output:
RUN
1/13/2012 50
Iframe
Attribute align frameborder height longdesc marginheight marginwidth name scrolling src width
1/13/2012
Value Left ,right , top, middle bottom 1 0 pixels % URL pixels pixels name Yes, no, auto URL Pixels %
Description Deprecated. Use styles instead. Specifies the alignment of an <iframe> according to surrounding elements Specifies whether or not to display a border around an <iframe> Specifies the height of an <iframe> Specifies a page that contains a long description of the content of an <iframe> Specifies the top and bottom margins of the content of an <iframe> Specifies the left and right margins of the content of an <iframe> Specifies the name of an <iframe> Specifies whether or not to display scrollbars in an <iframe> Specifies the address of the document to embed in the <iframe> Specifies the width of an <iframe>
51
Iframe
<html> <body> <iframe src="heading.htm width="400" height="400" ></iframe> </body> </html> Output:
RUN
1/13/2012 52
Reference
W3schools.com
1/13/2012
53

Lab1 HTML

Încărcat de

Informații document

Descriere originală:

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Lab1 HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Professional Lab I /II Lab 1

Jan 12, 2012

Contents and Evaluation

a web browser (to preview HTML pages).

How HTML is Displayed

Http protocol (HyperText Transfer Protocol)

Text & binary data

How HTML is Displayed From Remote Site

HTML CGI ASP PHP

Remote Web Server

How HTML is Displayed From Client Site

Browser Command HTML

Head and Body

Element content This is a paragraph This is a link </p> </a>

HTML Elements and Their Attributes

Example (<br />)

<center> Defines centered text <font> <i> <small> <u> <var>

Formatting Tag - Example

Formatting Tag - Output

border height hspace vspace width

<TABLE> <CAPTION> <TR> <TH> <TD>

S-ar putea să vă placă și