Web Programming with HTML (PDF)

Web Programming HTML (HYPER TEXT MARKUP LANGUAGE) Application Layer  The application layer is closest to the end user.  Network applications enable users to send and receive data with ease.  The application layer acts as interface between the applications and the underlying network. ...

Web Programming HTML (HYPER TEXT MARKUP LANGUAGE) Application Layer  The application layer is closest to the end user.  Network applications enable users to send and receive data with ease.  The application layer acts as interface between the applications and the underlying network.  Application layer protocols help exchange data between programs running on the source and destination hosts.  The TCP/IP application layer performs the functions of the upper three layers of the OSI model.  Common application layer protocols include: HTTP, FTP, TFTP, DNS. TCP/IP Application Layer Protocols  TCP/IP application protocols specify the format and control information necessary for common Internet functions.  Application layer protocols must be implemented in both the source and destination devices. Hypertext Transfer Protocol (HTTP)  An application-layer protocol for transmitting hypermedia documents, such as HTML.  It was designed for communication between web browsers and web servers, but it can also be used for other purposes.  HTTP follows a classical client-server model, with a client opening a connection to make a request, then waiting until it receives a response. Hypertext Transfer Protocol and Hypertext Markup Language  A web address or uniform resource locator (URL) is a reference to a web server. A URL allows a web browser to establish a connection to that web server.  The URL http://cisco.com/index.html has three basic parts: o http (the protocol or scheme) o www.cisco.com (the server name) o index.html (the specific filename requested)  UsingDNS, the server name portion of the URL is then translated to the associated IP address before the server can be contacted. Hypertext Transfer Protocol and Hypertext Markup Language (cont.) HTTP Protocol Step 2  The browser sends a GET request to the server’s IP address and asks for the index.html file.  The server sends the requested file to the client.  The index.html was specified in the URL and contains the HTML code for this web page.  The browser processes the HTML code and formats the page for the browser window based on the code in the file. Domain Name Service  While IP addresses are crucial for network communication, they are not easy to memorize.  Domain names are created to make server addresses more user-friendly.  Domain names such as http://www.cisco.com are user-friendly addresses associated with the IP address of a specific server. Domain Name Service (cont.) When you type a URL in the browser, the following steps take place: The browser checks for a DNS record to find the corresponding IP address of the website. Once the browser receives the correct IP address, it will build a connection with the server that matches the IP address to transfer information. The browser sends an HTTP request to the server. The server handles the request and sends back a response. The browser displays the HTML content. Uniform Resource Locator (URL)  URL stands for Uniform Resource Locator. A URL is the address of a given unique resource on the Web.  This address tells us that the particular resource is hosted on that address server.  There are different parts of a URL which are: a) Scheme The first part of the URL is the scheme, which indicates the protocol that the browser must use to request the resource. Usually for websites the protocol is HTTPS or HTTP (its unsecured version). b) WWW(Sub-domain) After protocol comes the famous WWW, it simply means that the resource you are seeking by the means of this URL resides in the WWW subdomain of your domain name. c) Domain name Then the name of the resource owner (i.e. domain name) comes which is google in our example. Uniform Resource Locator (URL) d) Top-level domain Domain name is followed by the type of category in which the owner domain is registered..com means that the website which is making this resource available to you is of the commercial nature. e) File Path The path refers to the exact location of a page, post, file, or other asset. The path resides after the hostname and is separated by “/” (forward slash). The path/file also consists of any asset file extension, such as images (.jpg or.png, etc.), documents (.pdf or.docx), and more. But it is not compulsory that all URL will display the path. DNS Hierarchy  The DNS protocol uses a hierarchical system, with the root at the top and branches below. The naming structure is broken down into small, manageable zones.  Each DNS server is only responsible for managing name-to-IP mappings for that small portion of the DNS structure.  Requests for zones not stored in a specific DNS server are forwarded to other servers for translation.  Top-level domains represent either the type of domain or the country of origin. Examples of top-level domains are: o.com - a business or industry o.org - a non-profit organization o.au - Australia o.co - Colombia Hyper Text Markup Language  HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to develop web pages.  Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus, the link available on a webpage is called Hypertext.  Markup Language, HTML is a Markup Language which means you use HTML to simply "mark-up" a text document with tags that tell a Web browser how to structure it to display. Applications of HTML Web pages development - HTML is used to create pages which are rendered over the web. Almost every page of web is having html tags in it to render its details in browser. Internet Navigation - HTML provides tags which are used to navigate from one page to another and is heavily used in internet navigation. Responsive UI - HTML pages now-a-days works well on all platform, mobile, tabs, desktop or laptops owing to responsive design strategy. Offline support HTML pages once loaded can be made available offline on the machine without any need of internet. Game development- HTML5 has native support for rich experience and is now useful in gaming development area as well. HTML Elements  An element usually consists of an opening tag (), a closing tag (), which contain the element's name surrounded by angle brackets, and the content in between, for example:...content...  There are some HTML elements that don't have a closing tag or any contents. These are called void elements. Void elements include: , , and.  It is important to note the difference between elements and tags: Elements: video, audio, table, footer Tags: , , , , , HTML Elements All the HTML elements can be categorized into two categories: (a) Block Level Elements Appear on the screen as if they have a line break before and after them. For example, , , , , , , , , , , , , and elements are all block level elements. They all start on their own new line, and anything that follows them appears on its own new line. (b) Inline Elements. Inline elements, on the other hand, can appear within sentences and do not have to appear on a new line of their own. , , , , , , , , , , , , , , , , and elements are all inline elements. HTML Attributes  Attributes contain additional pieces of information. Attributes take the form of an opening tag and additional info is placed inside.  An example of an attribute is: In this instance, the image source (src) and the alt text (alt) are attributes of the tag. Basic HTML Document  In its simplest form, following is an example of an HTML document: The resulted page structure displayed on the web browser : This is a heading Hello world Document Document content goes here..... This is a heading Document content goes here..... Basic Elements of HTML Document  declaration defines that this document is an HTML5 document  element is the root element of an HTML page. This tag contains an attribute called lang, which has been given the value en. This particular attribute is stating that the language of the document is English.  element contains meta information about the HTML page  element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab).  element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.  element defines a large heading.  element defines a paragraph. HTML Document Structure The Body Tag  The HTML tag defines the main content of the HTML document or the section of the HTML document that will be directly visible on your web page. This tag is also commonly referred to as the element. Attributes:  background: It contains the URL of the background image. It is used to set the background image.  bgcolor: It is used to specify the background color of an image.  alink: It is used to specify the color of the active link.  link: It is used to specify the color of visited links.  text: It specifies the color of the text in a document.  vlink: It specifies the color of visited links. The Body Tag GeeksforGeeks It is a Computer Science portal GeeksforGeeks For Geeks It is a Computer Science portal For Geeks The Paragraph tag  The HTML element defines a paragraph.  The tag offers a way to structure your text into different paragraphs.  Each paragraph of text should go in between an opening and a closing tag. Here is a first paragraph of text. Paragraph Example Here is a second paragraph of text. Here is a third paragraph of text. Here is a first paragraph of text. Here is a second paragraph of text. Here is a third paragraph of text. Heading Tags  HTML also has six levels of headings, which use the elements , , , , , and.  defines the most important heading.  defines the least important heading. This is heading 1 Heading Example This is heading 2 This is heading 3 This is heading 1 This is heading 4 This is heading 2 This is heading 5 This is heading 3 This is heading 6 This is heading 4 This is heading 5 This is heading 6 Centering Content  You can use tag to put any content in the center of the page or any table cell. This text is not in the center. Centring Content Example This text is in the center. This text is not in the center. This text is in the center. HTML Comments  HTML comments are placed in between tags.  So, any content placed with-in tags will be treated as comment and will be completely ignored by the browser.