1. 2 , 19 2013

2. The WWW 3. Web Servers 4. Browsers 5. MOSAIC (1992) 6. HT HTML tells browser how to present content. HTTP protocol that talk clients and servers. server uses HTTP to send HTML to the client. 7. Hypertext Languages Insert text that provides information about the content of the text SGML (Standard Generalized Markup Language): An ISO (1986) technology HTML, XHTML and XML: based SGML. 8. WWWMixing of hypertext and TCP/IP 9. How to learn HTML We will keep coming back to HTML, but you will learn it on your own Start with http://www.w3schools.com/html/default.asp http://www.w3schools.com/html5/default.asp or with 10. 3 ways to mix CSS & HTML 1.

BURN

2. 3. 11. Selector, attribute, value body { font-family: arial; } p{ text-decoration: underline; } 12. CSS Box Model MarginBorder Padding Content 13. div

This is a 300 by 300 pixel box with a 1px border.

This is outside the box. 14.

This is a 300 by 300 pixel box with a 1px border and 10px padding.

This is outside the box.

This is a 300 by 300 pixel box with a 1px border and 10px padding.This is outside the box. 15.

This is a 300 by 300 pixel box with a 1px border and 10px Padding and 10px margin.

This is outside the box.

This is a 300 by 300 pixel box with a 1px border and 10px padding and 10px margin.This is outside the box. 16. #container { padding: 20px 10px 30px 12px; margin: 0px 5px 6px 5px; }0 20Content Area 5101230 65 17. #myBox { position: relative; left: 20px; top: 20px; } top: 20pxLeft: 20pxBox 1Position: relativeBox 3Box 2Containing box 18. #myBox { position: absolute; left: 20px; top: 20px; }top: 20pxLeft: 20pxBox 1Box 3Position: absolute Box 2Containing box (relatively positioned ancestor) 19. #sidebar {float: right; width: 300px; margin-left: 25px; background-image: url(images/harbour.jpg); background-attachment: fixed; } 20. Gradients Rounded corners Interfaces Transitions 21. Coloring Schemes More contrast for more energyAt most 4 colors (besides black and white) 22. Monochrome SchemesSmooth and calm 23. Neighboring colorsPleasant and enthusiastic 24. Complementing ColorsVigor 25. A Triadic Color Scheme:more energetic feeling 26. White Space Increased white space offers intimacy Minimalism White background for text, dark for pictures 27. white-space: Text wrappingNew linesSpaces and tabsnormalCollapseCollapseWrapprePreservePreserveNo wrapnowrapCollapseCollapseNo wrappre-wrapPreservePreserveWrappre-linePreserveCollapseWrap 28. Hypertext Transport Protocol (HTTP) Commands that browser sends and the (web) server understands HTTP commands (internal to the browser): GET filename : download POST filename : send a web form response PUT filename : upload HEAD, OPTIONS, DELETE, CONNECT, Ctrl-Alt-Del 29. HTTP? 30. Response (HTML in HTTP) 31. In Request 32. Homework Get you site hosted at wordpress.com Get your wordpress site hosted at a Virtual Machine in https://okeanos.grnet.gr/ Send me an e-mail with the e-mail you use to register to oceanos Give your links as a comment (see our site)