gdsc-html-ppt.pptx

GDSC GPREC
2022 – 2023
WEB CAMPAIGN
Introduction to HTML

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

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

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

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

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

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”>

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">

•<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">

•<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.

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>

• 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

• 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>

• 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">

• 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>

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>

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>

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”>

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>

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>

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>

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

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

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

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

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>

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

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”>

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

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>

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>

THANK YOU
TO BE CONTINUED…….

gdsc-html-ppt.pptx

More Related Content

What's hot

Similar to gdsc-html-ppt.pptx

Recently uploaded

gdsc-html-ppt.pptx