Syllabus 1. Introduction – web servers and web browsers
2. HTML – basic page structure
3. HTML – basic constructions, data transfers via FTP
4. HTML - forms
5. CSS
6. CSS vs. HTML comparison
7. JavaScript - basics
8. Graphical data and multimedia - formats (GIF, PNG, JPEG), usage
9. Usability - homepage
10. Usability - navigation, search, JavaScript
11. Usability – web design for handicapped users (lowered sight or movement capabilities, older persons, etc.)
12. Anonymity of internet users, personal data protection, spam
13. Legal and moral aspects - quotation, referring, responsibility for published content
14. Presentation of created projects
http://www.vscht.cz/informatika-chemie
What is needed to pass the exam
Project – make your own website Evaluation of third-party website
Choose preffered form One-page written text 5-10 min presentation
Project Compulsory requirements
Structured document At least 3 separate documents XHTML or HTML 4.01 standards Valid documents (http://validator.w3.org). Use external CSS. Use some graphics in separate folder. Make it available at http://web.vscht.cz/…
Recommended features Minimize XHTML attributes formatting, use CSS instead. Follow recommendations for making the pages accessible by
handicapped users (http://www.w3.org/WAI/quicktips/).
Website evaluation Technical quality Navigation – placement, usability, logic, ... Content, information value
Comprehensibility Use of hypertext Readability Structure – is there clear hierarchy of presented information (chapters, lists, tables)?
Language Grammar Composition Objectivity
Graphics, design: Font size Colors, contrast, readability Design quality Impact of screen resolution, page weight Impression (subjective)
Information sources Information systém on ICT
http://student.vscht.cz Materials for seminars
http://www.vscht.cz/kot/cz/studijni-materialy.html Webdesign
Jakob Nielsen: Web design WWW standards
http://www.w3.org/
History of WWW 1950 – Douglas Engelbert – interlinked
documents 1980 – Ted Nelson – „Xanadu“ project
1989 – CERN - Tim Berners-Lee Software for developing hypertext
documents Term „World-Wide Web“ Internet infrastructure HTML, HTTP, URL technologies
WWW – key principles
File (document) transfer, HTTP protocol
Global document address - URL Hypertext, HTML
World-Wide Web
Browser HTTP protocol
handling Content parsing,
displaying
Content storage Static Dynamic
Client
WWW server
HTTP request - URL
HTTP response - document
Uniform Resource Locator http://www.vscht.cz/seznam/SeznamVSCHT/index.html
HOW? WHERE? WHAT?http:// www.vscht.cz /seznam/
SeznamVSCHT/index.html
Communication scheme
Source, server Identification within the scope of source
Scheme 1/2 http://
http://www.vscht.cz/kot/cz/index.html HyperText Transfer protocol
ftp:// ftp://ftp.vscht.cz/pub/antivir/Blaster/FixBlast.exe File Transfer Protocol
file:/// file:///c|/windows/win.ini Local file
mailto: mailto:[email protected]
Scheme 2/2 Scheme is important
ftp://ftp.vscht.cz/pub/antivir/Blaster/FixBlast.exe http://ftp.vscht.cz/pub/antivir/Blaster/FixBlast.exe
http://ifis.vscht.cz/ https://ifis.vscht.cz/
Browsers complete missing scheme, so that it works in most cases
Server IP address
http://147.33.2.8/ Domain name
http://3rdlevel.2ndlevel.1stlevel http://www.vscht.cz http://student.vscht.cz
Each domain has own registrar that controls domain names asignment
Řád domény
Location (path) Corresponds to the real or the virtual
location of the document in the server file system Paths are case-sensitive
http://www.vscht.cz/homepage http://www.vscht.Cz/homepage http://www.vscht.cz/Homepage
Content Static
File system Permanent
documents
Represent static non-specific information
Dynamic Database Documents are
generated dynamically
Documents are created specifically according to the user requirements
http://www.google.com/search?q=internethttp://www.vscht.cz/informatika-chemie
Browser Browser manages transfers and interprets the content Common browsers
Microsoft Internet Explorer Opera Mozilla Firefox Safari …
Webpage Webpage – document (file) containing text
data and formatting instructions
The formatting instructions are interpreted by the browser
Standards – a way to ensure the browsers will understand the formatting instructions W3C – World Wide Web Consortium http://www.w3.org/
What does make a webpage? HyperText Markup Language – HTML
Text Tags
Formatting instructions Information about the document structure
References to other data (binary)<html><head><title>Title of page</title></head><body>This is my first homepage. <b>This text is bold</b></body></html>
HTML versions and development Markup language SGML
Standard Generalized Markup Language ISO 8879:1986 2.0 – the first standardized version 3.0 – unimplemented design
Specifications were too difficult for browser developers
3.2 – Standardized as subset of 3.0 design + selected browser-specific features that were already implemented by browser developers
4.0, 4.01 – final version Cascading style sheets (CSS) used for formatting
Recent web problems
Mixing content and format in HTML Poor documents structure Difficult search for specific
information
Potential remedy = XML
XML eXtensible Markup Language SGML „light“ Can be used as standard to define other
languages based on XML Can create content oriented structure More strict syntax than SGML
= much easier implementation
XHTML eXtensible HyperText Markup Language HTML 4.01 restandardized to follow XML
rules Meets XML standard specifications But does not require full XML support by the
browser More strict
Web pages development/coding
Text processors Notepad, PSPad
HTML editors HomeSite
WYSIWYG editors FrontPage
FrontPage
Notepad
HomeSite
Readable HTML code
„Less readable“ HTML code
Editors comparison WYSIWYG
Relatively easy operation „Precise“ control of appearance, but poor
platform independence Problems with standard compatibility Document is not created transparently – code
cannot be fully controlled Documents contain editor-specific markup
Editors comparison Text and HTML editors
Require active knowledge of standards Full control over the code Page development may seem more time-
consuming than with the WYSIWYG editors, but it is not true for an experienced coder