HTML Basics Dicsussion

Malik · April 20, 2021, 10:44am

Yes, VScode is a very good choice.

Out8reak6 · April 21, 2021, 4:51am

awesome!! i did a web design course and it started with brackets, with they discontinued then i went opn to vs code and found it really awesome to use so I’m glad that it is accepted in this course aswell.

KK_Cheah · April 21, 2021, 6:08am

Hey peeps. Im using VS Code and a lil tip for those who dont know yet is that y’all can get a Live View of your codes similar to Codepen or FCC. It enables you to see your code edits in a browser if you press Ctrl + S in VS Code which happens to be the Save button as well. Helps a ton with checking out your edits and also the occasional crash when using VM or if you undervolt your laptop. Here’s a link to guide on how to install Live View: https://www.freecodecamp.org/news/vscode-live-server-auto-refresh-browser/

JosephGarza · April 22, 2021, 7:37pm

What is HTML?

HTML (Hypertext Markup Language) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. As the title suggests, this article will give you a basic understanding of HTML and its functions.

What is HTML used for?

HTML is used to code the pages that we see on the internet. The content itself. HTML defines the the structure of the content.

Why are we learning HTML?

HTML is what we use to enter the content (all the wording per sei) that we see on a webpage. In our specific case, the user interface of the dApps that we are to build.

What is an HTML tag?

An HTML tag is code or symbols in this case it is the greater than and less than symbol (< - />) which indicate the beginning and the ending of an element.

What is the structure of an HTML tag?

The opening tag consists of a greater than sign plus the name of the element plus a less than signal (

) while the closing tag is almost exactly the same except that it has a forward slash before the name of the element, (

) .

What is an attribute?

Attributes are additional information about the element that you don’t want to appear in the actual content. It is used to give the element a non unique identifier that can be used to target it and any other elements with that same class value.

An attribute should always have the following:

A space between it and the element name (or the previous attribute, if the element already has one or more attributes).
- The attribute name followed by an equal sign.
- The attribute value wrapped by opening and closing quotation marks.

What is the anatomy of an HTML document?

The anatomy of a webpage is as follows:

1. — doctype. It is a required preamble. In the mists of time, when HTML was young (around 1991/92), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However these days, they don't do much and are basically just needed to make sure your document behaves correctly. That's all you need to know for now.

- — the [](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) element. This element wraps all the content on the entire page and is sometimes known as the root element.
- — the [](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) element. This element acts as a container for all the stuff you want to include on the HTML page that isn't the content you are showing to your page's viewers. This includes things like [keywords](https://developer.mozilla.org/en-US/docs/Glossary/Keyword) and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more.
- — This element sets the character set your document should use to UTF-8 which includes most characters from the vast majority of written languages. Essentially, it can now handle any textual content you might put on it. There is no reason not to set this and it can help avoid some problems later on.
- — the [](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favorite it.
- — the [](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body) element. This contains all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.

2021-04-22T19:37:00Z

Holla · May 4, 2021, 12:24pm

Funny to see the intro as it is quite obvious this is dear to Ivan. Looking forward to the course. Never imagined I would dare trying to get started on programming. I am really excited!!!

JackRatt · June 1, 2021, 1:18pm

Cant wait to start learning the basics of programming! , i ordered the 3rd edition from amazon? hopefully this one is good as its the most up to date one

JustinD7 · June 1, 2021, 5:36pm

1.) HTML is code used to structure a web page and its content

2.)It is used to enclose and wrap content using a series of element to make it appear or act a certain way

3.) To help ease our learning process into programming smart contracts, while also being able to help create our front end.

4.) A tag is used to create an element

5.) The tag is structured starting with a greater than sign, followed by the name of the element and the lesser than symbol; the closing tag is the same except it has a forward slash before the element name

6.) An attribute has extra information about the content that we don’t want to appear in the content and can also change its behavior

7.) * <!DOCTYPE html> — doctype. It is a required preamble. In the mists of time, when HTML was young (around 1991/92), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However these days, they don’t do much and are basically just needed to make sure your document behaves correctly. That’s all you need to know for now.

<html></html> — the [ html ] element. This element wraps all the content on the entire page and is sometimes known as the root element.
<head></head> — the [ head ] element. This element acts as a container for all the stuff you want to include on the HTML page that isn’t the content you are showing to your page’s viewers. This includes things like [keywords] and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more.
<meta charset="utf-8"> — This element sets the character set your document should use to UTF-8 which includes most characters from the vast majority of written languages. Essentially, it can now handle any textual content you might put on it. There is no reason not to set this and it can help avoid some problems later on.
<title></title> — the [ title ] element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favorite it.
<body> </body> — the [ body] element. This contains all the content that you want to show to web users when they visit your page, whether that’s text, images, videos, games, playable audio tracks, or whatever else.

StratosK · June 22, 2021, 6:51pm

Hi all! I wrote the first code and when I ran it, on the browser, instead of the phrase I see the whole code! Do you know how to fix it?

Coded on Atom:

thecil · June 23, 2021, 2:07am

Check that the file ends with the format .html.

Example: WebSite.html

Carlos Z

StratosK · June 23, 2021, 4:33am

Perfect man! Thank you!

TiffanyG · June 23, 2021, 6:21am

TiffanyG

31m

I can’t seem to figure out how to get an image on my html website. When I click “inspect” and then “issues and errors” it tells me there is “Cross-Origin Read Blocking” which might be interfering with my image. Anyone know what I can do?

jCA · June 23, 2021, 7:19am

Can you share your code?

TiffanyG · June 23, 2021, 7:56am

<html>

  <head>

  </head>
    <title> This is a great website</title>
  <body>
    <h1>This title is bigger</h1>
    <h2>This title is smaller</h2>
    <p>Welcome to a random website</p>
    <h1>Random list:</h1>
  <ul>
    <li>Object 1</li>
    <li>Object 2</li>
    <li>Object 3</li>
  </ul>

    <a href="https://google.se">Click to go to google</a>

    <img src="https://en.wikipedia.org/wiki/Cat#/media/File:Cat_poster_1.jpg" style="width:128px;height:128px;"/>

  </body>

</html>

TiffanyG · June 23, 2021, 8:52am

It seems when I listened carefully he mentioned a “cc0” image. Once I used that kind of image it solved all my problems. His browser was in another language which confused things a bit. Got there in the end…

jCA · June 24, 2021, 4:14am

TiffanyG:

<html>

  <head>

  </head>
    <title> This is a great website</title>
  <body>
    <h1>This title is bigger</h1>
    <h2>This title is smaller</h2>
    <p>Welcome to a random website</p>
    <h1>Random list:</h1>
  <ul>
    <li>Object 1</li>
    <li>Object 2</li>
    <li>Object 3</li>
  </ul>

    <a href="https://google.se">Click to go to google</a>

    <img src="https://en.wikipedia.org/wiki/Cat#/media/File:Cat_poster_1.jpg" style="width:128px;height:128px;"/>

  </body>

</html>

Glad you solved it!

I retraced your steps to get to the actual image and right clicked the image to obtain the image address and placed that url into the src attribute and the image loaded. I believe the link that you used was for the wiki page and not the image itself. When pulling images in the form of a url, you want to pull it from the image address. I hope that helps. Oh, I also added a break to separate the Google link.


  <head>

  </head>
    <title> This is a great website</title>
  <body>
    <h1>This title is bigger</h1>
    <h2>This title is smaller</h2>
    <p>Welcome to a random website</p>
    <h1>Random list:</h1>
  <ul>
    <li>Object 1</li>
    <li>Object 2</li>
    <li>Object 3</li>
  </ul>

    <a href="https://google.se">Click to go to google</a>
  <br />
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Cat_poster_1.jpg/2560px-Cat_poster_1.jpg" style="width:128px;height:128px;"/>

  </body>

</html>
type or paste code here

TiffanyG · June 24, 2021, 4:57am

Thank you so much! I am glad I made some mistakes otherwise I wouldn’t have learnt what I did…

jCA · June 24, 2021, 5:46am

I feel like I learn more when i make mistakes. Definitely part of the process.

Pkpk2021 · June 27, 2021, 10:32pm

Hi, I. really need some help with Atom, when I input my code, then the html code is showing on my webpage, does anyone know how to fix this please? It could be an issue with snippets?

thecil · June 28, 2021, 9:42am

Hey @Pkpk2021, hope you are ok.

If the HTML file is showed in the browser has code, you just probably forgot to add the file type at the end of it. Example website.html, then it should show the website content and not the code, also you can use python webserver for a better view on the project

Carlos Z

Pkpk2021 · June 28, 2021, 9:02pm

Hi,

here is the link if you can take a look to please to see if you think the coding is wrong, or help me find an option to resolve this issue, days are passing by and I am making little progress at all.

file:///Users/kalikpauline/Desktop/website%20/website%2011

In the example shown it didn’t mention website.html so I haven’t used that coding. Is Python web server? I am using Atom as that was the example shown, I am not sure how you access the python web server, I am using the chrome browser.
thank you for you’re time,

Paula