This is a revisal of my original post: Understanding HTML and CSS

The Basics

HTML tags are formatted like this: <element attribure="value">{innerHTML}</element> Where {innerHTML} is a nested element or text inside the parent.

Ex: <p>This is a paragraph <a href="https://google.com">with a link</a></p>

HTML elements

A few of the basics are:
The div element is a division or a section of elements/text. This is good to use in conjunction with a class or an id attribute and CSS. The p element is a paragraph of text/links. This element is used for paragraphs of text not really The a element is an anchor tag that you use to make hyperlinks.
The h{1-6} elements are headings. In order from 1: largest to 6: smallest The ul element is an unordered list. Ex:

  • Hi
  • Bye

The ol element is an ordered list. Ex:

  1. OK
  2. Not OK

The li element is a list item that you nest inside of a ul or ol element.
The html element is the starting element at the top of your HTML document. The head element is the tag in which you put references to stylesheets, favicons, and the title of your page. We'll get into those later. The body element is the tag where you nest the contents of your document so that the viewer can see/the text.
The br element is a line break that can separate two elements on the same line. Same as Enter or Return when creating a text document.
You can find more here. Note: Use the format <tag>Content</tag> when creating your first .html. file.

Creating your first .html file

  1. Go to repl.it.
  2. Go to https://repl.it/new/html
  3. Name the repl "My First Website" Ex: Name Repl
  4. Click Create Repl
  5. Start By navigating to the index.html file
  6. Then, delete all the code in that file
  7. Next, type !. Your file should look like this: Exclamation Mark
  8. Next hit the tab key, then again, then one last time. Your code will look like this: Doc Will Look Like This
  9. Now type in the name of the page (it will be the home page title.)
  10. Now hit tab again then ctrl + z then tab again to jump to the body tag.
  11. Now use the knowledge that you've learned in Section 1: HTML elements to start making your website. A start could be: Starting Website
  • Now that we're done, let's run this, by clicking on the green Run Button. You will probably see this: What-You-Will-See
  • Now, this looks weird, so to fix this we need to add br tags at the end of every new line inside of the p like this. Final Starting Code
  • I think this should be good so far.

Advanced HTML

  • Add ul tags like so:
    UL Addition
  • Then li tags, then remove the hyphen's and the br's. Like this:
    [LI + Output