summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorDivay Prakash <divayprakash@users.noreply.github.com>2018-10-28 23:46:32 +0530
committerGitHub <noreply@github.com>2018-10-28 23:46:32 +0530
commit927c475c75a74dc869c8898f8aefb3b3a21e3af3 (patch)
tree97529c796cd87defef315740077f109bf9337b15
parent3098d3dc64d469c69761cf1b65613f1dd7cbd807 (diff)
parentf7242c2e6cb061c03619790827b0b8b3aab2b82f (diff)
Merge pull request #3343 from Kyle-Mendes/html-linelength
Enforcing 80 char linelength
Diffstat
-rw-r--r--html.html.markdown111
1 files changed, 83 insertions, 28 deletions
diff --git a/html.html.markdown b/html.html.markdown
index 04b9f501..4d225aca 100644
--- a/html.html.markdown
+++ b/html.html.markdown
@@ -7,25 +7,41 @@ translators:
- ["Robert Steed", "https://github.com/robochat"]
---
-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 +49,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 +62,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 +78,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 +96,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 +128,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 +165,10 @@ This article is concerned principally with HTML syntax and some useful tips.
## Usage
-HTML is written in files ending with `.html` or `.htm`. The mime type is `text/html`.
+HTML is written in files ending with `.html` or `.htm`. The mime type is
+`text/html`.
-## To Learn More
+## To Learn More
* [wikipedia](https://en.wikipedia.org/wiki/HTML)
* [HTML tutorial](https://developer.mozilla.org/en-US/docs/Web/HTML)