1. 3.0
HTML-CSS WORKSHOP
PRESENTATION FOR STUDENTS IN 4º DEGREE OF COMPULSORY SECONDARY EDUCATION

2. You just know that HTML language is intimately linked to the INTERNET…
HTML-CSS WORKSHOP
History
You just know that HTML language is intimately linked to the INTERNET…
But, it was really born at the same time than Internet....
WHAT DO YOU THINK?
3.0

3. HTML-CSS WORKSHOP 3.0 History
In 1969 ARPANET was created by the connection of two computers between the University of California and SRI International
Handwritten notes of the first message transmitted between the stations of the University of California at Santa Barbara and the SRI corporation in Los Angeles.
The transmission was made under NCP protocol, a primitive protocol to the protocol we use today: TCP/IP protocol. It is characterized by:
An only path is not determined to join two nodes.
Each message is divided into parts, which will follow different paths. The network is then able to respond to its own mistakes and failures.
3.0

4. HTML-CSS WORKSHOP 3.0 History
In 1973, the File Transmission Protocol (FTP) was implemented to send messages and files between nodes in that primitive network.
3.0

5. HTML-CSS WORKSHOP Guess 3.0 History
What year was the first specification of the TCP / IP protocol implemented?
1969
1971
1974
1983
3.0

6. 1974 HTML-CSS WORKSHOP Guess 3.0 History
What year was the first specification of the TCP / IP protocol implemented?
1969
1971
1974
1983
1974  First specification of the transmission protocol… and in its evolution….
1975  First TCP and IP integration test between the University of Standford and the University College in London.
1977  Transmission and implementation of TCP/IP in three simultaneous networks (USA, UK and Norway)
3.0

7. HTML-CSS WORKSHOP Guess 3.0 History
When was TCP/IP protocol completely activated in the whole net?
1975
1978
1983
1987
3.0

8. 1983 HTML-CSS WORKSHOP Guess 3.0 History
When was TCP/IP protocol completely activated in the whole net?
1975
1978
1983
1987
1983  Arpanet used TCP/IP in the whole net. This protocol is officially activated permanently.
1985  TCP/IP protocol started to be used in commercial networks. The Internet is definitively deployed
3.0

9. HTML-CSS WORKSHOP 3.0 History
 The electronic mail service provoked the growth of network users. What, at the beginning was a militar network, was used for scientific and academical scopes.
THE INTERNET IS BORN
3.0

10. HTML-CSS WORKSHOP 3.0 History
1992  Different networks started to adhere commonly into the primitive Internet. NSF (National Science Foundation) Network achieved 12 nodes in USA.
Source: Merit Network, Inc.
3.0

11. The Internet and the web
HTML-CSS WORKSHOP
History
The Internet and the web
WHEN WE TALK ABOUT THE WEB, ARE WE TALKING ABOUT THE INTERNET?
DO YOU THINK THEY ARE THE SAME THING?
3.0

12. The Internet and the web
HTML-CSS WORKSHOP
History
The Internet and the web
The World Wide Web, commonly known as The Web, is the largest network in the Internet, and its focused to the provision of services. It’s based on the HTTP protocol, the hypertext transmission protocol.
3.0

13. The Internet and the web
HTML-CSS WORKSHOP
History
The Internet and the web
We’ve been talking about the beginning of the Internet in 1969 as Arpanet and it wasn’t until 1983 when it took the name of the Internet and got its complete functionality.
When do you think the Web was created?
1985
1987
1989
1992
3.0

14. The Internet and the web
HTML-CSS WORKSHOP
History
The Internet and the web
We’ve been talking about the beginning of the Internet in 1969 as Arpanet and it wasn’t until 1983 when it took the name of the Internet and got its complete functionality.
When do you think the Web was created?
1985
1987
1989
1992
1989
3.0

15. The Internet and the web
HTML-CSS WORKSHOP
History
The Internet and the web
Is this man familiar to you?
Who do you think he is?
Steve Jobs
Bill Gates
Tim Berners-Lee
Mark Zuckerberg
3.0

16. The Internet and the web
HTML-CSS WORKSHOP
History
The Internet and the web
Is this man familiar to you?
Who do you think he is?
Steve Jobs
Bill Gates
Tim Berners-Lee
Mark Zuckerberg
This man is Tim Berners-Lee, the creator (with his CERN team) of the World Wide Web
3.0

17. HyperText Markup Language
HTML-CSS WORKSHOP
History
The Internet and the web
In 1989, Tim Berners-Lee announced the principles of the Web and called it “World Wide Web”, the largest world network for data and information interchange based on…….
hypertexts
And he developed
HTML
HyperText Markup Language
3.0

18. In 1993, CERN declared the universal gratuity of the web.
HTML-CSS WORKSHOP
History
The Internet and the web
In 1993, CERN declared the universal gratuity of the web.
3.0

19. HTML-CSS WORKSHOP
HTML FILES
As you know, a HTML file is a text file. It’s full of letters and numbers to form codes that browsers and servers are able to interpret
It’s based on the use of tags with which the name and the location of objects are written (texts, images, URLs, etc..) which later will be possible to display with a browser.
3.0

20. THE CASCADE STYLE SHEETS - CSS
HTML-CSS WORKSHOP
IMPROVING THE LOOK OF THE WEB SITES
THE CASCADE STYLE SHEETS - CSS
A cascade style sheet CSS allow to all the associated web pages to a site to appear the same format. Thus, you are separating the contents in the HTML files from the format located in the CSS files. Observe the organization of a generic site in this graphic
Page1.html
Page2.html
My_style.css
Page3.html
Page4.html
3.0

21. THE CASCADE STYLE SHEETS - CSS
HTML-CSS WORKSHOP
IMPROVING THE LOOK OF THE WEB SITES
THE CASCADE STYLE SHEETS - CSS
Write this text in a editor and save it with the name
“Page1.html”
<!DOCTYPE html PUBLIC "//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first style page </title>
<link rel="stylesheet" href="My_style.css" type="text/css">
</head>
<body>
<h1>This is my first page with format</h1>
<p>Visit <a href="innoEscuela.org">InnoEscuela.org</a></p>
</body>
</html>
3.0

22. THE CASCADE STYLE SHEETS - CSS
HTML-CSS WORKSHOP
IMPROVING THE LOOK OF THE WEB SITES
THE CASCADE STYLE SHEETS - CSS
body{
margin:-20;
padding:0;
font-size:12px;
font-family:"Trebuchet MS", Helvetica, sans-serif;
color:#FFFFFF;
background-color:#00DDa4; }
h1 {
fontfamily:
Helvetica, Geneva, Arial;
color: blue
a:link {color: yellow }
a:visited {color: purple }
Now, open a new text file and copy the following text.
Save it with the name
“My_style.css”
3.0

23. HTML-CSS WORKSHOP 3.0 IMPROVING THE LOOK OF THE WEB SITES
THE CASCADE STYLE SHEETS - CSS
The look of the file “Page1.html” should be as this:
Headers (h1) in blue
Hyperlinks in yellow
Paragraph letters in white
Page background colour in green
3.0

24. <link rel="stylesheet" href="My_style.css" type="text/css">
HTML-CSS WORKSHOP
IMPROVING THE LOOK OF THE WEB SITES
THE CASCADE STYLE SHEETS - CSS
Now all the HTML files you will make, if located in the same folder and if you write inside the HEAD tag the following code …..
<link rel="stylesheet" href="My_style.css" type="text/css">
… will look the same. You’ve just created your first corporate site.
3.0

25. “HTML_CSS._template.zip”
HTML-CSS WORKSHOP
NOW, CREATE YOUR ENHANCED WEB SITE:
1. DOWNLOAD FROM THE PLATFORM THE DOCUMENT
“HTML_CSS._template.zip”
2. UNZIP THE FILE
3. MODIFY THE CODE IN ORDER TO CHANGE:
THE CONTENTS IN THE HTML FILES
THE FORMATS IN THE CSS FILES
3.0

26. 3.0
HTML-CSS WORKSHOP