Chapter 1.pdf

Web Programming by Prof. Nilam Shelar Chapter 1 Introduction HTML5 is the latest version of HTML, the markup language used to build structure or content on World Wide Web. HTML5 is t...

Web Programming by Prof. Nilam Shelar Chapter 1 Introduction HTML5 is the latest version of HTML, the markup language used to build structure or content on World Wide Web. HTML5 is the latest web standard by W3C. Earlier HTML was used only to build webpage structure, but HTML5 is a full-on package to build websites, handle presentation, add functionalities and Web APIs. HTML5 is the recommended version to build modern web applications as it is light and fastest version of Hypertext Markup Language, the code that describes web pages. HTML5 was formed in 2009 and start supporting in browsers in 2010 onwards. HTML5 Stack Html5 is the combination of three web technologies:→ HTML → to build webpage structure, CSS → to enhance look and feel( presentation layer), and Javascript → to add functionality to HTML elements. The term HTML5 means not only HTML, but it is also a combination of HTML, CSS and JavaScript with APIs. For example, drawing and animation using canvas, offline storage, microdata, audio and video, drag and drop, geolocation, embedded fonts, web APIs etc. HTML5 includes new semantic tags and some old tags( with redefinition ). HTML + CSS + JAVASCRIPT = HTML5 Why HTML5 HTML5 has been designed to deliver almost everything you'd want to do on web without requiring additional software such as browser plugins. It does everything from animation to apps, music to movies, and can also be used to build complicated web applications that run in your browser. HTML5 isn't proprietary, so you don't need to pay royalties to use it. It's also cross-platform, which means it doesn't care whether you're using a tablet or a smart phone, a netbook, notebook, ultra- book or a Smart TV if your browser supports HTML5, it should work flawlessly. 1 Web Programming by Prof. Nilam Shelar HTML Versions Year Achievement 1989 HTML Formed 1995 HTML 2 1995 CSS 1995 JAVASCRIPT 1997 HTML 4 1998 CSS 2 2000 XHTML 1 2001 XHTML 1.1 2009 HTML5 2015 HTML5.1 2017 HTML5.2 2021 HTML5.3 HTML5 Browsers Support HTML5 is supported by all major browsers now. The first browser support of html5 was seen in 2010. Here is the list of supported browsers for html5. Chrome 5 and above Firefox 4 and above Opera 11 and latest versions Safari 5.1 for Mac, iPhone and iPad Internet Explorer 9 and above Edge 12 and above Browsers 2 Web Programming by Prof. Nilam Shelar HTML5 Doctype HTML5 Doctype is short, and easy to remember. Unlike HTML4 and XHTML, there is no DTD. // New and shorter Doctype, no DTD Required HTML5 Template Example Default Template for HTML5 based websites. //lang embedded in html HTML5 Page //Short charset meta tag //No Type attribute //No Type attribute required My First HTML5 page. HTML Elements An HTML file is made of elements. These elements are responsible for creating web pages and define content in that webpage. An element in HTML usually consist of a start tag , close tag and content inserted between them. Technically, an element is a collection of start tag, attributes, end tag, content between them. Note: Some elements does not have end tag and content, these elements are termed as empty elements or self-closing element or void elements. Such as: Hello world!!! 3 Web Programming by Prof. Nilam Shelar Example WebPage This is my first web page How it looks? It looks Nice!!!!! Void element: All the elements in HTML do not require to have start tag and end tag, some elements does not have content and end tag such elements are known as Void elements or empty elements. These elements are also called unpaired tags. Some Void elements are (represents a line break) , (represents a horizontal line), etc. Nested HTML Elements: HTML can be nested, which means an element can contain another element. Block-level and Inline HTML elements For the default display and styling purpose in HTML, all the elements are divided into two categories: 4 Web Programming by Prof. Nilam Shelar o Block-level element o Inline element Block-level element: o These are the elements, which structure main part of web page, by dividing a page into coherent blocks. o A block-level element always start with new line and takes the full width of web page, from left to right. o These elements can contain block-level as well as inline elements. Following are the block-level elements in HTML. , , , , , , , , , , , , , , -, , , , , , , , , , , , , , and. Example: 1. This is first div This is second div This is a block level element 5 Web Programming by Prof. Nilam Shelar Inline elements: o Inline elements are those elements, which differentiate the part of a given text and provide it a particular function. o These elements does not start with new line and take width as per requirement. o The Inline elements are mostly used with other elements. , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,. Example: Click on link this is inline element This will take width of text only 6 Web Programming by Prof. Nilam Shelar Following is the list of the some main elements used in HTML: Start tag Content End tag Description...... These are headings ??.. These elements are used to provide the of HTML headings of page. This is the paragraph This element is used to display a content in form of paragraph. This is div section This element is used to provide a section in web page. This element is used to provide a line break. ( void element) This element is used to provide a horizontal line. (void element) HTML Formatting HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without using CSS. There are many formatting tags in HTML. These tags are used to make text bold, italicized, or underlined. There are almost 14 options available that how text appears in HTML and XHTML. In HTML the formatting tags are divided into two categories: o Physical tag: These tags are used to provide the visual appearance to the text. o Logical tag: These tags are used to add some logical or semantic value to the text. o Following is the list of HTML formatting text. Element Description name This is a physical tag, which is used to bold the text written between it. This is a logical tag, which tells the browser that the text is important. This is a physical tag which is used to make text italic. This is a logical tag which is used to display content in italic. This tag is used to highlight text. This tag is used to underline text written between it. This tag is used to appear a text in teletype. (not supported in HTML5) This tag is used to draw a strikethrough on a section of text. (Not supported 7 Web Programming by Prof. Nilam Shelar in HTML5) It displays the content slightly above the normal line. It displays the content slightly below the normal line. This tag is used to display the deleted content. This tag displays the content which is added This tag is used to increase the font size by one conventional unit. This tag is used to decrease the font size by one unit from base font size. Example: Text Formatting Tags Formatting Tags This text is bold This text is italic This is subscript and superscript This text is strong This text is emphasized. HTML Small Formatting HTML Marked Formatting The del element represents deleted(removed)text. My favourite color is blue red. My favourite color is red. 8 Web Programming by Prof. Nilam Shelar OUTPUT: HTML Heading A HTML heading or HTML h tag can be defined as a title or a subtitle which you want to display on the webpage. When you place the text within the heading tags........., it is displayed on the browser in the bold format and size of the text depends on the number of heading. There are six different HTML headings which are defined with the to tags, from highest level h1 (main heading) to the least level h6 (least important heading). h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important heading and h6 is used for least important. Headings in HTML helps the search engine to understand and index the structure of web page. Example: Heading no. 1 Heading no. 2 Heading no. 3 Heading no. 4 Heading no. 5 Heading no. 6 9 Web Programming by Prof. Nilam Shelar Output: HTML Anchor The HTML anchor tag defines a hyperlink that links one page to another page. It can create hyperlink to other web page as well as files, location, or any URL. The "href" attribute is the most important attribute of the HTML a tag. and which links to destination page or URL. href attribute of HTML anchor tag The href attribute is used to define the address of the file to be linked. In other words, it points out the destination page. The syntax of HTML anchor tag is given below. Link Text Let's see an example of HTML anchor tag. Click for Second Page Specify a location for Link using target attribute If we want to open that link to another page then we can use target attribute of tag. With the help of this link will be open in next page. 10 Web Programming by Prof. Nilam Shelar Example: Click on this- link to go on home page of Google o The target attribute can only use with href attribute in anchor tag. o If we will not use target attribute then link will open in same page. Appearance of HTML anchor tag An unvisited link is displayed underlined and blue. A visited link displayed underlined and purple. An active link is underlined and red. HTML Comments Comments are some text or code written in your code to give an explanation about the code, and not visible to the user. Comments which are used for HTML file are known as HTML comments. Anything written between these tags will be ignored by the browser, so comments will not be visible on the webpage. Comments of any code make code easy to understand and increase readability of code. Comments are also part of the code, which explains the code. 11 Web Programming by Prof. Nilam Shelar How to add comment In HTML You can add comments in your HTML file using tag. So if you will write anything between theses comment tag that will be treated as comment and browser will not read it. Syntax Note: The commented code will not be visible to a webpage, and hence you can use comment tag for documentation purpose, and debugging purpose: Such as: Example: body{ text-align: center; background-color: #f0f8ff; font-size: 30px; color: red; } 12 Web Programming by Prof. Nilam Shelar First WebPage Write your Content here!!! Multiline Comment In HTML code, we can also comments multiple lines at a time. In multiline comment we can use any description about code or multiple line code to debug, etc. Syntax HTML Image HTML img tag is used to display image on the web page. HTML img tag is an empty tag that contains attributes only, closing tags are not used in HTML image element. Let's see an example of HTML image. HTML Image Example 13 Web Programming by Prof. Nilam Shelar Attributes of HTML img tag The src and alt are important attributes of HTML img tag. All attributes of HTML image tag are given below. 1) src It is a necessary attribute that describes the source or path of the image. It instructs the browser where to look for the image on the server. The location of image may be on the same directory or another server. 2) alt The alt attribute defines an alternate text for the image, if it can't be displayed. The value of the alt attribute describe the image in words. The alt attribute is considered good for SEO prospective. 3) width It is an optional attribute which is used to specify the width to display the image. It is not recommended now. You should apply CSS in place of width attribute. 4) height It h3 the height of the image. The HTML height attribute also supports iframe, image and object elements. It is not recommended now. You should apply CSS in place of height attribute. Use of height and width attribute with img tag You have learnt about how to insert an image in your web page, now if we want to give some height and width to display image according to our requirement, then we can set it with height and width attributes of image. Example: Use of alt attribute We can use alt attribute with tag. It will display an alternative text in case if image cannot be displayed on browser. Following is the example for alt attribute: 14 Web Programming by Prof. Nilam Shelar How to get image from another directory/folder? To insert an image in your web, that image must be present in your same folder where you have put the HTML file. But if in some case image is available in some other directory then you can access the image like this: Use tag as a link We can also link an image with other page or we can use an image as a link. To do this, put tag inside the tag. Example: HTML Table HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row. We can create a table to display data in tabular form, using element, with the help of , , and elements. In Each table, table row is defined by tag, table header is defined by , and table data is defined by tags. HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body content, footer section etc. But it is recommended to use div tag over table to manage the layout of the page. HTML Table Tags Tag Description It defines a table. It defines a row in a table. It defines a header cell in a table. It defines a cell in a table. It defines the table caption. 15 Web Programming by Prof. Nilam Shelar It specifies a group of one or more columns in a table for formatting. It is used with element to specify column properties for each column. It is used to group the body content in a table. It is used to group the header content in a table. It is used to group the footer content in a table. HTML Table Example Let's see the example of HTML table tag. It output is shown above. First_NameLast_NameMarks SonooJaiswal60 JamesWilliam80 SwatiSironi82 ChetnaSingh72 HTML Table with Border There are two ways to specify border for HTML tables. 1. By border attribute of table in HTML 2. By border property in CSS Example: First_NameLast_NameMarks SonooJaiswal60 JamesWilliam80 16 Web Programming by Prof. Nilam Shelar SwatiSironi82 ChetnaSingh72 CSS Border property It is now recommended to use border property of CSS to specify border in table. table, th, td { border: 1px solid black; } HTML Table with cell padding You can specify padding for table header and table data by two ways: By cellpadding attribute of table in HTML By padding property in CSS table, th, td { border: 1px solid pink; border-collapse: collapse; } th, td { padding: 10px; } 17 Web Programming by Prof. Nilam Shelar HTML Table width: We can specify the HTML table width using the CSS width property. It can be specify in pixels or percentage. table table{ border-collapse: collapse; width: 100%; } th,td{ border: 2px solid green; padding: 15px; } 1 header 1 header 1 header 1data 1data 1data 2 data 2 data 2 data 3 data 3 data 3 data 18 Web Programming by Prof. Nilam Shelar HTML Table with colspan It will divide one cell/row into multiple columns, and the number of columns depend on the value of colspan attribute. CSS code: table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } HTML code: Name Mobile No. Ajeet Maurya 7503520801 9555879135 19 Web Programming by Prof. Nilam Shelar HTML Table with rowspan If you want to make a cell span more than one row, you can use the rowspan attribute. It will divide a cell into multiple rows. The number of divided rows will depend on rowspan values. CSS code: table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } HTML code: NameAjeet Maurya Mobile No.7503520801 9555879135 HTML table with caption Student Records 20 Web Programming by Prof. Nilam Shelar First_NameLast_NameMarks VimalJaiswal70 MikeWarn60 ShaneWarn42 JaiMalhotra62 HTML Lists HTML Lists are used to specify lists of information. All lists may contain one or more list elements. There are three different types of HTML lists: 1. Ordered List or Numbered List (ol) 2. Unordered List or Bulleted List (ul) 3. Description List or Definition List (dl) HTML Ordered List or Numbered List In the ordered HTML lists, all the list items are marked with numbers by default. It is known as numbered list also. The ordered list starts with tag and the list items start with tag. Aries Bingo Leo Oracle HTML Unordered List or Bulleted List In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list also. The Unordered list starts with tag and list items start with the tag. Aries 21 Web Programming by Prof. Nilam Shelar Bingo Leo Oracle HTML Description List or Definition List HTML Description list is also a list style which is supported by HTML and XHTML. It is also known as definition list where entries are listed like a dictionary or encyclopedia. The definition list is very appropriate when you want to present glossary, list of terms or other name-value list. The HTML definition list contains following three tags: tag defines the start of the list. tag defines a term. tag defines the term definition (description). Aries -One of the 12 horoscope sign. Bingo -One of my evening snacks Leo -It is also an one of the 12 horoscope sign. Oracle -It is a multinational technology corporation. 22 Web Programming by Prof. Nilam Shelar HTML Nested List A list within another list is termed as nested list. If you want a bullet list inside a numbered list then such type of list will called as nested list. Nested list List of Indian States with thier capital Delhi NewDelhi Haryana Chandigarh Gujarat Gandhinagar Rajasthan Jaipur Maharashtra Mumbai Uttarpradesh Lucknow 23 Web Programming by Prof. Nilam Shelar Output: 24