Lecture 3: HTML & CSS
•Download as PPTX, PDF•
0 likes•574 views
This document provides an introduction to technologies of the World Wide Web. It discusses the history and components of the web including the World Wide Web (WWW), web servers, browsers like Mosaic, and hypertext languages like HTML, XHTML and XML. It also covers topics like how to structure and style web pages using CSS, the hypertext transport protocol (HTTP), and homework assignments to get a WordPress site hosted.
More Related Content
Viewers also liked
Viewers also liked (16)
Similar to Lecture 3: HTML & CSS
Similar to Lecture 3: HTML & CSS (20)
Recently uploaded
Recently uploaded (20)
Lecture 3: HTML & CSS
- 1. Τεχνολογίες Παγκόσμιου Ιστοφ 2η διάλεξη – Εισαγωγή Σάββατο, 19 Οκτωβρίου 2013
- 2. The WWW
- 3. Web Servers
- 4. Browsers
- 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. WWW Mixing 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. <p style=“font-size: 12px”> BURN </p> 2. <style type=“text/css”> p{ font-size: 12px; } </style> 3. <link rel=”stylesheet” type=“text/css” href=“location.css” />
- 11. Selector, attribute, value body { font-family: arial; } p{ text-decoration: underline; }
- 13. div <head> <style type="text/css"> .box300 { width:300px; height:300px; border:1px solid black; } </style> </head> <div class="box300"> This is a 300 by 300 pixel box with a 1px border. </div> This is outside the box.
- 14. <head> <style type="text/css"> .box300 { width:300px; height:300px; border:1px solid black; padding:10px; } </style> </head> <div class="box300"> This is a 300 by 300 pixel box with a 1px border and 10px padding. </div> <p>This is outside the box.</p> This is a 300 by 300 pixel box with a 1px border and 10px padding. This is outside the box.
- 15. <head> <style type="text/css"> .box300 { width:300px; height:300px; border:1px solid black; padding:10px; margin:10px; } </style> </head> <div class="box300"> This is a 300 by 300 pixel box with a 1px border and 10px Padding and 10px margin. </div> <p>This is outside the box.</p> 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 20 Content Area 5 10 12 30 6 5
- 17. #myBox { position: relative; left: 20px; top: 20px; } top: 20px Left: 20px Box 1 Position: relative Box 3 Box 2 Containing box
- 18. #myBox { position: absolute; left: 20px; top: 20px; } top: 20px Left: 20px Box 1 Box 3 Position: absolute Box 2 Containing box (relatively positioned ancestor)
- 19. #sidebar { float: right; width: 300px; margin-left: 25px; background-image: url(images/harbour.jpg); background-attachment: fixed; }
- 21. Coloring Schemes More contrast for more energy At most 4 colors (besides black and white)
- 22. Monochrome Schemes Smooth and calm
- 23. Neighboring colors Pleasant and enthusiastic
- 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 wrapping New lines Spaces and tabs normal Collapse Collapse Wrap pre Preserve Preserve No wrap nowrap Collapse Collapse No wrap pre-wrap Preserve Preserve Wrap pre-line Preserve Collapse Wrap
- 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?
- 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)
Editor's Notes
- Ενσωματωμένο, μέσα στην html. Καλό είναι να αποφεύγεται.Ενσωματωμένο στην αρχή της html.Εισάγω στην html ένα εξωτερικό αρχείο CSS (η μέθοδος που ενδείκνυται).