Bioinformatics Programming 1 EE, NCKU Tien-Hao Chang (Darby Chang)

Slides:



Advertisements
Similar presentations
Introduction to Web Design Lecture number:. Todays Aim: Introduction to Web-designing and how its done. Modelling websites in HTML.
Advertisements

CSS3 OVERVIEW Owen Williams Owen at dynabooks daht com.
Copyright © 2003 Pearson Education, Inc. Slide 3-1 Created by Cheryl M. Hughes The Web Wizards Guide to XML by Cheryl M. Hughes.
Copyright © 2003 Pearson Education, Inc. Slide 4-1 Created by Cheryl M. Hughes, Harvard University Extension School Cambridge, MA The Web Wizards Guide.
Copenhagen, 6 December 2004 Modern CSS Principles Miruna Bădescu Finsiel Romania.
Introduction to HTML, XHTML, and CSS
1 © Netskills Quality Internet Training, University of Newcastle Introducing Cascading Style Sheets © Netskills, Quality Internet.
1 A Tool-box for Web-site Maintenance Manjula Patel UKOLN University of Bath Bath, BA2 7AY UKOLN is funded by the Library and Information Commission, the.
September Public Library Web Managers Workshop 2000 Cascading Style Sheets Manjula Patel UKOLN University of Bath Bath, BA2 7AY UKOLN is funded.
Slice and Dice: From PSD Image to XHTML+CSS Svetlin Nakov Telerik Corporation
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.
Bioinformatics Programming 1 EE, NCKU Tien-Hao Chang (Darby Chang)
HTML Tags and Their Functions
Table, List, Blocks, Inline Style
Social Web Design 1 Darby Chang Social Web Design.
The University of Adelaide HTML Basics: Getting your code to work Peter Murdoch March 2014 PREPARING GOOD LOOKING DOCUMENTS.
Creating Tables in a Web Site
Social Web Design 1 Darby Chang Social Web Design.
Molecular Biomedical Informatics Web Programming 1.
Basic HTML Workshop LIS Web Team Spring 2007.
1 Programming the Web: HTML Basics Computing Capilano College.
HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.
Molecular Biomedical Informatics 分子生醫資訊實驗室 Web Programming 網際網路程式設計 1.
HIGH LEVEL OVERVIEW: CSS CSS SYNTAX CONSISTS OF A SET OF RULES THAT HAVE 3 PARTS: A SELECTOR, A PROPERTY, AND A VALUE. IT’S NOT NECESSARY TO REMEMBER THIS.
Dr. Alexandra I. Cristea XHTML.
Dr. Alexandra I. Cristea CSS Dr. Alexandra I. Cristea Source:
Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
Week 10 Creating Positioned Layouts
HTML Concepts and Techniques Fourth Edition Project 2 Creating and Editing a Web Page.
Cascading Style Sheets (CSS). Cascading Style Sheets With the explosive growth of the World Wide Web, designers and programmers quickly explored and reached.
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
Ideas to Layout Beginning web layout using Cascading Style Sheets (CSS). Basic ideas, practices, tools and resources for designing a tableless web site.
CSCI 3100 Tutorial 6 Web Development Tools 1 Cuiyun GAO 1.
CSS Internet Engineering Spring 2014 Bahador Bakhshi CE & IT Department, Amirkabir University of Technology.
Cascading Style Sheets
Programming Club IIT Kanpur. Work environment Before you begin coding,always set up your work environment to your needs IDE Notepad++ Sublime Text 2.
Presenter: James Huang Date: Sept. 26,  Introduction  Basics  Lists  Links  Forms  CSS 2.
HTML / CSS – Basics Why the heck are we doing this?
CSS. Intro to CSS Cascading Style Sheets – styles and enhances appearance of webpage.css extension.
Making Things Look Nice: Visual Appearance and CSS CMPT 281.
Chapter 3 – Designing your web pages Dr. Stephanos Mavromoustakos.
A really fairly simple guide to: mobile browser-based application development (part 1) Chris Greenhalgh G54UBI / Chris Greenhalgh
Web Standards XHTML and CSS. Today’s Show ► Discuss web standards ► XHTML ► Layout Without Tables ► CSS ► Why Web Standards?
Molecular Biomedical Informatics 分子生醫資訊實驗室 Web Programming 網際網路程式設計 1.
Introduction to CSS.
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
1 Web Developer & Design Foundations with XHTML Chapter 9 Key Concepts.
1 Pengantar Teknologi Internet W03: CSS Cascading Style Sheets.
Recognizing the Benefits of Using CSS 1. The Evolution of CSS CSS was developed to standardize display information CSS was slow to be supported by browsers.
Web Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:
Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.
Basic HTML. HTML Background November 1990, first created by Tim Berners Lee, the father/inventor of WWW Knighted by Queen Victoria in 2004 Hypertext is.
XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
XHTML and CSS Overview. Hypertext Markup Language A set of markup tags and associated syntax rules Unlike a programming language, you cannot describe.
XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.
Basics of Smarajit Dasgupta.
Introduction to Programming the WWW I CMSC Winter 2003 Lecture 7.
Lecture 2 - HTML and CSS Review SFDV3011 – Advanced Web Development 1.
HTML tags Some popular ones. Paragraph: separated by a single line of white space Line break NOTE: no end tag is used for this tag Headlines ( through.
Web Technologies Lecture 2 HTML and CSS. HTML Hyper Text Markup Language – Describes web documents – Made up of nested HTML markup tags – Tags are the.
MTA EXAM HTML5 Application Development Fundamentals.
Chapter 1: Intro to HTML Section 1: HTML Structure Presentation Section 2: Layout of an HTML File Section 3: Working with Lists & Tables Section 4: HTML.
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
Working with Cascading Style Sheets
Web Systems & Technologies
DynamicHTML Cascading Style Sheet Internet Technology.
DynamicHTML Cascading Style Sheet Internet Technology.
Web Development 101 Workshop
Presentation transcript:

Bioinformatics Programming 1 EE, NCKU Tien-Hao Chang (Darby Chang)

Outline HTML (HyperText Markup Language) CSS (Cascading Style Sheets) Javascript CGI (Common Gateway Interface) 2

HTML Determine the layout of a web page What is a layout –it describes the structure of a document rather than the rendering details –e.g., a Word document 3

CSS Specify the styles, i.e., the rendering details For example, if you want a red headline –old way (specifying styles via HTML) Red Headline what if there are two headlines? –new way (via CSS) h1 { color: red; } 4

The best way? This is an energetic field HTML3, CSS1 HTML4, XHTML1, CSS2 HTML5, CSS3 HTML5 + CSS3 –web 2.0 –gradient, round box, text shadow… In the near future, developing web applications will be much easier than it is right now –of course, the demands from clients will increase, too (fast, dynamic, animation…) – 5

XHTML1 Red Headline Define how to write a correct document –Word is a WYSIWYG editor so that you do not need to (and can not) know the format of a.doc file Define what elements/tags you can use –paragraph text… –line break –ordered list text… … –unordered list text… … 6

Block vs. inline element What if we want to make some text bold/italic? – text…, text… –which is better? In general, block elements consume the width as wider as possible; while inline elements are inline –with CSS, this should be the only thing you should keep in mind to reasonably use HTML Understand why you choose a specific tag –there should be always only a (or at most a few) correct tag for your need, which is both semantically and logically sound 7

Images and tables Images – Tables – text… … text… … … –if you have merged table cells rowspan colspan what a hateful table syntax, just memorize it Note that images are inline and tables are block elements, this convention could be also observed (though it is implicit) in Word 8

CSS2 h1 { color: red; } Define what properties you can use –element { property-name: property-value; property-name: property-value; … } –background-color, color… –font-family, font-size, font-style, font-weight… –text-align, text-decoration… – Define how to specify HTML elements to apply –a { color: red; } h1 a { color: black;} –what if we want to change the colors of a specific link? #element_id { color: red; } –what if we want to change the colors of a groups of links?.element_class { color: red; } –combining them becomes powerful, but harder to be familiar with p.element_class a { color: red; } 9

CSS specificity l-css-techniques/quick-tip- understanding-css-specificity/ l-css-techniques/quick-tip- understanding-css-specificity/ css-specificity/ css-specificity/ archives/css_specificity_wars.html archives/css_specificity_wars.html 10

11

12

Box model 13

14

Box model depth-margins-padding-the-box- model/ depth-margins-padding-the-box- model/ ml ml 15

Float and positioning If you understand HTML block/inline element and CSS float/positioning, then you can create any layout you have seen on the internet (theoretically, maybe a some creativity) – Something that neighbor block nor inline element is column, which is a commonly used layout –#sidebar { float: left; width: 100px; } What if we want an element on an exactly position? –#element_id { position: absolute; left: 100px; top 100px; } In general, a non-floating element is positioned according to a normal flow (the concept of block/inline elements), where the elements position is relative to its parent element –#element _id { position: relative; left: 100px; top 100px; } There is a third positioning with which you can nail elements on screen –#element _id { position: fixed; left: 100px; top 100px; } 16

depth-floats-positions/ depth-floats-positions/ /05/01/css-float-theory-things- you-should-know/ /05/01/css-float-theory-things- you-should-know/ 17

CSS summary Selector and specificity Box model Float and positioning –thats why block/inline concept should be the only thing you should keep in mind to reasonably use HTML with CSS 18

Javascript Define variables pointing to some elements Change their properties Yes, it looks like dynamic CSS In the past, to select a HTML element, or DOM (Document Object Model) the formal name, is very diffcult Now we have jQuery, which makes us to query DOM elements with CSS syntax –var obj=$('p.element_class a'); obj.css( { 'background-color': 'red', 'color': 'white' } ); –Javascript code, especially using jQuery, is a little hard to read because of its flexibility – 19

CGI Javascript is interpreted by browsers. Image that implementing a PSI-BLAST in Javascript… So we need to perform tasks on the server, which requires some rules (though people making rules just want the leading role and money, they do have contributions) –HTML form –how data is packed via HTTP –how data is returned via HTTP (simply HTTP, since HTTP originally defines how to transfer data from server to client) The later two are CGI (Common Gateway Interface) 20

Most details of CGI are taken care by the web server such as Apache or IIS, so what we need to know is how the web server calls our CGI program In Perl, use the CGI module to read the data –use CGI; my $cgi = new CGI; # Perl can do OO my $seq=$cgi->param('seq'); In any CGI program, the standard output is a instant HTML document that the web server will send to the browser The client will not know if a page is a static HTML file on the server or a CGI programs output running on the server –print "Content-Type: text/html\n\n"; # HTTP print " Hello World! \n"; 21

Input of your project 22 Innull Outa web application Requirement - provide input fields according to your final project - prints the users inputs proteins - teamwork report Bonus - beautify it with CSS and even Javascript

Deadline /5/25 23:59 Zip your code, step-by-step README and anything worthy extra credit. to