Download to read offline
HTML Programming basics and deep dive.pptx
- 1. Introduction toWorld Wide Web
- 2. World Wide Web(WWW) • commonly referred to as the "web," is a vast and interconnected system of information, documents, and resources that are accessible over the internet. • It revolutionized information sharing process, and it plays a fundamental role in modern communication, commerce, education, and entertainment. • The World Wide Web was invented by Sir Tim Berners-Lee in the late 1980s while he was working at CERN (European Organization for Nuclear Research) in Switzerland. He proposed the concept of a linked system of documents that could be accessed and navigated through hyperlinks. In 1991, Berners-Lee released the first web browser and web server software, effectively launching the web
- 3. 3 Internet vs. WWW •Most people use the two terms interchangeably but they are in fact different. • The Internet is a vast, international network, made up of computers and the physical connections (wires, routers, etc.) allowing them to communicate. • The World Wide Web (WWW or just the Web) is a collection of software that spans the Internet and enables the interlinking of documents and resources. • Provides a way of accessing information on the Internet.
- 4. Evolution of the World Wide Web (WWW) •Creation of the WWW (1989-1993): • In 1989, Tim Berners-Lee proposed the concept of the web as a way to share and link documents across different computers. • In 1990, Berners-Lee developed the first web browser, the "WorldWideWeb" browser. • In 1991, the first web server software and web pages were created, establishing the foundation of the WWW. • In 1993, Berners-Lee released the WorldWideWeb browser to the public, marking the beginning of the web's widespread adoption
- 5. Evolution of theWorld Wide Web (WWW) • Introduction of Graphical Browsers (1993-1994): The release of the Mosaic web browser in 1993, followed by Netscape Navigator in 1994, brought graphical user interfaces and multimedia capabilities to web browsing. These browsers made the web more user-friendly by allowing users to view images, navigate with a mouse, and access content through hyperlinks. • Standardization of HTML (1995): HTML (Hypertext Markup Language) 2.0 was standardized, providing a common way to structure and display content on web pages. This standardization ensured consistency in how web content was interpreted by different browsers. • Emergence of Dynamic Content (Late 1990s): The introduction of JavaScript and server-side scripting languages like PHP, ASP, and JSP allowed for the creation of dynamic and interactive web content. Websites could now respond to user input, display real-time data, and offer more engaging user experiences.
- 6. Evolution of theWorld Wide Web (WWW) • Rise of E-Commerce (Late 1990s - Early 2000s): The ability to conduct secure online transactions and payments led to the rapid growth of e-commerce platforms. Online marketplaces and retail websites changed the way people shopped and conducted business. • Mobile Web and Responsive Design (2010s): The proliferation of smartphones led to the need for mobile-friendly websites. Responsive web design techniques emerged, ensuring that websites adapt to different screen sizes and devices. • Advancements in Web Technologies: HTML5, introduced in 2014, brought new features for multimedia, improved semantics, and better support for mobile devices. CSS3 introduced advanced styling and animations, enhancing the visual appeal of websites. WebAssembly (Wasm) enabled the execution of high-performance code on the web, opening doors for complex applications and games
- 7. Applications • Information Sharingand Communication • Accessibility to a Global Audience • Visual and Multimedia Presentation • Hyperlinking and Navigation • Content Organization and Structure • Data Display and Visualization • Education and Learning • Business and E-Commerce • Entertainment and Media • Personal and Professional Branding • News and Journalism
- 8. Hyperlinks • A hyperlinkis a selectable element within a web page that, when clicked or activated, directs the user to another web page, document, image, video, or any other online resource. • Hyperlinks are typically represented as text, images, buttons, or other clickable elements. • Hyperlinks connect different web pages and resources, creating an interconnected web of information. This allows users to explore related content and move seamlessly between topics. • Hyperlinks make it easy for users to jump directly to relevant content without needing to navigate through a linear structure • Hyperlinks expose users to new websites, blogs, articles, and resources they might not have encountered otherwise • Well-placed and relevant hyperlinks can encourage users to spend more time on a website, leading them to explore additional content • Effective hyperlink usage enhances user experience by providing intuitive navigation options
- 9. Web Navigation Patterns Breadcrumb Navigation: A sequence of links that shows the user's location within a website's hierarchy. Back and Forward Navigation: Users can use browser buttons or keyboard shortcuts to navigate backward and forward through visited pages. Internal Navigation: Hyperlinks can jump users to specific sections within the same page (anchor links). • External Navigation: Links to external websites or resources allow users to explore beyond the current website
- 10. web browsers andweb servers work together to deliver web content. • User Request • DNS Resolution • Initiating a Connection • Sending the Request • Server Processing • Retrieving the Resource • Sending the Response • Data Transmission • Browser Rendering • Resource Loading • Rendering Completion
- 11. HTML headings, paragraphs, lists,images, videos, forms, and more Structuring Content HTML headings (h1, h2, h3, etc.) are used to create a hierarchical outline of the document Document Outline: Semantic HTML elements convey the intended meaning of the content, which is essential for accessibility, search engine optimization (SEO), and compatibility with assistive technologies Semantic Meaning HTML works hand in hand with CSS (Cascading Style Sheets) to create responsive web designs. By structuring content with semantic HTML elements, designers can apply CSS rules to adapt the layout and appearance of the content based on different screen sizes and devices Responsive Design HTML hyperlinks (<a> element) connect different web pages and resources. They enable seamless navigation within a website and across the web by allowing users to jump to other pages with a simple click Hyperlinking and Navigation Search engines use the structure and semantics of HTML to index and rank web pages. Well-structured HTML with proper headings, semantic elements, and meaningful content improves a web page's visibility in search engine results pages (SERPs). SEO and Search Engines
- 12. CSS – VisualEnhancing tool • Separation of Concerns: • CSS separates the styling concerns from the content concerns. • improves the maintainability and flexibility of web development projects. • Consistency and Branding • CSS allows developers to define consistent design elements such as fonts, colors, spacing, and layout across an entire website. • Responsive Design • CSS provides responsive web designs for different screen sizes and devices. • Layout Control • CSS provides precise control over the layout of elements on a web page. • Typography Enhancement • CSS enables designers to control font styles, sizes, weights, and spacing. This ensures consistent and readable typography across the entire website.
- 13. CSS – VisualEnhancing tool • Visual Effects • apply visual effects such as shadows, gradients, transitions, and animations. • Flexibility and Adaptability • By using CSS classes and IDs, developers can target specific elements for styling without affecting the overall structure. This level of specificity allows for fine-tuned customization. • Accessibility Improvements • CSS can enhance web accessibility by providing contrast adjustments, text scaling, and other styling modifications that improve readability for users with visual impairments. • Efficient Maintenance • CSS promotes efficient maintenance by enabling global changes to styling through a single stylesheet. Changes made in the CSS file automatically apply to all relevant HTML elements, reducing the need for repetitive coding. • Print Styles • CSS can be used to define print-specific styles, ensuring that web pages are properly formatted when printed. • Compatibility and Cross-Browser Consistency • CSS helps maintain consistency in appearance across different web browsers. Developers can address browser-specific rendering issues and ensure a unified experience for users
- 14. Role of ArtificialIntelligence (AI): • Enhanced Personalization: AI algorithms can analyse user behaviours, preferences, and historical data to deliver personalized content and recommendations. Websites and applications can adapt their interfaces and content based on individual user profiles, improving engagement and user satisfaction. • Chatbots and Virtual Assistants: AI-powered chatbots and virtual assistants provide real-time interaction and support on websites. They can answer queries, guide users, assist with transactions, and improve customer service. • Content Generation and Curation: AI can automate content creation by generating articles, reports, summaries, and even design elements. AI algorithms can also curate and categorize content, helping users discover relevant information more efficiently. • Search Enhancement: AI-powered search engines can offer more accurate and context-aware search results by understanding user intent and providing intelligent recommendations. • Predictive Analytics: AI-driven predictive analytics can anticipate user behaviors and trends, aiding businesses in making informed decisions and tailoring their offerings. • Accessibility Improvements: AI can assist in making web content more accessible to users with disabilities by providing text-to-speech, speech-to-text, and other assistive technologies.
- 15. Role of VirtualReality (VR): • Immersive Experiences: VR technology enables users to immerse themselves in virtual environments. This can revolutionize storytelling, gaming, education, and training by creating fully immersive experiences. • Virtual Tourism and Exploration: VR allows users to explore distant locations and historical sites virtually, opening up opportunities for virtual tourism and educational experiences. • Training and Simulation: VR is utilized for training simulations in fields such as healthcare, aviation, and engineering, providing realistic environments for learning and skill development. • Collaboration and Communication: VR can facilitate virtual meetings, conferences, and collaborative workspaces, enabling participants to interact as if they were physically present. • E-Commerce and Shopping: VR can revolutionize online shopping by offering virtual stores and showrooms, allowing users to examine products and make purchasing decisions in a virtual environment. • Education and Learning: VR can enhance education through interactive and immersive learning experiences, bringing abstract concepts to life and engaging students in new ways. • Entertainment and Gaming: VR has the potential to redefine gaming and entertainment by creating more immersive and interactive experiences.
- 16. HTML TOOLS • Thereare two tools of HTML. a) HTML Editor: it is the program that one uses to create and save HTML documents. They fall into two categories: - Text based or code based which allows one to see the HTML code as one is creating a document.e.g. Notepad. b) Web Browser
- 17. HTML TERMINOLGY • Somecommonly used terms in HTML are: • a)Tag: Tags are always written within angles brackets. it is a piece of text is used to identify an element so that the browser realizes how to display its contents.e.g.<HTML> tag indicates the start of an HTML document .HTML tag can be two types. They are:- • Paired Tags :A tag is said to be a paired tag if text is placed between a tag and its companions tag.In paired tag ,the first tag is referred to as opening tag and the second tag is referred to as closing tag. • Unpaired Tags: An unpaired tag does not have a companion tag .unpaired tag also known as singular or Stand-Alone tags. e.g:<br>,<hr> etc.
- 18. HTML TERMINOLGY b) Attribute:Attribute is the property of an tag that specified in the opening angle brackets. It supplies additional information like color,size,home font-style etc to the browser about a tag. E.g. most of the common attributes are height, color,width,src,border,align etc. c) DTD: Document Type Definition is a collection of rules written in standard Generalized Markup Language(SGML).HTML is define in terms of its DTDS. All the details of HTML tags, entities and related document structure are defined in the DTDS. d) ELEMENT: Element is the component of a document’s structure such as a title, a paragraph or a list. It can include an opening and a closing tag and the contents within it.
- 19. 19 Web Servers andClients • A Web server is a computer that is programmed to send files to browsers on other computers connected to the Internet. • The Web browser, such as Firefox or Internet Explorer, is the client that sends a request for a Web page. • The Web server answers the request and delivers the requested page to the browser so you can view it.
- 20. 20 HTTP • Stands forHyperText Transfer Protocol • Allows computers on the WWW to communicate with one another. • Handles the “request” sent to the Web server and the “response” received from the Web server.
- 21. 21 URLs • Stands forUniform Resource Locator • Also called the Web page’s address • You typically type it into your Web browser’s location bar when you want to view a Web page http://www.umbc.edu Name of Web server Protocol needed to communicate with Web server
- 22. 22 HTML • Stands forHyperText Markup Language • Used to create a Web page • Made up of tags that specify the structure of the document (this section is a heading, this section is a paragraph, etc..) • An excerpt from a sample HTML document: <html> <head> <title>Bob’s Web page</title> </head> <body> <h1>This is my first Web page</h1>
- 23. HTML Page Structure •The essential tags that are required to create a HTML document are: • <HTML>.............</HTML> • <HEAD>.............</HEAD> • <BODY>.............</BODY>
- 24. 24 HTML Tags • MostHTML tags work in pairs. There is an opening and a closing tag. For example: <p>Some content here.</p> • The <p>…</p> tag displays a paragraph • <p> opens the paragraph (opening tag) • </p> closes the paragraph (closing tag) • “Some content here.” will be displayed on the page
- 25. HTML Tag <HTML> •The <HTML> tag encloses all other HTML tags and associated text within your document. It is an optional tag. You can create an HTML document that omits these tags, and your browser can still read it and display it. But it is always a good form to include the start and stop tags.The format is: • <HTML> Your Title and Document (contains text with HTML tags) goes here • </HTML> Most HTML tags have two parts, an opening tag and closing tag. The closing tag is the same as the opening tag, except for the slash mark e.g. </HTML>. The slash mark is always used in closing tags.
- 26. Tag and Data •Every HTML document (web page) consists of tags and character data. • Tags are elements enclosed in angle brackets. • <html>, <body>, <a>, </a >, </body>, </html> • Opening and ending tags must be used together. • Character data is the content between an opening and closing tag. • <title >Hello World </title >
- 27. HTML Element • Anelement is a combination of a tag and its character data. • .., <title>Hello World </title> • .., <body><p>Welcome to the world </p></body> • .., <a href=“www.google.com”>Google </a> • .., <br/> • It is possible to nest elements inside other elements. • It is possible to have empty element (no content/character data). • HTML tags are not case sensitive. • By convention, tags are written in lowercase.
- 28. Element’s Attribute • Attributesprovide information about HTML elements. • An element can have one or more attributes. • id • class • style • href • Attributes come in name/value pairs. • <a href=“www.google.com” >Go to Googles website </a> • Some attributes can be used on any HTML element: • class: specifies one or more classnames for an element (refers to a class in a style sheet). • id: specifies a unique id for an element. • style: specifies an inline CSS style for an element. • title: specifies extra information about an element.
- 29. An HTML documenthas two distinct parts HEAD and BODY
- 30. 30 Required Tags • AllHTML documents should have html, head and body tags, along with the DOCTYPE identifier. • !DOCTYPE – Tells the browser which set of standards the page adheres to • <html>…</html> -- Surrounds the contents of the entire page • <head>…</head> -- Lists the identification information on the page, such as the title • <title>…</title> -- Gives the name of the page that appears in the top of the browser window • <body>…</body> -- Frames the content of the page to be displayed in the browser
- 31. HEAD Tag <HEAD> •HEAD tag comes after the HTML start tag. • It contains TITLE tag to give the document a title that displays on the browsers title bar at the top. • The Format is: <HEAD> <TITLE> Your title goes here </TITLE> </HEAD>
- 32. BODY Tag <BODY> • TheBODY tag contains all the text and graphics of the document with all the HTML tags that are used for control and formatting of the page. • The Format is: <BODY> Your Document goes here </BODY>
- 33. 33 Some Common HTMLTags and Their Meanings • <p>…</p> -- Creates a paragraph • <br /> -- Adds a line break • <hr /> -- Separates sections with a horizontal rule • <h1>…</h1> -- Displays a heading (h1-h6) • <!--…--> -- Inserts a comment • <ol>…</ol> -- Creates an ordered list • <ul>…</ul> -- Creates an unordered list • <img /> -- Inserts an image into the document • <a>…</a> -- Inserts a link into the document
- 34. 34 Paragraph Example <p> The examnext week will consist of T/F, multiple choice, short answer and pseudocode questions. You cannot use a calculator. </p> <p> After the exam, we will learn JavaScript. It should be fun!! </p>
- 35. 35 Line Break Example <p> Rosesare Red. <br /> Violets are Blue. <br /> You should study for Exam 1.<br /> It will be good for you! </p>
- 36. 36 Horizontal Rule Example <p> Theexam next week will consist of T/F, multiple choice, short answer and pseudocode questions. You cannot use a calculator. </p> <hr /> <p> After the exam, we will learn JavaScript. It should be fun!! </p>
- 37.
- 38.
- 39. S A VI N G A N D V I E W I N G A H T M L DOCUMENT • Save the file as myfirstpage.html (go to File-Save As give File name: myfirstpage.html-choose save as type: All Files-click save) • Viewing document in web browser (open Internet Explorer-click on File-Open-Browse-select the file myfirstpage.html-click open-click ok
- 40. Font Colors andSize:<FONT>
- 41. MARQUEE TAG • Thistag is used text horizontally across the screen.it is mainly used to deliver a specfic message to the visitor or to scroll Ads on a page. • Example: <marquee> hello world></marquee>
- 42. Attributes of marqueetag • Bgcolor : Sets the background color of the marquee. • Direction :Sets the direction of the marquee box to either left-to- right, right-to-left, up-to-down and down-to-up. • Width: This sets how wide the marquee should be. • Loop: This sets how many times the marquee should 'Loop' its text. Each trip counts as one loop.
- 43. Using Line BreakTag: <BR> • The empty tag <BR> is used, where the text needs to start from a new line and not continue on the same line. To get every sentence on a new line, it is necessary to use a line break. • Example: <BODY>National Institute of Open Schooling <BR> B-31B, Calipash Colony <BR> New Delhi-110048</BODY> • Output: National Institute of Open Schooling B-31B, Calipash Colony New Delhi-11004
- 44. <HR> accepts followingattributes • SIZE: Determines the thickness of the horizontal rule. The value is given as a pixel value. Example: <HR SIZE="3"> • WIDTH: Specifies an exact width of HR in pixels, or arelative width as percentage of the document width. Example: <HR WIDTH="50%">, horizontal rule a width a 50 percent of the page width. • ALIGN: Set the alignment of the rule to LEFT, RIGHT and CENTER. It is applicable if it is not equal to width of the page. • NOSHADE: If a solid bar is required, this attribute is used; it specifies that the horizontal rule should not be shaded at all. • COLOR: Set the color of the Horizontal rule. Example: <HR COLOR="BLUE“> Example of <HR> with its attribute: <HR ALIGN=' 'CENTER' ' WIDTH=' '50%' ' SIZE=' '3" NOSHADE COLOR="BLUE“>
- 45. HEADING: <H1>.............<H6>tags HTML hassix header tags <H1>, <H2>...........<H6> used to specify section headings.
- 46. 46 Ordered List Example <ol> <li>PrintReview Questions for Exam 1.</li> <li>Work on Review Questions for Exam 1.</li> </ol>
- 47. 47 Unordered List Example <ul> <li>countrymusic</li> <li>monday mornings</li> <li>brussels sprouts</li> </ul>
- 48.
- 49. 49 Image Example <img src="linux- tux.png"alt="Tux the Penguin" />
- 50. CSS • CSS standsfor Cascading Style Sheets. • Current Version: CSS 3. • Styles define how to display HTML elements. • Styles were added to HTML 4.0 to solve a problem. • The original purpose of HTML was to combine the structure and content of the page into one document. • When presentation elements began to be included in the document, it increased the complexity and reduced readability. • Separate the “style” elements from the documents and put it in a “style sheet”. • Advantages: • Styles can be changed easily. • Document is more readable. • 3 ways to do styling • Inline Style - Style elements are included as HTML attributes. • Internal Style Sheets - A <style>tag is used in the HTML document to specify the presentation elements. • External Style Sheets - A separate “.css” file is used as a part of your set of documents. It contains all the styling elements.