Day 1

425 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
425
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Day 1

  1. 1. presents Workshop onWeb-Designing Date:-18-19th August Faculty Adviser Dr. Nilay Khare Coordinator Dr. Deepak Singh Tomar
  2. 2. Web Designing Technologies & Tools• Markup Languages – HTML, DHTML, XML, XSLT, etc....• Cascading Style Sheets (CSS)• Scripting languages – javascript,php,perl etc....• Web creation and editing software – Notepad, Dreamweaver, FrontPage, Coldfusion, Flash, Hotmetal, Site Builder, etc…
  3. 3. Contents:-• HTML• CSS• Php• Javascript• Web Hosting
  4. 4. HTML 4
  5. 5. HTML Fundamentals• HEAD• BODY• PARAGRAPH• HEADING• FONTS AND BACKGROUNDS• IMAGES• HYPERLINK• LIST• TABLES• FORM• HEAD ELEMENTS
  6. 6. How to Create and View an HTML document?1.Type the file in Notepad++ or any text editor.2.Save the file as filename.html. This is called Source file.3.Open file in your Browser.
  7. 7. HTML – Fundamentals Document Structure< HTML > Header Body< / HTML>
  8. 8. HTML Page Format<HTML> <HEAD> <TITLE> My First Webpage</TITLE> </HEAD> <BODY> <H1> Hello World </H1> <!-- Rest of page goes here. This is a comment. --> </BODY></HTML>
  9. 9. Headings<H1 ...> text </H1> -- largest of the six<H2 ...> text </H2><H3 ...> text </H3><H4 ...> text </H4><H5 ...> text </H5><H6 ...> text </H6> -- smallest of the six
  10. 10. BODY Element<BODY attributename="attributevalue"> – BACKGROUND=“Sunset.jpg” (can be tiled) – BGCOLOR=color – TEXT=color – LINK=color (unvisited links) – VLINK=color (visited links) – ALINK=color (when selected)
  11. 11. Headings<HTML><HEAD> <TITLE>Document Headings</TITLE></HEAD><BODY>Samples of the six heading types:<H1>Level-1 (H1)</H1><H2 ALIGN="center"> Level-2 (H2) </H2><H3><U>Level-3 (H3)</U> </H3><H4 ALIGN="right"> Level-4 (H4)</H4><H5>Level-5 (H5)</H5><H6>Level-6 (H6)</H6></BODY></HTML>
  12. 12. <P> Paragraph• <P> defines a paragraph• Add ALIGN="position" (left, center, right)• Multiple <P>s do not create blank lines• Use <BR> for blank line• Fully-specified text uses <P> and </P>• But </P> is optional
  13. 13. <BODY><P>Here is some text </P><P ALIGN="center"> Centered text </P><P><P><P><P ALIGN="right"> Right-justified text<! Note: no closing /P tag is not a problem></BODY>
  14. 14. <PRE> Preformatted Text<PRE>if (a < b) { a++; b = c * d;}else { a--; b = (b-1)/2;}</PRE>
  15. 15. Special CharactersCharacter Use< &lt;> &gt;& &amp;" &quot;Space &nbsp;
  16. 16. Colors• Values for BGCOLOR and COLOR – many are predefined (red, blue, green, ...) – all colors can be specified as a six character hexadecimal value: RRGGBB – FF0000 – red – 888888 – gray – 004400 – dark green – FFFF00 – yellow 16
  17. 17. Fonts<FONT COLOR="red" SIZE="2" FACE="Times Roman">This is the text of line one </FONT><FONT COLOR="green" SIZE="4" FACE="Arial">Line two contains this text </FONT>
  18. 18. Ordered (Numbered) Lists <OL TYPE="1"> <LI> Item one </LI> <LI> Item two </LI> <OL TYPE="I" > <LI> Sublist item one </LI> <LI> Sublist item two </LI> <OL TYPE="i"> <LI> Sub-sublist item one </LI> <LI> Sub-sublist item two </LI> </OL> </OL> </OL>
  19. 19. Unordered (Bulleted) Lists <UL TYPE="disc"> <LI> One </LI> <LI> Two </LI> <UL TYPE="circle"> <LI> Three </LI> <LI> Four </LI> <UL TYPE="square"> <LI> Five </LI> <LI> Six </LI> </UL> </UL> </UL>
  20. 20. Physical Character Styles<H1>Physical Character Styles</H1><B>Bold</B><BR><I>Italic</I><BR><TT>Teletype (Monospaced)</TT><BR><U>Underlined</U><BR>Subscripts: f<SUB>0</SUB> + f<SUB>1</SUB><BR>Superscripts: x<SUP>2</SUP> + y<SUP>2</SUP><BR><SMALL>Smaller</SMALL><BR><BIG>Bigger</BIG><BR><STRIKE>Strike Through</STRIKE><BR><B><I>Bold Italic</I></B><BR><BIG><TT>Big Monospaced</TT></BIG><BR><SMALL><I>Small Italic</I></SMALL><BR><FONT COLOR="GRAY">Gray</FONT><BR><DEL>Delete</DEL><BR><INS>Insert</INS><BR> 20
  21. 21. Logical Character Styles<H1>Logical Character Styles</H1><EM>Emphasized</EM><BR><STRONG>Strongly Emphasized</STRONG><BR><CODE>Code</CODE><BR><SAMP>Sample Output</SAMP><BR><KBD>Keyboard Text</KBD><BR><DFN>Definition</DFN><BR><VAR>Variable</VAR><BR><CITE>Citation</CITE><BR><EM><CODE>Emphasized Code</CODE></EM><BR><FONT COLOR="GRAY"><CITE>Gray Citation</CITE></FONT><BR><ACRONYM TITLE="Java Development Kit">JDKAcronym</ACRONYM>
  22. 22. Hypertext links<a href="http://www.google.co.in/" target="_blank">Google</a> Click this link opens mywebpage.html in the window / frame named “window2” window2
  23. 23. HTML – Fundamentals Images<img src=“images/pic1.jpg” width=75px, height=50px /><img class=“pics” src=“images/pic1.jpg” />img.pics { width:75px; height:50px; border- width:3px }
  24. 24. Images• Syntax- <img src="abc.jpg">• WIDTH, HEIGHT may be in units of pixels or percentage of page or frame – WIDTH="357px" – HEIGHT="50%"
  25. 25. ImagesAlign=position Image/Text PlacementLeft Image on left edge; text flows to right of imageRight Image on right edge; text flows to leftTop Image is left; words align with top of imageBottom Image is left; words align with bottom of imageMiddle Words align with middle of image
  26. 26. Images<BODY> <img src="dolphin.jpg" align="left" width="150" height="150" alt="dolphinjump!"> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> You can see text wrap around it<br> </BODY></HTML>
  27. 27. ALIGN="left"
  28. 28. ALIGN="right"
  29. 29. ALIGN=“bottom"
  30. 30. Tables<TABLE> table tag<CAPTION> optional table title<TR> table row<TH> table column header<TD> table data element
  31. 31. Tables<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>
  32. 32. <TABLE> Element Attributes• ALIGN=position -- left, center, right for table• BORDER=number -- width in pixels of border (including any cell spacing, default 0)• CELLSPACING=number -- spacing in pixels between cells, default about 3• CELLPADDING=number -- space in pixels between cell border and table element, default about 1• WIDTH=number[%]-- width in pixels or percentage of page/frame width
  33. 33. • cellspacing=10• cellpadding=10
  34. 34. <TR> Table Row AttributesValid for the table row:ALIGN -- left, center, rightVALIGN -- top, middle, bottomBGCOLOR -- background color<TABLE ALIGN="center" WIDTH="300" HEIGHT="200"><TR ALIGN="left" VALIGN="top" BGCOLOR="red"><TD>One</TD><TD>Two</TD><TR ALIGN="center" VALIGN="middle" BGCOLOR="lightblue"><TD>Three</TD><TD>Four</TD><TR ALIGN="right" VALIGN="bottom" BGCOLOR="yellow"><TD>Five</TD><TD>Six</TD></TABLE>
  35. 35. Forms• Textfield• Password Fiels• Checkbox• Radio• Dropdown• Button• Email Form
  36. 36. Forms• <html>• <body>• <form action="">• First name: <input type="text" name="firstname" /><br />• Last name: <input type="text" name="lastname" />• </form>•• <p><b>Note:</b> The form itself is not visible. Also note that the default width of a text field is 20 characters.</p>•• </body>• </html>
  37. 37. HEAD Elements• TITLE• BASE• LINK• STYLE• META• SCRIPT
  38. 38. Features of HTML 5 • New Elements • New Attributes • Full CSS3 Support • Video and Audio • 2D/3D Graphics • Local Storage • Local SQL Database • Web Applications

×