2016-09-03 17:30:53 +00:00
|
|
|
---
|
|
|
|
|
language: html
|
2018-03-03 05:51:48 +00:00
|
|
|
filename: learnhtml.txt
|
2016-09-03 17:30:53 +00:00
|
|
|
contributors:
|
|
|
|
|
- ["Christophe THOMAS", "https://github.com/WinChris"]
|
|
|
|
|
translators:
|
|
|
|
|
- ["Robert Steed", "https://github.com/robochat"]
|
2019-08-03 18:25:27 +00:00
|
|
|
- ["Dimitri Kokkonis", "https://github.com/kokkonisd"]
|
2016-09-03 17:30:53 +00:00
|
|
|
---
|
|
|
|
|
|
2022-01-03 16:40:58 +00:00
|
|
|
HTML stands for Hypertext Markup Language.
|
2018-10-28 17:15:17 +00:00
|
|
|
|
2022-01-03 16:40:58 +00:00
|
|
|
It is a language which allows us to write pages for the World Wide Web.
|
2018-10-28 17:15:17 +00:00
|
|
|
It is a markup language, it enables us to write webpages using code to indicate
|
2022-01-03 16:40:58 +00:00
|
|
|
how text and data should be displayed. In fact, HTML files are simple text
|
2018-10-28 17:15:17 +00:00
|
|
|
files.
|
|
|
|
|
|
|
|
|
|
What is this markup? It is a method of organising the page's data by
|
|
|
|
|
surrounding it with opening tags and closing tags. This markup serves to give
|
|
|
|
|
significance to the text that it encloses. Like other computer languages, HTML
|
|
|
|
|
has many versions. Here we will talk about HTML5.
|
2016-09-03 17:30:53 +00:00
|
|
|
|
2018-10-28 17:15:17 +00:00
|
|
|
**NOTE :** You can test the different tags and elements as you progress through
|
|
|
|
|
the tutorial on a site like [codepen](http://codepen.io/pen/) in order to see
|
|
|
|
|
their effects, understand how they work and familiarise yourself with the
|
|
|
|
|
language. This article is concerned principally with HTML syntax and some
|
|
|
|
|
useful tips.
|
2016-09-03 17:30:53 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<!-- Comments are enclosed like this line! -->
|
|
|
|
|
|
2018-10-28 17:15:17 +00:00
|
|
|
<!--
|
|
|
|
|
Comments
|
|
|
|
|
can
|
|
|
|
|
span
|
|
|
|
|
multiple
|
|
|
|
|
lines!
|
|
|
|
|
-->
|
|
|
|
|
|
2016-09-03 17:30:53 +00:00
|
|
|
<!-- #################### The Tags #################### -->
|
2018-10-28 17:15:17 +00:00
|
|
|
|
2016-09-03 17:30:53 +00:00
|
|
|
<!-- Here is an example HTML file that we are going to analyse. -->
|
|
|
|
|
|
2018-10-28 17:15:17 +00:00
|
|
|
|
2016-09-03 17:30:53 +00:00
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>My Site</title>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<h1>Hello, world!</h1>
|
2018-10-28 17:15:17 +00:00
|
|
|
<a href="http://codepen.io/anon/pen/xwjLbZ">
|
|
|
|
|
Come look at what this shows
|
|
|
|
|
</a>
|
2016-09-03 17:30:53 +00:00
|
|
|
<p>This is a paragraph.</p>
|
|
|
|
|
<p>This is another paragraph.</p>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>This is an item in a non-enumerated list (bullet list)</li>
|
|
|
|
|
<li>This is another item</li>
|
|
|
|
|
<li>And this is the last item on the list</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
|
2018-10-28 17:15:17 +00:00
|
|
|
<!--
|
|
|
|
|
An HTML file always starts by indicating to the browser that the page is HTML.
|
|
|
|
|
-->
|
2016-09-03 17:30:53 +00:00
|
|
|
<!doctype html>
|
|
|
|
|
|
|
|
|
|
<!-- After this, it starts by opening an <html> tag. -->
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<!-- that will be closed at the end of the file with </html>. -->
|
|
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
<!-- Nothing should appear after this final tag. -->
|
|
|
|
|
|
|
|
|
|
<!-- Inside (between the opening and closing tags <html></html>), we find: -->
|
|
|
|
|
|
|
|
|
|
<!-- A header defined by <head> (it must be closed with </head>). -->
|
2018-10-28 17:15:17 +00:00
|
|
|
<!--
|
|
|
|
|
The header contains some description and additional information which are not
|
|
|
|
|
displayed; this is metadata.
|
|
|
|
|
-->
|
2016-09-03 17:30:53 +00:00
|
|
|
|
|
|
|
|
<head>
|
2018-10-28 17:15:17 +00:00
|
|
|
<!--
|
|
|
|
|
The tag <title> indicates to the browser the title to show in browser
|
|
|
|
|
window's title bar and tab name.
|
|
|
|
|
-->
|
|
|
|
|
<title>My Site</title>
|
2016-09-03 17:30:53 +00:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<!-- After the <head> section, we find the tag - <body> -->
|
|
|
|
|
<!-- Until this point, nothing described will show up in the browser window. -->
|
|
|
|
|
<!-- We must fill the body with the content to be displayed. -->
|
|
|
|
|
|
|
|
|
|
<body>
|
2018-10-28 17:15:17 +00:00
|
|
|
<!-- The h1 tag creates a title. -->
|
|
|
|
|
<h1>Hello, world!</h1>
|
|
|
|
|
<!--
|
|
|
|
|
There are also subtitles to <h1> from the most important (h2) to the most
|
|
|
|
|
precise (h6).
|
|
|
|
|
-->
|
|
|
|
|
|
|
|
|
|
<!-- a hyperlink to the url given by the attribute href="" -->
|
|
|
|
|
<a href="http://codepen.io/anon/pen/xwjLbZ">
|
|
|
|
|
Come look at what this shows
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
<!-- The tag <p> lets us include text in the html page. -->
|
|
|
|
|
<p>This is a paragraph.</p>
|
2016-09-03 17:30:53 +00:00
|
|
|
<p>This is another paragraph.</p>
|
2018-10-28 17:15:17 +00:00
|
|
|
|
|
|
|
|
<!-- The tag <ul> creates a bullet list. -->
|
|
|
|
|
<!--
|
|
|
|
|
To have a numbered list instead we would use <ol> giving 1. for the first
|
|
|
|
|
element, 2. for the second, etc.
|
|
|
|
|
-->
|
|
|
|
|
<ul>
|
2016-09-03 17:30:53 +00:00
|
|
|
<li>This is an item in a non-enumerated list (bullet list)</li>
|
|
|
|
|
<li>This is another item</li>
|
|
|
|
|
<li>And this is the last item on the list</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
<!-- And that's it, creating an HTML file can be simple. -->
|
|
|
|
|
|
|
|
|
|
<!-- But it is possible to add many additional types of HTML tags. -->
|
|
|
|
|
|
2018-10-28 17:15:17 +00:00
|
|
|
<!-- The <img /> tag is used to insert an image. -->
|
|
|
|
|
<!--
|
|
|
|
|
The source of the image is indicated using the attribute src=""
|
|
|
|
|
The source can be an URL or even path to a file on your computer.
|
|
|
|
|
-->
|
|
|
|
|
<img src="http://i.imgur.com/XWG0O.gif"/>
|
2016-09-03 17:30:53 +00:00
|
|
|
|
|
|
|
|
<!-- It is also possible to create a table. -->
|
|
|
|
|
|
2018-10-28 17:15:17 +00:00
|
|
|
<!-- We open a <table> element. -->
|
|
|
|
|
<table>
|
|
|
|
|
|
|
|
|
|
<!-- <tr> allows us to create a row. -->
|
|
|
|
|
<tr>
|
|
|
|
|
|
|
|
|
|
<!-- <th> allows us to give a title to a table column. -->
|
|
|
|
|
<th>First Header</th>
|
2016-09-03 17:30:53 +00:00
|
|
|
<th>Second Header</th>
|
|
|
|
|
</tr>
|
2018-10-28 17:15:17 +00:00
|
|
|
|
2016-09-03 17:30:53 +00:00
|
|
|
<tr>
|
2018-10-28 17:15:17 +00:00
|
|
|
|
|
|
|
|
<!-- <td> allows us to create a table cell. -->
|
|
|
|
|
<td>first row, first column</td>
|
2016-09-03 17:30:53 +00:00
|
|
|
<td>first row, second column</td>
|
|
|
|
|
</tr>
|
2018-10-28 17:15:17 +00:00
|
|
|
|
2016-09-03 17:30:53 +00:00
|
|
|
<tr>
|
|
|
|
|
<td>second row, first column</td>
|
|
|
|
|
<td>second row, second column</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
2024-04-21 08:16:48 +00:00
|
|
|
|
|
|
|
|
<!-- ################ Additional Tags ################# -->
|
|
|
|
|
|
|
|
|
|
<!-- In addition to the first example, here are some more common HTML element tags. -->
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<!-- <meta> describes metadata. -->
|
|
|
|
|
<!-- We define the content-type and the viewport. -->
|
|
|
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
Enhance your HTML with JavaScript and CSS.
|
|
|
|
|
Javascript allows interaction between the user and the page.
|
|
|
|
|
CSS (Cascading Style Sheet) tells how to display HTML elements in the browser.
|
|
|
|
|
-->
|
|
|
|
|
|
|
|
|
|
<!-- External JavaScript file -->
|
|
|
|
|
<script src='scripts.js'></script>
|
|
|
|
|
|
|
|
|
|
<!-- Inline JavaScript code -->
|
|
|
|
|
<script>
|
|
|
|
|
console.log('Hello world')
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<!-- External CSS file -->
|
|
|
|
|
<link href="styles.css" rel="stylesheet">
|
|
|
|
|
|
|
|
|
|
<!-- Inline CSS -->
|
|
|
|
|
<style>
|
|
|
|
|
html, body {
|
|
|
|
|
margin: 0px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<!-- <div> is a simple block container that can contains other elements. -->
|
|
|
|
|
<!-- <br> adds a line break. -->
|
|
|
|
|
<div>
|
|
|
|
|
First line.<br>Second line.<br>
|
|
|
|
|
<i>italics</i> <b>bold</b> <u>underline</u>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- An HTML form. -->
|
|
|
|
|
<form method="post" action="action.php" id="myForm">
|
|
|
|
|
Post title: <input name="name" type="text"><br>
|
|
|
|
|
Category:
|
|
|
|
|
<select name="category">
|
|
|
|
|
<option selected="selected" value="general">General</option>
|
|
|
|
|
<option value="js">Javascript</option>
|
|
|
|
|
<option value="html">HTML</option>
|
|
|
|
|
</select><br>
|
|
|
|
|
Post language:
|
|
|
|
|
<label><input checked="checked" name="lang" type="radio" value="markdown"> Markdown</label>
|
|
|
|
|
<label><input name="lang" type="radio" value="html"> HTML</label><br>
|
|
|
|
|
<textarea name="post">Post content</textarea><br>
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
<button type="submit" form="myForm" value="Submit">Submit</button>
|
|
|
|
|
|
|
|
|
|
<!-- Iframe embeds another HTML page into the current one. -->
|
|
|
|
|
<iframe src="https://www.openstreetmap.org/export/embed.html">
|
|
|
|
|
</iframe>
|
|
|
|
|
|
|
|
|
|
|
2016-09-03 17:30:53 +00:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Usage
|
|
|
|
|
|
2018-10-28 17:15:17 +00:00
|
|
|
HTML is written in files ending with `.html` or `.htm`. The mime type is
|
|
|
|
|
`text/html`.
|
2019-02-15 09:44:59 +00:00
|
|
|
**HTML is NOT a programming language**
|
2018-10-28 17:15:17 +00:00
|
|
|
## To Learn More
|
2016-09-03 17:30:53 +00:00
|
|
|
|
2022-01-03 16:40:58 +00:00
|
|
|
* [Wikipedia](https://en.wikipedia.org/wiki/HTML)
|
|
|
|
|
* [HTML Tutorial](https://developer.mozilla.org/en-US/docs/Web/HTML)
|
|
|
|
|
* [W3Schools](http://www.w3schools.com/html/html_intro.asp)
|
