html work web development workshop pptx.
PSahanaPrasad
8 views
31 slides
Jul 31, 2024
Slide 1 of 31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
About This Presentation
a material to students
Slide Content
Contents 2 Dept of AIML Comprehensive Web Development with HTML,XHTML,HTML5,CSS 26.07.2024 Introduction and Roadmap to Web Development Workshop Session 1 1. First Look at HTML and XHTML 2. HTML Document Structure 3. Headings, Browsers and (X)HTML Session 2 4. HTML5 Enhancements 5. Creating a Semantic HTML5 Document 6. HTML5 Form Elements 7. Graphics with Canvas Session 3 8. Objectives for Creating a Sign-Up Form with HTML and CSS 9. Building a Sign-Up Form 10. CSS Concepts covered in Session 3 Session 4 11. HTML Tables 12. Links and Navigation 13. Responsive Images and Iframes 14. Guidelines for workshop project
3 Comprehensive Web Development with HTML,XHTML,HTML5,CSS 26.07.2024 Dept of AIML
4 Comprehensive Web Development with HTML,XHTML,HTML5,CSS 26.07.2024 Dept of AIML
5 Few Top Companies that are hiring web developers Dept of AIML Comprehensive Web Development with HTML,XHTML,HTML5,CSS
How html and css are important in web development 6 Building User-Centric Back-End Systems Visualize data flow Think like a user Understand front-end requirements Debug front-end issues (if needed) Full-Stack Development Potential Valuable for startups and smaller teams Comprehensive Web Development with HTML,XHTML,HTML5,CSS 26.07.2024 Dept of AIML
Expected Outcome of workshop Understanding HTML Structure Building Web Pages with HTML Introduction to CSS Fundamentals Problem-Solving through Coding Web Development Workflow (Foundational) Dept of AIML Comprehensive Web Development with HTML,XHTML,HTML5,CSS 26.07.2024 7
Introduction to HTML Definition: Hypertext Markup Language (HTML) is the standard language for creating web pages . Purpose: Used to structure content on the web, such as text, images, links, and other multimedia elements. 8 First Look at HTML and XHTML Dept of AIML Comprehensive Web Development with HTML,XHTML,HTML5,CSS 26.07.2024
Introduction to XHTML Definition: Extensible HyperText Markup Language (XHTML) is a stricter, XML-based version of HTML. Purpose: Ensures that documents are well-formed and more likely to be correctly parsed by different web browsers and XML tools. 9 Dept of AIML Comprehensive Web Development with HTML,XHTML,HTML5,CSS 26.07.2024
Difference between html and xhtml HTML HTML is more forgiving with syntax errors, while XHTML is stricter and requires all tags to be properly closed and nested. XHTML XHTML requires all attribute values to be quoted, whereas HTML does not 10 Dept of AIML Comprehensive Web Development with HTML,XHTML,HTML5,CSS 26.07.2024
11 Dept of AIML Comprehensive Web Development with HTML,XHTML,HTML5,CSS 26.07.2024
12
BASIC STRUCTURE DOCTYPE Declaration: Indicates the version of HTML/XHTML being used. For HTML5, use <!DOCTYPE html>. HTML Element: The root element of an HTML document. Head Element: Contains meta-information, such as the document title, character set, and links to stylesheets. Body Element: Contains the visible content of the webpage. 13 Dept of AIML Comprehensive Web Development with HTML,XHTML,HTML5,CSS 26.07.2024
HEAD ELEMENT CONTENTS 14 Meta Tags: Provide metadata about the document, such as character set and viewport settings. <meta charset="UTF-8"> Title Tag: Sets the title of the webpage html Copy code <title>Document Structure</title> Dept of AIML Comprehensive Web Development with HTML,XHTML,HTML5,CSS 26.07.2024
BODY ELEMENT CONTENTS Headings: HTML provides six levels of headings (<h1> to <h6>), with <h1> being the highest level. Paragraphs: Use <p> to define a paragraph 15 Dept of AIML Comprehensive Web Development with HTML,XHTML,HTML5,CSS 26.07.2024
Browsers and (x)html How Browsers Render HTML and XHTML: HTML: Browsers are lenient with errors and will attempt to render the page even if it contains syntax errors. XHTML: Browsers are stricter and will not render the page if there are syntax errors, as XHTML must be well-formed XML. Testing HTML Pages in Different Browsers : Objective: Ensure that your HTML pages are compatible with different web browsers. Steps: Save your HTML document (e.g., index.html). Open the document in various web browsers (e.g., Chrome, Firefox, Safari, Edge). Observe any differences in rendering and correct any issues. 16 Dept of AIML Comprehensive Web Development with HTML,XHTML,HTML5,CSS 26.07.2024
17 SESSION 2 HTML5 ENHANCEMENTS Dept of AIML Comprehensive Web Development with HTML,XHTML,HTML5,CSS 26.07.2024
Introduction to html5 Definition: HTML5 is the latest version of HTML, designed to be more flexible and powerful for modern web development. New Features: Semantic elements, multimedia support (audio and video), improved form elements, and APIs for complex web applications. 18 Dept of AIML Comprehensive Web Development with HTML,XHTML,HTML5,CSS 26.07.2024
Semantic html5 elements Purpose: Enhance the meaning of the content and improve accessibility and SEO. Common Semantic Elements: ▪ <header>: Represents introductory content or a set of navigational links. ▪ <nav>: Defines a set of navigation links. ▪ <article>: Represents a self-contained piece of content that could be independently distributable. ▪ <section>: Represents a thematic grouping of content. ▪ <aside>: Represents content indirectly related to the main content. ▪ <footer>: Represents the footer of a section or page. 19 Dept of AIML Comprehensive Web Development with HTML,XHTML,HTML5,CSS 26.07.2024
Html5 form elements 20 Introduction to New Form Elements Purpose: Enhance user experience with better input validation and interaction. New Input Types: email, date, tel , url , range, number, etc. Practical: Building and Styling Modern HTML5 Forms: Objective: Create a form using new HTML5 input types and add CSS for styling. Dept of AIML Comprehensive Web Development with HTML,XHTML,HTML5,CSS 26.07.2024
Introduction to the <canvas> Element: Purpose: Provide a space where you can draw graphics using JavaScript. Context: The <canvas> element uses the getContext ("2d") method to create a 2D drawing context. GRAPHICS WITH CANVAS 21 Dept of AIML Comprehensive Web Development with HTML,XHTML,HTML5,CSS 26.07.2024
Session 3 creating a sign-up form with html 22 Dept of AIML Comprehensive Web Development with HTML,XHTML,HTML5,CSS 26.07.2024
creating a sign-up form with html Objective: Create a sign-up form using HTML and style it using CSS. Apply basic CSS styles, selectors, and properties to enhance the form's appearance and functionality . 23 Dept of AIML Comprehensive Web Development with HTML,XHTML,HTML5,CSS 26.07.2024
CSS CONCEPTS WITH EX OF SIGNUP FORM : CSS Overview and Syntax: Basic structure and application of CSS within <style> tags in the <head> of the HTML document. Selectors and Specificity: Use of type (input[type="text"]), class, and ID selectors (#name, #email, #password, #confirm_password) to target specific elements. CSS Properties: Application of properties like font-family, background-color, border, padding, margin, and box-shadow to style text, borders, backgrounds, and spacing. 24 Dept of AIML Comprehensive Web Development with HTML,XHTML,HTML5,CSS 26.07.2024
25 HTML TABLES, LINKS AND RESPONSIVE IMAGES SESSION 4 25 Dept of AIML Comprehensive Web Development with HTML,XHTML,HTML5,CSS 26.07.2024
Purpose: Tables in HTML are used to display data in a structured format with rows and columns. Elements : <table>: Defines a table. < thead >, < tbody >, < tfoot >: Sections for table headers, body content, and footer. <tr>: Defines a row in the table. < th >: Defines a header cell in a table (typically used in the < thead >). <td>: Defines a standard cell in a table (used in < tbody > or < tfoot >). HTML TABLES 26 Dept of AIML Comprehensive Web Development with HTML,XHTML,HTML5,CSS 26.07.2024
Links and navigation Purpose: Links in HTML are used to navigate between different web pages or sections within the same page. Element: <a> (anchor) tag is used to create hyperlinks. Attributes: href : Specifies the URL of the link. T arget: Specifies where to open the linked document (_self, _blank, etc.) 27 Dept of AIML Comprehensive Web Development with HTML,XHTML,HTML5,CSS 26.07.2024
RESPONSIVE IMAGES AND IFRAMES Purpose: Responsive design ensures that images and embedded content like videos ( iframes ) adapt to different screen sizes and devices. Techniques: Images: Use CSS (max-width: 100%; height: auto;) to ensure images resize proportionally based on the container size. Iframes : Wrap iframes in a container with padding-top set to maintain aspect ratio (commonly 16:9). 28 Dept of AIML Comprehensive Web Development with HTML,XHTML,HTML5,CSS 26.07.2024
Course links https://www.codecademy.com/catalog/language/html-css https://www.udemy.com/topic/html/free/ https://www.classcentral.com/subject/html-css 29
Guidelines for workshop project College logo to be present on the top left. NAAC logo on top right. College name to be present in the top center. Dept name to be present below the college name. Background to be of sky blue. Project should have minimum 3 functionalities, for example if your making a calculator it must perform add, sub, mul (minimum). Minimum of two web pages to be present, for example calculation and data intake in one page and result on to the other page. Dept of AIML 30 Comprehensive Web Development with HTML,XHTML,HTML5,CSS 26.07.2024
Large Image slide 31 Dept of AIML
Tags
Categories
TechnologyDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 8
- Slides 31
- Age 493 days
Related Slideshows
11
8-top-ai-courses-for-customer-support-representatives-in-2025.pptx
JeroenErne2
51 views
10
7-essential-ai-courses-for-call-center-supervisors-in-2025.pptx
JeroenErne2
49 views
13
25-essential-ai-courses-for-user-support-specialists-in-2025.pptx
JeroenErne2
39 views
11
8-essential-ai-courses-for-insurance-customer-service-representatives-in-2025.pptx
JeroenErne2
38 views
21
Know for Certain
DaveSinNM
24 views
17
PPT OPD LES 3ertt4t4tqqqe23e3e3rq2qq232.pptx
novasedanayoga46
27 views