summaryrefslogtreecommitdiffhomepage
path: root/html.html.markdown
diff options
context:
space:
mode:
authorDmitrii Kuznetsov <torgeek@gmail.com>2021-02-22 18:42:33 +0300
committerDmitrii Kuznetsov <torgeek@gmail.com>2021-02-22 18:42:33 +0300
commite09fefaa3e78c645c720c86391e3f96d257be8a9 (patch)
tree0ff8b235e3e707125e2b11d5268ad085832355cb /html.html.markdown
parentf4c740839d78f797e9cbcfa1eb0483ac0ea45501 (diff)
parentbc8bd2646f068cfb402850f7c0f9b1dbfe81e5a0 (diff)
Merge branch 'master' of https://github.com/torgeek/learnxinyminutes-docs
Diffstat (limited to 'html.html.markdown')
-rw-r--r--html.html.markdown116
1 files changed, 86 insertions, 30 deletions
diff --git a/html.html.markdown b/html.html.markdown
index b64cec33..b8212776 100644
--- a/html.html.markdown
+++ b/html.html.markdown
@@ -1,31 +1,48 @@
---
language: html
-filename: learnhtml.html
+filename: learnhtml.txt
contributors:
- ["Christophe THOMAS", "https://github.com/WinChris"]
translators:
- ["Robert Steed", "https://github.com/robochat"]
+ - ["Dimitri Kokkonis", "https://github.com/kokkonisd"]
---
-HTML stands for HyperText Markup Language.
+HTML stands for HyperText Markup Language.
+
It is a language which allows us to write pages for the world wide web.
-It is a markup language, it enables us to write 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.
+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.
-**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.
+**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.
```html
<!-- Comments are enclosed like this line! -->
+<!--
+ Comments
+ can
+ span
+ multiple
+ lines!
+-->
+
<!-- #################### The Tags #################### -->
-
+
<!-- Here is an example HTML file that we are going to analyse. -->
+
<!doctype html>
<html>
<head>
@@ -33,7 +50,9 @@ This article is concerned principally with HTML syntax and some useful tips.
</head>
<body>
<h1>Hello, world!</h1>
- <a href = "http://codepen.io/anon/pen/xwjLbZ">Come look at what this shows</a>
+ <a href="http://codepen.io/anon/pen/xwjLbZ">
+ Come look at what this shows
+ </a>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ul>
@@ -44,7 +63,9 @@ This article is concerned principally with HTML syntax and some useful tips.
</body>
</html>
-<!-- An HTML file always starts by indicating to the browser that the page is HTML. -->
+<!--
+ An HTML file always starts by indicating to the browser that the page is HTML.
+-->
<!doctype html>
<!-- After this, it starts by opening an <html> tag. -->
@@ -58,10 +79,17 @@ This article is concerned principally with HTML syntax and some useful tips.
<!-- Inside (between the opening and closing tags <html></html>), we find: -->
<!-- A header defined by <head> (it must be closed with </head>). -->
-<!-- The header contains some description and additional information which are not displayed; this is metadata. -->
+<!--
+ The header contains some description and additional information which are not
+ displayed; this is metadata.
+-->
<head>
- <title>My Site</title><!-- The tag <title> indicates to the browser the title to show in browser window's title bar and tab name. -->
+ <!--
+ The tag <title> indicates to the browser the title to show in browser
+ window's title bar and tab name.
+ -->
+ <title>My Site</title>
</head>
<!-- After the <head> section, we find the tag - <body> -->
@@ -69,13 +97,28 @@ This article is concerned principally with HTML syntax and some useful tips.
<!-- We must fill the body with the content to be displayed. -->
<body>
- <h1>Hello, world!</h1> <!-- The h1 tag creates a title. -->
- <!-- There are also subtitles to <h1> from the most important (h2) to the most precise (h6). -->
- <a href = "http://codepen.io/anon/pen/xwjLbZ">Come look at what this shows</a> <!-- a hyperlink to the url given by the attribute href="" -->
- <p>This is a paragraph.</p> <!-- The tag <p> lets us include text in the html page. -->
+ <!-- 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>
<p>This is another paragraph.</p>
- <ul> <!-- 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. -->
+
+ <!-- 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>
<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>
@@ -86,21 +129,33 @@ This article is concerned principally with HTML syntax and some useful tips.
<!-- But it is possible to add many additional types of HTML tags. -->
-<!-- To insert an image. -->
-<img src="http://i.imgur.com/XWG0O.gif"/> <!-- 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. -->
+<!-- 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"/>
<!-- It is also possible to create a table. -->
-<table> <!-- We open a <table> element. -->
- <tr> <!-- <tr> allows us to create a row. -->
- <th>First Header</th> <!-- <th> allows us to give a title to a table column. -->
+<!-- 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>
<th>Second Header</th>
</tr>
+
<tr>
- <td>first row, first column</td> <!-- <td> allows us to create a table cell. -->
+
+ <!-- <td> allows us to create a table cell. -->
+ <td>first row, first column</td>
<td>first row, second column</td>
</tr>
+
<tr>
<td>second row, first column</td>
<td>second row, second column</td>
@@ -111,9 +166,10 @@ This article is concerned principally with HTML syntax and some useful tips.
## Usage
-HTML is written in files ending with `.html`.
-
-## To Learn More
+HTML is written in files ending with `.html` or `.htm`. The mime type is
+`text/html`.
+**HTML is NOT a programming language**
+## To Learn More
* [wikipedia](https://en.wikipedia.org/wiki/HTML)
* [HTML tutorial](https://developer.mozilla.org/en-US/docs/Web/HTML)