Pt. I: A Primer
For this how-to you will want: (Either) Visual Studio Code, Atom, PyCharm; or some equivalent code editor. You could write this in something like TextEdit if you want, but it would be easier to use a better environment for hundreds of reasons you'll soon discover.
Before we start, we are going to explain some basics: HTML stands for 'hyper text markup language.' It is a machine language for handling documents made to be displayed inside of web browsers. It is often used in conjunction with Cascading Style Sheets (CSS), but this document only covers basic HTML. Essentially, it just is a semantic structure for describing how things should look.
< > are your main movers and shakers in this language, announcing the arrival and departure of little snippets of code to accomplish things like formatting headers, paragraphs, fonts, italics, hyperlinks, lists, and tables. You'll catch on quickly!
This portion will be natural language, but starting below the line, everything will be formatted exactly the way it would be in the document to show you what you would see (if you were to imagine all of the code bits as being invisible, it's kinda meta, like HTML-ception).
We will start by creating a text document, naming it 'index.html' and saving it to your desktop. Depending on what text editor you have, it may be easier to save a .txt named 'index' and then to rename index.txt to index.html. This should be straightforward on most systems, but on some older windows machines, this was not enabled by default and you would have to look up how to enable renaming dot addresses like .txt, .png, .doc, and so on. On Mac, it will ask you if you want to change the suffix, just simply click 'yes'.
Then, open it in your code editor of choice and also open it in your web browser. This will be your monitor that allows you to render and see what you are writing in html. Right now it's blank, but we will fix that. When you're done writing statements of code, save your document and refresh the browser to see the changes.
Now first, we are going to go to the code editor write the 'head' section, which is a set of typical declarations for a basic HTML document. This section typically contains meta-information about the document, such as the document's character encoding, viewport settings, and the document's title. Here's a breakdown of what each part does:
Pt. II: That's so meta
<!DOCTYPE html>
<html>
<head>
<style>
.indented-line{
text-indent: 50px;
}
.first-indent{
text-indent: 50px;
}
.second-indent{
text-indent: 100px;
}
.third-indent{
text-indent: 150px;
}
.indented-text{
padding-left: 50px;
}
* {
font-family:'Courier New', Courier, monospace;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
My Second Website
</title>
</head>
<p>
For paragraphs, you can use these paragraph element (<p> and </p>). When you do this, things wont appear indented because I used additional formatting to make this indent appear. I wanted it to look like it would in Visual Code's console if you set it inbetween <p> and </p> and hit enter. This is called nesting. In most machine languages, nesting is intrinsic to the way that logic flow and loops operate. In HTML, this is not the case, as indentation has no operative value, but it does help for human legibiltiy. Practicing good indentation will keep your .html documents easy to read and edit for yourself and others.
</p>
<p>
Note: You can see negative space between these two paragraphs, but no line breaks were employed. The paragraph element automatically creates them inbetween instances of paragraph elements. On a second note, to format this correctly with indentation, I had to use style settings in the header to set padding parameters. I then used <p class="indented-text"> and </p> to create this segement with indentation which I set above. I wanted to also take a moment to point out that there are a bunch of indentation values delineated in the style head that are unused in the how-to. I used these values to format the document itself. The text-indent value is declared and affects a single line when used with <span class="indented-line" style="display: inline-block;"> .indented-text can be called similarly; however, they work slightly differently. <p class="indented-text"> </p> will indent the whole paragraph that is between the paragraph elements. first-indent is redundant to indented-line but I wound up making it later to match the other iterations so I could see the formatting more legibly in the console at a glance when doing the header with all the nested structures above.
</p>
Make a line like below with <hr>
It is formatted like so:
<a href="https://www.google.com"> This is an example of a hyperlinked website. </a>
It is formatted similarly:
<a href="https://www.google.com" target="_blank">This is an example of a target, which instead of opening a web page in the active browser window, opens it in a new tab.</a>
<img src="/Users/tyron/Desktop/My First HTML/icon.png" height="200" width="" border="10" alt="Bird!">
Notes:
<ul> To open an unordered list with the list elements framed inside the tags
<li> To add an object to the list and </li> to end that object. Note: New objects add new space by themselves
<ul> again to nest another list: notice the hollowed bullet points indicating a nested list
<li> again and </li>
</ul> To close the nested list
More <li> etc...
</ul> to close the list
| Names | Date of Arrival | Coat | Eye Color | Indoor/ Outdoor | Nationality | Temperment | ||
|---|---|---|---|---|---|---|---|---|
| Cats | Luna | April | 2016 | Gray Tabby | Green | Indoor | American | Sweet |
| Appa | July | 2016 | White | Yellow | Indoor | American | Spicy | |
| Lama | March | 2021 | White + Gray Tabby | Green | Outdoor | Polish | Talkative | |