BSC notes of _HTML_Easyto understand lease see.pptx

b a aabqabaababab bsbsbsbsbsbsb s s sbsbsbsb

1. Unit-1 Introduction and Web Design The Internet is a global network of interconnected computers and devices that allows for the exchange of information and communication between users worldwide. It is one of the most transformative inventions of the modern era, revolutionizing the way people access information, communicate, conduct business, and interact with each other.

2. Key Components of the Internet Network Infrastructure: The Internet comprises a vast network infrastructure consisting of interconnected routers, switches, servers, and data centers. These components facilitate the transmission and routing of data packets across the network. Protocols: Protocols are rules and standards that govern how data is transmitted and exchanged over the Internet. The Internet Protocol (IP) is the fundamental protocol that defines how data packets are addressed and routed between devices on the network. Other important protocols include Transmission Control Protocol (TCP), Hypertext Transfer Protocol (HTTP), and File Transfer Protocol (FTP).

3. Key Components of the Internet: World Wide Web (WWW): The World Wide Web, often referred to simply as the Web, is a collection of interconnected documents and resources accessible via the Internet. It is built on top of the Internet and enables users to access websites, web pages, multimedia content, and other online resources using web browsers. Internet Service Providers (ISPs): ISPs are companies that provide users with access to the Internet. They offer various types of Internet connections, such as dial-up, broadband, fiber optic, and mobile data, allowing users to connect their devices to the Internet.

4. Key Components of the Internet: Domain Name System (DNS): The Domain Name System is a hierarchical naming system that translates human-readable domain names (e.g., www.example.com ) into IP addresses (e.g., 192.0.2.1) used by computers to identify and locate resources on the Internet.

5. Uses of the Internet Communication: The Internet enables users to communicate with each other via email, instant messaging, social media, and video conferencing platforms, facilitating real-time interaction and collaboration across geographical distances. Information Access: The Internet provides access to vast amounts of information and resources on virtually any topic imaginable. Users can search for information, read articles, watch videos, and access educational content from anywhere with an Internet connection. E-commerce: The Internet has revolutionized commerce by enabling online shopping, electronic payments, and digital transactions. E-commerce platforms allow businesses to sell products and services to customers worldwide, expanding their reach and customer base. Entertainment: The Internet offers a wide range of entertainment options, including streaming services, online gaming, social media, and digital media content. Users can watch movies, listen to music, play games, and engage with multimedia content on various platforms. Education: The Internet has transformed education by providing access to online courses, tutorials, e-books, and educational resources. E-learning platforms allow students to learn new skills, pursue degrees, and engage in distance learning programs from anywhere in the world.

6. Introductions to HTML HTML, or HyperText Markup Language, is the standard markup language used to create the structure and content of web pages. It provides a set of tags that define the elements of a web page, such as headings, paragraphs, links, images, and forms. HTML tags are surrounded by angle brackets < > and typically come in pairs, with an opening tag and a closing tag, although some tags are self-closing.

7. What is HTML? HTML stands for Hyper Text Markup Language HTML is the standard markup language for creating Web pages HTML describes the structure of a Web page HTML consists of a series of elements HTML elements tell the browser how to display the content HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

8. A Simple HTML Document < !DOCTYPE  html > < html > < head > < title > Page Title < /title > < /head > < body > < h1 > My First Heading < /h1 > < p > My first paragraph. < /p > < /body > < /html > The <!DOCTYPE html> declaration defines that this document is an HTML5 document The <html> element is the root element of an HTML page The <head> element contains meta information about the HTML page The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. The <h1> element defines a large heading The <p> element defines a paragraph

9. What is an HTML Element? An HTML element is defined by a start tag, some content, and an end tag: < tagname >  Content goes here...  < / tagname > The HTML  element  is everything from the start tag to the end tag: < h1 > My First Heading < /h1 > < p > My first paragraph. < /p >

10. HTML HTML 5 It didn’t support audio and video without the use of flash player support. It supports audio and video controls with the use of <audio> and <video> tags. Does not allow JavaScript to run in the browser. Allows JavaScript to run in the background. This is possible due to JS Web worker API in HTML5. Not possible to draw shapes like circle, rectangle, triangle etc. HTML5 allows to draw shapes like circle, rectangle, triangle etc. Older version of HTML are less mobile-friendly. HTML5 language is more mobile-friendly. Elements like nav, header were not present. New element for web structure like nav , header, footer etc. eing an older version , it is not fast , flexible , and efficient as compared to HTML5. It is efficient, flexible and more fast in comparison to HTML. Doctype declaration in html is too long <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> The DOCTYPE declaration in html5 is very simple "<! DOCTYPE html>

11. Basic tags in HTML <a> It is termed as anchor tag and it creates a hyperlink or link. <b> It is used to make a text bold. < br > It is used to apply single line break. <del> It defines a text which has been deleted from the document. <div> It defines a division or section within HTML document. <dl> It is sued to define a description list. < dt > It is used to define a term in description list .

12. Basic tags in HTML < footer> It defines the footer section of a webpage. <form> It is used to define an HTML form. <h1> to <h6> It defines headings for an HTML document from level 1 to level 6. < img > It is used to insert an image within an HTML document. < li > It is used to represent items in list. < ol > It defines an ordered list of items. <span> It is used for styling and grouping inline. <style> It is used to contain style information for an HTML document. <table> It is used to present data in tabular form or to create a table within HTML document. <td> It is used to define cells of an HTML table which contains table data

13. Basic tags in HTML < tr > It defines the row cells in an HTML table

14. Formatting tags in HTML Formatting tags in HTML are used to control the appearance and presentation of content on a web page. While modern web development practices often rely more on CSS for styling, HTML still provides some basic formatting tags for simple styling purposes. Here are some of the most commonly used formatting tags in HTML:

15. Formatting tags in HTML 1. <b> and <strong>: The <b> element is used to make text bold, while the <strong> element is used to indicate strong importance or emphasis. <p>This is <b>bold</b> text.</p> <p>This is <strong>strong</strong> text.</p> 2. < i > and < em >: The < i > element is used to italicize text, while the < em > element is used to indicate emphasis. <p>This is < i >italic</ i > text.</p> <p>This is < em >emphasized</ em > text.</p>

16. Formatting tags in HTML 3. <u>: The <u> element is used to underline text. <p>This is <u>underlined</u> text.</p> 4. <sub> and <sup>: The <sub> element is used to display text as subscript, while the <sup> element is used to display text as superscript. <p>This is H₂O.</p> <p>2³ = 8.</p> 5. <del> and <ins>: The <del> element is used to represent deleted or struck-through text, while the <ins> element is used to represent inserted text. <p><del>Old text</del></p> <p><ins>New text</ins></p>

17. Formatting tags in HTML 6. < abbr >: The < abbr > element is used to define an abbreviation or acronym, which can be displayed with a tooltip when hovered over. <p>The < abbr title="World Wide Web">WWW</ abbr > is an information system of interlinked hypertext documents.</p> 7. <mark>: The <mark> element is used to highlight or mark portions of text. <p>This is a <mark>highlighted</mark> text.</p>

18. HTML5 Page layout HTML Layout HTML layout refers to the structure of a web page, achieved through elements like <header>, < nav >, <main>, <article>, <section>, <aside>, and <footer>. These elements help organize content, define the page’s sections, and enhance accessibility.

19. Page Layout Information: Header:  The part of the front end which is used at the top of the page. <header> tag is used to add a header section on web pages. Navigation bar:  The navigation bar is the same as the menu list. It is used to display the content information using hyperlinks. < nav > tag is used to add the nav section( nav elements) in web pages. Index / Sidebar:  It holds additional information or advertisements and is not always necessary to be added to the page. Content Section:  The content section is the central part where content is displayed.<main> tag is used to add the main content of the webpages . Footer:  The footer section contains the contact information and other query related to web pages. The footer section is always put on the bottom of the web pages. The <footer> tag sets the footer on web pages.

20. Navigation concepts: The < nav > tag in HTML is a semantic element that is used to define a section of a document that contains navigation links. It represents a navigational menu or a list of links that allows users to navigate to different sections or pages of a website . Example: <!DOCTYPE html> <html> <body> <h1>Welcome to Web Technologies </h1> <h2> This is HTML nav Tag</h2> <!-- nav tag starts --> < nav > <a href ="#">Home</a> | <a href ="#">HTML</a> | <a href ="#">CSS</a> | <a href ="#">XML</a> | <a href ="#">JAVA Script </a> </ nav > <!-- nav tag ends --> </body> </html>

21. Semantic Elements in HTML: Semantic elements = elements with a meaning. What are Semantic Elements? A semantic element clearly describes its meaning to both the browser and the developer. Examples of  non semantic  elements: <div> and <span> - Tells nothing about its content. Examples of  semantic  elements: <form>, <table>, and <article> - Clearly defines its content.

22. list in HTML In HTML, lists are used to organize and present information in a structured and hierarchical manner. There are three main types of lists in HTML: unordered lists, ordered lists, and definition lists. 1. Unordered Lists (< ul >): Unordered lists are used to represent a collection of items that do not have a specific order or sequence. Each item in an unordered list is represented by a list item (< li >) element. By default, the items in an unordered list are displayed with bullet points. Unordered lists are typically used for menus, navigation bars, lists of options, or any list where the order of items is not important. Example: <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

23. list in HTML 2. Ordered Lists (< ol >): Ordered lists are used to represent a collection of items that have a specific order or sequence. Each item in an ordered list is represented by a list item (< li >) element. The order of items in an ordered list is indicated by numbers (or letters or Roman numerals, depending on the type attribute). Ordered lists are typically used for steps in a process, rankings, or any list where the order of items is important. Example: <ol> <li>First step</li> <li>Second step</li> <li>Third step</li> </ol>

24. list in HTML 3. Definition Lists (<dl>): Definition lists are used to represent a list of terms and their corresponding definitions. Each term in a definition list is represented by a < dt > (definition term) element, and each definition is represented by a < dd > (definition description) element. Definition lists are typically used for dictionaries, or any list where each item has both a term and a definition. Example: <dl> < dt >Term 1</ dt > < dd >Definition 1</ dd > < dt >Term 2</ dt > < dd >Definition 2</ dd > </dl>

25. Tables In HTML In HTML, tables are used to display data in rows and columns. Tables are particularly useful for organizing and presenting tabular data, such as financial data, schedules, and comparison charts. Tables (<table>, < tr >, <td>, < th >): Tables are used to display data in rows and columns. The <table> element is the container for the entire table. < tr > (table row) elements define each row of the table. Inside each < tr >, <td> (table data) elements represent individual cells containing data. Optionally, < th > (table header) elements can be used instead of <td> to define header cells for column or row headers. Attributes like border, cellspacing , and cellpadding can be used to control the appearance of the table.

26. Tables In HTML Examples : <!DOCTYPE html> <html> <head> </head> <body> <table border="1"> < tr > < th >Header 1</ th > < th >Header 2</ th > </ tr > < tr > <td>Data 1</td> <td>Data 2</td> </ tr > </table> </body> </html>

27. Tables In HTML Examples : <!DOCTYPE html> <html> <head> </head> <body> <table border="1"> < tr > < th >Name</ th > < th >Age</ th > < th >City</ th > </ tr > < tr > <td>John</td> <td>30</td> <td>New York</td> </ tr > < tr > <td>Jane</td> <td>25</td> <td>Los Angeles</td> </ tr > </table> </body> </html>

28. Tables In HTML 1. Table Cell Alignment: You can use the align attribute on the < th > and <td> tags to specify the horizontal alignment of table cells. The align attribute has values such as left, center, and right. <table> < tr > < th align="left">Name</ th > < th align="center">Age</ th > < th align="right">City</ th > </ tr > <!-- Table content goes here --> </table>

29. Tables In HTML 2.Table Caption (<caption>): You can add a caption to describe the content of the table using the <caption> tag. The <caption> tag should be placed immediately after the opening <table> tag. Example: <table> <caption>Employee Information</caption> <!-- Table content goes here --> </table>

30. Forms In HTML Definition and Usage The <form> tag is used to create an HTML form for user input. The <form> element can contain one or more of the following form elements: <input> < textarea > <button> <select> <option> < optgroup > < fieldset > <label> <output>

31. Forms In HTML <!DOCTYPE html> <html> <body> <form action="/action_page.php" method="get"> <label for=" fname ">First name:</label> <input type="text" id=" fname " name=" fname ">< br >< br > <label for=" lname ">Last name:</label> <input type="text" id=" lname " name=" lname ">< br >< br > <input type="submit" value="Submit"> </form> </body> </html>

32. Forms In HTML Explanation: The <form> tag is used to create a form on the webpage. The action attribute specifies the URL where the form data should be submitted. The method attribute specifies the HTTP method to be used when submitting the form. In this case, it's set to "post". Inside the <form> tag, various form controls like <input> (for text input), < textarea > (for multiline text input), and <label> (for labeling form controls) are used. Each form control has a name attribute, which is used to identify the data when the form is submitted. The <label> tags are used to provide labels for the form controls. Clicking on the label focuses the corresponding form control. Finally, the submit button (<input type="submit">) is used to submit the form data.

33. Multimedia Basics Multimedia refers to the integration of various forms of media such as text, images, audio, video, animations, and interactive elements into a single digital presentation or application. 1. Images (< img > tag): Images are static visual elements that can be displayed on a webpage. The < img > tag is used to embed images into HTML documents. Syntax: < img src ="image.jpg" alt="Description"> The src attribute specifies the URL of the image file. The alt attribute provides alternative text for screen readers and in case the image fails to load. Example: < img src ="example.jpg" alt="Example Image">

34. Multimedia Basics 2. Inline Frames ( iframes ): iframes allow you to embed another HTML document within the current HTML document. They are often used to embed content from other websites or to display interactive content. Syntax : < iframe src ="https://www.example.com"></iframe> The src attribute specifies the URL of the webpage to be displayed within the iframe . Example : < iframe src ="https://www.google.com"></iframe> 3. Map Tag (<map> and <area> tags): The <map> tag is used to define an image map, which allows you to specify clickable areas on an image. The <area> tag is used inside the <map> tag to define clickable areas. Syntax: <map name="example-map"> <area shape=" rect " coords ="0,0,50,50" href ="page1.html"> <area shape="circle" coords ="100,100,50" href ="page2.html"> </map> < img src ="image.jpg" usemap ="#example-map">

35. 4. Embedding Audio and Video Clips: HTML5 provides native support for embedding audio and video clips using the <audio> and <video> tags. Syntax for Audio: <audio controls> <source src ="audio.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> Syntax for Video: <video controls width="400"> <source src ="video.mp4" type="video/mp4"> Your browser does not support the video tag. </video> The controls attribute adds playback controls (play, pause, volume) to the audio and video elements. The <source> tag specifies the source file and its type