Comprehensive Hypertext Markup Language (HTML). A Tutorial Guide to Editing and Developing a Responsive and Dynamic Website for Beginners. ebook

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

Email: [email protected]

First Published, 2022

Noogul Digital Publishing

Audience

This tutorial is designed for the aspiring Web Designers and Developers with a need to understand the HTML in enough detail along with its simple overview, and practical examples. This tutorial will give you enough ingredients to start with HTML from where you can take yourself at higher level of expertise.

Prerequisites

Before proceeding with this tutorial you should have a basic working knowledge with Windows or Linux operating system, additionally you must be familiar with:

Experience with any text editor like notepad, notepad++, or Edit plus etc.

How to create directories and files on your computer.

How to navigate through different directories.

How to type content in a file and save them on a computer.

Understanding about images in different formats like JPEG, PNG format.

TABLE OF CONTENTS

Audience ------- ii

Prerequisites-------iii

Table of Contents-----iv

SECTION 1: INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE

HTML Tags- ----6

Website Browsers----7

HTML Page Strucure- ---7

SECTION 2: HTML DISPLAY ---26

HTML Line Break -----26

HTML <Pre> Ekemet----28

HTML Styling ------28

HTML Text Color-----29

HTML Fonts -----29

HTML Text Size -- ---30

HTML Text Allignment ----30

HTML Formatting Elements---31

HTML For Short Quotations ---36

HTML for Long Quotations----36

HTML <Cite> for Work Title---37

HTML Bi-Directional Override---37

SECTION 3: HTML TABLES----38

An HTML Table with a Border Attribute---39

An HTML Table with Collapsed Borders---40

An HTML Table with Cell Padding ---41

HTML Table Headings - ----42

An HTML Table with Border Spacing ---44

Table Cells that Span Many Columns---45

Table Cells that Span many Rows ---45

An HTML Table with a Caption ---46

Different Styles for Different Tables---47

HTML Table Tags -----51

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

Unordered HTML Lists ----52

Ordered HTML Lists----54

HTML Description LIsts ----55

Nested HTML Lists--- --

Horizontal Lists---- --56

SECTION 5: THE HTML FORM ELEMENTS

The Form Element -----59

The Input Element-----59

The Action Attribute ----61

Method Attribute -----62

The Name Attribute ----63

Grouping Form Data with <Fieldset>--63

HTML Form Attribute ----64

Drop-Down List - ----65

The <Textarea> Element---65

HTML5 <Datalist> Element----66

HTML5 <Keygen> Element----67

HTML5 <Output> Element-- --67

Input Type: Password ----69

Input Type: Checkbox----69

Input Type: Button-----70

Input Type: Number ----71

Input Restrictions -----72

Input Type: Date -----73

Input Type: Color-----74

Input Type: Range -----75

Input Type: Month-----76

Input Type: Week ----76

Input Type: Time-----77

Input Type: Datetime----77

Input Type: datetime-Local ----78

Input Type: Email-----79

Input Type: Search-----79

Input Type: Tel-----80

Input Type: URL-----80

The Value Attribute ----81

The Disabled Attribute----81

The Size Attribute -----82

The Maxlength Attribute ----82

The Autocomplete Attribute ---84

The Nonvalidate Attribute ----85

The Autofocus Attribute ----85

The Form Attribute -----86

The Formaction Attribute ----86

The Formenctype Attribute ----87

The Formmethod Attribute ----87

The Formnovalidate Attribute ---88

The Formtarget Attribute ----89

The height and Width Attribute ---90

The List Attribute -----91

The Min and Maz Attribute ----91

The Multiple Attribute ----92

The Pattern Attribute ----93

The Placeholder Attribute ----93

The Required Attribute ----94

The Step Attribute -----95

SECTION 1

1.0 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 of this book, we'll begin learning how to write our own HTML. For the time being, the most important lesson to learn is that HTML is used to format a webpage's content so that web browsers can understand it.

Hypertext refers to the connecting of Web pages (HTML documents). Thus, hypertext refers to a link on a website.

HTML is a markup language that describes the structure of your content. You may use the many components that make up HTML to enclose or surround certain pieces of material to change how it looks or acts. The surrounding tags may do a variety of things, such as italicize words, change the font size, connect a phrase or an image to another page, and more.

To make it simpler for academics to communicate scientific data, HTML was first developed with the intention of defining the structure of documents, including headings, paragraphs, lists, and other features.

HTML is a markup language for describing web documents (web pages).

HTML stands for

H

yper

T

ext

M

arkup

L

anguage

A markup language is a set of

markup tags

HTML documents are described by

HTML tags

Each HTML tag

describes

different document content

HTML History

Since the early days of the web, there have been many versions of HTML:

Version

Year

Tim Berners-Lee invented www

1989

Tim Berners-Lee invented HTML

1991

Dave Raggett drafted HTML+

1993

HTML Working Group defined HTML 2.0

1995

W3C Recommended HTML 3.2

1997

W3C Recommended HTML 4.01

1999

W3C Recommended XHTML 1.0

2000

HTML5 WHATWG First Public Draft

2008

HTML5 WHATWG Living Standard

2012

HTML5 W3C Final Recommendation

2014

The "World Wide Web" was created in 1989 by Tim Berners-Lee, and the 1990s saw the rapid growth of the Internet. HTML evolved from version 1 to version 4 between 1991 and 1998. The World Wide Web Consortium (W3C) suggested XHTML 1.0 in 2000.

Because of the stringent XHTML syntax, programmers were compelled to produce "well-formed" code. WHATWG (Web Hypertext Application Technology Working Group) was established in 2004 in reaction to the W3C's sluggish progress and decision to discontinue HTML development in favor of XHTML.

WHATWG sought to create HTML that was both forward-compatible with earlier versions of HTML and consistent with how the web was used. The main browser makers backed the WHATWG effort between 2004 and 2006.

W3C declared their support for WHATWG in 2006. The first HTML5 public draft was made available in 2008, and WHATWG and W3C agreed to separate in 2012:

WHATWG will develop HTML as a "Living Standard".

A living standard is always being updated and enhanced, never being totally realized. Old functionality cannot be deleted but new ones may be introduced.

The 2012 publication of the WHATWG Living Standard includes ongoing updates.

Development of HTML5 and XHTML5 standard, as a "snapshot" of WHATWG.

The W3C HTML5 recommendation was released 28. October 2014.

Resolution dependent

No support for event handlers

Poor text rendering capabilities

You can save the resulting image as .png or .jpg

Well suited for graphic-intensive games

Resolution independent

Support for event handlers

Best suited for applications with large rendering areas (Google Maps)

Slow rendering if complex (anything that uses the DOM a lot will be slow)

Not suited for game applications

HTML Multimedia

On the internet, multimedia includes audio, video, music, and animations. There are several formats available for multimedia. Almost everything that you can hear or see might be it. Examples include images, audio, video, recordings, motion pictures, animations, and more. Multimedia components of various sorts and formats are frequently seen on web sites.

Browser Support

The first web browsers only supported text and could only display it in a single typeface and one color.

Browsers with support for colors, fonts, and even images later appeared!

Different browsers handle music, animation, and video functionality in different ways. Different kinds and formats are supported, albeit some of them necessitate the use of additional auxiliary applications (plug-ins).

Multimedia Formats

Media files are used to hold multimedia components (such as audio or films).

Examining the file extension is the most popular method for determining the kind of a file. A browser will treat a file as an HTML file if it has the.htm or.html extension. An XML file has the.xml extension, whereas a style sheet file has the.css extension. Picture extensions like.gif,.png, and.jpg are used to identify them.

Additionally, multimedia files have unique formats and extensions, such as.swf,.wav,.mp3,.mp4,.mpg,.wmv, and.avi.

Common Video Formats

Format

File

Description

MPEG

.mpg.mpeg

MPEG. The Moving Pictures Expert Group created this. earliest widely used video format on the internet. It was once supported by all browsers, however HTML5 does not support it.

AVI

.avi

AVI (Audio Video Interleave) (Audio Video Interleave). It was made by Microsoft. hardware for TVs and video cameras is often used. It does not work in web browsers when played on Windows machines.

WMV

.wmv

WMV (Windows Media Video). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers.

QuickTime

.mov

QuickTime. Developed by Apple. Commonly used in video cameras and TV hardware. Plays well on Apple computers, but not in web browsers. (See MP4)

RealVideo

.rm.ram

RealVideo. Developed by Real Media to allow video streaming with low bandwidths. It is still used for online video and Internet TV, but does not play in web browsers.

Flash

.swf.flv

Flash. Developed by Macromedia. Often requires an extra component (plug-in) to play in web browsers.

Ogg

.ogg

Theora Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5.

WebM

.webm

WebM. Developed by the web giants, Mozilla, Opera, Adobe, and Google. Supported by HTML5.

MPEG-4or MP4

.mp4

MP4. Developed by the Moving Pictures Expert Group. Based on QuickTime. Commonly used in newer video cameras and TV hardware. Supported by all HTML5 browsers. Recommended by YouTube. 

NB:

Only MP4, WebM, and Ogg video is supported by the newest HTML5 standard.

Sound Formats

The most recent format for compressed recorded music is called MP3. The phrase "MP3" has evolved to mean digital music.

MP3 is the format of choice if your website is about recorded music.

Format

File

Description

MIDI

.mid.midi

MIDI (Musical Instrument Digital Interface) (Musical Instrument Digital Interface). The primary format for all electronic musical instruments, including PC sound cards and synthesizers. Digital notes that may be played by electronics instead of sound are contained in MIDI files. plays flawlessly on all music gear and desktops, but not on web browsers.

RealAudio

.rm.ram

RealAudio. Real Media created this technology to enable low-bandwidth audio streaming. cannot be played on web browsers.

WMA

.wma

WMA (Windows Media Audio) (Windows Media Audio). It was made by Microsoft. used often in music players. It does not work in web browsers when played on Windows machines.

AAC

.aac

AAC (Advanced Audio Coding). Developed by Apple as the default format for iTunes. Plays well on Apple computers, but not in web browsers.

WAV

.wav

WAV. Developed by IBM and Microsoft. Plays well on Windows, Macintosh, and Linux operating systems. Supported by HTML5.

Ogg

.ogg

Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5.

MP3

.mp3