Comprehensive Hypertext Markup Language (HTML). E-Book

IBRAHIM NUGWA ABDULRAZAK

• Herausgeber: Noogul Digital Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Veröffentlichungsjahr: 2024

Beschreibung

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.

Leseprobe

IBRAHIM NUGWA ABDULRAZAK

Comprehensive Hypertext Markup Language (HTML).

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

Website-Entwicklung, Web-App, Softwareentwicklung, Programmierung

Inhaltsverzeichnis

COMPREHENSIVE HTML

Audience

Contents

SECTION 1

INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE

HTML Multimedia

SECTION 6

HTML5

UTF-8 C0 Controls and Basic Latin

UTF-8 C1 Controls and Latin1 Supplement

UTF-8 Latin Extended A

UTF-8 General Punctuation

HTML Semantic Elements

HTML5 New Elements

HTML5 Canvas

HTML5 SVG

HTML5 Video Example 2

HTML5 Audio

HTML Plug-ins

HTML YouTube Videos

HTML5 Geolocation

HTML5 Drag and Drop

HTML5 Local Storage

HTML5 Application Cache

HTML5 Web Workers

HTML5 Server-Sent Events

Impressum

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.

Contents

COMPREHENSIVE HTML i

Audience ii

Prerequisites iii

SECTION 1 1

1.0 INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1

HTML History 2

HTML Multimedia 4

Browser Support 4

Multimedia Formats 4

Common Video Formats 4

Sound Formats 5

Example Explained 7

HTML Tags 7

Web Browsers 8

HTML Page Structure 9

The <!DOCTYPE> Declaration 11

Common Declarations 11

HTML5 11

HTML Versions 11

- Write HTML Using Notepad or TextEdit 11

Step 1: Open Notepad 12

Step 2: Write Some HTML 12

Step 3: Save the HTML Page 13

Step 4: View HTML Page in Your Browser 14

HTML Headings 15

Headings Are Important 15

Only use HTML headers as headings. Avoid using headers to enlarge or bold text. 15

Search engines index the structure and content of your web pages using the headers. 15

Users scan the headlines on your website. Using headers to display the document's structure is crucial. 16

The primary headings, or h1, should come first, then h2 headings, h3 headings, and so on. 16

HTML Paragraphs 16

HTML Links 16

HTML Images 17

1.3.6 HTML Elements 17

Nested HTML Elements 18

HTML Example Explained 18

Don't Forget the End Tag 19

Empty HTML Elements 19

HTML Tip: Use Lowercase Tags 20

1.3.7 HTML Attributes 20

- The lang Attribute 20

The title Attribute 21

The href Attribute 22

Size Attributes 22

The alt Attribute 22

Using Lowercase Attributes 23

Quoting Attribute Values 23

Single or Double Quotes? 24

HTML Attributes 24

HTML Horizontal Rules 25

The HTML <head> Element 25

The HTML <title> Element 26

The HTML <meta> Element 26

More Meta Elements 26

HTML Tip - How to View HTML Source 26

2.0 HTML DISPLAY 27

HTML Line Breaks 27

The HTML <pre> Element 28

HTML Styling 29

The HTML Style Attribute 29

HTML Text Color 29

HTML Fonts 30

HTML Text Size 30

HTML Text Alignment 31

</html> 31

HTML Formatting Elements 31

HTML Bold and Strong Formatting 32

HTML Italic and Emphasized Formatting 32

HTML Small Formatting 33

HTML Marked Formatting 33

HTML Inserted Formatting 34

HTML Subscript Formatting 34

HTML Superscript Formatting 35

HTML <q> for Short Quotations 35

HTML <blockquote> for Long Quotations 35

HTML <cite> for Work Title 36

HTML <bdo> for Bi-Directional Override 36

</html> 37

SECTION 3 38

HTML Table Example 38

An HTML Table with a Border Attribute 40

An HTML Table with Collapsed Borders 43

An HTML Table with Cell Padding 45

An HTML Table with Border Spacing 50

Table Cells that Span Many Columns 52

Table Cells that Span Many Rows 53

An HTML Table With a Caption 55

Different Styles for Different Tables 56

HTML Table Tags 61

SECTION 4 62

HTML can have Unordered lists, Ordered lists, or Description lists: 62

Unordered List 62

Ordered List 62

Description List 62

Unordered HTML Lists 62

Unordered HTML Lists - The Style Attribute 63

Ordered HTML Lists 64

Ordered HTML Lists - The Type Attribute 66

HTML Description Lists 67

Nested HTML Lists 67

Horizontal Lists 68

Chapter Summary 70

The <form> Element 71

The <input> Element 71

Text Input 72

Radio Button Input 73

The Submit Button 74

The Action Attribute 75

Method Attribute 75

When to Use GET? 75

When to Use POST? 76

The Name Attribute 76

Grouping Form Data with <fieldset> 77

The <textarea> Element 79

HTML5 <datalist> Element 80

HTML5 <keygen> Element 80

HTML5 <output> Element 81

Example 81

HTML Form Elements 82

Password 82

Input Type: checkbox 83

Input Type: button 84

HTML5 Input Types 84

Input Type: number 85

<!DOCTYPE html> 86

<html> 86

<body> 86

<p> 86

Depending on browser support:<br> 86

Fixed steps will apply in the input field. 86

</p> 86

<form action="action_page.php"> 87

Quantity: 87

<input type="number" name="points" 87

min="0" max="100" step="10" value="30"> 87

<input type="submit"> 87

</form> 87

<p><b>Note:</b>type="number" is not supported in IE9 and earlier. 87

</p> 87

</body> 87

</html> 87

Input Type: date 87

<!DOCTYPE html> 87

<html> 87

<body> 87

<p> 87

Depending on browser support:<br> 87

A date picker can pop-up when you enter the input field. 87

</p> 87

<form action="action_page.php"> 87

Birthday: 87

<input type="date" name="bday"> 87

<input type="submit"> 87

</form> 87

<p><b>Note:</b> type="date" is not supported in Internet Explorer.</p> 87

</body> 87

</html> 87

NB: You can add restrictions to the input: 88

<!DOCTYPE html> 88

<html> 88

<body> 88

<form action="action_page.php"> 88

Enter a date before 1980-01-01:<br> 88

<input type="date" name="bday" max="1979-12-31"><br><br> 88

Enter a date after 2000-01-01:<br> 88

<input type="date" name="bday" min="2000-01-02"><br><br> 88

<input type="submit"> 88

</form> 88

<p><strong>Note:</strong> 88

type="date" is not supported in Internet Explorer.</p> 88

</body> 88

</html> 88

Input Type: color 89

<!DOCTYPE html> 89

<html> 89

<body> 89

<p> 89

Depending on browser support:<br> 89

A color picker can pop-up when you enter the input field. 89

</p> 89

<form action="action_page.php"> 89

Select your favorite color: 89

<input type="color" name="favcolor" value="#ff0000"> 89

<input type="submit"> 89

</form> 89

<p><b>Note:</b> type="color" is not supported in Internet Explorer.</p> 89

</body> 89

</html> 89

Input Type: range 90

<!DOCTYPE html> 90

<html> 90

<body> 90

<p> 90

Depending on browser support:<br> 90

The input type "range" can be displayed as a slider control. 90

</p> 90

<form action="action_page.php" method="get"> 90

Points: 90

<input type="range" name="points" min="0" max="10"> 90

<input type="submit"> 90

</form> 90

<p> 90

<b>Note:</b> 90

type="range" is not supported in Internet Explorer 9 and earlier versions. 90

</p> 90

</body> 90

</html> 90

NB: 90

You can use the following attributes to specify restrictions: min, max, step, value. 90

Input Type: month 91

<!DOCTYPE html> 91

<html> 91

<body> 91

<p> 91

Depending on browser support:<br> 91

A date picker can pop-up when you enter the input field. 91

</p> 91

<form action="action_page.php"> 91

Birthday (month and year): 91

<input type="month" name="bdaymonth"> 91

<input type="submit"> 91

</form> 91

<p><b>Note:</b> 91

type="month" is not supported in Internet Explorer. 91

</p> 91

</body> 91

</html> 91

Input Type: week 92

<!DOCTYPE html> 92

<html> 92

<body> 92

<p> 92

Depending on browser support:<br> 92

A date picker can pop-up when you enter the input field. 92

</p> 92

<form action="action_page.php"> 92

Select a week: 92

<input type="week" name="year_week"> 92

<input type="submit"> 92

</form> 92

<p><b>Note:</b> 92

type="week" is not supported in Internet Explorer. 92

</p> 92

</body> 92

</html> 92

Input Type: time 93

Input Type: datetime 93

Input Type: datetime-local 94

Input Type: email 95

Input Type: search 96

Input Type: tel 96

Input Type: url 97

The value Attribute 98

The disabled Attribute 99

The size Attribute 100

The maxlength Attribute 101

HTML5 Attributes 102

The novalidate Attribute 104

The autofocus Attribute 105

The form Attribute 106

The formaction Attribute 107

The formenctype Attribute 108

The formmethod Attribute 109

The formnovalidate Attribute 109

The formtarget Attribute 110

The height and width Attributes 111

Example 111

The list Attribute 111

Example 112

The min and max Attributes 113

Example 113

The multiple Attribute 114

Example 114

The pattern Attribute 115

Example 115

The placeholder Attribute 116

Example 116

The required Attribute 116

Example 117

The step Attribute 118

Example 118

SECTION 6 119

HTML5 119

What is New in HTML5? 119

HTML5 Example: 119

HTML Character Sets 119

In the Beginning: ASCII 120

In Windows: ANSI 120

In HTML 4: ISO-8859-1 121

Example 121

In HTML5: Unicode UTF-8 121

The Unicode Consortium 122

The Unicode Character Sets 122

The HTML5 Standard: Unicode UTF-8 123

Example 123

The Difference Between Unicode and UTF-8 123

HTML5 UTF-8 Character Codes 124

UTF-8 C0 Controls and Basic Latin 124

Range: Decimal 0-127. Hex 0020-007F. 124

Example 125

C0 Controls 128

UTF-8 C1 Controls and Latin1 Supplement 129

Range: Decimal 128-255. Hex 0080-00FF. 129

Example 129

C1 Controls 130

UTF-8 Latin Extended A 132

Range: Decimal 256-383. Hex 0100-017F. 132

Example 132

UTF-8 General Punctuation 134

Range: Decimal 8192-8303. Hex 2000-206F. 134

Example 134

HTML Semantic Elements 135

New HTML5 Elements 136

New HTML5 API's (Application Programming Interfaces) 137

Elements Removed in HTML5 137

HTML5 Browser Support 138

Define HTML5 Elements as Block Elements 138

Example 138

Adding New Elements to HTML 138

Problem With Internet Explorer 139

The Complete Shiv Solution 139

HTML5 New Elements 141

New Elements in HTML5 141

New Semantic/Structural Elements 141

HTML5 <section> Element 142

HTML5 <article> Element 143

Nesting Semantic Elements 144

HTML5 <header> Element 144

HTML5 <footer> Element 145

HTML5 <nav> Element 146

HTML5 <aside> Element 146

HTML5 <figure> and <figcaption> Elements 146

Why Semantic HTML5 Elements? 147

Semantic Elements in HTML5 148

New Form Elements 148

New Input Types 148

HTML5 - New Attribute Syntax 149

HTML5 Graphics 149

HTML5 Canvas 149

What is HTML Canvas? 150

Browser Support 150

Canvas Examples 150

Drawing with JavaScript 150

Draw a Line 151

Draw a Circle 151

Draw a Text 152

Stroke Text 152

Draw Linear Gradient 153

Draw Circular Gradient 153

Draw Image 154

HTML5 SVG 155

What is SVG? 155

 The HTML <svg> Element 155

 Browser Support 155

SVG Rounded Rectangle 156

SVG Star 156

SVG Logo 157

Differences Between SVG and Canvas 158

Playing Videos in HTML 158

Browser Support 158

HTML5 Video Tags 158

The HTML <video> Element 159

HTML5 Video Example 2 159

How it Works 160

HTML <video> Autoplay 160

HTML Video - Browser Support 161

HTML Video - Media Types 161

HTML Video - Methods, Properties, and Events 161

Example: Using JavaScript 161

HTML5 Audio 162

Audio on the Web 163

Browser Support 163

The HTML <audio> Element 163

HTML Audio - How It Works 163

HTML Audio - Browser Support 164

HTML Audio - Media Types 164

HTML Audio - Methods, Properties, and Events 164

HTML5 Audio Tags 165

HTML Plug-ins 165

HTML Helpers (Plug-ins) 165

The <object> Element 165

The <embed> Element 166

HTML YouTube Videos 167

Struggling with Video Formats? 167

Playing a YouTube Video in HTML 168

Example - Using <object> 168

Example - Using <embed> 168

HTML5 Geolocation 169

Locate the User's Position 169

Browser Support 169

Using HTML Geolocation 169

Example 169

Handling Errors and Rejections 170

Displaying the Result in a Map 172

Location-specific Information 173

The getCurrentPosition() Method - Return Data 173

Geolocation object - Other interesting Methods 174

HTML5 Drag and Drop 175

Drag and Drop 175

Browser Support 175

HTML Drag and Drop Example 175

Make an Element Draggable 176

What to Drag - ondragstart and setData() 176

Where to Drop - ondragover 177

Do the Drop - ondrop 177

HTML5 Local Storage 179

What is HTML Local Storage? 179

Browser Support 179

HTML Local Storage Objects 180

The localStorage Object 180

The sessionStorage Object 182

HTML5 Application Cache 183

What is Application Cache? 183

Browser Support 184

HTML Cache Manifest Example 184

Cache Manifest Basics 184

The Manifest File 185

CACHE MANIFEST 185

NETWORK 186

FALLBACK 186

Updating the Cache 186

Example - Complete Cache Manifest File 186

Notes on Application Cache 187

HTML5 Web Workers 187

Browser Support 187

HTML Web Workers Example 188

Check Web Worker Support 189

Create a Web Worker File 189

Create a Web Worker Object 189

Terminate a Web Worker 190

Reuse the Web Worker 190

Full Web Worker Example Code 190

Web Workers and the DOM 191

HTML5 Server-Sent Events 192

Server-Sent Events - One Way Messaging 192

Browser Support 192

Receive Server-Sent Event Notifications 192

Check Server-Sent Events Support 193

Server-Side Code Example 193

The EventSource Object 194

HTML Summary 195

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 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 Hyper Text Markup Language

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:

VersionYearTim Berners-Lee invented www1989Tim Berners-Lee invented HTML1991Dave Raggett drafted HTML+1993HTML Working Group defined HTML 2.01995W3C Recommended HTML 3.21997W3C Recommended HTML 4.011999W3C Recommended XHTML 1.02000HTML5 WHATWG First Public Draft2008HTML5 WHATWG Living Standard2012HTML5 W3C Final Recommendation2014

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

FormatFileDescriptionMPEG.mpg .mpegMPEG. 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.aviAVI (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.wmvWMV (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.movQuickTime. 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 .ramRealVideo. 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 .flvFlash. Developed by Macromedia. Often requires an extra component (plug-in) to play in web browsers.Ogg.oggTheora Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5.WebM.webmWebM. Developed by the web giants, Mozilla, Opera, Adobe, and Google. Supported by HTML5.MPEG-4 or MP4.mp4MP4. 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.

FormatFileDescriptionMIDI.mid .midiMIDI (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 .ramRealAudio. Real Media created this technology to enable low-bandwidth audio streaming. cannot be played on web browsers.WMA.wmaWMA (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.aacAAC (Advanced Audio Coding). Developed by Apple as the default format for iTunes. Plays well on Apple computers, but not in web browsers.WAV.wavWAV. Developed by IBM and Microsoft. Plays well on Windows, Macintosh, and Linux operating systems. Supported by HTML5.Ogg.oggOgg. Developed by the Xiph.Org Foundation. Supported by HTML5.MP3.mp3MP3 files are actually the sound part of MPEG files. MP3 is the most popular format for music players. Combines good compression (small files) with high quality. Supported by all browsers.MP4.mp4MP4 is a video format, but can also be used for audio. MP4 video is the upcoming video format on the internet. This leads to automatic support for MP4 audio by all browsers.NB:Only MP3, WAV, and Ogg audio is supported by the newest HTML5 standard

Example

This HTML tutorial contains several HTML examples.

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>This is a Heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

Example Explained

The DOCTYPE declaration defines the document type to be HTML

The text between <html> and </html> describes an HTML document

The text between <head> and </head> provides information about the document

The text between <title> and </title> provides a title for the document

The text between <body> and </body> describes the visible page content

The text between <h1> and </h1> describes a heading

The text between <p> and </p> describes a paragraph

Using this description, a web browser can display a document with a heading and a paragraph.

HTML Tags

HTML tags are the building blocks of every website and are used to determine the appearance. We can all build stunning websites if we grasp these tags and how to combine them.

In an HTML page, tags are HTML codes that are used to format and position the text. They are defined by the symbols () and (>). They are positioned inside the body of the HTML code, specifically between the opening and closing body tags.

HTML tags function similarly to keywords in that they specify how a web browser will structure and present text. A web browser can tell the difference between plain material and HTML content with the aid of tags. Opening tag, content, and closing tag are the three essential components of an HTML tag. However, certain HTML tags are not closed.

An HTML document is viewed by a web browser from top to bottom and left to right. In order to generate HTML documents and render their characteristics, HTML tags are employed. Every HTML tag has a unique set of features.

To distinguish between ordinary text and HTML text, a web browser needs a few basic tags in an HTML file. According to the needs of your code, you may use as many tags as you like.

All HTML tags must enclosed within < > these brackets.

Every tag in HTML perform different tasks.

If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags)

Kindly Note That:

HTML tags normally come in pairs like <p> and </p>

The first tag in a pair is the start tag, the second tag is the end tag

The end tag is written like the start tag, but with a slash before the tag name

NB: The start tag is often called the opening tag. The end tag is often called the closing tag.

Web Browsers

The internet is a huge and effective instrument. The way we work, play, and engage with one another have all altered as a result of the internet over the past few decades. Depending on how it is applied, it may build bridges across countries, promote trade, foster relationships, power the future's innovation engine, and give rise to more memes than we know what to do with. Chrome, IE, Firefox, and Safari are examples of web browsers that are used to read and display HTML content.

The HTML tags are used by the browser to decide how to display the page but are not actually shown by the browser:

HTML Page Structure

Below is a visualization of an HTML page structure:

<html>

<head>

<title>Page title</title>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>

</html>

NB:Only the <body> area (the white area) is displayed by the browser.

The <!DOCTYPE> Declaration

The!DOCTYPE> declaration aids the browser in appropriately displaying a web page. On the internet, there are several document kinds.

The browser has to be aware of the type and version in order to display a document appropriately. There is no case distinction in the doctype statement. All cases are acceptable:

<!DOCTYPE html> <!DOCTYPE HTML> <!doctype html> <!Doctype Html>

Common Declarations

HTML5

<!DOCTYPE html>

HTML Versions

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

VersionYearHTML1991HTML 2.01995HTML 3.21997HTML 4.011999XHTML2000HTML52014

Write HTML Using Notepad or TextEdit

HTML can be edited by using a professional HTML editor like:

Adobe Dreamweaver

Microsoft Expression Web

CoffeeCup HTML Editor

However, we advise using a text editor like Notepad (PC) or TextEdit for learning HTML (Mac).

We think a nice method to learn HTML is to use a basic text editor.

Follow the 4 steps below to create your first web page with Notepad.

Step 1: Open Notepad

To open Notepad in Windows 7 or earlier:

Click Start (bottom left on your screen).

Click All Programs.

Click Accessories.

Click Notepad.

To open Notepad in Windows 8 or later:

Open the Start Screen (the window symbol at the bottom left on your screen).

Type Notepad.

Step 2: Write Some HTML

The type declaration <!DOCTYPE html> must be at the top of every HTML page.

Beginning with html and ending with </html>, an HTML document is itself.

Between <body> and </body> is where the HTML document's visible content is located.

In Notepad, type or copy some HTML.

<!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>

Step 3: Save the HTML Page

Save the file on your computer.

Select File > Save as in the Notepad menu.

Name the file "index.htm" or any other name ending with htm.

UTF-8 is the preferred encoding for HTML files.

ANSI encoding covers US and Western European characters only.

NB: You can use either .htm or .html as file extension. There is no difference, it is up to you.

Step 4: View HTML Page in Your Browser

Open the saved HTML file in your favorite browser. The result will look much like this:

NB: To open a file in a browser, double click on the file, or right-click, and choose open with.

HTML Headings

The <h1> to h6> tags are used to define HTML headings:

The most significant heading is defined by <h1>. The least significant heading is designated as <h6>.

You should, as you would in MS Word, place the relevant text and photos after each heading.

<!DOCTYPE html>

<html>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

</body>

</html>

NB:Browsers automatically add some empty space (a margin) before and after each heading

Headings Are Important

Only use HTML headers as headings. Avoid using headers to enlarge or bold text.

Search engines index the structure and content of your web pages using the headers.

Users scan the headlines on your website. Using headers to display the document's structure is crucial.

The primary headings, or h1, should come first, then h2 headings, h3 headings, and so on.

HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

<!DOCTYPE html>

<html>

<body>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

</body>

</html>

HTML Links

HTML links are defined with the <a> tag:

<!DOCTYPE html>

<html>

<body>

<a href="http://www.noogul.org">This is a link</a>

</body>

</html>

The link address is specified in the href attribute.

Attributes are used to provide additional information about HTML elements.

HTML Images

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), and size (width and height) are provided as attributes:

<!DOCTYPE html>

<html>

<body>

<img src="logo.jpg" alt="noogul.org" width="104" height="142">

</body>

</html>

1.3.6 HTML Elements

HTML elements are written with a start tag, with an end tag, with the content in between:

<tagname>content</tagname>

The HTML element is everything from the start tag to the end tag:

<p>My first HTML paragraph.</p>

Start tagElement contentEnd tag<h1>My First Heading</h1><p>My first paragraph.

---ENDE DER LESEPROBE---