Lecture 3: HTML & CSS
•Als PPTX, PDF herunterladen•
0 gefällt mir•574 views
an introduction
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (16)
Ähnlich wie Lecture 3: HTML & CSS
Ähnlich wie Lecture 3: HTML & CSS (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (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)
Hinweis der Redaktion
- Ενσωματωμένο, μέσα στην html. Καλό είναι να αποφεύγεται.Ενσωματωμένο στην αρχή της html.Εισάγω στην html ένα εξωτερικό αρχείο CSS (η μέθοδος που ενδείκνυται).