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

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

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

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

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

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

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

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

HTML-CSS WORKSHOP 3.0 History 1969-1983  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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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

“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

3.0 HTML-CSS WORKSHOP