Getting started with HTML E-Book

Rémy Lentzner

• Herausgeber: Remylent
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Französisch
• Veröffentlichungsjahr: 2021

Seitenzahl: 75

Beschreibung

Welcome to HTML programming. This book is intended for people who wish to discover this language in order to create Internet pages. HTML or HyperText Markup Language has a special structure that uses tags like , , or . You will learn how to write these tags and how to organize them in a progressive way, carrying out several workshops.
In this book, you will also study the styles that are fundamental for the presentation of texts, titles, images, frames, tables, menus or lists. Web pages often offer forms that contain fields to be filled in. Interactions with the Internet user are controlled using JavaScript, which is fully integrated into HTML. Some examples of JavaScript functions will help you to understand this interactivity better within a web page.
Enjoy your reading.

ABOUT THE AUTHOR

Rémy Lentzner has been a computer trainer since 1985. Specialized in mastering office automation tools, he supports companies in the professional training of their employees. Self-taught, he has fifteen computer books to his credit.

Leseprobe

REMY LENTZNER

getting started WITH html

French original title : Bien débuter avec HTML

EDITIONS REMYLENT, Paris, 1ère édition, 2021

R.C.S. 399 397 892 Paris

25 rue de la Tour d’Auvergne - 75009 Paris

[email protected]

www.REMYLENT.FR

ISBN EPUB : 9782490275410

The Intellectual Property Code prohibits copies or reproductions intended for collective use. Any representation or reproduction in whole or in part by any means whatsoever, without the consent of the author or his successors in title or cause, is unlawful and constitutes an infringement, pursuant to articles L.335-2 and following of Intellectual Property Code.

This book is dedicated to Anna, Hélène, Isabelle and Tama.

I could not have written it without their support, advice, encouragements and proofreading.

Graphic illlustration : BRUNO CONQUET

INTRODUCTION

This book is intended for beginners who want to learn how to create web pages writing HTML code in the most efficient way. When you browse web pages, information is arranged in a certain way according to the subject you have chosen. For example, when you consult your bank account, access is regulated by a username and password. The moment you click on a button to validate these two pieces of information, a mechanism transfers them to a server that will test the correct account information. You will then be able to see your bank entries. The device that makes the web page appear uses a very specific language called HTML or Hyper Text Markup Language. It is a language that has evolved along with Internet browsers. Today, the latest version is HTML5. When tests are carried out on a page, for example to check the information filled in, the JavaScript language is used, which is fully integrated into HTML.

HTML is a structured language with rules defined by a consortium called the World Wide Web or W3C, an organization created to set standards on the Internet.

In order for a web page to show an image, an <image> tag is necessary. These tags tell the browser how to display the document. When you view a Web page, you do not see the tags as they are. The browser interprets them and displays the result.

As you read this book, you will gradually discover the tags that allow you to structure the Web page content. You will learn how to separate the data presentation using the style mechanism.

This separation device is very important and the following workshops within this book allow you to learn basic HTML code.

Getting started with HTML means, first and foremost, understanding the language organization, but also doing practical exercises to get your hands on the engine. HTML is a perfectly accessible language, so long as you regularly spend time on it.

This book has five chapters :

Chapter 1 deals with the language structure, the tags, the styles and how to write code.

Chapter 2 looks at styles that are fundamental to formatting text in the page and separating the data presentation.

Chapter 3 explains techniques for creating forms, how to present input fields using styles, and different ways of validating the form. You will be able to discover the JavaScript language that facilitates controls.

Chapter 4 details the use of events that can be captured at the time the information is entered, in a web page HTML object.

Chapter 5 concludes this book with some layout and menu examples.

I hope this book will allow you to understand the structure and the HTML pages operation better.

Please feel free to contact me if you have any comments or questions about this book at REMYLENT@GMAIL. COM.

I will not fail to answer you.

Enjoy your reading.

The author

In the same collection

Improve your PivotTables with Excel

Improve your skills with Google Sheets

Programming macros with Google Sheets

Table of contents

Chapter 1 HTML basics

1.1 A special structure

1.1.1 Writing and testing your first HTML code

1.1.2 What about Internet protocols ?

1.1.3 Tags in a tree

1.1.4 Where can I find information about tags?

1.1.5 Some examples without formatting

1.1.6 Tables

1.1.7 A list with bullet points

1.1.8 Lists with numbers

1.1.9 Embedded lists

1.1.10 Inserting an image

1.1.11 Inserting an hyperlink upon an image

1.1.12 Targeting a link into a new window

1.1.13 Setting a default folder with the <base> tag

1.2 The frames

1.2.1 Most common attributes

1.2.2 Workshops : Frame construction

Workshop 1: An image in a frame

Workshop 2: Enlarge the frame

Workshop 3: A red border

Workshop 4: Three frames together in one page

1.3 Displaying the code

Chapter 2 CSS Style Sheet

2.1 Styles and Cascading Style Sheet

2.2 Examples of styles

2.2.1 An HTML page without style sheets

2.2.2 An HTML page with a styles group

2.2.3 An HTML page linked to an external CSS style sheet

2.3 Style attributes

2.3.1 Color attributes

2.3.2 Some attributes

2.3.3 Example 1

2.3.4 Avoiding programming errors

2.4 Cascading and style hierarchy

2.4.1 The cascade

2.4.2 Inheritance

2.4.3 Creating a menu

Chapter 3 Forms

3.1 Creating a form

3.2 The content of an HTML form

3.2.1 Tags that create elements

3.2.2 The <input> tag

3.2.3 Training

Workshop 1 : A simplest possible form

Workshop 2 : A form with a JavaScript function

Workshop 3 : A form with styles

Workshop 4 : Calculate your BMI

Workshop 5 : A form that calculates your age

Workshop 6 : Working with checkboxes

Workshop 7 : Radio Button groups

3.2.4 The <select> tag to choose from a list

3.2.5 Validating the form with POST

Chapter 4 Events

4.1 What is an event ?

4.1.1 Keyboard events

4.1.2 Mouse type events

4.1.3 The passive listener addEventListener

4.1.4 Events applied to items

4.1.5 Events applied to the body tag

4.1.6 Calculate with the onfocus event

Chapter 5 Lay out

5.1 The structure of a web page

5.1.1 One page, two columns, header and footer

5.1.2 A web page with menus

Workshop 1 : A horizontal menu

Workshop 2 : Menu options framed

Workshop 3 : A vertical menu

Workshop 4 : A menu and some images

5.1.3 A menu with a list

5.1.4 Embedded lists

5.2 Hierarchical lists

Chapter 1 HTML basics

Learning any language requires knowledge of rules and syntax. HTML works in blocks defined by embedded labels that form elements. These blocks define the structure and the layout of the Web page.

1.1 A special structure

A Web page is a structured HTML document, as shown in figure 1.1. We can see that all the tags are wrapped by < and > signs. For example, the element that corresponds to the body of the text starts with <body> and ends with </body>.

Figure 1.1 : Embedding html tags

This tagging is necessary because computers do not know whether a text will be a title, a header, a paragraph or a summary. Without coding, the web browser can't display the text to look like the actual desired document.

The HTML language makes a very important distinction : the structure of the elements and the lay out. When you define a text that should be considered as a title, with the tags <title> and </title>, you don’t say anything about its presentation. You do not specify whether the title will be in a specific font with a given size. These presentation characteristics are defined elsewhere in another structure called styles and defined between the <style> and </style> tags. The expression Style sheets is often referred to, when styles are embedded in an external file.

When you browse the Internet, you type an address into the browser to access a specific page. For example, if you want to consult train schedules in France, you can access the SNCF portal. This web page was created by developers and is stored on a server accessible to all. The page therefore has information (data) and a lay out. For instance, there may be a menu with different choices, advertisements and buttons which you can click on to search for specific information. At the time the web page was created, the data was separated from the presentation to facilitate the layout update.

This distinction between structure and presentation is very important and allows the HTML code to be read in a multi-platform environment. For example, a web page can be read on a Mac, a PC, a Unix system, a Linux system or others.

Similarly, regarding browsers, you can work with Google Chrome, Safari, Opera, Internet Explorer, Firefox, and so on. The information contained on the web pages must be able to be displayed regardless of the medium, which was not always the case in the past. The pages did not display well from one browser to another, the presentation was not perfect, or the pages did not automatically fit the width of the screen.

Thanks to the improvement of the HTML language and the external components that can be added, these technical problems are definitively forgotten. Today the Internet pages are not only present on computers, but also on tablets, iphones and smartphones. The data presentation code is separated from the structure code better and HTML pages are now more robust with tags offering many features.