CS204_Unit1_Notes.pdf

WEB TECHNOLOGIES UNIT 1: HTML, CSS & Client Side Scripting World Wide Web (WWW) also called Web, the Internet's (worldwide computer network) leading information retrieval site. The Internet provides users with access to a v...

WEB TECHNOLOGIES UNIT 1: HTML, CSS & Client Side Scripting World Wide Web (WWW) also called Web, the Internet's (worldwide computer network) leading information retrieval site. The Internet provides users with access to a vast array of documents that are linked to each other by hypertext or hypermedia links — i.e. hyperlinks, electronic connections that link similar pieces of information to allow an user to access them. Hypermedia files function links to images, sounds, animations, and movies. The Web operates inside the Internet‘s primary client-server format; servers are pc programs that save and transmit files to different computer systems on the network when asked to, whilst consumers are packages that request files from a server as the person asks for them. Browser software program permits users to view the retrieved documents.  In Hypertext Mark-up Language (HTML), a hypertext document with its corresponding text and hyperlinks is written and assigned an online address called an Uniform Resource Locator (URL).  Tim Berners-Lee and his colleagues at CERN, an international research organization, headquartered in Geneva, Switzerland, started creating the World Wide Web in 1989. They developed the Hypertext Transfer Protocol (HTTP) protocol which standardized server-client communication.  In January 1992, their text-based Web browser was made available for publication.  The World Wide Web rapidly gained recognition with the launch of a web browser named Mosaic, created in the United States by Marc Andreessen and others at the University of Illinois National Centre for Supercomputing Applications, and launched in September 1993.  Mosaic allowed people the usage of the Web to use the identical type of ―point-and- click‖ graphical manipulations that had been accessible in private computers for some years.  In April 1994 Andreessen cofounded Netscape Communications Corporation, whose Netscape Navigator grew to become the dominant Web browser quickly after its launch in December 1994.  The InternetWorks of BookLink Technologies, its first tabs browser in which a user would be able to visit another website without opening a completely new window, debuted the same year. The World Wide Web was having millions of active users by the mid-1990s. Microsoft Corporation, the software giant, was interested in promoting internet applications on personal computers and in 1995 created its own web browser (based initially on Mosaic), Internet Explorer (IE), as an add-on to the Windows 95 OS. IE was incorporated into the Windows operating system in 1996 which decreased competition from other Internet browser manufacturers including Netscape. IE gradually became the default Web browser. Apple's Safari was released on Macintosh personal computers as the default browser in 2003, and later on iPhones (2007) and iPads (2010). Safari 2.0 (2005) was the first privacy-mode browser, Private Browsing, where the client does not save Web sites in its history, save files in its cache, or enter personal information on Web pages. The first major challenger to IE‘s dominance was Mozilla's Firefox, released in 2004 and designed to address problems surrounding IE with speed and security. Google launched Chrome in 2008, the first browser featuring isolated tabs, which meant that when one tab crashed, other tabs and the entire browser would still work. In 2013 Chrome had become the Dept of CSE,PESU Page 1  WEB TECHNOLOGIES dominant browser, popularly outperforming IE and Firefox. In 2015, Microsoft removed IE, replacing it with Edge. Smartphone‘s became more computer-like in the early 21st century, and more modern services, such as Internet access, became possible. Web use on Smartphone‘s has gradually increased, and it accounted for over half of Internet browsing in 2016. Internet vs. World Wide Web The Internet is a comprehensive computer network and was conceptualized by the ARPA or Advanced Research Projects Agency during 1969. The World Wide Web is much newer than the Internet, and was introduced during the 1990s. The World Wide Web is a series of web pages that follow the http protocol, accessible from any part of the world through the Internet. The http protocol is a type of language used on the Internet to transmit data and to communicate. It is an application that is used on the Internet and all pages that are part of the World Wide Web start with http:/www, with www being a World Wide Web abbreviation. The World Wide Web is a framework for the knowledge exchange. It represents a way of accessing information through the Internet. Understanding the differences between the Internet and the World Wide Web is key to understanding the true workings of search engines. Search engines search websites that are accessible on the World Wide Web and not other internet- based sites. As Web 2.0 web applications seek to brand their domain names and make them easily pronounceable, the use of the www prefix is declining. Given the growing popularity of the mobile web, services such as Gmail.com, MySpace.com, Facebook.com and Twitter.com are most frequently mentioned without adding "www." (Or indeed ".com") to the domain. What Is the Web Made of? The Web consists of:  Your personal computer  Web browser software to access the Web  A connection to an Internet service provider (ISP)  Servers to host the data  Routers and switches to direct the flow of data How the Web Works Web pages are stored on web servers located around the globe. Entering the Uniform Resource Locator or URL of a web page in your web browser or clicking a link sends a request to the server that hosts the page. The server transmits the web page data to your computer and your web browser displays it on your screen. A web page is an electronic document written in a computer language called HTML (Hypertext Mark-up Language).Web pages can contain text, graphics, audio, video, and animation, as well as interactive features, such as data entry forms and games. Each page has a unique address known as a URL (Uniform Resource Locator), which identifies its location on the server. Web pages usually contain hyperlinks to other web pages. Hyperlinks are text and images that reference the addresses of other web pages. Dept of CSE,PESU Page 2  WEB TECHNOLOGIES A website consists of one or more web pages that relate to a common theme, such as a person, business, organization, or a subject, such as news or sports. The first page is called the home page, which acts like an index, indicating the content on the site. From the home page, you can click links to access other pages on the site or other resources on the Web. Basic components of the Web The basic components of the Web are:  Web servers, which are computers that carry distribution information over the Internet. For the example, one Web server may contain the online magazine what‘s On in Bath's text and images, and another server may contain details on which seats are available for a specific concert. The magazine will use the Web's own publishing language, HTML (Hypertext Mark-up Language), to format. The data on the seating applicable and their prices will be kept in a database with links to different forms published using HTML.  Servers that can also be PCs, Macintosh systems or workstations from UNIX: it is the server software that makes them different, not the machine itself. The servers must be relatively up-to-market devices. Servers must always be left running, so that people can access information about them whenever they prefer. Another significant thing about servers: they are comparatively hard to set up. If you're a non- technical person who wants to be published on the Internet, it's best to rent some room on someone else's site.  Web clients that can be PCs, Macintoshes and other internet enabled devices that can access information from Web servers. The machine at your desk is a Web client. Server applications can be run by PCs, Macintoshes, UNIX workstations and even single terminals. Different lient software for various platforms is marketed.Thus Mosaic has both an implementation of Macintosh and a PC.  HTTP protocol used for transmission of files between servers and clients. When you click on a hypertext link or fill out a form in a Web document, the results must be sent as quickly as possible over the Internet and then understood by a server at the other end. Instructions like 'give me this file' or 'get me the picture' are carried by the HTTP web communication protocol. This protocol is the 'messenger' that gathers files from and to servers, and then delivers results to your computer whenever you click on a button. Among other Internet services, HTTP has its counterparts: FTP, file transfer protocol, and Gopher are protocols which obtain different kinds of information from across the Internet.  Browser software which a Web client requires to view text, pictures, video clips, etc. This is given under the generic name 'browser,' which is perhaps the best-known example of Internet Explorer by Mosaic, Microsoft Corp. and Netscape Dept of CSE,PESU Page 3  WEB TECHNOLOGIES Communications Corp.'s Navigator and Communicator browsers. It gives the software ability to search Web server collected information, as you would browse through a book. It also provides you with facilities to save and print information accessed on the Internet. Navigating the Web There are three main ways to move between web pages or websites: 1. Clicking a text link. 2. Clicking a hyperlinked graphic, such as a button, photograph, or drawing. 3. Typing the URL of a web page in the location box (also known as the address field) of your web browser and then pressing the Enter or Return key. Scheme specifiers At the start of a web URI, the scheme specifiers http:/ and https:/ refer to the Hypertext Transfer Protocol or HTTP Stable, respectively. They specify the protocol of communication to be used for request and reply. The HTTP protocol is fundamental to the operation of the World Wide Web and when browsers send or retrieve sensitive data, such as passwords or banking information, the added encryption layer of HTTPS is vital. Web browsers normally prepend http:/ to user-entered URIs automatically, if omitted. What is a URL? URL is the abbreviation for Uniform Resource Locator and is known on the World Wide Web as the global address of documents and other resources. For instance, you'll go to the URL www.google.com to visit a website. A domain name is part of a URL, which stands for Uniform Resource Locator. Computers rely on a language consisting of numbers and letters called an IP address, so that computer networks and servers can "speak to each other." Each computer connecting to the Internet has a unique IP address, which looks like this Typing in a long IP address is not ideal, or practical, for an online user to navigate quickly across the Network. That's why domain names have been developed-to cover IP addresses with something more memorable. The domain name may be called a "nickname" to the IP address. A URL, along with other basic information, includes the domain name to create a complete address (or "web address") to guide a visitor to a particular online website called a webpage. Essentially it's a series of directions and every web page has a special one. Domain Name System Dept of CSE,PESU Page 4  WEB TECHNOLOGIES DNS stands for Domain Name System. DNS 'principal role is to convert domain names into IP addresses that computers can recognize. This also lists mail servers that accept Emails for each domain name. Internet machine is assigned a unique address, which is called an IP address. So looks a standard IP address: 199.123.456.7 It's very hard to keep in mind the IP addresses of all the websites that we visit daily. Words are easier to remember than numeral strings. It's here that domain names get into the picture. What you need to know when you visit a website is their URL. Computers remember numbers, and DNS helps to translate the URL to an IP address that the machine can use. If you type domain.com into the user, the user wants to get the www.domain.com IP address first. The user contacts a DNS server to ask where the web pages are located. It acts as an IP address directory service. DNS Servers and IP Addresses There are billions of IP addresses currently in use, and most machines have a human-readable name as well.DNS servers (cumulatively) are processing billions of requests across the internet at any given time. Millions of people are adding and changing domain names and IP addresses each day. With so much to handle, DNS servers rely on network efficiency and internet protocols. Part of the IP's effectiveness is that each machine on a network has a unique IP address in both the IPV4 and IPV6 standards managed by the Internet Assigned Numbers Authority (IANA). Here are some ways to recognize an IP address:  An IP address in the IPV4 standard has four numbers separated by three decimals, as in: 70.74.251.42  An IP address in the IPV6 standard has eight hexadecimal numbers (base-16) separated by colons, as in 2001:0cb8:85a3:0000:0000:8a2e:0370:7334. Because IPV6 is still a very new standard, we'll concentrate on the more common IPV4 for this article. Each number in an IPV4 number is called an "octet" because it's a base- 10 equivalent of an 8-digit base-2 (binary) number used in routing network traffic. For example, the octet written as 42 stands for 00101010. Each digit in the binary number is the placeholder for a certain power of two from 2 to 27, reading from right to left. That means that in 00101010, you have one each of 21, 23 and 25. So, to get the base- 10 equivalent, just add 21 + 23 + 25 = 2 + 8 + 32 = 42. There are only 256 possibilities for the value of each octet: the numbers 0 through 255. Certain addresses and ranges are designated by the IANA as reserved IP addresses, which mean they have a specific job in IP. For example, the IP address 127.0.0.1 is reserved to identify the computer you're currently using. What are the steps in a DNS lookup? DNS is concerned with a domain name being translated into the appropriate IP address. To learn how this process works, it helps to follow the path of a DNS lookup as it travels from a web browser, through the DNS lookup process, and back again. Let's take a look at the steps. The 8 steps in a DNS lookup: 1. A user types ‗example.com‘ into a web browser and the query travels into the Internet and is received by a DNS recursive resolver. Dept of CSE,PESU Page 5  WEB TECHNOLOGIES 2. The resolver then queries a DNS root nameserver (.). 3. The root server then responds to the resolver with the address of a Top Level Domain (TLD) DNS server (such as.com or.net), which stores the information for its domains. When searching for example.com, our request is pointed toward the.com TLD. 4. The resolver then makes a request to the.com TLD. 5. The TLD server then responds with the IP address of the domain‘s name server, example.com. 6. Lastly, the recursive resolver sends a query to the domain‘s nameserver. 7. The IP address for example.com is then returned to the resolver from the nameserver. 8. The DNS resolver then responds to the web browser with the IP address of the domain requested initially. 9. Once the 8 steps of the DNS lookup have returned the IP address for example.com, the browser is able to make the request for the web page: 10. The browser makes a HTTP request to the IP address. 11. The server at that IP returns the webpage to be rendered in the browser (step 10). Top Level Domain (TLD) TLD refers to the last part of a domain name. For example, the.com in amazon.com is the Top Level Domain. The most common TLDs include.com,.net, org, and.info. Country code TLDs represents specific geographic locations. For example:.in represents India. Here are some more examples: Dept of CSE,PESU Page 6  WEB TECHNOLOGIES  COM — commercial websites, though open to everyone  NET — network websites, though open to everyone  ORG — non-profit organization websites, though open to everyone  EDU — restricted to schools and educational organizations  MIL — restricted to the U.S. military  GOV — restricted to the U.S. government  US, UK, RU and other two-letter country codes — each is assigned to a domain name authority in the respective country In a domain name, each word and dot combination you add before a top-level domain indicates a level in the domain structure. Each level refers to a server or a group of servers that manage that domain level. An organization may have a hierarchy of sub-domains further organizing its internet presence, like "bbc.co.uk" which is the BBC's domain under CO, an additional level created by the domain name authority responsible for the U.K. country code. The left-most word in the domain name, such as www or mail, is a host name. It specifies the name of a specific machine (with a specific IP address) in a domain, typically dedicated to a specific purpose. A given domain can potentially contain millions of host names as long as they're all unique to that domain. (The "http" part stands for Hypertext Transfer Protocol and is the protocol by which information is sent by the user to the website she is visiting. Nowadays, you're more likely to see "https" which is a sign the information is being sent by secure protocol where the information is encrypted. A subdomain is a subdivision of a domain name, allowing you to put content in your URL before your namespace. For example, blog.companyname.com or shop.companyname.com would be a subdomain of the domain name companyname.com. For example: If a customer buys a domain with 123 Reg, e.g. yourdomain.co.uk, they can set up subdomains, e.g. site1.yourdomain.co.uk or secure.yourdomain.co.uk. This is an excellent way of breaking up the website if you have different regions, products or even languages. Protocol Protocol is the standard means, rules and conventions which are accepted. It is the beginning and the core of the web. HTTP is the Hyper Text Transfer Protocol; it is a Web-based protocol. It is rules for providing to the web user, and it is a standard delivered to the clients from all common web servers. When the web browser wants a user requesting documents, the server changes the document and the web browser converts this document to the appropriate type again. And it's getting sent to the user. It therefore serves to transmit files which contain web pages to users based on web protocols. In other words, when communicate with Englishman, he can‘t recognize our phrases if talk Korean. Likewise, human beings made standards that can speak with all of webs. We called these standards a protocol, and when communicate on the web, it can communicate to suit internet protocols. How Protocol Works? The User uses his computer and connects Web server (Google, Yahoo, etc.) through Internet. Consider an example where user trying to access Google. Dept of CSE,PESU Page 7  WEB TECHNOLOGIES 1. Enter http://www.google.com in the address bar using a web browser. 2. Web browser request information to the Google web server by the HTTP protocols. 3. Web server receives requests, and it sends the answer to the computer. 4. Web browser received the HTTP protocol information represented by texts and pictures. What is HTTP (Hypertext Transfer Protocol)? The Hypertext Transfer Protocol is an application protocol for distributed, collaborative, hypermedia information systems that allows users to communicate data on the World Wide Web. What is the purpose of HTTP? HTTP was invented alongside HTML to create the first interactive, text-based web browser: the original World Wide Web. Today, the protocol remains one of the primary means of using the Internet. How does HTTP work? As a request-response protocol, HTTP gives users a way to interact with web resources such as HTML files by transmitting hypertext messages between clients and servers. HTTP clients generally use Transmission Control Protocol (TCP) connections to communicate with servers. HTTP utilizes specific request methods in order to perform various tasks:  GET requests a specific resource in its entirety  HEAD requests a specific resource without the body content  POST adds content, messages, or data to a new page under an existing web resource  PUT directly modifies an existing web resource or creates a new URI if need be  DELETE gets rid of a specified resource  TRACE shows users any changes or additions made to a web resource  OPTIONS shows users which HTTP methods are available for a specific URL  CONNECT converts the request connection to a transparent TCP/IP tunnel  PATCH partially modifies a web resource Dept of CSE,PESU Page 8  WEB TECHNOLOGIES All HTTP servers use the GET and HEAD methods, but not all support the rest of these request methods. Basic aspects of HTTP  HTTP is generally designed to be simple and human readable, even with the added complexity introduced in HTTP/2 by encapsulating HTTP messages into frames and reduced complexity for newcomers.  Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with. New functionality can even be introduced by a simple agreement between a client and a server about a new header's semantics.  HTTP is stateless: there is no link between two requests being successively carried out on the same connection. This immediately has the prospect of being problematic for users attempting to interact with certain pages coherently, for example, using e-commerce shopping baskets. But while the core of HTTP itself is stateless, HTTP cookies allow the use of stateful sessions. Using header extensibility, HTTP Cookies are added to the workflow, allowing session creation on each HTTP request to share the same context, or the same state.  HTTP and connection is controlled at the transport layer, and therefore fundamentally out of scope for HTTP. Though HTTP doesn't require the underlying transport protocol to be connection-based; only requiring it to be reliable, or not lose messages (so at minimum presenting an error). Among the two most common transport protocols on the Internet, TCP is reliable and UDP isn't. HTTP therefore relies on the TCP standard, which is connection- based.  Before a client and server can exchange an HTTP request/response pair, they must establish a TCP connection, a process which requires several round-trips. The default behaviour of HTTP/1.0 is to open a separate TCP connection for each HTTP request/response pair. This is less efficient than sharing a single TCP connection when multiple requests are sent in close succession. HTTP and TCP/IP HTTP is a protocol that's built on top of the TCP/IP protocols. Each HTTP request is inside an IP packet, and each HTTP response is inside another IP packet--or more typically, multiple packets, since the response data can be quite large.  Diagram with laptop on left and server on right. Laptop has browser window with Dept of CSE,PESU Page 9  WEB TECHNOLOGIES "http://www.example.com/index.html" in address bar. Server is labelled with "www.example.com" and its IP address "93.184.216.34". 4 arrows are shown:  First arrow goes from laptop to server and displays packet with HTTP request inside.  Second arrow goes from server to laptop and displays packet with "ACK" inside.  Third arrow goes from server to laptop and displays packet with HTTP response inside.  Fourth arrow goes from laptop to server and displays packet with "ACK" inside. There are many other protocols built on top of TCP/IP, like protocols for sending email (SMTP, POP, and IMAP) and uploading files (FTP). All of these protocols enable us to use the Internet to connect with other computers in useful ways, and to communicate and collaborate across wide distances. HTTPS HTTPS stands for Hypertext Transfer Protocol over Secure Socket Layer. Think of it as a secure version of HTTP. HTTPS is used primarily on web pages that ask you to provide personal or sensitive information (such as a password or your credit card details). When you browse a web page using HTTPS, you are using SSL (Secure Sockets Layer). For a website to use HTTPS it needs to have an SSL certificate installed on the server. These are usually issued by a trusted 3rd party, referred to as a Certificate Authority (CA). When you browse a web page using HTTPS, you can check the details of the SSL certificate. For example, you could check the validity of it. You could also check that the website does actually belong to the organization you think it does. You can usually do this by double clicking on the browser's padlock icon. The padlock icon only appears when you view a secure site. Component of HTTP are 1. Transfer time 2. Computer IP 3. Web serverIP 4. Method (get/post) Dept of CSE,PESU Page 10  WEB TECHNOLOGIES 5. HTTP protocol version (1.0/1.1) 6. File format (flash, file data, etc.) 7. Reference (Previous web page address) 8. Language (Language type) 9. Encoding (Encoding type of English) 10. Information of web browser (IE/Firefox/Chrome etc.) 11. Cookies (Cookie values stored on my computer) 12. Real transfer content (id = iboss/ password=1234, etc.) What does a typical HTTP request look like? An HTTP request is just a series of lines of text that follow the HTTP protocol. A GET request might look like this: This section of text, generated by the user's browser, gets sent across the Internet. The problem is, it's sent just like this, in plaintext that anyone monitoring the connection can read. (Those who are unfamiliar with the HTTP protocol may find this text hard to understand, but anyone with baseline knowledge of the protocol's commands and syntax can read it easily.) This is especially an issue when users submit sensitive data via a website or a web application. This could be a password, a credit card number, or any other data entered into a form, and in HTTP all this data is sent in plaintext for anyone to read. (When a user submits a form, the browser translates this into an HTTP POST request instead of an HTTP GET request.) When an origin server receives an HTTP request, it sends an HTTP response, which is similar: Dept of CSE,PESU Page 11  WEB TECHNOLOGIES If a website uses HTTP instead of HTTPS, all requests and responses can be read by anyone who is monitoring the session. Essentially, a malicious actor can just read the text in the request or the response and know exactly what information someone is asking for, sending, or receiving. When consider with HTTPS, HTTPS uses TLS (or SSL) to encrypt HTTP requests and responses, so in the example above, instead of the text, an attacker would see a bunch of seemingly random characters. Instead of: HTTP Messages HTTP messages, as defined in HTTP/1.1 and earlier, are human-readable. In HTTP/2, these messages are embedded into a binary structure, a frame, allowing optimizations like compression of headers and multiplexing. Even if only part of the original HTTP message is sent in this version of HTTP, the semantics of each message is unchanged and the client reconstitutes (virtually) the original HTTP/1.1 request. It is therefore useful to comprehend HTTP/2 messages in the HTTP/1.1 format. There are two types of HTTP messages, requests and responses, each with its own format. Requests An example HTTP request: Requests consist of the following elements:  An HTTP method, usually a verb like GET, POST or a noun like OPTIONS or HEAD that defines the operation the client wants to perform. Typically, a client wants to Dept of CSE,PESU Page 12  WEB TECHNOLOGIES fetch a resource (using GET) or post the value of an HTML form (using POST), though more operations may be needed in other cases.  The path of the resource to fetch; the URL of the resource stripped from elements that are obvious from the context, for example without the protocol (http://), the domain (here, google.com), or the TCP port (here, 80).  The version of the HTTP protocol.  Optional headers that convey additional information for the servers.  Or a body, for some methods like POST, similar to those in responses, which contain the resource sent. Responses An example response: Responses consist of the following elements:  The version of the HTTP protocol they follow.  A status code, indicating if the request was successful, or not, and why.  A status message, a non-authoritative short description of the status code.  HTTP headers like those for requests.  Optionally, a body containing the fetched resource. HTTP can use both nonpersistent connections and persistent connections. A nonpersistent connection is the one that is closed after the server sends the requested object to the client. In other words, the connection is used exactly for one request and one response. With persistent connections, the server leaves the TCP connection open after sending responses and hence the subsequent requests and responses between the same client and server can be sent. The server closes the connection only when it is not used for a certain configurable amount of time. With persistent connections, the performance is improved by 20%. A persistent connection takes 2 RTT for the connection and then transfers as many objects, as wanted, over this single connection. Dept of CSE,PESU Page 13  WEB TECHNOLOGIES Nonpersistent connections are the default mode for HTTP/1.0 and persistent connections are the default mode for HTTP/1.1. The non-persistent connection takes the connection time of 2RTT + file transmission time. It takes the first RTT (round-trip time) to establish the connection between the server and the client. The second RTT is taken to request and return the object. This case stands for a single object transmission. HTTP Status Codes HTTP response status codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes: 1. Informational responses (100–199), 2. Successful responses (200–299), 3.. Redirects (300–399), 4. Client errors (400–499), 5. And Server errors (500–599). 1. Information responses 100 Continue : This interim response indicates that everything so far is OK and that the client should continue the request, or ignore the response if the request is already finished. 2. Successful responses 200 OK: The request has succeeded. The meaning of the success depends on the HTTP method:  GET: The resource has been fetched and is transmitted in the message body.  HEAD: The entity headers are in the message body.  PUT or POST: The resource describing the result of the action is transmitted in the message body.  TRACE: The message body contains the request message as received by the serve 3. Redirection messages 301 Moved Permanently: The URL of the requested resource has been changed permanently. The new URL is given in the response. 4. Client error responses 400 Bad Request: The server could not understand the request due to invalid syntax. 5. Server error responses 500 Internal Server Error: The server has encountered a situation it doesn't know how to handle. Dept of CSE,PESU Page 14  WEB TECHNOLOGIES UNIT 1: HTML, CSS & Client Side Scripting HTML HTML is the language in which most websites are written. HTML is used to create pages and make them functional. The code used to make them visually appealing is known as CSS. HTML was first created by Tim Berners-Lee, Robert Cailliau, and others starting in 1989. It stands for Hyper Text Mark-up Language. Hypertext means that the document contains links that allow the reader to jump to other places in the document or to another document altogether. The latest version is known as HTML5. HTML is a mark-up language which is comprised of a set of tags that describe the document‟s content. HTML files are simple text files that contain plain text and tags and typically have the file extension.html or.htm. They are commonly referred to as web pages. HTML describes what a page should look like when viewed through a web browser such a Mozilla Firefox, Google Chrome, Safari, and Internet Explorer. A Mark-up Language is a way that computers speak to each other to control how text is processed and presented. To do this HTML uses two things: tags and attributes. HTML Editors HTML can be created or edited in many different types of editors, many of which are free and work incredibly well. In reality, all you need is a simple text editor, like Microsoft Notepad, or Text Edit on a Mac to get started. An HTML editor makes things much easier by colour coding different items making it Dept of CSE,PESU Page 1  WEB TECHNOLOGIES simple to find specific items or locate errors. Free Editors:  Notepad ++ - http://notepad-plus-plus.org/  visual studio code - https://code.visualstudio.com/download  Sublime - https://www.sublimetext.com/3 HTML Tags HTML Tags are keywords or tag names surrounded by angle brackets or < > and normally come in pairs like this: and. The first tag in a pair is the opening tag and the second tag is the closing tag. The closing tag is written the same way as the opening tag with a forward slash ( / ) to say “stop doing this.” For Example: content Your HTML document should always contain to signify the beginning of the HMTL content and to signify the end. Without this tag, the document is only text. Most tags come in matched "beginning" and "ending" pairs, but this is not an absolute rule. Dept of CSE,PESU Page 2  WEB TECHNOLOGIES Any Web page you create will contain the following tags at the start of the page:  : tells the Web browser that this is the beginning of an HTML document  : tells that Web browser that this is the header for the page (you'll learn later what goes between "HEAD" tags)  : tells the Web browser that this is the title of the page  : tells the Web browser that this is the beginning of the Web page content -- everything you want to say and see on your page will follow this tag.  The tags needed to end any Web page are:   Example: My First Page Dept of CSE,PESU Page 3  WEB TECHNOLOGIES Hello there. This is my first page! Document Language A web page‟s default language is defined by the Lang attribute on the top-level element. The document is in English, use the en country code as the attribute value : Character Sets A “character set” is kind of like a digital alphabet for your browser. It‟s different from the language of your document in that it only affects how the letters themselves are rendered, not the language of the content. Dept of CSE,PESU Page 4  WEB TECHNOLOGIES HTML Elements An HTML Element is everything from the opening tag to the closing tag. The element content is everything between the opening and closing tags. There are also special elements that are closed in the start tag such as a line break. Most HTML elements can have attributes, or special characteristics that describe the element. Special Elements While there are a number of special HTML elements, such as the tag mentioned above, there are some other special elements you should know. HTML Lines: The HTML horizontal rule can be used to divide content areas and uses the tag. Inserting the tag will draw a horizontal line across your content area. HTML Comments: Comments can be inserted into HTML code to make it more readable and to explain to the reader of your code what it is you plan to do or what you have changed. It‟s always good practice to comment your HTML code. Comment elements are written as follows and do not show on your rendered page. The is the end. Everything typed within these tags will be invisible to the viewer unless the source code is viewed. HTML “White Space”: Browsers will ignore all “white space” in your HTML document. White space can be added to make your code more human readable, but it will be completely ignored when the browser renders the document. Keep this in mind when you write your code. Everything is controlled by a tag. Tags tell the browser what to do, if you instruct nothing, nothing will result. HTML Attributes HTML elements can have attributes which provide additional information about an element. Attributes are always assigned in the opening tag and always contain a name and value pair. The value must be contained in double quotes. Content A common example of a complete element: google.com HTML Headings HTML headings are defined with through tags. defines the most important heading while defines the lease important heading. The browser used to view the headings will automatically add space before and after each heading. It is very important that you use headings for your content Dept of CSE,PESU Page 6  WEB TECHNOLOGIES headers only and not simply to make any text larger. Search engine crawlers will use your heading tags to organize your content by order of importance. should always be used for your most important topics, followed by and so on. HTML Paragraphs HTML Documents are divided into paragraphs. Paragraphs are defined with the tag. Browsers will automatically add white space above and below a paragraph tag. Make sure to include the closing tag to complete the paragraph and start the next. Below is an example paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pharetra metus a arcu vulputate aliquet. Nulla ac metus ut neque fringilla posuere. Pellentesque quis viverra nisl. HTML Formatting HTML also uses tags for formatting text, much like you would with a word processing program. Text formatting means simply things like bold, italic, and underline. You should note, however, that underlining text in an HTML document is terribly poor form as it can be misconstrued as a link. All formatting tags must be closed. Example: Dept of CSE,PESU Page 7  WEB TECHNOLOGIES Text formatting means simply things like bold, italic, and underline. HTML Links The HTML tag defines an anchor or hyperlink. An element adds meaning to the content it contains, an HTML “attribute” adds meaning to the element it‟s attached to. A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document. When you move the cursor over a link in a Web page, the arrow will turn into a little hand. The most important attribute of the element is the href attribute, which indicates the link‟s destination. By default, links will appear as follows in all browsers:  An unvisited link is underlined and blue  A visited link is underlined and purple  An active link is underlined and red HTML Head The HTML element is a special container element to contain all of the head specific elements. Elements inside the head can include scripts, tell the browser where to find external information such as style sheets or JavaScript‟s Dept of CSE,PESU Page 8  WEB TECHNOLOGIES and provide search engines with descriptive information about the content of the page. HTML Images Images are displayed in HTML by use of the tag. The tag does not need to be closed. The tag has multiple attributes to define what to display and how it should be displayed. As with other attributes, values must be contained in quotes. Image Formats Dept of CSE,PESU Page 9  WEB TECHNOLOGIES There‟s four main image formats in use on the web, and they were all designed to do different things. JPG Images JPG images are designed for handling large colour palettes without exorbitantly increasing file size. This makes them great for photos and images with lots of gradients in them. GIF Images GIFs are the go-to option for simple animations, but the trade off is that they‟re somewhat limited in terms of colour palette—never use them for photos. Transparent pixels are a binary option for GIFs, meaning you can‟t have semi- opaque pixels. PNG Images PNGs are great for anything that‟s not a photo or animated. For photos, a PNG file of the same quality (as perceived the human eye) would generally be bigger than an equivalent JPG file. SVG Images Unlike the pixel-based image formats above, SVG is a vector-based graphics format, meaning it can scale up or down to any dimension without loss of quality. This property makes SVG images a wonderful tool for responsive design. They‟re good for pretty much all the same use cases as PNGs, and you should use them whenever you can. Image Dimensions by default, the element uses the inherit dimensions of its image file. Our JPG, GIF, and PNG images are actually 150×150 pixels, while SVG is only 75×75 pixels. Dept of CSE,PESU Page 10  WEB TECHNOLOGIES Adding alt attributes to your elements is a best practice. It defines a “text alternative” to the image being displayed. This has an impact on both search engines and users with text-only browsers (e.g., people that use text-to- speech software due to a vision impairment). Aligning Images The horizontal alignment of images on web page is formatted using the below tags and techniques Use the tag before the image tag to centre or justify right or left. Use the tag after the image tag to end the justification. Use the tag within the "img src" tag to have text wrap around the image. Insert below tags within the "img src" tag for the vertical alignment of images in relation to text: align="bottom" The text lines up with the bottom of the image. align="top" The text lines up with the top of the image. align="middle" The text lines up alongside the middle of the image. HTML Lists There are two types of lists in HTML, Ordered and Unordered. Quite simply, Dept of CSE,PESU Page 11  WEB TECHNOLOGIES the two are best described as Numbered and Bulleted, respectively. Lists contain two types of tags: The type of list: Ordered and Unordered and the List items. Descriptive Lists A descriptive list creates a list of text items with an indented second line: Tony Stark Founder of Stark Company Use the following tags in this manner: Tony Stark Founder of Stark Company The tag should correspond with the text you want lined up on the margin; corresponds with the line you want indented. HTML Tables A table is comprised of rows and columns, similar to a spreadsheet, and can be Dept of CSE,PESU Page 12  WEB TECHNOLOGIES quite complex. Tables consist of a number of tags and will always start with the tag. Like many other tags the table tag can have attributes assigned to it such as width and follow the same rules as other attributes. The tag signifies the start of a table but will need other tags to assign rows and columns inside it. Table Rows and Columns Table Rows are defined using the tag and columns are defined using the tag. The tag stands for „Table Data‟ and can contain text, images, links, lists or any other HTML element. Below is an example of a simple table in HTML. Cellpadding The "cellpadding" tag specifies (in pixels) the amount of space between the edges of each cell and the data inside each cell. Use it within the starting "table" tag: Dept of CSE,PESU Page 13  WEB TECHNOLOGIES Example 1: Example 2: Cellspacing The "cellspacing" tag specifies (in pixels) the amount of space between each cell. Use it within the "table" tag: Example 1: Example 2: Alignment and Cell Padding By default, all cell contents within a table (with the exception of table headings) align vertically centered and left justified. To make the contents of a cell align a different way, apply the following tags within the , or tags: For horizontal alignment, values can be left, right, or centre: Example: For vertical alignment, values can be top, bottom, or middle: Example: Cell Spanning "Spanning" occurs when one cell spans two or more other cells in the table. For column spanning, the tag is placed within the tag where it applies. Here is a code example: This cell spans over two columns This cell spans over one column Dept of CSE,PESU Page 14  WEB TECHNOLOGIES A B C For row spanning, the tag is placed within the tag where it applies. For example: This cell spans over two rows A B C D Every web page you create should define the language it‟s written in and its character set. Dept of CSE,PESU Page 15 Unit1: HTML, CSS & Client Side Scripting Forms A form is a component of a Web page that has form controls, such as text, buttons, checkboxes, range, or colour picker controls. A user can interact with such a form, providing data that can then be sent to the server for further processing (e.g. returning the results of a search or calculation). No client-side scripting is needed in many cases, though an API is available so that scripts can augment the user experience or use forms for purposes other than submitting data to a server. HTML forms could have their own category because they have many elements that have to work together in order for the form to work. Forms are the primary way users pass information to the server. The HTML form is encapsulated by the tags and all of the inputs will fall in between the opening and closing form tags. [Dept of CSE, PESU] Page 6  All forms start with the tag and end with. All other form objects go between these two tags. The form tag has two main properties: METHOD and ACTION. METHOD refers to post or get. The post attribute will send the information from the form as a text document. The get attribute is used mostly with search engines, and will not be discussed. We will generally set METHOD="post". ACTION usually specifies the location of the CGI script that will process the form data. HTML Form Inputs HTML Form Inputs are :  Text Fields – Allows the user to input text data in a one line field  Radio Buttons – Allows the user to select one option from multiple options  Checkboxes – Allows the user to select many options from multiple options  Submit Button – Allows the user to send the data Example: [Dept of CSE, PESU] Page 7  Results: Typically, the form tag will have several attributes including the name, action, and the method. The name attribute is only to differentiate one form from another on the page. The action attribute is set to the page where you will pass the data (generally, this will not be an HTML page). Finally, the method attribute will determine how you want to send the data. Single-line Text Entry A single-line text entry allows the user to input a small amount of text, like a name or an email address. Syntax: Please input your name: The tag has the following elements: is the tag used for most of the form objects. [Dept of CSE, PESU] Page 8  TYPE="text" sets the object to a single-line text field. Size="40" sets the field to show 40 characters. MAXLENGTH="30" means that only a total of 30 characters can be typed in this field. NAME="personal-name" sets the text field's name to be personal-name (this information is part of the form data sent on for further processing). The name is required to identify the value data which will be associated with it. For example, if the text box was for an email address or telephone number, it might set this attribute with a more suggestive value, e.g. NAME="email" or NAME="tel-no". The easiest way to choose the name is simply to use the purpose of the field. VALUE=... Another attribute, VALUE, can be used to place an initial text in the field. As might be expected, if this text is left unchanged it becomes the value associated with the NAME when the form is submitted. Putting an initial value in the field is usually not required, but can be used as a prompt. For example, the following HTML produces the figure that comes after it: Syntax: Name: [Dept of CSE, PESU] Page 9  Multi-line Text Entry While you can type as much text as you need into a single line text field, entering large quantities of text into a multi-line input field is more realistic. HTML calls these fields’ text areas. tags are used for the following. They create a scrollable text area for larger amount of text: NAME="movie-comments" supplies the text field with the given label. Here, because the example allows the user to write about movies, its named the form element "movie-comments". COLS="50" specifies the width, in characters, of the text area. Here 50 characters have been specified. ROWS="5" specifies the height of the text area in rows. This examples specifies five columns. Note that the text that should appear in the multi-line field is placed between the and tags. So, for example, users could be prompted to input their comments on a movie thus: --- please enter your comments here--- [Dept of CSE, PESU] Page 10  A WRAP attribute is available, and the default value is WRAP="ON". You can change wrapping to off, which will cause a horizontal scroll bar to appear at the bottom edge of the text area. Menu Buttons and Scrolling Lists Menu buttons and scrolling lists are useful when you have multiple options to choose from. For example, the following shows a menu button (sometimes imprecisely called a pull-down or drop- down menu). Clicking on the 'select a colour' option on the button displays all the other options in the button's menu. Pulling down to the required option will set the value for this element. Scrolling lists, otherwise known as selection lists, are similar to menu buttons, but they usually display more than one of the available options at a time. They rarely show all options, and the user is required to scroll in order to view them all. If all the options are displayed, no scroll bar is included with the list, and it may not be obvious to the user that they should select an option. [Dept of CSE, PESU] Page 11 [Dept of CSE, PESU] Page 12  Web Technologies Unit 1: HTML5 (New Semantic Tags) HTML5 semantic elements are here to help web developers to navigate though their web page with ease, since the semantic elements together forms a more structured layout. The purpose of creating semantic elements in HTML5 is to give meaning to its traditional design layout. It helps browsers quickly and efficiently understand the structure of the layout, and two, it helps web developers to systematically arrange or design web pages and give meaning to each section of the layout. The elements are easy to remember, and fits where it needs. Technically, do not have to use the DIV element as a container to define every section on the web page. Define the header section using the element and the footer section using element and so on. For a example, Developers have used the DIV element () as a primary container, which served as header, footer, navigation etc, by identifying each element with unique ids or Class attribute. Header using DIV Footer using DIV Header content Footer content The above structure cannot be considered as meaningless, since it serves the purpose of separating two different sections as header and footer. Dept of CSE, PESU Page 1  Web Technologies However, HTML5 has added a little meaning (semantic) and identifier to its elements, so web developers can use them wisely in their web pages. HTML 5 introduces a number of new elements. Some of these are what I’ve termed “structural”—section, nav, aside, header, and footer. The dialog element is a kind of content element, akin to blockquote. There are also a number of data elements, such as meter, which “represents a scalar measurement within a known range, or a fractional value; for example disk usage,” and the time element, which represents a date and/or a time. Example Semantic and elements Prior to HTML5 semantics, the header and footer would have served as independent sections of a web page. We can define the new semantic and elements as part of a section or sections.Each section can have its own and element, allowing us to add multiple semantic elements in a single web page. Dept of CSE, PESU Page 2  Web Technologies HTML 5 is the new major version of HTML. HTML5 brings a host of new elements and attributes to allow developers to make their documents more easily understood by other systems (especially search engines). In addition, HTML 5 will also include fancy APIs for drawing graphics on screen, storing data offline, dragging and dropping, and a lot more. Here are new HTML5 tags that will make it easier to write Web sites. Doctype In HTML 5, there is only one doctype. It is declared in the beginning of the page by. It simply tells the browser that it’s dealing with an HTML-document. and One of the biggest uses for Flash, Silverlight, and similar technologies is to get a multimedia item to play. With HTML5 supporting the new video and audio controls, those technologies are now relegated to being used for fallback status. The browser can now natively display the controls, and the content can be manipulated through JavaScript. Don’t let the codec confusion scare you away. You can specify multiple sources for content, so you can make sure that your multimedia will play regardless of what codecs the user’s browser supports. type attributes The venerable element now has a number of new values for the type attribute, and browsers do some pretty slick things depending on its value. For example, set type to “datetime” and browsers can show calendar/clock controls to pick the right time, a trick that used to require JavaScript. There is a wide variety of type attributes, and learning them (and the additional attributes that go with some of them) will eliminate the need for a lot of JavaScript work. The tag gives HTML a bitmapped surface to work with, much like what you would use with GDI+ or the.NET Image object. While isn’t Dept of CSE, PESU Page 3  Web Technologies perfect (layers need to be replicated by using multiple canvas objects stacked on top of each other, for example), it is a great way to build charts and graphs, which have been a traditional weak spot in HTML, as well as custom graphics. and The and tags are two of the new semantic tags available. These two tags do not get you anything above and beyond for the actual display. But they will reap long-term rewards for your search engine efforts, since the search engines will be able to tell the difference between “content” and things that are important to the user but that aren’t the actual content. The nav-tag is used to contain navigational elements, such as the main navigation on a site or more specialized navigation like next/previous-links. and The and tags are two more semantic tags that will boost your search engine visibility. Articles can be composed of multiple sections, and a section can have multiple articles. Confusing? Not really. An article represents a full block of content, and a section is a piece of a bigger whole. For example, if you are looking at a blog, the front page might have a section for the listing of all the posts, and each post would be an article with a section for the actual post and another for comments. The aside tag is used to wrap around content related to the main content of the page that could still stand on it’s own and make sense. The new tag is unique, in that it expects its content to be generated dynamically with JavaScript. It has a value attribute, which can be manipulated through the DOM with JavaScript to change what is displayed on the screen. This is much more convenient than the current ways of doing things. Dept of CSE, PESU Page 4  Web Technologies It seems like every Web site needs to have an expanding/collapsing block of text. While this is easy enough to do with JavaScript or server-side code, the tag makes it even easier. It does exactly what all have been doing for years now: makes a simple block that expands and collapses the content when the header is clicked. The tag does not have widespread support yet, but it will soon. and is a container for content (typically images, but it can be anything), and (which gets put inside the tag) provides a caption or subtitle for the contents of the tag. For example, you could have four images representing charts of sales growth within a tag, and a with text like “Year-to-year sales growth, 1989 – 1993.” The images would be shown next to each other with the text running below all four. and and are similar. You use for a task or a “measure how complete something is” scenario. It also has an indeterminate mode for something that has an unknown duration (like searching a database). The tag is for gauges and measurements of value (thermometers, quantity used, etc.). While they may look alike on the screen in many cases, they do have different semantic meanings. The tag acts like a combo box, where the system provides a pre-made list of suggestions, but users are free to type in their own input as well. There are tons of possible uses for this, such as a search box pre-populated with items based on the user’s history. This is another one of those things that currently requires a bunch of JavaScript (or JavaScript libraries) to handle but that can be done natively with HTML5. Dept of CSE, PESU Page 5  Web Technologies CODE: To add multiple semantic elements in a single web page. Results: CODE: Create navigation links using Semantic elements The element will allow us to group together a list of navigation links in a semantic manner. A typical navigation link section would have looked like this before. Dept of CSE, PESU Page 6  Web Technologies Results: Dept of CSE, PESU Page 7  WEB TECHNOLOGIES UNIT 1: HTML, CSS & Client Side Scripting Cascading Style Sheets CSS stands for Cascading Style Sheets and it is the language used to style the visual presentation of web pages. CSS is the language that tells web browsers how to render the different parts of a web page. Every item or element on a web page is part of a document written in a mark-up language. In most cases, HTML is the mark-up language, but there are other languages in use such as XML. CSS is the language that defines the presentation of a web page. It is used to add colour, background images, and textures, and to arrange elements on the page. It is also used to enhance the usability of a website. The style sheet standard supported by modern browsers is called cascading style sheets, or CSS. CSS files contain a set of rules for the formatting of HTML documents. A style sheet is a collection of rules that describe the format of the HTML tags. In the above example there are six rules describing the format of the BODY tag, and one rule for the P tag.  WEB TECHNOLOGIES There are two ways to write style sheets: the technically easier rule-based approach, and an approach that procedurally constructs a style sheet. Below is a description of the rules used in the above example.  Body - bgcolor set to "ivory", left and right margins indented relatively by 20%, font set to "Times New Roman" and text colour set to black.  P to indent the first line by and absolute value of two centimetres. There are three parts to a style sheet rule, shown in the figure below The selector represents the HTML element that you want to style. For example: h1 { color: blue } This code tells the browser to render all occurrences of the HTML element in blue. Grouping Selectors You can apply a style to many selectors if you like. Just separate the selectors with a comma. h1, h2, h3, h4, h5, h6 { color: blue }  WEB TECHNOLOGIES Applying Multiple Properties To apply more than one property separate each declaration with a semi-colon. h1 { color:blue; font-family: arial, helvetica, "sans serif" } Note: CSS are a little different than their HTML counterparts. Instead of the