Download presentation
Presentation is loading. Please wait.
1
HTML5, CSS & JavaScript
2
CSS & JavaScript could be in separate files
What is a web page A file containing Content design Format & layout design JavaScript controls Actual content Server-side code Java applets Tags that embed: sound, video, images CSS & JavaScript could be in separate files
3
Components of a website
Hypertext Markup Language (HTML) files Document content specs Cascading Style Sheets (CSS) (files & tag options) Document formatting JavaScript Dynamically modifying content & styles Client-side programming Server-side (CGI) programs PHP code ASP.Net/JSP.Net C/C++/Java
4
Basics "Tag" based "language"
Describes the structure of a document Cascading Style Sheets for formatting/styling style='font-style:italic; font-weight:bold; font-family:Arial' style='text-align:center' JavaScript – programming inside a webpage file NOT Java Used to modify HTML and CSS No file access Allows collection of user inputs Provides dynamic actions (behavior) on the page Provides access to variables controlling display layer.visibility="hidden" vblname.text.fontcolor='blue"
5
Tags Form of tags: 3 types
<tagname option=attribute pairs> 3 types Paired <html> </html> Un-paired <img … /> and <br /> "special" (a non-breaking space) µ µ (both provide the "μ" symbol) Paired/Unpaired tags MUST have the "<" and ">" Spelling is critical!! Unrecognized tags IGNORED MUST have an ending (HTML 4 and HTML5) Except for "special" tags Actual end-tag or trailing "/" for unpaired tags
6
NOTE: do not confuse <head> with <hn>
Web Page layout Document type tag <!DOCTYPE HTML> HTML start tag Head start, elements, end Body start, elements, end HTML end tag NOTE: do not confuse <head> with <hn> <head> is for description of page content <h> is for paragraph headings (like <h1>)
7
Creating a page Created with a plain-text editor NOT Word or Wordpad!!!! 1st page on your site is called a "home page" MUST be named "index.htm" or "index.html" MUST be INSIDE a folder named "public_html" Each website has its own folder "Usually" no content in "outside" directories Access is controlled by the web server AND may be further limited by the site-hosting owner using a ".htaccess" file
8
Most prevalent server programs:
Servers Most prevalent server programs: Apache (open source) (Win & Linux) IIS (Microsoft - built into Windows) Add-ons MySql - database PHP – scripting language PHPMyAdmin – managing a MySql DB
9
Formatting & Arrangement
Content (tables, lists, paragraphs) is done with HTML tags ALL formatting in HTML 4 & 5 (font, color, alignment, size) is done via CSS More arrangement possible with CSS "layers" & dynamic control w/JavaScript Visibility Positioning on page (by pixel, inch, etc.) Multi-column pages. Dynamic actions added with JavaScript
10
Basic page tags, in order of placement
<!doctype> <head> <!-- following 5 may be in any order --> <title> ….. </title> <meta….. /> <link …... /> <script> … </script> <style> … </style> </head> <body> ….. </body> </html>
11
"Including" to other files
<link rel="SHORTCUT ICON" href="camicon.ico" /> <link href="./CSS/mystyle1.css" type='text/css' rel='stylesheet' /> Note: use of " " and ' ' pairs are interchangeable Note: do not use <link> for JavaScript files instead, use the "src" option of the <script> tag: <script src="./jscripts/jscommon.js" type="text/javascript">
12
A simple page <!doctype html> <html> <head> <title>my page</title></head> <body> <p>This is my page content </p> </body> </html> Note: could all be on one line in Notepad!! Browser will parse & format it.
13
Cascading Style Sheets
14
Cascading Style Sheets
3 types Inline – for special cases, computer generation (e.g.; by MS Word's "Save as HTML") Embedded – in the <head> section of a file Linked – in separate files Examples: <p style="font-family:arial; font-weight:bold"> <style>p {font-weight:italic} </style> <link href="some.url" type='text/css' rel='stylesheet' />
15
Similar to tags: attribute: value Separate styles with a ";"
Using styles (inline) Similar to tags: attribute: value Separate styles with a ";" Inline styles must be in quotes <p style="font-family: arial; font-weight: bold"> Last style can omit the ";" Note us of a ":" instead of an "=" Values can be merged <p style="font: red 24px times">
16
Using styles (embedded)
Embedded styles get names and classes Defined inside <style> … </style> tags NO quote signs!!! Define a "class" #navcol {position: absolute; top: 5px; left: 1%; width:16%; background-color: black; color: red; border: 5px blue solid} <div id='navcol'> Define a tag modifier, usable "like" a class .bigbold {font-size: x-large; font-weight: bold} <p.bigbold>text</p> The <span class='bigbold'>big</span> dog
17
Globally changing tag styles
Create a tag modification in a style <style> h1 {font-style: italic; font-size: 24; color: orange} </style> All H1 data will be italic 24pt orange Attributes may be in any order Styles can be applied to nested tags ol li {font-style: italic; font-size: 24; color: orange} A list item inside an ordered list (vs. an unordered list)
18
JavaScript
19
JavaScript Looks like Java or C++, BUT Missing: Added:
Programmer-created objects Types Structs Pointers File access Added: Built-in objects Defined by the Document Object Model text-variables (e.g.; name.color, document.forms) Sparse arrays Event handling
20
Placed between <script> and </script>
Creating a script Placed between <script> and </script> All nested inside <head> and </head> Functions and standalone statements Purposes: Create page elements Document.write("this is added text"); Modify existing page elements Text-variable-name.color="red";
21
A simple script from my website
<script type="text/javascript"> x=location.href; // see what server this page is coming from if (x.indexOf("~dj")>=0) {// set the page title in the user's browser document.title="Home"; } Else /* alternate setting */ document.title="Office"; </script>
22
Controls flow of program Example: if (a==b) // note the TWO = signs
The if Statement Must be lowercase Tests a condition Controls flow of program Example: if (a==b) // note the TWO = signs {true part} else {false part} ©2007 D. J. Foreman
23
If (another example) if (a > b) else
document.write("See? 'A' was bigger"); else document.write('See? "A" was smaller or equal'); NOTE: single quotes inside the double-quoted strings or vice-versa ©2007 D. J. Foreman
24
X=window.prompt("number <10","0"); if (X>=10) else
A short example X=window.prompt("number <10","0"); if (X>=10) document.write("number too big"); else for ( I=1 ; I<X ; I++) document.write(I+"<br>"); ©2007 D. J. Foreman
25
Example 2: A Prompt Window
<HTML><TITLE>A PopUp Dialog</TITLE> <body> <script language="JavaScript" type="text/javascript"> <!-- hide from non-js browsers engrname = window.prompt("What's the engineer's name?",""); // pop-up text document.write("Thanks! Beam me up, " + engrname + "!!<br>"); // note use of the "+" sign --> </script> Display this line for every browser </body></HTML> ©2007 D. J. Foreman
26
Connection between JS and the system Some pre-defined events:
OnLoad / OnUnload OnClick / OnMouseOver OnFocus / OnBlur OnChange - lost focus and value changed OnSelect - text, textarea, password objects OnSubmit - with the form object ©2007 D. J. Foreman
27
Document Objects & Properties some examples
document.title - contains the webpage title document.form (the form on the page) document.form.button1 (1st button on the form) ©2007 D. J. Foreman
28
More Document Objects Date mydate_object=new Date();
Math x=Math.sqrt(xyz); frames frames[0] is the first frame strings xyz="my data"; I=xyz.length; "mydata" is a string, as is the variable xyz objects have methods that perform work ©2007 D. J. Foreman
29
Invoking a Function – with onload
<html> <head> <script> <!-- function MYPOP() {xx=window.open("",xx,"menubar=yes, height=400, width=400"); xx.document.write(“Fire up the WarpDrive! <br>”); } // notice the difference from the prompt window //-- </script> </head> <body onload = MYPOP( ) > <!-- starts when page loads --> </body></html> ©2007 D. J. Foreman
30
Invoking a Function – from the body
<html><head> <script> <!-- function MYPOP() {xx=window.open("",xx,"menubar=yes, height=400, width=400"); xx.document.write(“Fire up the WarpDrive! <br>”); } // notice the difference from window.prompt //-- </script></head> <body > Any body text is here <script> MYPOP( ); </script> </body></html> ©2007 D. J. Foreman
31
XML & XAML XML XAML Extensible Markup Language
meta-language for describing elements of another language XAML Extensible Application Markup Language language behind the visual presentation of an application separates UI design from underlying code elements and attributes map to classes and properties in the API XAML code can be compiled into a managed assembly just like all .NET languages
32
Terms Assembly Managed Modules (each is a file) PE file Manifest
Collection: Managed Modules and resource files Master module contains the manifest (see below) Managed Modules (each is a file) Compiled IL versions of: EXE, CLR header, metadata, DLL SYS and others PE file Portable Executable A managed module, NOT an assembly A non-managed module EXE, DLL, SYS Manifest
33
XAML Filetype is .xaml Tag syntax rules object element
Typically declares an instance of a type Similar to html tags: <objname attr's>…<objname> May be self-closing: <objectname attr's /> Eg. <StackPanel> <Button Content="Click Me"/> </StackPanel> StackPanel & Button map to name of class defined by WPF
34
Property element syntax
property element start tag <typeName.propertyName> property element end tag </typeName.propertyName>
35
Two examples of the same button
Attribute syntax <Button Background="Blue" Foreground="Red" Content="This is a button"/> Property syntax <Button> <Button.Background> <SolidColorBrush Color="Blue"/> </Button.Background> <Button.Foreground> <SolidColorBrush Color="Red"/> </Button.Foreground> <Button.Content> This is a button </Button.Content> </Button>
36
Required 1st line of output:
CGI Programming Required 1st line of output: cout << "Content-Type: text/html\n\n" << endl; cout << "<!DOCTYPE html>" << endl; Any HTML may follow Required last line of output: cout<< "</body></html>"<<endl; "endl" is from #include "iomanip" Generates the "\n" for output from CGI \n's appearing in the STRINGS is for the browser to see
37
Web Server File Placement
Windows C:\documents\public_html Ordinary pages + index.html Any other sub-directories you want IF you have a server: C:\public_html\cgi-bin C:\ApacheSoftwareFoundation\Apache 2.4\conf\httpd.conf (This is the Apache configuration file) Linux /var/www/html /var/www/cgi-bin executable programs & scripts /etc/httpd/conf/httpd.conf (This is the Apache configuration file)
Similar presentations
