diff options
Diffstat (limited to 'html.html')
| -rw-r--r-- | html.html | 200 |
1 files changed, 0 insertions, 200 deletions
diff --git a/html.html b/html.html deleted file mode 100644 index 6ff3f73..0000000 --- a/html.html +++ /dev/null @@ -1,200 +0,0 @@ -<!DOCTYPE html> -<html lang=en> - <head> - <title>Make a Simple Webpage – LandChad.net</title> - <meta charset="utf-8"/> - <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> - <link rel='stylesheet' type='text/css' href='style.css'> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <link rel='alternate' type='application/rss+xml' title='Land Chad RSS' href='/rss.xml'> - </head> -<body> - <header><h1>Make a Simple Webpage</h1></header> - <nav></nav> - <main> - <p> - We now have a webpage that's actually on the real-live internet! - You've already made it! - Now the only issue is putting what you want on your website. - </p> - - <p> - In this little series, we'll overview the basics of HTML and CSS, - the two important languages that will allow you to make a stylish multi-page website. - We will start with HTML. - </p> - - <h2>HTML</h2> - - <p> - HTML is the <strong>h</strong>yper<strong>t</strong>ext <strong>m</strong>arkup <strong>l</strong>anguage. - It is the "language" that all webpages are written in so that all browsers can read and display them properly. - </p> - <p> - A <dfn>markup language</dfn> is <em>not</em> the same as a programming language: - Programming languages specify orders for a computer, while markup languages are ways of specifying the styling of text. - Markup languages are necessary because computers run on mere text, not colors, sizes, headers and other styling things. - </p> - - <p> - Let's understand what HTML is. - In <a href="nginx.html">a previous article</a>, we put this text in your website's <code>index.html</code>. - </p> - - <h3>Paragraphs</h3> - -<p> -Note how this HTML file appears as a webpage: -</p> - - - -<table class=cnp> - <tr> - <td> -<pre><code><!DOCTYPE html> -<h1>My website!</h1> -<p>This is my website. Thanks for stopping by!</p> -<p>Now my website is live!</p></code></pre> - </td> - <td> -<img src=pix/nginx-website.png alt="The webpage as it appears."> - </td> - </tr> -</table> - -<p> -The content between the <code><p></code> and <code></p></code> tag(s) is formatted as different paragraphs. -If you don't use these <code><p></code> tags, the text will not be formatted as separate paragraphs even if you write it as -multiple lines. -Observe if we add lines to the end of this file: -</p> - -<table class=cnp> - <tr> - <td> -<pre><code><!DOCTYPE html> -<h1>My website!</h1> -<p>This is my website. Thanks for stopping by!</p> -<p>Now my website is live!</p> -Here is some more text. -There are no paragraph tags on this stuff. -So it will all appear as one paragraph. -Despite being on multiple lines. - - -Even this!</code></pre> - </td> - <td> -<img src=pix/html-01.png alt="On p tags"> - </td> - </tr> -</table> - -<p> -This will seem strange at first, but this is the use of HTML as a markup -language: it allows you to style your document with tags and write it in whatever way is convenient. -</p> - -<p> -Let's learn more about what HTML can do. -</p> - - -<h3>Headings</h3> - -<p> -In addition to paragraphs (<code><p></code>), we can specify headings with inside <code><h1></h1></code> tags. -Heading tags are for your page's title and section headings in the document: -</p> - -<ul> - <li><code><h<strong>1</strong>></h<strong>1</strong>></code> – Main and largest headings</li> - <li><code><h<strong>2</strong>></h<strong>2</strong>></code> – Subheadings (smaller)</li> - <li><code><h<strong>3</strong>></h<strong>3</strong>></code> – Sub-subheadings (yet smaller)</li> - <li><code><h<strong>4</strong>></h<strong>4</strong>></code> – Etc., etc.</li> -</ul> - - -<table class=cnp> - <tr> - <td> -<pre><code><h1>This is a top-level heading.</h1> - -<p>Here is some paragraph text.</p> - -<p>And here is some more...</p> - -<h2>This is a subheading (h2)</h2> - -<p>And another paragraph.</p> - -<h2>And here is another subheading (Also an h2)</h2> - -<p>Etc. etc...</p></code></pre> - </td> - <td> -<img src=pix/html-02.png alt="On p and h# tags"> - </td> - </tr> -</table> - -<h4>A preview to CSS</h4> - -<p> -It is very important to use headings like this for your pages. - -Notice that on this website, headings come in different colors, text-alignment and sizes for emphasis. -If we use these heading tags, when we clear CSS, we can easily style all <code><h2></code>, for example, -to be the size and color and alignment we want. -</p> - -<h2>Text formatting</h2> - -<p> -HTML can also be used to do text formatting. -We can make bold, italic, underlined or struck through text with more HTML tags: -</p> - -<table class=cnp> - <tr> - <td> -<pre><code><p>This is <b>bold text</b>.</p> - -<p>This is <i>italic text</i>.</p> - -<p>This is <u>underlined</u>.</p> - -<p>This is <s>struck through</s>.</p></code></pre> - </td> - <td> - <img src="pix/html2-01.png" alt="formatted text"> - </td> - </tr> -</table> - - <h2>Semantic Tags</h2> - - <p> - While <code><b></b></code> and <code><i></i></code> - do exist, it's actually better <em>not</em> to use them directly in text. - </p> - - <p> - Try using <code><strong></strong></code> instead of <code><b></b></code> and <code><em></em></code> instead of <code><i></i></code>. - By default, they will look exactly the same. - You complain that they require more key presses, but it's thought to be a very bad idea to modify lower-level tags with CSS directly. - </p> - - <p> - Note that some bold words on this site have <strong>different color for emphasis</strong>. - This is a setting set via CSS for all <code><strong></code> tags. - It would not be a good idea for us to use this for <code><b></code>, since there might be a non-colored situation we want to occasionally use it in. - </p> - - <span class=next><a href="html2.html">Next: Images and Links in HTML</a></span> - - </main> - <footer><a href="https://landchad.net">LandChad.net</a></br>Because Everyone should be an Internet LandChad.</br><a href="index.html"><li><img src="pix/chad.gif" alt="chad"></li></a><a href="rss.xml"><li><img src="pix/rss.svg" alt="RSS"></li></a><a href="pix/btc.png"><li><img src="pix/btc.svg" alt="BTC"></li></a><a href="pix/xmr.png"><li><img src="pix/xmr.svg" alt="XMR"></li></a><a href="https://github.com/lukesmithxyz/landchad"><li><img src="pix/git.svg" alt="Github"></li></a></footer> -</body> -</html> |