This book will help us in becoming masters in basic and advanced HTML programming for beginners. It starts with the basic structure and a simple introduction:
Webpages are written in HTML - a simple scripting language. HTML is short for HyperText Markup Language. Hypertext is simply a piece of text that works as a link. Markup Language is a way of writing layout information within documents. Basically an HTML document is a plain text file that contains text and nothing else. When a browser opens an HTML file, the browser will look for HTML codes in the text and use them to change the layout, insert images, or create links to other pages. Since HTML documents are just text files they can be written in even the simplest text editor.
Table of Contents
Introduction to HTML
Introduction Advanced HTML 5.
Prog.1 Example for Heading and Paragraph.
Prog. 2 Example for Multiple Heading.
Prog. 3 Example for Linking page.
Prog. 4 Example for Print Horizontal line in HTML.
Prog. 5 Example for Print Multiple Paragraph in HTML.
Prog. 6 Example for line break in paragraph.
Prog. 7 Example for multiple text formatting in HTML.
Prog. 8 Example for control line breaks and spaces in HTML.
Prog. 9 Example for Different Computer Output tags.
Prog. 10 Example for Insert Contact Information in HTML.
Prog. 11 Example for Abbreviations and Acronyms in HTML.
Prog. 12 Example for mark deleted and inserted text in HTML.
Prog. 13 Example for Style HTML Elements.
Prog. 14 Example for Background color in HTML.
Prog. 15 Example for Style color, font and size in HTML.
Prog. 16 Example for center alignment text in HTML.
Prog. 17 Example for set the font, font-size and font color of text in HTML.
Prog. 18 Example for set external style sheet using HTML.
Prog. 19 Example for create Hyperlink in HTML.
Prog. 20 Example for how to give image link in HTML.
Prog. 21 Example for open new browser window in HTML.
Prog. 22 Example for Insert image in HTML.
Prog. 23 Example for create an image map with clickable region in HTML.
Prog.24 Example for create table with boarder in HTML.
Prog. 25 Example for create table without boarder in HTML.
Prog. 26 Example for create table with header in HTML.
Prog. 27 Example for create table cells that span more than one row/ column.
Prog. 28 Example for control white space between cell content and boarder in HTML.
Prog. 29 Example for Different types of Ordered list in HTML.
Prog. 30 Example for different type’s unordered list in HTML.
Prog. 31 Example for create multiple nested list in HTML.
Prog. 32 Example for Input field text and password in HTML.
Prog. 33 Example for create checkbox and radio button in HTML.
Prog. 34 Example for create multiple drop down list with selected value in HTML.
Prog. 35 Example for Create textarea in HTML.
Prog. 36 Example for Input value into text and display value in action page.
Prog. 37 Example for select value using checkbox and display in action page.
Prog. 38 Example for select value using radio and display in action page.
Prog. 39 Example for send mail to someone in HTML.
Prog. 40 Example for create metadata in heading section in HTML.
Prog. 41 Example for writing script in HTML.
Advanced HTML5 New Elements
1. The New <canvas> Element
2. New Media Elements
2.1 <audio> Tag
2.2 <video> tag
2.3 <source> tag
2.4 <embed> tag
2.5 <track> tag
3. New Form Elements
3.1 <datalist> tag
3.2 <keygen> tag
3.3 <output> tag
4. HTML5 New Form Attributes
4.1.1 <form> / <input> autocomplete Attribute
4.1.2 <form> novalidate Attribute
4.2.2 <input> autofocus Attribute
4.2.3 <input> form Attribute
4.2.4 <input> formaction Attribute
4.2.5 <input> formenctype Attribute
4.2.6 <input> formmethod Attribute
4.2.7 <input> formnovalidate Attribute
4.2.8 <input> formtarget Attribute
4.2.9 <input> height and width Attributes
4.2.10 <input> list Attribute
4.2.11 <input> min and max Attributes
4.2.12 <input> multiple Attribute
4.2.13 <input> pattern Attribute
4.2.14 <input> placeholder Attribute
4.2.15 <input> step Attribute
4.2.16 <input> step Attribute
5. HTML5 Web Storage
Objective and Topics
This work aims to provide a practical guide and programming reference for HTML and Advanced HTML5. It serves as an introductory and instructional manual for developers to understand the fundamentals of web page creation, structured layout, and the implementation of modern HTML5 features through code examples.
- Foundations of HTML structure and text formatting
- Practical application of HTML tables, lists, and forms
- Integration of advanced HTML5 media elements (audio, video, canvas)
- Implementation of HTML5 form enhancements and new attributes
- Client-side data storage using Web Storage APIs
Excerpt from the Book
Prog. 30 Example for different type’s unordered list in HTML.
<html>
<body>
<h4>Disc bullets list:</h4>
<ul style="list-style-type:disc">
<li>Nitin</li>
<li>Mayur</li>
<li>Jayesh</li>
<li>Rajesh</li>
</ul>
<h4>Circle bullets list:</h4>
<ul style="list-style-type:circle">
<li>Nitin</li>
<li>Mayur</li>
<li>Jayesh</li>
<li>Rajesh</li>
</ul>
<h4>Square bullets list:</h4>
<ul style="list-style-type:square">
<li>Nitin</li>
<li>Mayur</li>
<li>Jayesh</li>
<li>Rajesh</li>
</ul>
<p><b>Note:</b> The type attribute of the ul tag is deprecated in HTML 4, and is not supported in HTML5.Therefore we have used the style attribute and the CSS list-style-type property, to define different types of unordered lists below:</p>
</body>
</html>
Summary of Chapters
Introduction to HTML: Provides a basic definition of HTML as a markup language and explains how browsers process text files to display web content.
Introduction Advanced HTML 5: Outlines the shift towards HTML5, focusing on cross-platform capabilities and reduced dependency on external plugins.
Advanced HTML5 New Elements: Covers modern additions to HTML5, specifically the canvas element for graphics and new media tags like audio and video.
New Form Elements: Details new input enhancements such as datalist, keygen, and output tags to improve form interactivity.
HTML5 New Form Attributes: Discusses updated attributes for form validation and input control, including autocomplete, autofocus, and various submission overrides.
HTML5 Web Storage: Explains the shift from cookies to localStorage and sessionStorage for more secure and efficient client-side data management.
Keywords
HTML, HTML5, Web Programming, Markup Language, Web Development, Canvas, Audio, Video, Form Elements, Input Attributes, Web Storage, LocalStorage, SessionStorage, Browser Compatibility, Programming Examples
Frequently Asked Questions
What is the fundamental purpose of this publication?
The book serves as a practical, example-driven programming manual for learning basic HTML and the new features introduced in HTML5.
What are the primary subject areas covered in the text?
The work focuses on document structure, text formatting, multimedia integration (video/audio), interactive form elements, and web storage mechanisms.
What is the core research or objective behind the technical examples?
The objective is to demonstrate the practical implementation of HTML tags and attributes to build functional, modern, and device-independent web applications.
Which specific programming methodologies are utilized?
The publication uses a "learn-by-example" methodology, providing raw HTML code blocks followed by their rendered output for immediate comparison.
What is addressed in the final sections of the book?
The latter part focuses on HTML5 specific advancements, including new media elements, sophisticated form validation attributes, and client-side storage objects.
Which keywords best characterize the technical content?
Key concepts include HTML, HTML5, Web Programming, Markup Language, Canvas, Audio, Video, Form Attributes, and Web Storage.
How does HTML5 improve upon legacy form validation?
HTML5 introduces new attributes like novalidate, pattern, and required that allow developers to manage data validation directly through markup instead of heavy reliance on external scripts.
What is the functional difference between localStorage and sessionStorage?
localStorage persists data without an expiration date, remaining available after browser closure, whereas sessionStorage deletes the data as soon as the browser session or window is closed.
Why are external plugins becoming obsolete in the context of this book?
HTML5 native media elements like <audio> and <video> allow developers to build complex applications that perform animations and multimedia playback without requiring third-party plugins like Flash.
What is the significance of the <canvas> element in modern web design?
The canvas element provides a standardized container for rendering graphics dynamically using scripting, significantly enhancing the capability of web pages to handle visual applications directly in the browser.
- Quote paper
- MCA Nitin Chikani (Author), 2014, HTML & Advanced HTML Programming for Beginners, Munich, GRIN Verlag, https://www.grin.com/document/269212
