Web-Designing Workshop Day 1
Upcoming SlideShare
Loading in...5
×
 

Web-Designing Workshop Day 1

on

  • 297 views

 

Statistics

Views

Total Views
297
Views on SlideShare
297
Embed Views
0

Actions

Likes
0
Downloads
11
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Web-Designing Workshop Day 1 Web-Designing Workshop Day 1 Presentation Transcript

    • presents Workshop onWeb-Designing Date:-18-19th August Faculty Adviser Dr. Nilay Khare Coordinator Dr. Deepak Singh Tomar
    • 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…
    • Contents:-• HTML• CSS• Php• Javascript• Web Hosting
    • HTML 4
    • HTML Fundamentals• HEAD• BODY• PARAGRAPH• HEADING• FONTS AND BACKGROUNDS• IMAGES• HYPERLINK• LIST• TABLES• FORM• HEAD ELEMENTS
    • 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.
    • HTML – Fundamentals Document Structure< HTML > Header Body< / HTML>
    • 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>
    • 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
    • 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)
    • 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>
    • <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
    • <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>
    • <PRE> Preformatted Text<PRE>if (a < b) { a++; b = c * d;}else { a--; b = (b-1)/2;}</PRE>
    • Special CharactersCharacter Use< &lt;> &gt;& &amp;" &quot;Space &nbsp;
    • 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
    • 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>
    • 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>
    • 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>
    • 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
    • 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>
    • 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
    • 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 }
    • Images• Syntax- <img src="abc.jpg">• WIDTH, HEIGHT may be in units of pixels or percentage of page or frame – WIDTH="357px" – HEIGHT="50%"
    • 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
    • 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>
    • ALIGN="left"
    • ALIGN="right"
    • ALIGN=“bottom"
    • Tables<TABLE> table tag<CAPTION> optional table title<TR> table row<TH> table column header<TD> table data element
    • 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>
    • <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
    • • cellspacing=10• cellpadding=10
    • <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>
    • Forms• Textfield• Password Fiels• Checkbox• Radio• Dropdown• Button• Email Form
    • 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>
    • HEAD Elements• TITLE• BASE• LINK• STYLE• META• SCRIPT
    • Features of HTML 5 • New Elements • New Attributes • Full CSS3 Support • Video and Audio • 2D/3D Graphics • Local Storage • Local SQL Database • Web Applications