the complete html
TRANSCRIPT
![Page 1: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/1.jpg)
HTMLHyper Text Markup Language
By: Rohit Buddabathina
![Page 2: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/2.jpg)
IntroductionWhat is HTML?• HTML is the standard markup language for creating Web pages.• HTML stands for Hyper Text Markup Language• HTML describes the structure of Web pages using markup• HTML elements are the building blocks of HTML pages• HTML elements are represented by tags• HTML tags label pieces of content such as "heading", "paragraph", "table", and
so on• Browsers do not display the HTML tags, but use them to render the content of
the page
![Page 3: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/3.jpg)
History• In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and
prototyped ENQUIRE, a system for CERN researchers to use and share documents. • In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext
system.Berners-Lee specified HTML and wrote the browser and server software in late 1990. That year, Berners-Lee and CERN data systems engineer Robert Cailliau collaborated on a joint request for funding, but the project was not formally adopted by CERN. In his personal notes from 1990 he listed "some of the many areas in which hypertext is used" and put an encyclopedia first.
![Page 4: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/4.jpg)
Version YearHTML 1991HTML 2.0 1995HTML 3.2 1997HTML 4.01 1999XHTML 2000HTML5 2014
HTML Versions
![Page 5: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/5.jpg)
Structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
</body>
</html>
![Page 6: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/6.jpg)
The <!DOCTYPE> Declaration
• The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.• It must only appear once, at the top of the page
(before any HTML tags).• The <!DOCTYPE> declaration is not case sensitive.
![Page 7: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/7.jpg)
Tags or Elements
![Page 8: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/8.jpg)
Attributes• Attributes provide additional information about the contents of an
element. They appear on the opening tag of the element and are made up of two parts: a name and a value, separated by an equals sign.
![Page 9: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/9.jpg)
HTML Editors
• Write HTML Using Notepad or TextEdit• Web pages can be created and modified by using professional HTML
editors.• However, for learning HTML we recommend a simple text editor like
Notepad (PC) or TextEdit (Mac).• We believe using a simple text editor is a good way to learn HTML.
![Page 10: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/10.jpg)
Save the HTML Page• Save the file on your computer. Select File > Save as in the Notepad
menu.• Name the file "index.htm" and set the encoding to UTF-8 (which is
the preferred encoding for HTML files).
![Page 11: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/11.jpg)
View the HTML Page in Your Browser• Open the saved HTML file in your favorite browser (double click on
the file, or right-click - and choose "Open with").• The result will look much like this:
![Page 12: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/12.jpg)
HTML Headings
![Page 13: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/13.jpg)
HTML Paragraphs
![Page 14: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/14.jpg)
Bold Text
![Page 15: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/15.jpg)
Italic Text
![Page 16: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/16.jpg)
SuperScript & SubScript
![Page 17: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/17.jpg)
White Space
![Page 18: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/18.jpg)
Line Breaks
<br />
![Page 19: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/19.jpg)
Horizontal Rules
<hr />
![Page 20: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/20.jpg)
Comments
• Comment tags are used to insert comments in the HTML source code.• Notice that there is an exclamation point (!) in the opening tag, but
not in the closing tag.• Comments are not displayed by the browser, but they can help
document your HTML source code.
<!-- Write your comments here -->
![Page 21: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/21.jpg)
![Page 22: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/22.jpg)
Links• HTML links are hyperlinks.• You can click on a link and jump to another document.• When you move the mouse over a link, the mouse arrow will turn into
a little hand.Note: A link does not have to be text. It can be an image or any other HTML element.
![Page 23: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/23.jpg)
Result
![Page 24: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/24.jpg)
Images• In HTML, images are defined with the <img> tag.• The <img> tag is empty, it contains attributes only, and does not have
a closing tag.
<img src="url“ >
![Page 25: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/25.jpg)
![Page 26: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/26.jpg)
Tables• An HTML table is defined with the <table> tag.• Each table row is defined with the <tr> tag. A table header is defined
with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.
<table> <tr> <td>Something…</td> </tr></table>
![Page 27: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/27.jpg)
![Page 28: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/28.jpg)
Table – Column Spanning
![Page 29: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/29.jpg)
Table – Row Spanning
![Page 30: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/30.jpg)
Lists
•Ordered lists•Unordered lists
![Page 31: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/31.jpg)
Ordered Lists
![Page 32: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/32.jpg)
Unordered lists
![Page 33: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/33.jpg)
Blocks
• The <div> Element• The <div> element is often used as a container for other HTML
elements.• The <div> element has no required attributes, but
both style and class are common.• When used together with CSS, the <div> element can be used to style
blocks of content
![Page 34: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/34.jpg)
![Page 35: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/35.jpg)
Forms
• The <form> Element• The HTML <form> element defines a form that is used to collect user
input:
<form>.form elements.</form>
![Page 36: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/36.jpg)
Type Description<input type="text"> Defines a one-line text input field<input type="radio"> Defines a radio button (for
selecting one of many choices)<input type="submit"> Defines a submit button (for
submitting the form)
The <input> ElementThe <input> element is the most important form element.The <input> element can be displayed in several ways, depending on the type attribute.Here are some examples:
![Page 37: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/37.jpg)
Text Input• <input type="text"> defines a one-line input field for text input
![Page 38: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/38.jpg)
Input Type Password• <input type="password"> defines a password field
![Page 39: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/39.jpg)
Radio Button Input• <input type="radio"> defines a radio button.• Radio buttons let a user select ONE of a limited number of choices:
![Page 40: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/40.jpg)
Input Type Checkbox• <input type="checkbox"> defines a checkbox.• Checkboxes let a user select ZERO or MORE options of a limited
number of choices.
![Page 41: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/41.jpg)
The Submit Button• <input type="submit"> defines a button for submitting the form data
to a form-handler.• The form-handler is typically a server page with a script for processing
input data.• The form-handler is specified in the form's action attribute:
![Page 42: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/42.jpg)
Input Type Reset• <input type="reset"> defines a reset button that will reset all form
values to their default values
![Page 43: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/43.jpg)
The Action Attribute
• The action attribute defines the action to be performed when the form is submitted.• Normally, the form data is sent to a web page on the server when the user
clicks on the submit button.• In the example above, the form data is sent to a page on the server called
"action_page.php". This page contains a server-side script that handles the form data:
<form action="action_page.php">
• If the action attribute is omitted, the action is set to the current page.
![Page 44: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/44.jpg)
The <select> Element• The <select> element defines a drop-down list• The <option> elements defines an option that can be selected.• By default, the first item in the drop-down list is selected.
![Page 45: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/45.jpg)
The <textarea> Element• The <textarea> element defines a multi-line input field (a text area)• The rows attribute specifies the visible number of lines in a text area.• The cols attribute specifies the visible width of a text area.
![Page 46: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/46.jpg)
The <button> Element• The <button> element defines a clickable button
![Page 47: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/47.jpg)
AudioAudio on the Web• Before HTML5, audio files could only be played in a browser with a plug-in
(like flash).• The HTML5 <audio> element specifies a standard way to embed audio in a
web page.HTML Audio - How It Works• The controls attribute adds audio controls, like play, pause, and volume.• The <source> element allows you to specify alternative audio files which
the browser may choose from. The browser will use the first recognized format.• The text between the <audio> and </audio> tags will only be displayed in
browsers that do not support the <audio> element.
![Page 48: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/48.jpg)
![Page 49: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/49.jpg)
VideoPlaying Videos in HTML:• Before HTML5, a video could only be played in a browser with a plug-in (like
flash).• The HTML5 <video> element specifies a standard way to embed a video in a
web page.How it Works:• The controls attribute adds video controls, like play, pause, and volume.• It is a good idea to always include width and height attributes. If height and
width are not set, the page might flicker while the video loads.• The <source> element allows you to specify alternative video files which the
browser may choose from. The browser will use the first recognized format.• The text between the <video> and </video> tags will only be displayed in
browsers that do not support the <video> element.
![Page 50: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/50.jpg)
![Page 51: The Complete HTML](https://reader036.vdocuments.us/reader036/viewer/2022062401/58ced5521a28abd4098b561f/html5/thumbnails/51.jpg)
IAM NOT SAYING
THE END
Rohit Buddabathina