[WEB TECHNOLOGIES4CSE1                                                                                                    ...
[WEB TECHNOLOGIES4CSE1                                                                                                    ...
[WEB TECHNOLOGIES4CSE1                                                                                                    ...
[WEB TECHNOLOGIES4CSE1                                                                                                    ...
[WEB TECHNOLOGIES4CSE1                                                                                                   ]...
[WEB TECHNOLOGIES4CSE1                                                                                                    ...
[WEB TECHNOLOGIES4CSE1                                                                                                    ...
[WEB TECHNOLOGIES4CSE1                                                                                                  ] ...
web technologiesUnit 1
Upcoming SlideShare
Loading in …5
×

web technologiesUnit 1

429 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
429
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

web technologiesUnit 1

  1. 1. [WEB TECHNOLOGIES4CSE1 ] Unit 1HYPERTEXT MARKUP LANGUAGE (HTML)HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the coretechnologies for building Web pages. HTML provides the structur of the page, CSS the (visual and aural) elayout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of buildingWeb pages and Web Applications.What is HTML?HTML is the language for describing the structure of Web pages. It is a special kind of text document thatis used by Web browsers to present text and graphics. The text includes markup tags such as <p> toindicate the start of a paragraph, and </p> to indicate the end of a paragraph. HTML documents are oftenreferred to as "Web pages". The browser retriev es Web pages from Web servers. HTML gives authors themeans to: Publish online documents with headings, text, tables, lists, photos, etc. Retrieve online information via hypertext links, at the click of a button. Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc. Include spread-sheets, video clips, sound clips, and other applications directly in their documents.With HTML, authors describe the structure of pages using markup. The elements of the language labelpieces of content such as “paragraph,” “list,” “table,” and so on If the file extension is ".html" or ".htm"then the browser will recognize it as HTML.What is XHTML?XHTML is a variant of HTML that uses the syntax of XML, the Extensible Markup Language. XHTML has allthe same elements (for paragraphs, etc.) as the HTML variant, but the syntax is slightly different. BecauseXHTML is an XML application, you can use other XML tools with it (such as XSLT, a language fortransforming XML content).Main HTML elements: 1. DOCTYPE Tag : <!DOCTYPE ...> Use this tag if you want to use an SGML/HTML validator. Otherwise, this tag is of little use. The <!DOCTYPE ...> declaration (technically its not a "tag") should be the v ery first thing in your document... if you choose to use it at all. <!DOCTYPE ...> tells the browser what version of HTML you are writing in. More specifically, <!DOCTYPE ...> declares that this document conforms to a specific version of HTML, and specifies what version that is. Y.Lakshmi, Assistant Professor, Department of Computer Science and Engineering, VNR VJIET 1
  2. 2. [WEB TECHNOLOGIES4CSE1 ] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN" > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">2. Comments Tag: <!-- ••• --> <!-- Creation Date: June 21, 1996 --> <!-- Modifications: --> <!-- Sep 26, 1996: Added Links to Steves Page --> <!-- Oct 10, 1996: Updated product list --> <!-- ••• --> will even "comment out" other tags. Everything is commented out until the closing --> <!-- <IMG SRC="biguglypumpkin.gif" ALT="pumpkin"> --> <IMG SRC="pumpkin.gif" ALT="pumpkin">3. HTML– every HTML document should have a enclosing HTML element, a HEAD (TITLE required) and a BODY Tag: <HTML> Put <HTML> at the beginning and end of your document. Everything in the document goes inside <HTML>, except that <!DOCTYPE ...> (if you choose to use it) goes just before <HTML>. <HTML> <HEAD> <TITLE>My Home Page</TITLE> </HEAD> <BODY> <H1>My Home Page</H1> Hi There! </BODY> </HTML>4. HEAD Within <HTML>, the document has two sections to it: <HEAD> and <BODY ...>. <HEAD> is like the cover page of the document. Just as the cover page of a book contains information about the book (such as the title), the <HEAD> section contains information about the document. This information is communicated through the <TITLE> tag (which is required) and the <LINK ...> and <META ...> tags. a. Title b. Optional i. BASE – hides the current address and pretends to be the one specified in the base tag ii. META – description of the page where name and content are to be specified iii. BGSOUND – embeds a background sound iv. SCRIPT, NOSCRIPT – to implement script v. STYLE – to implement styles vi. LINK – for linking the external style sheets Y.Lakshmi, Assistant Professor, Department of Computer Science and Engineering, VNR VJIET 2
  3. 3. [WEB TECHNOLOGIES4CSE1 ] <HEAD> <TITLE> sample </TITLE> <BASE HREF="http://www.webmasterworld.com/forum30/34004.htm"> <META NAME =" sample " CONTENT="sample html code"> <EMBED SRC="D:HTMLsamplelight.MP3"> <LINK REL="stylesheet" HREF="D: HTMLsamplek.css" TYPE="text/css"> <STYLE> H1 { color:green; border: thin groove; text-align: center; } </STYLE> </HEAD> 5. BODY a. HTML attributes and attribute values i. BACKGROUND – back ground picture ii. BGCOLOR – background color iii. TEXT – text color iv. LINK, VLINK, ALINK – link, visited link, active link colors v. Onload, OnUnload, OnFocus, OnBlur – events <BODY BACKGROUND="D: HTMLsample NATURE.JPG" BGCOLOR="PINK" TEXT="RED" LINK="BLUE" ALINK="YELLOW" VLINK="GREEN" class="k"> - - ---- - - ---- </BODY>Block-Level Elements: 1. Headings a. H1 H6 – 6 different headers b. Align – left, right, center, justify <H1 ALIGN=”center”> hallo </H1> <H2> hallo </H2> <H3> hallo </H3> <H4> hallo </H4> <H5> hallo </H5> <H6> hallo </H6> 2. Basic Text Sections a. P – indicates the beginning of a new paragraph b. ALIGN – left, right, center, justify c. PRE -- "preformatted" -- all the spaces and carriage returns are rendered exactly as typed d. ADDRESS -- denotes contact information for the author or organization of the web site Y.Lakshmi, Assistant Professor, Department of Computer Science and Engineering, VNR VJIET 3
  4. 4. [WEB TECHNOLOGIES4CSE1 ] <P ALIGN="right"> HTML is the language for describing the structure of Web pages. It is a special kind of text document that is used by Web browsers to present text and graphics <PRE> A AA ABA </PRE> <ADDRESS> US Geological Survey, California, United States of America </ADDRESS>3. Lists a. OL – ordered list. Bullets type can be specified a, I, i, 1 etc b. LI – list item <OL TYPE="a"> <LI>one</LI> <LI>two</LI> <LI>three</LI> </OL> c. UL – unordered list. Bullets type can be specified square, circle etc d. LI – list item <UL TYPE="square"> <LI>tin</LI> <LI>tun</LI> <LI>twin</LI> </UL> e. DL – data list f. DT – data term g. DD – data definition <DL> <DT> vampire <DD> beautiful <DT> dragon <DD> awesome </DL>4. Tables and Forms a. Table Element Attributes: i. ALIGN – values are LEFT (default), RIGHT, CENTER ii. BORDER – width in pixels of the border around the table. Default value 0 (visible 3D divider between cells being turned off) iii. CELLSPACING – gives space in pixels between adjacent cells (0 – 3D line if BORDER is nonzero, otherwise empty space in the background color is used). Default value is 3 iv. CELLPADDING – determines the empty space in pixels, between the cell’s border and the table element. Default value 1 v. WIDTH – specifies the width of the table wither in pixels or as a percentage of the current browser window width vi. BGCOLOR – specifies the background color of the table Y.Lakshmi, Assistant Professor, Department of Computer Science and Engineering, VNR VJIET 4
  5. 5. [WEB TECHNOLOGIES4CSE1 ] vii. BORDERCOLOR – border color viii. BACKGROUND – an image can be tiled as the background of the table b. Table CAPTION i. Attribute 1. ALIGN – Values TOP, BOTTOM c. Table ROW i. TR – used to define each row in the table ii. Every row in turn contains TH or TD entries iii. ALIGN – used to set default horizontal alignment for table cells. Values LEFT, RIGHT, CENTER iv. VALIGN – used to set default vertical alignment for table cells. Values TOP, MIDDLE, BOTTOM v. BGCOLOR – sets the color of the table row. Overrides any value set for the whole table vi. BORDERCOLOR d. Table Cells – TH and TD i. ROWSPAN – defines the heading or cell data entry that spans multiple rows. Similar to COLSPAN ii. ALIGN – LEFT, RIGHT, CENTER, JUSTIFY, and CHAR iii. VALIGN – TOP, BOTTOM, MIDDLE iv. WIDTH, HEIGHT – values in pixels only (no percentages allowed) v. BGCOLOR, BACKGROUND <TABLE ALIGN="right" BODER="4" CELLSPACING="2" CELLPADDING="2" WIDTH="50%" HEIGHT="50%" BGCOLOR="magenta" BORDERCOLOR="red" BACKGROUND="D:HTMLsample1.JPG"> <THEAD> Indian Cabinet</ THEAD > <CAPTION ALIGN="bottom"> Table 3 Portfolio’s and Ministers </CAPTION> <TH> Portfolio </th> <th> Minister </TH> ---- <TR> <TD>Ministry of Defence</TD> <TD>General A.K.Antony </TD> </TR> <TR> <TD>Ministry of Law and Order</TD> <TD> Veerappa Moili </TD> </TR> ----- <TFOOT><TR> <TD COLSPAN=2 ALIGN= center>As on 10-07-2010</TD></TR></TFOOT> </TABLE>5. Others a. BR (explicit line break) b. HR – horizontal rule i. NOSHADE – removes the shading effect of the line ii. ALIGN – left, right, center iii. WIDTH – in percentage iv. SIZE – size of the line HR LIGN= “center” WIDTH=”30%” SIZE=100 NOSH DE Y.Lakshmi, Assistant Professor, Department of Computer Science and Engineering, VNR VJIET 5
  6. 6. [WEB TECHNOLOGIES4CSE1 ] c. DIV – defines a block of content in the page <DIV STYLE="color:white; FONT-FAMILY:arial; FONT-WEIGHT:bold; FONT-STYLE:italic" > HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices </DIV> d. CENTER – indicates a section that is centered <CENTER> Hi There! Lets talk about stuff! </CENTER>Text-Level Elements: 1. Physical Character Styles a. B – bold b. I – italic c. U – underline d. SUB — subscript e. SUP – superscript f. SMALL – makes text small g. BIG— makes text big h. STRIKE/S— strike out i. FONT – paired tag i. SIZE – size of the font ii. COLOR – color of the font iii. FACE – typestyle for the font 2. Logical Character Styles a. EM – emphasize b. STRONG— makes the text stronger than the surrounding text c. CODE— indicates the text is a program code d. SAMP—indicates that the text is an example of something e. DFN— indicates the definition of a word/term f. VAR— indicates a variable from a computer program g. CITE— indicates reference to work I <B> really </B>like this idea. The law does not <I> se </I>require that action. per My favorite book is <U> Kill a Mockingbird </U> To When I visited W <SUP>3</SUP>C, I stopped by the H <SUB>2</SUB>O fountain. HEY, <SMALL>SMALL</SMALL>WORLD. This is a really <BIG> </BIG>idea! big I <B>really </B>like this idea. The law does not <I> se </I>require that action. per My favorite book is <U> Kill a Mockingbird </U> To Y.Lakshmi, Assistant Professor, Department of Computer Science and Engineering, VNR VJIET 6
  7. 7. [WEB TECHNOLOGIES4CSE1 ] When I visited W <SUP>3</SUP>C, I stopped by the H <SUB>2</SUB>O fountain. HEY, <SMALL>SMALL</SMALL>WORLD. This is a really <BIG>big </BIG>idea! I love <S>INDIA</S> The witness was <EM>not even there </EM> at the time. I <STRONG>highly recommend </STRONG>Butch for the job. <CODE> # open the listing file<BR> unless ( open(MYDATA, "data.txt") )<BR> {die "couldnt open data filen"} </CODE> If the file starts with <SAMP>nph- </SAMP> then the web server passes all output straight to the socket. A <DFN>spud </DFN>is potato. The variable <VAR>m_head </VAR>stores the entire header string. Sources: <UL> <LI><CITE>Report on Space Management </CITE>, Butch Saul, 1997 <LI><CITE>Consumer Perceptions </CITE>, Ben Hall, 1963 </UL>3. Hypertext Links a. A HREF: URL you are linking to onClick: script to run when the user NAME: name a section of the clicks on this anchor page onMouseOver: when the mouse is TARGET: which window the over the link document should go in onMouseOut: when the mouse is no TITLE: suggested title for the longer over the link document to be opened ACCESSKE Y<A ...> is the cornerstone of HTML, the tag that makes hypertext hypertext. <A ...> is thetag you use to make hyperlinks: the text that you can click on in your web browser to goto another web page.< A HREF=" mywebpage.html" >My Web Page</A> produces My Web Page4. Images a. IMG i. SRC (required) – path of the image ii. ALT – alternative image [path of the alternative image] iii. ALIGN—left, right, center iv. WIDTH— width of the image v. HEIGHT— height of the image vi. HSPACE— horizontal distance between the picture and the text vii. VSPACE— vertical distance between the picture and the text viii. BORDER— border around the picture ix. USEMAP -- ame of the map definition n Y.Lakshmi, Assistant Professor, Department of Computer Science and Engineering, VNR VJIET 7
  8. 8. [WEB TECHNOLOGIES4CSE1 ] b. Image Map: It is a process of creating an image into individual clickable elements so that user can click at anywhere of the image, and the respective portion’s html page is going to open i. MAP – creates an image map ii. AREA – identifies the individual logical sections on the map 1. SHAPE – defines the shape of the logical section 2. COORDS – specifies the coordinates of the logical section 3. ALT – alternate message for the logical sectioned map 4. HREF – address of the html page<IMG SRC="D:HTMLsamplenature.jpg" ALT="universe1" HEIGHT=500 WIDTH=500 USEMAP="#mapp"><MAP NAME="mapp"><AREA SHAPE="rect" COORDS="0,0,90,90" ALT="Sun" HRE F="http://www.sun.htm" />< AREA SHAPE ="rect" COORDS ="90,90,120,120" ALT ="Mercury" HREF =" http://www.mercur.htm" />< AREA SHAPE ="rect" COORDS ="124,124,138,138" ALT ="Venus" HREF =" http://www.venus.htm" />< AREA SHAPE ="square" COORDS ="140,140,390,390" ALT ="andromeda" HREF ="http://www.andromeda.htm" /></MAP> Y.Lakshmi, Assistant Professor, Department of Computer Science and Engineering, VNR VJIET 8

×