HTML Basics Dicsussion

Javascript Programming
#146

Really looking forward to getting started with this course. Hope I understand it all quickly :slight_smile:

2 Likes
#147

Hey Everyone!

I just finished the HTML section and I’m about to move on to the JavaScript section. In some of the youtube links on the last part of the HTML section, they briefly talk about CSS.

Is CSS something that I should try to learn before moving on to the JavaScript section?

I appreciate anyone’s help with this!

#148

Hello sir, CSS is to apply styling to the HTML code, the JavaScript course will not be focused on it, but sure, if you want to start learning about it on the go, it is a great idea, it will give you a better look in all the projects that you could made in futures courses!

If you have any doubt, please let us know so we can help you! :slight_smile:

Carlos Z.

#149

Hi everyone, I am stuck at “Dynamic list & ASSIGNMENT” section.I tried to condense the solution proposed by Ivan and my code seems to do exactly what is needed but for some reason the list shows briefly and then disappear. Am I missing something? Is there a way to make this work without an array variable?

<html>
  <head>
    <title>My Website</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>

    <form>
      <label for="userInput">Type here<label><br>
      <input type="text" id="userInput"><br>
      <button id="submitButton">Add to fruit list</button>
    </form>

    <br><br><br>

    <h1>Fruit List</h1>
    <ol id=fruitList></ol>

    <br><br><br>
  </body>
  <script>

  $("#submitButton").click(function(){
    listItem=$("#userInput").val();
    $("<li/>").text(listItem).appendTo($("#fruitList"));
  });

  </script>

</html>
#150

Hey @ClapTrap!

All you need to do to make your code work is remove the <form> tags. You only need to use them when you are setting up a form to actually submit your data to a file, or more usually to a server, either of which need to be able to process and handle the data you’re submitting.

I’m not an expert on forms, to be honest, but my understanding is that when we set up a form we usually include an action attribute (value = where to send the data) and a method attribute (value = type of HTTP request for sending the data to a server e.g. GET or POST requests). These attributes are optional, but if you don’t include action , your data is sent to the same page you are sending it from. That sounds ok doesn’t it? This is where I reach the limit of my knowledge to be honest, but from what I understand, the problem you are experiencing…

… is because your page isn’t set up to handle the incoming data, so it kind of freaks out! :wink: I’m tagging my colleague @thecil so he can add any extra details that he thinks may clarify or correct this attempt at an explanation. But basically, if you remove the form elements, it will work, I can guarantee you that!

I also thought you may like to know that, even though they don’t prevent the code from executing, there are a couple of formatting points that you may wish to look at:

  • It’s tidier to include your <script> element within your <body> rather than after it.
  • It’s good to get into the habit of declaring your variables with either let or const. For example, here, before the variable name listItem:

Nice experimenting with the JavaScript, jQuery and HTML! :ok_hand:You’ll learn loads by doing that, and you already look to be making great progress! :muscle:

2 Likes
#151

Oke,Lets start this course as a beginner in javascript. Coffee ready!
Goodluck to you all…

2 Likes
#152

Hi Forum,
im trying to download ATOM Text editor…
im getting this msg, any ideas? am i in the right page?
thanks in advance.
aww

#153

image
image1920×1080 351 KB

#154

ignore me, i’m downloading now!! thanks

1 Like
#155

Hello - I have 4 questions regarding the HTML reading assignment:

  1. Can attribute names have spaces if they are composed by more than 1 word?

  2. In the file path coding example of the HTML read they insert capital letters as in “My test page” or “My test image” even that they just mentioned that everything should be written in lowercase letters? Can you explain why Uppercase is possible in this case?

  3. Stating the path to “my image file” as: images/your-image-filename
    How does the system know about the correct folder where the “images” folder is?

  4. It says: “ — the 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”

  • but then the “My test page” is content I want to show, or am I misunderstanding something here?

Thanks.

1 Like
#156

Hello again - more questions :wink:

  1. In the Class “Image & Break Line” Ivan closes the “<img”-tag with “/>”
    I’ve come across many examples that omit the “/” and close instead simply with “>” - is this difference of any importance when coding?

  2. I’ve also programmed some using the “style” tag to change “height” and “width” of an image but found that rather cumbersome as you are likely to lose the proportion of the image when trying to change its size on the web modifying height and width independently.
    Isn’t here a quick style tag that manages to reduce in percentage, i.e. 25% would reduce both height and width of the image proportionally to 1/4 but conserve the aspect ratio?

1 Like
#157

I had to go with Sublime because apparently there is a bug in Atom that prevents it from installing on my computer. XD

1 Like
#158

found answer to questions 3.: it looks in the root directory where the .html file is

#159

answer to question 5.: the forward slash was used in XHTML, but since HTML 5 is no longer required

answer to question 6.: simply by reducing either height OR width and the other parameter will go along and maintain aspect ratio.

1 Like
#160

what about NoteTab light, do you recommend it as a text editor

#161

instead of text editing programs like Atom, why can we just use Office Word?

#162

Hi @yestome,

First of all, apologies for having taken so long to get back to you on your questions.

Secondly, well done for continuing to look for the answers yourself, and succeeding in some cases :+1:

Attribute names do not have spaces. These are set as keywords in the HTML language, and you can find a list on the following page in the MDN web docs:


You will see that there are only 3 attribute names that contain more than one word, and these all contain dashes and not whitespace.

Attribute values, on the other hand, can include whitespace, in which case the whole value must be enclosed in quotes (which is normally best practice for all attribute values anyway).

In the example, capital letters are not used in the src attribute. This is the attribute that contains the file path. A capital letter is only used in the alt attribute, which doesn’t contain a file path, but the alternative text you want the browser to display if the image cannot be displayed. The alternative text is also what will be read out by the screen reader to visually-impared users, and so is important in terms of accessibility.

It won’t look in the root directory, but will look in the directory where your .html file is located (i.e. the parent directory). So, let’s say our .html file is saved in a folder called project. If your file path is images/my-photo.jpg, it will automatically search for the images folder within project and expect to find my-photo.jpg within that. You can also use ./ at the beginning of the file path to achieve the same thing:

./images/my-photo.jpg

Knowing about ./ helps you to understand why you can also access a file located within the hierarchy of the parent directory’s parent, with ../

../images/landscapes/mountains.jpg

Let’s say our .html file is saved in a folder called project1, which in turn is a subdirectory of projects. The above file path will search for the images directory within projects and then follow the file path hierarchy as stated.

To indicate that the first directory in your file path is a direct child of the root directory, then you need to start your file path with a forward slash without any dots i.e. /

Take a look at the following W3Schools page about HTML File Paths, which explains about absolute and relative file paths, and also has some more examples:
https://www.w3schools.com/html/html_filepaths.asp

Here, I assume you are talking about the content included within the <head> element.

In the example, My test page is the web page’s title to be shown in the browser tab. This title is content, but is classed as content not shown directly to the user on the web page — content displayed on the web page for the user to see, being included within the <body> element.

I totally see your point, and this title could just as easily be considered content shown to your user. But, whatever you consider this piece of content to be in practice, the fact remains that for HTML purposes, the title of the web page is classed as metadata, placed within the title element (marked up with <title></title> tags) which in turn is located within the document’s <head> element.

1 Like
#163

Hello sir, you can use which ever you like most, there is no mandatory text editor in the Academy, we just recommend Atom editor since is one of the most easy to set, simple interface with a lot of plug ins, but off course you can use which you like most for you. :grimacing:

If you have any doubt, please let us know so we can help you! :slight_smile:

Carlos Z.

1 Like
#164

Thats great - thanks for these answers Jon. Very detailed and precise.

1 Like
#165

I struggling to insert a picture from a url source using html. Any help please I am stuck and I cant continue without figuring out. If some one take me through the steps that @ivan took, I will appreciate that.

thank you