BY R Ameen Sheriff HTML Hypertext Markup Language
BY R. Ameen Sheriff
HTML (Hypertext Markup Language) �Example HTML code: <HTML> <head> <title>Hello World</title> </head> <body bgcolor = “#000000”> <font color = “#ffffff”> <H 1>Hello World</H 1> </font> </body> </HTML> 2
HTML (Hypertext Markup Language) 3
HTML (Hypertext Markup Language) �Common features �Tables �Frame �Form �Image map �Character Set �Meta tags �Images, Hyperlink, etc… 4
Form Input Controls �Checkboxes: <input type="checkbox" name="fruit" value="apple" /> �Radio buttons: <input type="radio" name="title" value="Mr. " /> �Radio buttons can be grouped, allowing only one to be selected from a group: <input type="radio" name="city" value="Lom" /> value="Ruse" /> 5
Other Form Controls �Dropdown menus: <select name="gender"> <option value="Value 1" selected="selected">Male</option> <option value="Value 2">Female</option> <option value="Value 3">Other</option> </select> �Submit button: <input type="submit" name="submit. Btn" value="Apply Now" /> 6
CSS (Cascading Style Sheet) �Simple mechanism for adding style to web page �Code be embedded into the HTML file �HTML tag: <style type=“text/css”>CODE</style> �Also be in a separate file FILENAME. css �HTML tag: <link rel=“stylesheet” href=“scs. css” type=“text/css”> �Style types mainly include: • • • Font Color Spacing 7
CSS (Cascading Style Sheet) �Controls format: �Font, color, spacing �Alignment �User override of styles �Layers � Layout � User Interface 8
CSS (Cascading Style Sheet) <HTML> <head> <title>Hello World</title> <style type=“text/css”> p, h 1, h 2 { margin-top: 0 px; margin-bottom: 100 px; padding: 40 px 0 px 40 px; } </style> </head> <body bgcolor = “#000000”> <font color = “#ffffff”> <h 1>Hello World<h 1> </font> </body> </HTML> 9
CSS (Cascading Style Sheet) 10
HTML without CSS 11
CSS: A New Philosophy �Separate content from presentation! Content Presentation (HTML document) (CSS Document) Title Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse at pede ut purus malesuada dictum. Donec vitae neque non magna aliquam dictum. Bold Italics • Vestibulum et odio et ipsum • accumsan. Morbi at • arcu vel elit ultricies porta. Proin tortor purus, luctus non, aliquam nec, interdum vel, mi. Sed nec quam nec odio lacinia molestie. Praesent augue tortor, convallis eget, euismod nonummy, lacinia ut, risus. 12
The Resulting Page Title Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse at pede ut purus malesuada dictum. Donec vitae neque non magna aliquam dictum. • Vestibulum et odio et ipsum • accumsan. Morbi at • arcu vel elit ultricies porta. Proin Tortor purus, luctus non, aliquam nec, interdum vel, mi. Sed nec quam nec odio lacinia molestie. Praesent augue tortor, convallis eget, euismod nonummy, lacinia 13
Style Sheets Syntax �Stylesheets consist of rules, selectors, declarations, properties and values �Selectors are separated by commas �Declarations are separated by semicolons �Properties and values are separated by colons h 1, h 2, h 3 { color: green; font-weight: bold; } 14
With CSS Without CSS
Java. Script �Compact object-based scripting language �Code be embedded into HTML file �HTML tag <script language=“javascript”>CODE</script> �Also be in a separate file FILENAME. js �HTML tag <SCRIPT LANGUAGE="Java. Script" SRC=“FILENAME. js"></SCRIPT> 17
Java. Script �Main objectives: User interface, CGI (Common Gateway Interface)capabilities without involving server �Client side compilation �Server provides no support �Security hazard for client’s computer 18
Name the Technology
JQUERY �j. Query is a Java. Script Library. �j. Query greatly simplifies Java. Script programming. �j. Query is easy to learn. �Add plugin to work done. �Few famous plugins are: � Menu Plugin � Slider Plugin � Tab Plugin
Slider example JQUERY visit “jqueryui” official website for more effects with source
AJAX �AJAX = Asynchronous Java. Script and XML �AJAX is a technique for creating fast and dynamic web pages. �AJAX allows web pages to be updated asynchronously, without reloading �Classic web pages, (which do not use AJAX) must reload the entire page if the content should change. �Examples of applications using AJAX: Google Maps, Gmail, You. Tube, and Facebook.
AJAX loading bar, map.
TARGET
Bootstrap �Bootstrap is the most popular HTML, CSS, and Java. Script framework for developing responsive, mobile-first web sites.
Website view on Desktop
Website view on Mobile/Tablet
MEMCACHED
The Apache Cassandra database is the right choice when you need scalability and high availability without compromising performance
IOT (INTERNET OF THINGS)
RASPBERRY PI
IBM BLUEMIX IBM Bluemix is a cloud platform as a service (Paa. S) developed by IBM. It supports several programming languages and services as well as integrated Dev. Ops to build, run, deploy and manage applications on the cloud. Bluemix is based on Cloud Foundry open technology and runs on Soft. Layer infrastructure.
NODE RED Node-RED is a tool for wiring together hardware devices, APIs and online services in new and interesting ways.
Catch you with some other interesting session soon
- Slides: 37