We are still actively working on the spam issue.

Difference between revisions of "HTML"

From InstallGentoo Wiki
Jump to: navigation, search
m (How it works: fix up)
(How it works)
 
(9 intermediate revisions by 3 users not shown)
Line 1: Line 1:
The '''Hypertext Markup Language''' is a common code system created by [[Tim Burners-Lee]] to render documents over the [[Internet]]. It was a primary part of the [[W3C|W3]] Project. Originally based off [[SGML]], HTML v5 removed the "esoteric" SGML code deceleration, making it simpler.  
+
The '''Hypertext Markup Language''' is a common code system created by [[Tim Berners-Lee]] to render documents over the Internet. It was a primary part of the [[W3C|W3]] Project. Originally based off [[SGML]], HTML5 removed the "esoteric" SGML code deceleration, making it simpler.  
 
 
  
 
== History ==
 
== History ==
Line 7: Line 6:
 
== How it works ==
 
== How it works ==
 
This is a simple HTML5 page. It does not follow a standard indentation style to emphasize each separate element
 
This is a simple HTML5 page. It does not follow a standard indentation style to emphasize each separate element
<pre>
+
{{bc|<nowiki>
 +
<!-- This is an HTML Comment -->
 
<!DOCTYPE html> <!-- The HTML5 simplified document type. Previously it was more complex -->
 
<!DOCTYPE html> <!-- The HTML5 simplified document type. Previously it was more complex -->
  
<html lang="en_us">
+
<html lang="en-US"> <!-- the en-US part is technically optional, but the W3C heavily recommends putting the lang in the second HTML deceleration, for international purposes -->
  
 
<head> <!-- The head element contains pre-load information -->
 
<head> <!-- The head element contains pre-load information -->
  
<meta charset="UTF-8/> <!-- This declares the page to be rendered in UTF-8. Prior to HTML5, it was more complex -->
+
<meta charset="UTF-8"/> <!-- This declares the page to be rendered in UTF-8. Prior to HTML5, it was more complex -->
 +
 
 +
<meta description="author" content="Install Gentoo Wiki"/> <!-- Optional but still nice -->
  
 
<title>Example Page</title>
 
<title>Example Page</title>
 +
 +
<link rel="stylesheet" type="text/css" href="/style.css"/> <!-- Link to a [[CSS]] File. Optional but you probably want it -->
  
 
</head>
 
</head>
Line 53: Line 57:
 
really love it!</p>
 
really love it!</p>
  
<p>HELLO<br/> WORLD</p> <!-- This breaks the paragraph to a single line -->
+
<p>HELLO<br/>WORLD</p> <!-- This breaks the paragraph to a single line -->
  
 
</article>
 
</article>
Line 61: Line 65:
 
<footer> <!-- An HTML5 Semantic Element -->
 
<footer> <!-- An HTML5 Semantic Element -->
  
<small><address>&copy;2015 YOUR NAME HERE CC-BY-SA 4.0 Int. and GNU GPL v3</address></small> <!-- A standard, basic footer -->
+
<small><address>&copy;2015 <a href="//wiki.installgentoo.com">Install Gentoo Wiki</a> CC0</address></small> <!-- A standard, basic footer -->
  
 
</footer>
 
</footer>
Line 68: Line 72:
  
 
</html> <!-- Note: Used to close the html lang="en-US", not the document-type deceleration -->
 
</html> <!-- Note: Used to close the html lang="en-US", not the document-type deceleration -->
</pre>
+
</nowiki>}}
  
 
This is a very basic example. To actually make a page, you need much more than basic HTML. You need [[CSS]], and a lot of other stuff, like (maybe) [[JavaScript]].
 
This is a very basic example. To actually make a page, you need much more than basic HTML. You need [[CSS]], and a lot of other stuff, like (maybe) [[JavaScript]].
 +
 +
Please also note that reguardless of the system the file is hosted on, HTML uses the standard [[UNIX]] filesystem addresses. This means if you use [[Windows|Windon't]], "/" is the root directory and not "C:\\". You can also use "../" to reference a directory above the current, though this is discouraged. When linking URLs, it is recommended to use "//" instead of "https://" '''unless''' it will break due to the linked page not having a [[Encryption#Web Encryption|SSL]] version of the site. By using "//", the link will redirect to the version of [[HTTP]] that your site uses. This means that if your site is http://www.example.com, the "//" link will go to http://www.example.org. If your site is https://www.example.org, the "//" link will go to https://www.example.com
 +
 +
[[Category: Programming languages]]
 +
[[Category: Markup languages]]
 +
[[Category: Terms]]
 +
[[Category: File formats]]

Latest revision as of 01:21, 21 March 2019

The Hypertext Markup Language is a common code system created by Tim Berners-Lee to render documents over the Internet. It was a primary part of the W3 Project. Originally based off SGML, HTML5 removed the "esoteric" SGML code deceleration, making it simpler.

History

Tim Berners-Lee was working at CERN (kinda like the German Skynet, mixed with MIT, and a little bit of sci-fi), he noticed that the method in which they were transferring documents was abysmal. He then crated a new transfer system, allowing plain-text documents to be transfered. He then noticed that plain-text was shit for what they were doing. So then he created HTML 1. Then HTML2. Then HTML3. Then HTML4. Then HTML4.01. HTML 4.01 was finalized in 1997, and became the universal standard until 2014, when HTML5 became public.

How it works

This is a simple HTML5 page. It does not follow a standard indentation style to emphasize each separate element

<!-- This is an HTML Comment -->
<!DOCTYPE html> <!-- The HTML5 simplified document type. Previously it was more complex -->

<html lang="en-US"> <!-- the en-US part is technically optional, but the W3C heavily recommends putting the lang in the second HTML deceleration, for international purposes -->

<head> <!-- The head element contains pre-load information -->

<meta charset="UTF-8"/> <!-- This declares the page to be rendered in UTF-8. Prior to HTML5, it was more complex -->

<meta description="author" content="Install Gentoo Wiki"/> <!-- Optional but still nice -->

<title>Example Page</title>

<link rel="stylesheet" type="text/css" href="/style.css"/> <!-- Link to a [[CSS]] File. Optional but you probably want it -->

</head>

<body> <!-- This starts the actual page -->

<header> <!-- An HTML5 semantic element, allowing alignment of the page. Previously, semantic elements did not exist -->

<h1>Example page!</h1> <!-- A level 1 header -->

</header>

<main> <!-- Another HTML5 Semantic Element -->

<section> <!-- Another HTML5 Semantic Element. Note how we did not close the main yet -->

<h2>My First Section</h2> <!-- Level 2 header -->

<article> <!-- Another HTML5 Semantic Element. Note how we did not close the section yet -->

<aside> <!-- An HTML5 Semantic Element, used for figures in the side of the element -->

<figure> <!-- An HTML5 Element, for the creation of a figure -->

<img src="/assets/example.png" alt="This is fallback text for a picture"/> <!-- An embedded image -->

<figcaption>Fig. 1: an example photograph</figcaption> <!-- An HTML5 element used for the caption of a figure -->

</figure>

</aside>

<h2>A great day to code:</h2>

<p>This is a great sample of an html code. I love it so much, and I just <!-- Paragraph. Note how a line break does not effect it. If you wish to break, do <br/> -->
really love it!</p>

<p>HELLO<br/>WORLD</p> <!-- This breaks the paragraph to a single line -->

</article>

</section>

<footer> <!-- An HTML5 Semantic Element -->

<small><address>©2015 <a href="//wiki.installgentoo.com">Install Gentoo Wiki</a> CC0</address></small> <!-- A standard, basic footer -->

</footer>

</body>

</html> <!-- Note: Used to close the html lang="en-US", not the document-type deceleration -->

This is a very basic example. To actually make a page, you need much more than basic HTML. You need CSS, and a lot of other stuff, like (maybe) JavaScript.

Please also note that reguardless of the system the file is hosted on, HTML uses the standard UNIX filesystem addresses. This means if you use Windon't, "/" is the root directory and not "C:\\". You can also use "../" to reference a directory above the current, though this is discouraged. When linking URLs, it is recommended to use "//" instead of "https://" unless it will break due to the linked page not having a SSL version of the site. By using "//", the link will redirect to the version of HTTP that your site uses. This means that if your site is http://www.example.com, the "//" link will go to http://www.example.org. If your site is https://www.example.org, the "//" link will go to https://www.example.com