gdsc-html-ppt.pptx

1. GDSC GPREC 2022 – 2023 WEB CAMPAIGN Introduction to HTML

2. Agenda • Introduction to Web Development. • Introduction to HTML • Basic Structure of an HTML Document • HTML Elements • HTML Tables • HTML Forms • Conclusion

3. What is Web Development? Web development refers to the process of creating and maintaining websites It involves • Designing • Coding • Publishing website on the internet. Classified into two ways 1. Front-End Development 2. Back-End Development

4. How the web works?

5. What is HTTP? HTTP (Hypertext Transfer Protocol) is a protocol for transmitting data over the internet. 1. A client (a browser) sends an HTTP request to the web server 2. A web server receives the request 3. The server runs an application to process the request 4. The server returns an HTTP response (output) to the browser 5. The client (the browser) receives the response HTTP Request/Response

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

8. Basic Structure of HTML Document The Basic structure of an HTML document consists of 4 elements: 1. <!DOCTYPE> 2. <html> 3. <head> 4. <body>

9. 1. <!DOCTYPE> : A DOCTYPE declaration must be specified on the first lineof each web document. The DOCTYPE tells the web browser which version of HTML the page is written in. Eg: <!DOCTYPE html> 2. <html> : The <html> element tells the browser that the page will be formatted in HTML and, optionally, which world language the page content is in. Eg: <html lang=“en”>

10. 3. <head> : The <head> element contains meta information about the HTML page. Metadata is data about the HTML document. Metadata is not displayed. The following elements can go inside the <head> element: •<title> - specifies a title for the HTML page(required) Eg: <title>GDSC GPREC</title> •<style> - adds style information to a page Eg: <style></style> •<link> - links to an external style sheet Eg: <link rel="stylesheet" href="styles.css">

11. •<meta> - defines metadata about an HTML • Define keywords for search engines: <meta name="keywords" content="HTML, CSS, JavaScript"> • Define a description of your web page: <meta name="description" content="Free Web tutorials for HTML and CSS"> • Refresh document every 30 seconds: <meta http-equiv="refresh" content="30"> • Setting the viewport to make your website look good on all devices: <meta name="viewport" content="width=device-width, initial-scale=1.0">

12. •<script> - used to embed a client-side script Eg: <script> </script> 4. <body> : The <body> element defines the document's body, and is a container for all the visible contents. Like, heading tags, Paragraph tags, image tags, Link tags.

14. HTML Elements • Heading tags : HTML headings are titles or subtitles that you want to display on a webpage. HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading. Eg: <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>

15. • Paragraph tags : A paragraph always starts on a new line, and is usually a block of text. Eg: <p>Hello</p> Styling tags: <pre> - preformatted text, <i> - just italic, <b> - just bold, <strong> - bold plus high importance, <em> - italic plus emphasized, <sup> - superscript, <sub> - subscript

16. • Link Tag : The <a> tag defines a hyperlink, which is used to link from one page to another. • href. The href attribute specifies the URL of the page the link goes to. • Target : where to open the linked document. • _blank : Opens the linked document in a new window or tab • _self : Opens the linked document in the same • _parent : Opens the linked document in the parent frame • _top : Opens the linked document in the full body of the window • Eg: <a href="https://www.google.com" target=“_blank”>Open Google!</a>

17. • Image Tag : The <img> tag is used to embed an image in an HTML page. • src : Specifies the path to the image • alt : Specifies an alternate text for the image, if the image for some reason cannot be displayed • height : Specifies the height of an image(in pixels) • width : Specifies the width of an image(in pixels) Eg: <img src=“student.jpg" alt=“student-pic" width="42px" height="42px">

18. • List Tags : list tags are Ordered List and Unordered List <ol> : The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical. The <li> tag is used to define each list item Eg: <ol> <li>HTML</li> <li>CSS</li> </ol> <ul> : The <ul> tag an unordered (bulleted). The <li> tag is used to define each list item. Eg: <ul> <li>HTML</li> <li>CSS</li> </ul>

19. HTML Table • The <table> tag defines an HTML table. An HTML table consists of one <table> element and one or more <tr>, <th>, and <td> elements. • The <tr> element defines a table row, • The <th> element defines a table header. • The <td> element defines a table cell. Attributes : • Colspan - used to merge colums eg: <td colspan=“2”></td>

20. <table> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Raju</td> <td>9</td> </tr> </table>

21. Form Tag The <form> tag is used to create an HTML form for user input. The <form> element can contain <input> , <label> , <options>, <textarea>. Attributes • Action : Specifies where to send the form-data when a form is submitted • Method : Specifies the HTTP method to use when sending form-data Eg : <form action=“”></form>

22. Input Tag : The <input> tag specifies an input field where the user can enter data, this can be displayed in several ways, depending on the type attribute. Eg : <input type=“text”> where type can be button, checkbox, date, email, file, image, number, password, radio, range, reset, submit. Label Tag: The <label> tag defines a label for several elements . Label are used for input tags. • For : Specifies the id of the form element the label should be bound to. Eg: <label for=“un”>UserName</label> <input id= “un” type=“text”>

23. Audio Tag: The <audio> tag is used to embed sound content in a document, such as music or other audio streams. There are three supported audio formats in HTML: MP3, WAV, and OGG Attributes: • Controls : Specifies that audio controls should be displayed (such as a play/pause button etc) • Autoplay : Specifies that the audio will start playing as soon as it is ready • Src : Specifies the URL of the audio file Eg: <audio controls autoplay> <source src="horse.mp3" type="audio/mpeg"> </audio>

24. Video Tag: The <video> tag is used to embed video content in a document, such as a movie clip or other video streams. There are three supported audio formats in HTML: MP4, WebM, and OGG. Attributes: • Controls : Specifies that video controls should be displayed (such as a play/pause button etc) • Autoplay : Specifies that the video will start playing as soon as it is ready • Src : Specifies the URL of the video file Eg: <audio height=“310” width=“200” controls > <source src="movie.mp4" type="video/mp4"> </audio>

25. Iframe Tag: The <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document. Attributes: • src : Specifies the address of the document to embed in the <iframe> • height : Specifies the height of an <iframe>. Default height is 150 pixels • width : Specifies the width of an <iframe>. Default width is 300 pixels. Eg: <iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"> </iframe>

26. 1. What does HTML stands for? A. Hypertext Machine language. B. Hypertext and links markup language. C. Hypertext Markup Language. D. Hightext machine language.

27. 2. Which of the following HTML Elements is used for making any text bold ? A. <p> B. <i> C. <li> D. <b>

28. 3.Which of the following HTML element is used for creating an unordered list? A. <ui> B. <i> C. <em> D. <ul>

29. 4.What is the font-size of the h1 heading tag? A. 3.5 em B. 2.17 em C. 2 em D. 1.5 em

30. 5.Which of the following are self closing Tags? A. <br>, <img>, <h1> B. <hr>, <pre>, <a> C. <input>, <ol>, <b> D. <img>, <br>, <hr>

31. 6.Which of the following attributes is used to add link to any element? A. link B. ref C. href D. newref

32. 7.Which of the following tags is used to make a portion of text italic in HTML? A. <italic> B. <i> C. <style= “i”> D. <style=“italic”>

33. 8.Which of the following attributes is used to open an hyperlink in new tab? A. target B. tab C. href D. ref

34. 9.Which among the following is correct HTML code for making a checkbox? A. <checkbox> B. <check> C. <input type=“check”> D. <input type=“checkbox>

35. 10. Which of these elements are all <table> elements? A. <table> <tr> <td> B. <table> <head> <tfoot> C. <thead> <body> <tr> D. <table> <tr> <tt>

36. THANK YOU TO BE CONTINUED…….

gdsc-html-ppt.pptx

gdsc-html-ppt.pptx

Recomendados

Más contenido relacionado

Similar a gdsc-html-ppt.pptx

Similar a gdsc-html-ppt.pptx(20)

Último

Último(20)

gdsc-html-ppt.pptx