hello friends! new(ish)!
HTML: Difference between revisions
>Mrsnooze m (fixed ssl redlink) |
>Se7en1 |
||
| Line 10: | Line 10: | ||
<!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"> <!-- the en-US part is technically optional, but the W3C heavily recommends putting the | <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 --> | ||
| Line 65: | Line 65: | ||
<footer> <!-- An HTML5 Semantic Element --> | <footer> <!-- An HTML5 Semantic Element --> | ||
<small><address>©2015 <a href="//wiki.installgentoo.com">Install Gentoo Wiki</a> | <small><address>©2015 <a href="//wiki.installgentoo.com">Install Gentoo Wiki</a> CC0</address></small> <!-- A standard, basic footer --> | ||
</footer> | </footer> | ||
Latest revision as of 00: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