HTML Programming basics and deep dive.pptx

An introduction to HTML programming

1. Introduction to World 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. E volution of the World Wide Web (WWW)

5. E volution of the World 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. E volution of the World 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 Sharing and 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 hyperlink is 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 and web 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

12. CSS – Visual Enhancing 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 – Visual Enhancing 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 Artificial Intelligence (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 Virtual Reality (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 There are two tools of HTML. 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. Web Browser

17. HTML TERMINOLGY Some commonly 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 and Clients 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 for HyperText 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 for Uniform 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 for HyperText 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 Most HTML 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 d o cume n t ( w eb page) consists of tags and ch a racter data. T ags a re ele ments enclosed in angle b rac k ets. < html > , < b o dy > , < a > , < /a > , < / b o dy > , < /html > O p ening and ending tags must b e used together. Ch a racter data is the content b e t w een an o p ening and closing tag. < title > Hello W o rld < /title >

27. HTML Element An element is a combination of a tag a nd its ch a racter data. .., < title > Hello W o rld < /title > .., < b o dy >< p > W elcome to the wo rld < /p >< / b o d y > .., < a href =“www.g o ogle.com” > G o ogle < /a > .., < b r / > It is p ossible to nest elements inside other elements. It is p ossible to have em p t y element (no content/ch a racter data). HTML tags a re not case sensitive. By convention, tags a re w r itt e n in l o w ercase.

28. Element’s Attribute A ttributes p rovide inf o rmation a b out HTML elements. An element can have one o r m o re attributes. id class s t yle href A ttributes c ome in name/value pa i rs. < a href =“www.g o ogle.com” > G o to G o ogles w ebsite < /a > Some attributes can b e used on any HTML element : class: s pecifies one o r m o re classnames f o r an element (refers to a class in a s t yle sheet). id: s pecifies a uniq ue id f o r an element. s t yle: s pecifies an inli n e CSS s t yle f o r an element. title: s pecifies extra inf o rmation a b out an eleme n t.

29. An HTML document has two distinct parts HEAD and BODY

30. 30 Required Tags All HTML 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> The BODY 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 HTML Tags 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 exam next 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> Roses are 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> The exam 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. Attributes used with <BODY>

38. Simple Web Page

39. S A V I 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 and Size:<FONT>

41. MARQUEE TAG This tag 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 marquee tag 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 Break Tag: <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 following attributes 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 has six header tags <H1>, <H2>...........<H6> used to specify section headings.

46. 46 Ordered List Example <ol> <li>Print Review Questions for Exam 1.</li> <li>Work on Review Questions for Exam 1.</li> </ol>

47. 47 Unordered List Example < ul > <li>country music</li> <li> monday mornings</li> <li>brussels sprouts</li> </ ul >

48. 48 Link Example <a href="http://www.cs.umbc.edu/104/">CMSC104 Main page</a>

49. 49 Image Example <img src="linux-tux.png" alt="Tux the Penguin" />

50. CSS CS S stands f o r Cascading S t yle Sheets. Curren t V ersion: CS S 3. S t yles define h o w t o displ a y HTML elements. S t yles w ere added to HTML 4.0 to solve a p roblem. The o riginal pur p ose of HTML w as to combine the structure and content of the page i n to one d o cument. When p r e sentation elements b egan to b e included in the d o cument, it increased the c omplexi t y and reduced readabili t y . Sep a rate the “s t yle” ele ments from the d o cuments and put it in a “s t yle sheet”. Advantages: S t yles can b e changed easil y . D o cument is m o re readable. 3 ways to do styling Inline S t yle - S t yle elements a re included as HTML attributes. Internal S t yle Sheets - A < s t yle > tag is used in the HTML d o cument to s p ecify the p resentation elements. External S t yle Sheets - A sep a rate “. css ” file is used as a p a rt of y our set of d o c u m ents. It contains all the s t yling elements.