Thursday, January 7, 2021

Very basic HTML

 Yesterday we created a couple of files with content like this:

<html><body><h1>index</h1></body></html> 

and I didn't really talk about why or what it should look like when you view it.  Well, if you just want to see what it looks like you can just look at mine: https://cheapsite.z13.web.core.windows.net/

In fact, if you open your web browser to the file directly you can get it to open and show it to you without having to put it on anyone else's computer.  I tried that and it looks like this:


The special bits are the extension of the file and the form of the content.  Files ending in .html or .htm are assumed to contain HyperText Markup Language which describe how and what should be rendered by your browser.  A really great place to learn about html is W3Schools.com.  They have awesome tutorials and a live page editor.  Go to their site and click <learn html>


And then find the first <try it yourself> button and give it a click

You will then be in a split screen with a <run> button at the top

Type in our html text from above, click run, and you can see the output on the right.  In the image above, I gave the text a more standard formatting:
<html>
    <body>
    <h1>index</h1>
    </body>
</html> 
And the output looks the same.  The <html> starts a html section of text and the </html> ends a html section of text.  The <body> starts a body section of text and the </body> ends a body section of text.  The <h1> starts a header 1 section of text and the </h1> ends a header 1 section of text.

The pieces are nested.  It is not complex to do simple things, and there are a lot of editors that can help you keep things organized.  

For now, we just stuck our html files directly into storage.  That is good for simple things but tomorrow we are going to learn a bit about source control.  Spoiler, it is a place to keep our files.