Just copied from W3Schools / My First JS for fun. Nothing to do with the Discover course. No idea of what or how JS makes it happen, but one day I will.
Let' make a guess. Since there's no script written here in the code and the getElementById stuff calls a certain innerHTML, the script itself must be part of the HTML.
Useful, but no big deal.
I've applied some CSS to the button and its surroundings.Also I added text to the line where the time and date will be displayed.
Ricardo Barros Becheli.
JavaScript will make date and time will show here.
Hello, Discover! This is a "h1" heading
Deploying new habilities (and this is "h2")
When you want to enphasize something just open a em tag, like that: italic it makes and no more than that. But if you want to make it bold, just appy the strong tag like that and the text will obbey.
Wunderbar!
And
no matter
how
many "enters"
you
press nor spaces you give (like
I'm
doing
now
in
the
source code),
no paragraph will be created by the "enters",
and no more than one space will be placed between two words.
Should you want a new paragraph you have to place a "p" tag just as I did now.
And with a (br) tag you break lines even if in the code all appears in one single line.
Allright. Since we made that clear let's start talking about adding spaces.
About adding spaces, we have the following from C3Schools : (and here is another h2)
"A commonly used entity in HTML is the non-breaking space, made by this code without opening or closing tags: and all the following spaces area made like that.
A non-breaking space is a space that will not break into a new line. (a line break here)
Two words separated by a non-breaking space will stick together (not break into a new line). This is handy when breaking the words might be disruptive. Let's put an example here in a line just to check if, when shortening the browser width, the 10 km/h will stay together, like now: 10 km/h and 10 km/h and10 km/h. Enough?
Examples:
§ 10
10 km/h
10 PM
I must confess that I had a hard time trying to show here the code instead of it just being an invisible code and a visible space. Stackoverflow website helped me on that. Thanks!
Well, as you can see I didn't wait.
Just put some CSS in a separate document that is called by the link rel above, in the head area (it's in the source code, of course).
This reflects what I know so far, as of the first week of 2022. Should I learn more, and of course I will, I'll leave this stage here as it is and copy/paste everything below a certain point and make the new look.
It really shouldn't be necessary because it's all in the Git/Github history, but I want to make sure the visual change gets very clear and visible right here to the user.
Summary of what has been taught so far (this is h1)
Before I started coding this HTML page a few things had been taught: (this is h2)
And I went back to earlier lessons so nothing passes without consulting W3Schoolsand MDN (and here's h3)
These lines here look confused, very confused. That THAT'S BECAUSE NO MATTER HOW MaNY "ENTERS" YOU PReSS IN html NO PARAGRAPHs ARE CREATED UNLESS YOU INSERT THE TEXT IN A<P> tag. In the frame below I will turn part of this text into a list oj what we will learn, STARTING HERE:
Comments
TAGS - Opening and closing
Emmet abbreviation (typing assistance included in the Visual Studio Code editor)
Title hierarchy tags (h1, h2, etc)
Paragraph tags (p)
Element - The tag opening and closing plus its content make an element.
Empty elements like img and input, that have no closing.
They have no content, only attributes. (Mike)
Attributes work either as extra info and/or configurations. In the case of the img tag they are configurations.
Anatomy of an attribute: After the name of the tag there's a space, then the name of the attribute followed by an equal sign and double quotes containing the attribute itself.
Attributes can also be boolean, like true, false, disabled.
Quotes - Double x Single - Using double quotes in attributes is better than the single ones because the last ones can be confused with English grammar signs, like I'm or There's, for instance. Note that Emmet itself provides us always with double quotes. This is one of the good practices in coding.
Quotes - Omiting - Some attributes can work without quotes, like in the a tag: The hypertext will work without being between quotes, but it's not a good practice because if you add another attribute (like target, for instance) immediately following the unquoted hyperlink there can be a big conflict of interpretation depending on the user's browser.
Now here's the above paragraph as an unordered list:
Comments
Emmet abbreviation
Element
TAGS
Headings hierarchy tags
Paragraph tags
Empty elements
Attributes
Anatomy of an attribute
Attributes can also be boolean
Quotes
Quotes - Omiting
And now here's the above paragraph as an ordered list:
Comments
Emmet abbreviation
Element
TAGS
Headings hierarchy tags
Paragraph tags
Empty elements
Attributes
Anatomy of an attribute
Attributes can also be boolean
Quotes
Quotes - Omiting
Let's
REVIEW
one by one of the X number of items in the list
(whatevet that X number is there will be a way to put it into the above heading automatically, very probably through JavaScript ). And yes, I had to learn how to attribute color to a text tag before learning CSS.
Comments
have made a comment above this line, in the code. Check it by right clicking the mouse and choosing view source code
Emmet abbreviation
(typing assistance included in the Visual Studio Code editor)
Heading hierarchy tags
(h1, h2, etc)
Paragraph tag
(p)
Element
The tag opening and closing plus its content make an element.
According to MDN they OPEN and CLOSE an element.
Read more at MDN
Anyway, it's all the same.
Empty Element
They are elements like img and input, that have no closing. They have no content, only attributes. (Mike)
Attributes
Attributes work either as extra info and/or configurations. In the case of the img tag they are configurations.
Anatomy of an attribute
Anatomy of an attribute: After the name of the tag there's a space, then the name of the attribute followed by an equal sign and double quotes containing the attribute itself.
Attributes can also be boolean
Attributes can also be boolean, like true, false, disabled.
And the page continues...
For generations
Much will be added soon.
This is one marvelous planet.This is my marvelous girlfriend Angela, from Earth.
Why there's a thin white line between the image and the border? It only goes away if the border is white. In fact it doesn't go, it mixes with the border like in the earth image above. IT GOES AWAY IF EITHER THERE'S NO SIZE INDICATION (like now) OR THE SIZE IS 100% (I have tested).
CITATIONS
Double x Single quotes
Using double quotes in attributes is better than the single ones because the last ones can be confused with English grammar signs, like I'm or There's, for instance. Note that Emmet itself provides us always with double quotes. This is one of the good practices in coding.
Quotes - Omiting
Some attributes can work without quotes, like in the a tag: The hypertext will work without being between quotes, but it's not a good practice because if you add another attribute (like target, for instance) immediately following the unquoted hyperlink there can be a big conflict of interpretation depending on the user's browser.
There are 3 kinds of citation syntax/tags (in fact I discovered more kinds that the course didn't mention - see items 4, 5 and 6):
Ok, the lesson was confused. Some "not to do like that" were talked about before the correct way. I wanted to have all that printed (bad example x good example) here and I messed it all. The good examples are no good too!
To be deleted and corrected (today is April 4, 2022). All this black section. Period.
Only this line here is in the tag (so far so good but no links nor mention to the source)
and here out of the tag.
Bad example of cite here. (alone, without the source in the code)
Bad example of "q" (keyboard quotation marks) here (code quotation marks). In fact the coded one is nor bad at all, it's just a quotation without any major semantic meaning.
In a good example of blockquote everything in a block - you could say a whole paragraph or a long text - must be inside the <blockquote> tag. It indents the block and indicates that an external text was cited. A good way to complement that is adding an information about the origin of the citation. This info does not appear in the HTML page, only in the code. The information will be done by an attribute called "cite" inside the blockquote opening tag (like we do with the inline style) and it's not to be confused with the element<cite> of item 2 below.
Use CSS' (margin-left: 0;) to remove the indentation from the blockquote element.
HTML Blockquote is a DOM Object. You can access a blockquote element by using getElementById(). Example:
var x = document.getElementById("myBlockquote");
The Blockquote object also supports the standard properties and events.
Good example of cite here. The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.)
Catcher in the Rye (this title is within a <cite> tag) is a novel by Jerome David Salinger.
It has a cite inside a figcaption and they are both inside a <figure> element. Note that the paragraph tag is surrounded by a blockquote element. And here's how the code stays:
Good example of q (applyed here) and here:
Use <q> for inline, short quotations. This element is intended for short quotations that don't require paragraph breaks; for long quotations use the <blockquote> element. MDN
Browsers normally insert quotation marks around the quotation, like now. And is that it?
No. This element may include global attributes. Therefore it can be combined with the <cite>, for instance.
Again, note that the value of the <cite> attribute is a URL that designates a source document or message for the information quoted. This attribute is intended to point to information explaining the context or the reference for the quote. No more than that.
I mean, no link is established. It's only an information that stays hidden from the user and works behind the scenes for SEO and other algorithm purposes.
All this said, something like this can be built with <q> and <cite> combined:
According to Mozilla's website,
Firefox 1.0
was released in 2004 and became a big success.
And the code is written as follows (for "Displaying Code" in details, see next topic, but take a glimpse of this for while):
<p>According to Mozilla's website,
<q
cite="https://www.mozilla.org/en-US/about/history/details/">Firefox 1.0
was released in 2004 and became a big success.</q></p>
The <bdo> (short for bidirectional override) tag is used to override the current text direction.
You must specify the "dir" attribute on this element. This mandatory attribute specifies the base direction of the element's text content, which overrides the inherent directionality of characters as defined in [UNICODE].
Attributes: This element contains dir attributes which are used to specify the direction of text written inside the <bdo> element. The dir attribute contains two values which are listed below:
<bdo dir="rtl">: The text direction from right to left (reverse the text).
<bdo dir="ltr">: The text usual direction from left to right.
The sequence "1-2-3-4-5" was reversed in this line by this set of tag & attribute as: 1-2-3-4-5.
DISPLAYING CODE
<pre> THE PREFORMATED TEXT ELEMENT
*!!! - It's not quite like that, as the very site continues:
If you have to display reserved characters such as <, >, & and " within the <pre> tag, the characters must be escaped using their respective HTML entity.
IN OTHER WORDS, YOU MUST CANCELL THE HTML "CODE EFFECT" OF THOSE SYMBOLS (when displaying code).
What are HTML entities?
Entities are used to return / display special symbols.
"An HTML entity is used to display invisible and reserved characters that would otherwise be interpreted as HTML code.
An HTML entity is a piece of text, or string, that begins with an ampersand ( & ) and ends with a semicolon ( ; ).
For instance, HTML will interpret the less-than sign ( < ) as a tag opening if you don't write it as an entity.
& lt; entity = <
When I type the 3 characters above together (without the space I put there just to make it visible here) they make this symbol: <
lt means LESS THAN.
Always with a semicolon at the end.
& gt; entity = >
When I type the 3 characters above together (without the space I put there just to make it visible here) they make this symbol: >