2016-09-03 20:30:53 +03:00
|
|
|
---
|
|
|
|
|
language: html
|
2018-03-03 08:51:48 +03:00
|
|
|
filename: learnhtml.txt
|
2016-09-03 20:30:53 +03:00
|
|
|
contributors:
|
|
|
|
|
- ["Christophe THOMAS", "https://github.com/WinChris"]
|
|
|
|
|
translators:
|
|
|
|
|
- ["Robert Steed", "https://github.com/robochat"]
|
|
|
|
|
---
|
|
|
|
|
|
2018-10-28 20:15:17 +03:00
|
|
|
HTML stands for HyperText Markup Language.
|
|
|
|
|
|
2016-11-01 19:05:01 +03:00
|
|
|
It is a language which allows us to write pages for the world wide web.
|
2018-10-28 20:15:17 +03:00
|
|
|
It is a markup language, it enables us to write webpages using code to indicate
|
|
|
|
|
how text and data should be displayed. In fact, html files are simple text
|
|
|
|
|
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 20:30:53 +03:00
|
|
|
|
2018-10-28 20:15:17 +03: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 20:30:53 +03:00
|
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<!-- Comments are enclosed like this line! -->
|
|
|
|
|
|
2018-10-28 20:15:17 +03:00
|
|
|
<!--
|
|
|
|
|
Comments
|
|
|
|
|
can
|
|
|
|
|
span
|
|
|
|
|
multiple
|
|
|
|
|
lines!
|
|
|
|
|
-->
|
|
|
|
|
|
2016-09-03 20:30:53 +03:00
|
|
|
<!-- #################### The Tags #################### -->
|
2018-10-28 20:15:17 +03:00
|
|
|
|
2016-09-03 20:30:53 +03:00
|
|
|
<!-- Here is an example HTML file that we are going to analyse. -->
|
|
|
|
|
|
2018-10-28 20:15:17 +03:00
|
|
|
|
2016-09-03 20:30:53 +03:00
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>My Site</title>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<h1>Hello, world!</h1>
|
2018-10-28 20:15:17 +03:00
|
|
|
<a href="http://codepen.io/anon/pen/xwjLbZ">
|
|
|
|
|
Come look at what this shows
|
|
|
|
|
</a>
|
2016-09-03 20:30:53 +03: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 20:15:17 +03:00
|
|
|
<!--
|
|
|
|
|
An HTML file always starts by indicating to the browser that the page is HTML.
|
|
|
|
|
-->
|
2016-09-03 20:30:53 +03: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 20:15:17 +03:00
|
|
|
<!--
|
|
|
|
|
The header contains some description and additional information which are not
|
|
|
|
|
displayed; this is metadata.
|
|
|
|
|
-->
|
2016-09-03 20:30:53 +03:00
|
|
|
|
|
|
|
|
<head>
|
2018-10-28 20:15:17 +03: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 20:30:53 +03: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 20:15:17 +03: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 20:30:53 +03:00
|
|
|
<p>This is another paragraph.</p>
|
2018-10-28 20:15:17 +03: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 20:30:53 +03: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 20:15:17 +03: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 20:30:53 +03:00
|
|
|
|
|
|
|
|
<!-- It is also possible to create a table. -->
|
|
|
|
|
|
2018-10-28 20:15:17 +03: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 20:30:53 +03:00
|
|
|
<th>Second Header</th>
|
|
|
|
|
</tr>
|
2018-10-28 20:15:17 +03:00
|
|
|
|
2016-09-03 20:30:53 +03:00
|
|
|
<tr>
|
2018-10-28 20:15:17 +03:00
|
|
|
|
|
|
|
|
<!-- <td> allows us to create a table cell. -->
|
|
|
|
|
<td>first row, first column</td>
|
2016-09-03 20:30:53 +03:00
|
|
|
<td>first row, second column</td>
|
|
|
|
|
</tr>
|
2018-10-28 20:15:17 +03:00
|
|
|
|
2016-09-03 20:30:53 +03:00
|
|
|
<tr>
|
|
|
|
|
<td>second row, first column</td>
|
|
|
|
|
<td>second row, second column</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Usage
|
|
|
|
|
|
2018-10-28 20:15:17 +03:00
|
|
|
HTML is written in files ending with `.html` or `.htm`. The mime type is
|
|
|
|
|
`text/html`.
|
2016-09-03 20:30:53 +03:00
|
|
|
|
2018-10-28 20:15:17 +03:00
|
|
|
## To Learn More
|
2016-09-03 20:30:53 +03:00
|
|
|
|
|
|
|
|
* [wikipedia](https://en.wikipedia.org/wiki/HTML)
|
|
|
|
|
* [HTML tutorial](https://developer.mozilla.org/en-US/docs/Web/HTML)
|
|
|
|
|
* [W3School](http://www.w3schools.com/html/html_intro.asp)
|
