From 825282fea9102326ad2538e4a98329fbd38c899b Mon Sep 17 00:00:00 2001 From: Luke Smith Date: Tue, 29 Jun 2021 08:30:52 -0400 Subject: firststuffs --- html.html | 219 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 219 insertions(+) create mode 100644 html.html (limited to 'html.html') diff --git a/html.html b/html.html new file mode 100644 index 0000000..7ed32df --- /dev/null +++ b/html.html @@ -0,0 +1,219 @@ + + + + Make a Simple Webpage – LandChad.net + + + + + + + +

Make a Simple Webpage

+ +
+

+ 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. +

+ +

+ 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. +

+ +

HTML

+ +

+ HTML is the hypertext markup language. + It is the "language" that all webpages are written in so that all browsers can read and display them properly. +

+

+ A markup language not 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. +

+ +

+ Let's understand what HTML is. + In a previous article, we put this text in your website's index.html. +

+ +

Paragraphs

+ +

+Note how this HTML file appears as a webpage: +

+ + + + + + + + +
+
<!DOCTYPE html>
+<h1>My website!</h1>
+<p>This is my website. Thanks for stopping by!</p>
+<p>Now my website is live!</p>
+ 		+The webpage as it appears. +
+ +

+The content between the <p> and </p> tag(s) is formatted as different paragraphs. +If you don't use these <p> 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: +

+ + + + + + +
+
<!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!
+ 		+On p tags +
+ +

+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. +

+ +

+Let's learn more about what HTML can do. +

+ + +

Headings

+ +

+In addition to paragraphs (<p>), we can specify headings with inside <h1></h1> tags. +Heading tags are for your page's title and section headings in the document: +

+ + + + + + + + + +
+
<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>
+ 		+On p and h# tags +
+ +

A preview to CSS

+ +

+It is very imporant 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 <h2>, for example, +to be the size and color and alignment we want. +

+ +<<++>> +<<++>> +<<++>> +

A look at a decent template

+ +

+ It's a good habit to include the same core things in every HTML page. + I have a template file that I use for this website that includes all the basics. + When I make a new page, I just copy the template and add the content. + Here is what the template looks like: +

+
<!DOCTYPE html>
+<html lang=en>
+    <head>
+        <title>Your page title</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='Site Title RSS' href='/rss.xml'>
+    </head>
+<body>
+    <header><h1>Your page title</h1></header>
+
+    <nav></nav>
+
+    <main>
+
+    Put all your page content here in the <main> tag.
+
+    </main>
+
+    <footer></footer>
+</body>
+</html>
+ +

The +

+ +

HTML can be broken...

+ +

+ HTML is interpreted by browsers very liberally. + If you make mistakes in HTML, browsers will do their best to be forgiving and try to figure out what you meant. +

+ +

+ For example, paragraphs are formatted by the <p> tag and when the paragraph ends, + </p> should be included. + However, if you forget or neglect to include a </p> to close the tag, this isn't a big deal, as if your browser sees another <p> to start a new paragraph, it will consider the previous paragraphy closed and both paragraphs will be formatted correctly. + In fact, there are some people nowadays that only ever use the opening tag and never close them! +

+ +

...but not always.

+ +

+ That works fine with <p>, but for other tags like <b>, it won't work. + Your browser can't guess where you want the bolding to end, so if you fail to close a <b> with </b>, + the whole rest of your document will show up bold! +

+ + + Next: Text formatting in HTML + +
+ + + -- cgit v1.2.3