Comprehensive Hyper Text Markup Language (HTML): A Tutorial Guide to Editing and Developing a responsive and Dynamic Website for Beginners.



COMPREHENSIVE HTML

  (HYPER TEXT MARK-UP LANGUAGE).

A Tutorial Guide to Editing and Developing a responsive and Dynamic Website for Beginners.

ALL RIGHTS RESERVED

No part of this publication may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of the copyright holder.

Copyright © IBRAHIM N.A

 Picture 2

ISBN:  978-1-387-52858-5

First Published, 2022

 C:\Users\Test\Pictures\logo\logo 1.png

Noogul Digital Publishing

Audience

This course is intended for aspiring web designers and developers who need to comprehend HTML thoroughly as well as its straightforward overview and useful examples. You'll have all the tools you need from this course to get started using HTML and advance to a greater degree of proficiency. This book, written in the author's approachable and simple-to-read style, covers all the most recent innovations and advancements in responsive web design, such as strategies for greater accessibility, changeable fonts and font loading, and the most recent color manipulation features reaching browsers.

Prerequisites

Before continuing, you need have a basic working understanding of Windows or Linux. You should also be familiar with the following: Any text editor, such as notepad, notepad++, or Edit Plus.

How to create files and folders on your computer.

How to search through various directories.

How to enter material into a file on a computer and save it.

Knowledge of several image formats, such as JPEG and PNG.

TABLE OF CONTENTS

Audience  - - - - - - - 2

Prerequisites- - - - - - - 3

Table of Contents - - - - - 4

SECTION 1: INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE  - - - - - - 7

HTML History -----8

HTML Multimedia -----9

- Browser Support - - - - 9

- Media Formats - - - - - 10

- Sound Formats - - - - - 11

HTML Tags- ----13

Website Browsers----14

HTML Page Strucure- ---14

- The Declaration - - - 15

- HTML Versions - - - - 15

- HTML Headings - - - - 19

- HTML Paragraphs - - - - 20

- HTML Links - - - - - 20

- HTML Images - - - - - 20

- HTML Elements - - - - 21

- HTML Attributes - - - - 23

- HTML Horizontal Rules - - - 28

- The HTML Head Element - - - 28

- The HTML Title Element - - - 29

- The HTML Meta Element - - - 29

SECTION 2: HTML DISPLAY  - - - 31

HTML Line Break -----31

HTML

 Ekemet----32 

HTML Styling ------33

HTML Text Color-----33

HTML Fonts -----33

HTML Text Size -- ---34

HTML Text Allignment ----35

HTML Formatting Elements---35

- HTML Bold and Strong Formatting - - 36

- HTML Italic and Emphasized Formatting - - 36

- HTML small Formatting - - - 37

- HTML Marked Formatting - - - 37

- HTML Deleted Formating - - - 37

- HTML Inserted Formatting - - - 38

- HTML subscript Formatting - - - 38

- HTML Superscript Formatting - - - 38

HTML For Short Quotations ---36

HTML for Long Quotations----36

HTML for Work Title---37

HTML Bi-Directional Override---37

SECTION 3: HTML TABLES - - - - 41

An HTML Table with a Border Attribute---42

An HTML Table with Collapsed Borders---43

An HTML Table with Cell Padding ---44

HTML Table Headings - ----45

An HTML Table with Border Spacing ---47

Table Cells that Span Many Columns---48

Table Cells that Span many Rows ---49

An HTML Table with a Caption ---50

Different Styles for Different Tables---51

HTML Table Tags -----55

SECTION 4: UNORDERED LISTS, ORDERED LISTS OR DESCRIPTION LISTS - - - - 57

Unordered HTML Lists ----57

- Unordered HTML Lists -  The Style Attribute - 58

- Circle - - - - - - 58

- Square - - - - - - 59

Ordered HTML Lists----59

- Ordered HTML Lists – The Type Attribute - 60

HTML Description LIsts ----60

Nested HTML Lists--- --61

Horizontal Lists---- --62

SECTION 5: THE HTML FORM ELEMENTS

The Form Element -----65

The Input Element-----5965

- Text Input - - - - - 66

- Radio Button Input - - - - 66

- The Submit Button - - - - 67

The Action Attribute ----68

Method Attribute -----68

- When to use GET - - - - 68

- When to use POST - - - - 68

The Name Attribute ----69

Grouping Form Data with

HTML Form Attribute ----70

Drop-Down List - ----71

The Element---71

HTML5

HTML5 Element----72

HTML5

Element-- --73

Input Type: Password ----75

Input Type: Checkbox----75

Input Type: Button-----76

Input Type: Number ----76

Input Restrictions -----77

Input Type: Date -----78

Input Type: Color-----79

Input Type: Range -----80

Input Type: Month-----81

Input Type: Week ----81

Input Type: Time-----83

Input Type: Datetime----83

Input Type: datetime-Local ----83

Input Type: Email-----84

Input Type: Search-----85

Input Type: Tel-----85

Input Type: URL-----85

The Value Attribute ----86

The Disabled Attribute----87

The Size Attribute -----88

The Maxlength Attribute ----88

The Autocomplete Attribute ---90

The Nonvalidate Attribute ----90

The Autofocus Attribute ----91

The Form Attribute -----91

The Formaction Attribute ----92

The Formenctype Attribute ----93

The Formmethod Attribute ----93

The Formnovalidate Attribute ---94

The Formtarget Attribute ----94

The height and Width Attribute ---95

The List Attribute -----96

The Min and Maz Attribute ----96

The Multiple Attribute ----97

The Pattern Attribute ----98

The Placeholder Attribute ----99

The Required Attribute ----99

The Step Attribute -----100

SECTION 6: HTML 5 

What is New in HTML5-----101

HTML Character Set ----101

- In the Beginning  ASCII - - - 102

- In Windows  ANSI - - - - 102

- In HTML 4: ISO-8859-1 - - - 102

- In HTML5: Unicode UTF-8 - - - 103

The Unicode Consortium ----103

The Unicode Character Set ----104

Differences Between Unicode and UTF-8--105

HTML5 UTF-8 Character Codes---105

UTF-8 C0 Controls and Basic Latin ---106

C0 Controls -----109

UTF-8 C1 Controls and Latin1 Supplement --110

C1 Controls------111

UTF-8 General Punctuations ---114

HTML Semantic Elements ----116

HTML5 New Elements ----121

HTML5 Section Element ----122

HTML5 Article Element ----123

Nesting Semantic Element ----124

HTML5 Header Element ----124

HTML5 the Footer Element ---125

HTML5 Aside Element ----126

Semantic Elements in HTML5---127

HTML5 New Attribute Syntax ---128

HTML5 Graphics -----128

HTML Canvas -----129

HTML5 SVG -----134

- SVG Rounded Rectangle - - - 135

- SVG Star - - - - - 135

- SVG Logo - - - - - 135

Differences between SVG and Canvas--137

Playing videos in HTML ----137

HTML5 Video Tags ----138

HTML5 Audio -----141

HTML5 Geolocation ----147

HTML5 Drag and Drop ----152

HTML5 Local Storage ----156

HTML5 Application cache ----160

HTML5 Web Workers ----164

HTML Summary -----172

SECTION 1:

INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE

Hypertext Markup Language (HTML), a set of logical codes (markup) in parentheses, controls the appearance and content of web documents. This language may be used to create static web pages. It describes how the web page's contents are organized. Both HTML and html are equal since HTML is a case-insensitive language.

HTML stands for HyperText Markup Language. HTML may be likened to our webpage's content plus some extra information that alerts the browser to the content.

For instance, it might include instructions on how to navigate between web pages, organize the content, or display the page. In the following chapter