HTML(Hypertext Markup Language) is the skeleton of your webpage, it will be where you type the most important information that will make up the webpage that you create. Without HTML your webpage would never be able to take shape, just like if I took your bones you would be all meat and no bones... Anyways as I was saying, HTML holds all of the most important information, it will hold your paragraphs of text, the images and links you use. It will also contain the information the browser will need, like the lanugage or the document type.
A common joke in the coding fields is, "Don't reinvent the wheel", I have no idea where this came from but it definetly is something to note. In HTML, CSS, and jQuery, there is a lot of repetition, so for a future note, I'd recommend making a template for yourself that you may use later on(on Index.html I actually used my own template and the first 4 intro pages are direct copies of index.html). If I remember to link my template, I will, odds are I will forget(edit: it's in part 0) :/
There are many different tags in HTML, and I mean a LOT! But they are all pretty straight forward and simply require a small amount of memorization.
In theory, it is simple. You open that tag with whatever then close it shortly after. For example, you would open
a paragraph tag with < p > then you would type whatever you want, then you would close the tag with < /p >
< p > This is an example < /p >
You can also add onto the tags info by typing within the first tag!
< p class="bob" height="100px" > This is another example< /p >
This is a header tag, it can range from h1 to h6. The larger the number, the small the font size(h1 being the largest, and h6 being the smallest). This is typically used for titles. Just to make my life easier, imma be calling these Hx tags, the x is to represent the 6 variaties of h tags(Or I'll forget to use this term. People also refer to it has the H tags).
This is a paragraph tag, it is used to store generic text that would span, well, paragraphs.
This is the a tag, using Href, you can link it to outside sources. It can also link to other pages in your webpage.
Ex: < a href="PlaceholderLink" >Placeholder text < /a >
These 4 tags are for text decorations, you may use them inside of things like p and Hx tags to give them some flair. The u tag will underline the text within the tag. The em(Emphasize) tag will italicize the text within. The b tag will Bold the text within. Finally the s tag will Strikethrough the text within
Just a note, all of these decorations can also be applied in CSS. :P
The br tag is used for making a line break in the page. It basically just cuts to the next line when used.
The hr tag is basically the same but instead of being an empty line, it now has a line through it.
the image tag can be used to display images within your webpage, these images can vary from jpg's to gif's(gif or jif?). You set the image via "src" and then set it equal to the image(src="x"), you can use downloaded images or images out there on the internet. You can set the width and height of the image within the tag(use a % to scale a percent of the screen or set an absolute value of pixels using px).
The example above ^^^
< image src="img/charizard.webp" width=25% height="300px">
If you are to expand or shrink the window, the width of the image will change
Use the video tag to load videos. please dont spam them, please... no.
This tag is a little weird, you type the width, height and generic settings on the video tag. Then within the video tag you make a source tag and give that the video link and it's type.
Using the audio tool you can import songs, sound effects, anything that is a supported audio file(click to view), Audio tags are quite similar to video tags, the only difference being, well ones audio and ones video ¯\_(ツ)_/¯
All tags can be given the class or id attributes but divs are special because you can put tags inside of it. For example, let's say you had 2 paragraph tags and 1 header tag, instead of giving them all the same class, you can make one div to go around these tags and have that one div the CSS to everything inside. (I would give an example but there is no CSS on this page...). Things like the < footer >, < header >, and < nav > tags do the same thing in concept of making a group to target everything within.
There are some more tags you can go find out there if you want to go research it, I would recommend something like W3 school for reasearching. Like how I never talked about the < table > tag due to how I just dont like it, it's annoying or the lists tag which are a little complicated.
Just to make it easy, here are some things you could look for: Text Inputs, Buttons, Lists, Tables.
