HTML / CSS / XML / LESS

Image

HTML is the basic markup language for web development, created in 1993.

It essentially allows you to create Web pages, even multimedia content .

Code Examples

We start with very simple codes. The more you progress, page after page, the more sophisticated the scripts will be.

C 0001 - Hello World !

Say hello...

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Hello World !</h1>
<p>This is a paragraph</p>
</body>
</html>

 

⇒ See the results

Reproduce this code, choosing one of the compilers below (♦ See DEF.) (don't copy-paste! It would be too easy). They have the same function, just pick up one according to your preferences.

When you copy your code, replace the existing code (by default) with your own.

Warning ! For some of these compilers, you might have to choose the programming language yourself, in a specific menu which is offered to you. Of course, don't forget to click on RUN !

C 0002 - Playing with colors

Use colors...

<!DOCTYPE html>
<html>
<body>
<h3 style="color:blue;">TITLE</h3>
<p style="color:black;">Lorem ipsum dolor sit amet</p>
</body>
</html>

 

⇒ See the results

Reproduce this code, choosing one of the compilers below (♦ See DEF.) (don't copy-paste! It would be too easy). They have the same function, just pick up one according to your preferences.

When you copy your code, replace the existing code (by default) with your own.

Warning ! For some of these compilers, you might have to choose the programming language yourself, in a specific menu which is offered to you. Of course, don't forget to click on RUN !

C 0003 - Lists

Create a simple list...

<!DOCTYPE html>
<html>
<body>
<h1>Car List</h1>
<ul>  
<li>Rolls-Royce</li>
 
<li>Maserati</li>
 
<li>Ferrari</li>
</ul>  
</body>
</html>

 

⇒ See the results

Reproduce this code, choosing one of the compilers below (♦ See DEF.) (don't copy-paste! It would be too easy). They have the same function, just pick up one according to your preferences.

When you copy your code, replace the existing code (by default) with your own.

Warning ! For some of these compilers, you might have to choose the programming language yourself, in a specific menu which is offered to you. Of course, don't forget to click on RUN !

C 0004 - Create a form

A form with PHP processing...

<!DOCTYPE html>
<html>
<body>
<h3>Small Form</h3>
<form action="processing.php">
<label for="fname">FIRST NAME:</label>
<
br>
<input type="text" id="fname" name="fname" value="John">
<
br>
<label for="lname">NAME:</label>
<
br>
<input type="text" id="lname" name="lname" value="Smith">
<
br>
<
br>
<input type="submit" value="Submit">
</form>
<p>If you click on the Submit button, a PHP file will process the information submitted in this form (currently inactive)...</p>
</body>
</html>

 

⇒ See the results

Reproduce this code, choosing one of the compilers below (♦ See DEF.) (don't copy-paste! It would be too easy). They have the same function, just pick up one according to your preferences.

When you copy your code, replace the existing code (by default) with your own.

Warning ! For some of these compilers, you might have to choose the programming language yourself, in a specific menu which is offered to you. Of course, don't forget to click on RUN !

Info+

Creation
» Creation date: 1993
* Created by the World Wide Web Consortium/WHATWG
* Based on Standard Generalized Markup Language
* Open format

Practical cases

In order to train you, we add small programs every week to this section in order to keep you up to speed.

CASE 1

BASIC LEVEL

Editorial content on a basic page

This small program will allow you to develop editorial content in a classic HTML page, using CSS.

TRY

CASE 2

INTERMEDIATE LEVEL

Create a small website

This little kit will allow you to design a classic HTML website, then edit it online.

TRY

CASE 3

EXPERT LEVEL

Develop a CSS library, then work with PHP

Design and develop a library of files using CSS, to allow you to embellish an HTML website, then integrate PHP scripts linked to a MySQL database, into the body of these pages.

TRY
2021 (C) Fond of Code tm (protected trademark) - Reflex001 / Diego Piccini (da Todi).
All rights reserved. Protected editorial content (www.theethicalweb.com).

About Us...

About Us...
Reflex001

Web
Programming
Development

Main Topics

Main Topics

Legal/Support

Legal/Support
Image