diff options
Diffstat (limited to 'html.html.markdown')
| -rw-r--r-- | html.html.markdown | 116 |
1 files changed, 86 insertions, 30 deletions
diff --git a/html.html.markdown b/html.html.markdown index 3c855b5c..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 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) |