Τεχνολογίες Παγκόσμιου Ιστοφ
2η διάλεξη – Εισαγωγή

Σάββατο, 19 Οκτωβρίου 2013
The WWW
Web Servers
Browsers
MOSAIC (1992)
HT…
• HTML tells browser how to present content.
• HTTP protocol that talk clients and servers.
• server uses HTTP to send...
Hypertext Languages
Insert text that provides information about the
content of the text
SGML (Standard Generalized Markup ...
WWW

Mixing of hypertext and TCP/IP
How to learn HTML
• We will keep coming back to HTML, but you
will learn it on your own
• Start with
– http://www.w3school...
3 ways to mix CSS & HTML
1. <p style=“font-size: 12px”> BURN </p>
2. <style type=“text/css”>
p{
font-size: 12px;
}
</style...
Selector, attribute, value
body {
font-family: arial;
}
p{
text-decoration: underline;
}
CSS Box Model
Margin

Border
Padding
Content
div
<head>
<style type="text/css">
.box300 {
width:300px;
height:300px;
border:1px solid black;
}
</style>
</head>

<div c...
<head>
<style type="text/css">
.box300 {
width:300px;
height:300px;
border:1px solid black;
padding:10px;
}
</style>
</hea...
<head>
<style type="text/css">
.box300 {
width:300px;
height:300px;
border:1px solid black;
padding:10px;
margin:10px;
}
<...
#container {
padding: 20px 10px 30px 12px;
margin: 0px 5px 6px 5px;
}

0
20

Content Area
5

10

12

30
6

5
#myBox {
position: relative;
left: 20px;
top: 20px;
}
top: 20px

Left: 20px

Box 1

Position: relative

Box 3

Box 2

Cont...
#myBox {
position: absolute;
left: 20px;
top: 20px;
}

top: 20px

Left: 20px

Box 1

Box 3

Position: absolute
Box 2

Cont...
#sidebar {

float: right;
width: 300px;
margin-left: 25px;
background-image: url(images/harbour.jpg);
background-attachmen...
Σημαντικά στοιχεία
•
•
•
•

Gradients
Rounded corners
Interfaces
Transitions
Coloring Schemes
More contrast for
more energy

At most 4 colors
(besides black and
white)
Monochrome Schemes

Smooth and calm
Neighboring colors

Pleasant and enthusiastic
Complementing Colors

Vigor
A Triadic Color Scheme:

more energetic feeling
White Space
• Increased white space offers intimacy
• Minimalism
• White background for text, dark for pictures
white-space:
Text wrapping

New lines

Spaces and
tabs

normal

Collapse

Collapse

Wrap

pre

Preserve

Preserve

No wrap...
Hypertext Transport Protocol (HTTP)
• Commands that browser sends and και the
(web) server understands
• HTTP commands (in...
HTTP?
Response
(HTML in HTTP)
In Request
Homework
• Get you site hosted at wordpress.com
• Get your wordpress site hosted at a Virtual
Machine in https://okeanos.g...
Upcoming SlideShare
Loading in...5
×

Lecture 3: HTML & CSS

525
-1

Published on

an introduction

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
525
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Ενσωματωμένο, μέσα στην html. Καλό είναι να αποφεύγεται.Ενσωματωμένο στην αρχή της html.Εισάγω στην html ένα εξωτερικό αρχείο CSS (η μέθοδος που ενδείκνυται).
  • Lecture 3: HTML & CSS

    1. 1. Τεχνολογίες Παγκόσμιου Ιστοφ 2η διάλεξη – Εισαγωγή Σάββατο, 19 Οκτωβρίου 2013
    2. 2. The WWW
    3. 3. Web Servers
    4. 4. Browsers
    5. 5. MOSAIC (1992)
    6. 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. 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. 8. WWW Mixing of hypertext and TCP/IP
    9. 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. 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. 11. Selector, attribute, value body { font-family: arial; } p{ text-decoration: underline; }
    12. 12. CSS Box Model Margin Border Padding Content
    13. 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. 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. 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. 16. #container { padding: 20px 10px 30px 12px; margin: 0px 5px 6px 5px; } 0 20 Content Area 5 10 12 30 6 5
    17. 17. #myBox { position: relative; left: 20px; top: 20px; } top: 20px Left: 20px Box 1 Position: relative Box 3 Box 2 Containing box
    18. 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. 19. #sidebar { float: right; width: 300px; margin-left: 25px; background-image: url(images/harbour.jpg); background-attachment: fixed; }
    20. 20. Σημαντικά στοιχεία • • • • Gradients Rounded corners Interfaces Transitions
    21. 21. Coloring Schemes More contrast for more energy At most 4 colors (besides black and white)
    22. 22. Monochrome Schemes Smooth and calm
    23. 23. Neighboring colors Pleasant and enthusiastic
    24. 24. Complementing Colors Vigor
    25. 25. A Triadic Color Scheme: more energetic feeling
    26. 26. White Space • Increased white space offers intimacy • Minimalism • White background for text, dark for pictures
    27. 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. 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. 29. HTTP?
    30. 30. Response (HTML in HTTP)
    31. 31. In Request
    32. 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)
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×