Lesson 1: HTML and the Web Instructor: Mrs. KIM Lang

  HTML Language of the web  History of the web and HTML  Technical terms used in the web Objectives

  HTML, the language of the web  HTML and companion technologies  Web browsers and servers  Hypertext content and online media  A bit of web history  Web terminology  HTML 5 and web standards  Do We all have to learn HTML 5 now? Contents

  Hypertext markup language (HTML) is a language used to design Web pages.  HTML is not a programming language like C, Perl, or Ruby, HTML is a semantic language for marking up text.  The markup provides a description of the content that Web browsers use to construct the corresponding web page.  Links are defined in HTML. It is very powerful, information can be easily located and linked with related content, creating frictionless connectivity. HTML, LANGUAGE OF THE WEB

  HTML alone is not enough, Cascading Style Sheets (CSS) can be mixed into the HTML to create more attractive website.  HTML describes the page's content elements, and CSS tells the browser how they should look (or sound.)  JavaScript, a programming language that runs inside a browser and manipulates HTML page elements in response to user actions and other events. HTML COMPANION TECHNOLOGIES

 HTML (Semantic) CSS (Presentation) Scripting (Behavior) HTML COMPANION TECHNOLOGIES

 Webpage Title The Most Minimized HTML Structure

 Webpage Title h1 { text-align: center; } Hello World Wide Web Welcome to the f i r s t of many webpages. I promise they will get more i n t e r e s t i n g than t h i s. HTML Structure With Style

  Bellow is version of HTML VERSIONS OF HTML

  The Web has client/server architecture:  Server: Web Server  Client: user agent (web browser)  A single Web Server can:  host hundreds of different websites,  manage many different types of content,  read/write information from/to databases,  and speak multiple languages  it keeps track of each request you make, and it logs whether it was able to comply with the request  Knows IP address and type of browser of the requesting computer. WEB BROWSERS AND SERVERS

  Function of Web Browser:  Send request to web server for requesting web content  Receive the content in HTML format and render to user.  There are many types of browser, below are popular browsers:  Apple Safari ( for Mac and Windows  Google Chrome ( for Windows  Mozilla Firefox ( for Mac, Windows, and Linux  Microsoft Internet Explorer ( for Windows  Opera ( for Mac, Windows, and Linux/UNIX WEB BROWSERS AND SERVERS

 VERSION OF INTERNET EXPLORER  Version 1.0 (Window 95)  Version 2.0  Version 3.0 (Windows 95 OSR2)  Version 4.0 (Windows 98)  Version 5.0 (Windows 98 SE, Windows 2000, Windows NT 4.0)  Version 5.5 (Windows Me)  Version 6.0 (Windows XP)  Version 7.0 (Windows XP, Windows Server 2003, Windows Vista, Windows Server 2008)  Version 8.0 (Windows XP, Windows Vista, Windows Server 2003 and Windows Server 2008 R2, Windows 7)  Version 9.0  Version 10 ( Windows 8)

 VERSIONS OF MOZILLA FIREFOX



 EARLY HISTORY  Concept of the Web was introduced by Tim Berners-Lee at CERN since  The early Web was text only—without images or colors—and browsers worked in line mode.  Mosaic is the first graphical browser, created by a group of graduate student in University of Illinois National Center for Supercomputing Applications (NCSA)  Mosaic was rewritten and became Internet Explorer  Inventor of Mosaic built Netscape Navigator, and this gave birth to Mozilla Firefox later on.  Then, browser competition war had started till 2001

 WEB TERMINOLOGIES  HTTP : HyperText Transport Protocol  protocol (set of rules) used to access data on the WWW.  uses one TCP connection on well-known port 80.  two types of http messages: Request, Response  transfer data in the form of plain text, hypertext, audio, video, and so on.

  URL = Uniform Resource Locator or URI = Uniform Resource Identifier  A unique address of a file or document available on the Web. Ex:  Domain name:  The specific address of a computer on the Internet in text form Ex: microsoft.com  Internet protocol (IP) address:  The specific address of a computer on the Internet in numeric form Ex: WEB TERMINOLOGIES

  HTML : HyperText Markup Language  A convention of codes used to access documents over the World-Wide Web. Without HTML codes, a document would be unreadable by a Web browser.  The Language of the World Wide Web  CSS (Cascading Style Sheets):  The language for describing how HTML document present to user  JavaScript  Client side language to manipulate HTML page element according to user actions or events

  CGI (Common Gateway Interface)  A protocol for dynamically generating web pages in response to a get request or form submission  AJAX (Asynchronous JavaScript and XML)  Set of techniques used to create web pages with elements that can be independently updated with new content in response to a user's mouse click or some other event without having to reload the entire page.  XML (extensible Markup Language)  A general language used to create specific languages such as HTML. It provides a basic structure and set of rules to which any markup language must appear. WEB TERMINOLOGIES

  CMS (Content Management System)  An application program or a package of software tools that facilitates the creation of web pages and automates their maintenance using a Web-based interface for authoring, editing, and administration.  Flash (Adobe Flash, formerly Macromedia Flash)  A popular multimedia platform for adding animation and interactivity to web pages.  PHP (PHP Hypertext Preprocessor)  a server-side technology for dynamically generating websites. It is powerful and easy to write but often difficult to read. WEB TERMINOLOGIES

  FTP (File Transfer Protocol)  An Internet protocol for transferring files from one computer to another. Web browsers and page editors also use FTP to upload and download files.  Ex: FileZilla  j Query (JavaScript Query Language)  A library of JavaScript functions (often called a framework) that simplifies the development of dynamic, interactive web pages.  DOM (Document Object Model)  A dictionary and grammar for interpreting HTML. A DOM describes HTML elements and their attributes and properties and how they are used to create web pages. WEB TERMINOLOGIES

  What is Web Standards?  the standards of practice to create web pages that display well on all devices and that are pleasing to everyone and everything that reads them.  HTML 5 is the next generation of HTML language. Enhancement on existing feature and new features were introduced in HTML5.  Technically, HTML 5 is not been standardized yet. W3C is working on draft of that. However, browser manufacturers are already adopting HTML5 features. HTML5 AND WEB STANDARD

  No, new versions of the HTML specification do not make older versions obsolete.  If you already know some HTML, it is not a matter of learning a new language or dialect, but simply incorporating new elements into your HTML vocabulary.  You may update you webpage created several years ago with purpose of having up to date content and design but not for technical reason. Do W E ALL HAVE TO LEARN H T M L 5 Now?

 The End