What type of web-pages are their

As for a starter, you think this would be ok with me or should I go for notepad only, at any circumstances with or without the colors

 

HTMLDog is one of many good tutorials, but IMO it is probably the sanest. Work the tutorials in order, html/css/js at each level until you're confident before moving to the next level.

My editor does a few subtle color changes; subtle enough that it's not annoying enough to bother with killing it.

A better approach is to separate by formatting, since it allows you or whoever has to maintain your work use any good editor (one that maintains formatting and uses a fixed width font).

In a nutshell, I use a formatting plan based on C type languages. Sibling block elements are separated by a blank line. Nested elements are indented. The rules are not set in concrete; the purpose is to achieve clarity. So, while i normally don't indent inline elements, I might set off links or images to make them quicker to be found since they are more subject to change than, say,

<abbr title="your mileage may vary">YMMV</abbr>

Code (markup):

.

Never, enter your html or css as a single long line. You will never save enough bytes to make up for your later frustration. Always code as if you know whoever maintains your code is a violent psychopath who knows where you live. It may even be you.

Example:

<div id="main">
  <h1>Horizontally Scrolling an Image Gallery</h1>

  <p>To cause a list of images to scroll horizontally, you
need to make the list inline. To keep it from wrapping, we
use the white-space property, setting it to nowrap.</p>

  <p>The css will look something like this:</p>
    <pre><code>ul {
    margin: 1em 40px;  /*IE requires an explicit width*/
    overflow: auto;
    white-space: nowrap;
}

li {
     display: inline;
}
    </code></pre>

    <p>That's how it ought to be. You will need to do some
     tweaking for <abbr title="Internet Explorer">IE</abbr>; for
     example, you will likely need to set explicit heights and
     widths for the <code>ul</code> element.</p>

    <p>Look at the actual css used in the demo for the
     particular values I used. <abbr title=
     "Your mileage may vary">YMMV</abbr>.</p>

    <ul id="gallery1">
      <li><a href="../layout/num0.png" title="The number &quot;zero&quot;">
                  <img src="../layout/tnail-num-0.png"
                    alt="0" /></a>
      </li>

      <li><a href="../layout/num1.png"
                  title="The number &quot;one&quot;">
                 <img src="../layout/tnail-num-1.png"
                     alt="1" /></a>
      </li>
      ... 
    </ul> ...

Code (markup):

A pox on this comment editor or any other editor that doesn't keep formatting on paste or use a fixed width font.

There are sots of formatting schemes (speaking of Scheme, it's a Lisp based language and is amazingly simple to format for readability), so look around and use one that is ultra readable by humans.

gary

 

farhajr
Note tab light will be ok for you. I used to work in this long ago, it was good enough. Its better than basic notepad.

 

I downloaded it and checked it..
It still shows no colors in it.. and also I could not find eclipse in it..

 

Which Editor is that..? that provides those results..

and what do you say completing tutorials from W3C website. rather than the one which you shared...

and what I am looking for Exercises with ANswers, that can help to learn more only.. the way I see it..

 

I use Emacs. There are a number of people who, without actually trying it, say it is too complicated based on nothing more than some non relevant prejudice. It is a complex application, if only because of its inherent power. The thing is, the user interface is the same as most modern editors other than the modals such as Vi (if you want, you may switch to a modal interface, though). You only need to learn the stuff you commonly use and a tutorial is built in. If you want or need more, there are more than 3,000 plug-ins/add-ons in the Emacs repositories. Emacs is the Extensible editor. Change it to suit yourself; or not.

gary

 

can you share some screen shots of it or some of your work over here.. which can give a brief idea of what exactly it is,,

 

@JEET...
I am going through your tutorial page and now am on the Image part...
Along with that I am also practicing each section in the W3Schools.org where I am in the "HTML basic Section"....

I wanted to know that in practice in the W3 School they don't use /> for closing <img> Tag and neither is is used like this </img>..... instead they just close it directly like >....

Now, when I went through your page you mentioned in the starting that Every Tag requires a closing one except for the Declaration one...

In HTML, almost all tags also have a similar closing tag.
The only difference is the additional "/" (slash) sign inside the "< >" part. Notice, this is forward slash sign, found beside your SHIFT key on your keyboard.In our example above, we used a similar closing tag for our <body> tag. Closed it using </body>; And we also used a closing tag for <html> tag. Closed it using </html> tag.
We did not closed the <!DOCTYPE html> tag. This tag does not needs a closing tag. Its just a declaration of the document type.
In HTML5 this is the only tag which does not requires closing. All other tags will need a closing.

Now, for this image Tag, why is their an exception plus why w3schools in their web page is expressing it in another way than you have explained it in your page...

going like this to and through all these only makes it more complicated and confused with what is latest trend that is being used ...

can you explain and elaborate more on this..?

 

Like sarahk said, its the difference in version.
The " />" was introduced in HTML5.
Until HTML4, there was no need to close <img> and <br> tags. W3schools tutorial is probably still for HTML4.

There is not much difference in HTML5 and HTML4. Minor changes only.
Like " />" is there in HTML5.
HTML5 also has tags like <video> and <audio>

In practice, you should use the " />" closing for both <img /> and for <br /> tags.

 

note, /> is OPTIONAL in HTML 5 and was only added for XML compatibility, such as when you inline SVG. As a rule of thumb you should NOT be using them unless it's inlined XML. This is NOT XHTML where they were required.

Also the LAST place you should be learning from are the sleazy dirtbags at W3Schools. Might I suggest a MODERN tutorial such as the ones at MDN:

https://developer.mozilla.org/en-US/docs/Web/Tutorials

In fact, when you said:

What tutorials on the W3C website? Last I checked no such thing. If you meant W3Schools they have NOTHING to do with the W3C, though many people are tricked into thinking they are because of the shared first two letters and that they've never gone out of their way to correct people on that. It took nearly 15 years of making fun of them calling them W3fools and even a parody site having been created JUST to get them to add this tiny disclaimer buried on their damned near hidden "about" page:

https://www.w3schools.com/about/default.asp

.. and I quote:

The site was NEVER accurate about anything, and is nothing more than garbage web rot at this point despite the half-assed attempt at adding HTML 5 stuff to it. It is literally the LAST place you should ever consider going to learn a damned thing about programming for the web.

Don't even get me started about W3Schools' predatory sleazy scam-artist "certifications".

Oh, and @sarahk, they're NOT actually called "self closing". In HTML 4/earlier they were called "empty elements", and under HTML 5 they're called "Void Elements".

https://www.w3.org/TR/2011/WD-html-markup-20110405/syntax.html#syntax-elements

One of the FEW improvements HTML 5 brings to the table, changing that one word. Confused a lot of folks who weren't paying attention who thought that <div></div> was "empty" so <div /> was valid. It isn't and is not what the specification meant by an "empty element". Under 4/earlier an "empty element" is one that CANNOT wrap content -- like those you listed -- and not that they don't have content. Calling them "void" instead really helps clean up and clarify that.

Side note, be warned this industry is knee deep filled with "sleazy dirtbag predators" and a LOT of them peddle snake oil in the form of ignorant incompetent ineptitude such as frameworks. Try to avoid getting suckered by any of that nonsense and focus on learning to use HTMl/CSS/JavaScript WITHOUT the frameworks until you can do everything those frameworks claim WITHOUT them. Why? Because if you do you'll be able to recognize just what utter steaming piles of manures they are, and the BALD FACED LIES used to promote them. Lies like how these frameworks are "easier" or "faster to develop" or "better for collaboration".

Basically whenever you see someone say "just use bootstrap" or "try jQuery" you're talking to ignorant turds who know jack-all about making websites. Just a warning.

 

I wouldn't say never, wrapping things like inline / flow text can be wasteful if the editor is worth a damn... but you are correct in that whitespace is your friend for code clarity.

There are an endless number of schemes for code formatting and it's important to learn to adapt to different ones being used as well as to choose one to stick with. Consistency is the important part! So long as your own code is all consistently formatted, and when collaborating with others everyone agrees on (or is told to use by the project manager) a single unified method? You're golden. So long as it's clear AND consistent.

That said Gary, the code you posted is NOT what I'd call consistent, YMMV. Using the practices I do it would go more like:

<div id="main">

	<h1>
		Horizontally Scrolling an Image Gallery
	</h1>

	<p>
		To cause a list of images to scroll horizontally, you need to make the list inline. To keep it from wrapping, we use the white-space property, setting it to nowrap.
	</p><p>
		The css will look something like this:
	</p>
	<pre><code>ul {
	margin: 1em 40px;  /*IE requires an explicit width*/
	overflow: auto;
	white-space: nowrap;
}

li {
	display: inline;
}</code></pre>

	<p>
		That's how it ought to be. You will need to do some tweaking for <abbr title="Internet Explorer">IE</abbr>; for example, you will likely need to set explicit heights and widths for the <code>ul</code> element.
	</p><p>
		Look at the actual css used in the demo for the particular values I used. <abbr title=
		 "Your mileage may vary">YMMV</abbr>.
	</p>
	<ul id="gallery1">
		<li>
			<a
				href="../layout/num0.png"
				title="The number &quot;zero&quot;"
			>
				<img
					src="../layout/tnail-num-0.png"
					alt="0"
				>
			</a>
		</li><li>
			<a
				href="../layout/num1.png"
				title="The number &quot;one&quot;"
			>
				<img
					src="../layout/tnail-num-1.png"
					alt="1"
				>
			</a>
		</li>
	</ul>

Code (markup):

But then if you have a decent editor that shows indicators for word-wrap and your tab indents:


It works out really well. Inline-level / phrase level tags like STRONG or ABBR rarely need the level of distinction/visibility in the code that your block level tags do, so putting the block levels on their own lines and or paired for longer runs aids in the clarity... for me at least. YMMV.

Oh and sorry about the image size, my New Years resolution was 4k.

EXACTLY this. The difference between "wah wah, eye dunz wunna type" byte obsession, and actual minimalism. I often get people who say "how can you talk about minimalism with so much space wasted on formatting" -- to which I say "why are you wasting time stripping out all your formatting when you wrote ten times the code you needed to?"

Nickle and diming yourself over whitespace / formatting is pointless -- at least for HTML and CSS; JS is another story --and only hinders code clarity. ESPECIALLY if said code is being sliced up on the back end into a CMS or other server-side processing.

 

With Tutorials, I meant small Example given by them at the end of each Section explaining the Texts..
I could not find much their except to redo the written work which they did.

Also, nOw if for the example of IMG Tag, it is put according to the HTML4 way, the Browser recognizes it or not..?
and what was the main reason in changing the HTML4 code, ? ... does the new IMG tag code in HTML5 has higher benefits than the previous one..?

can you explain a little more...

 

About <br> tags, how can it be closed... something like this <br> /> or just put one tag ( the same for opening it and closing it) like <br/>...

I read on the W3 page that it said something like:

<br> is an empty element without a closing tag (the <br> tag defines a line break):

Empty elements can be "closed" in the opening tag like this: <br />.

HTML5 does not require empty elements to be closed. But if you want stricter validation, or if you need to make your document readable by XML parsers, you must close all HTML elements properly.

Plus it says HTML5 does not require...

now can you clear out some of these facts.. which are false and which are true.. hearing differernt things from different angles,

 

If IS a confusing mess, and sadly most of the people here are talking out their arses about it adding to the confusion. Don't blame you for being lost.

I think to help you understand how we got here, we need to go over the history and basics of HTML itself, and by extension XHTML.

HTML was originally created atop something called SGML, Standard Generalized Markup Language. SGML is structural, like the grammar of the language but without words. HTML pre-defines certain tags so that you can say what things are (this is a paragraph, this is a heading, this is a sub heading) or would be (this would be bold or italic in a professionally written document) for grammatical and structural reasons, and NOT what you want things to look like. This was done so that the user-agent (UA) could best determine how to convey that meaning regardless of the capabilities of the device it was delivered on. TTY, teletype, screen, print, aural/speech, doesn't matter it should work.

To that end if you choose any of your HTML tags based on their default appearance, you're choosing all the wrong tags for all the wrong reasons, and much the same can be said of classes and ID's, hence why class="red" is mentally enfeebled trash!

One of SGML's rules is that inside a tag excess characters after the attributes are just treated as attributes without error. This will be important later.

SGML is a pregenitor and kissing-cousin to XML. Extensible Markup Language. In most ways XML is a subset of SGML with far stricter rules. One of those rules is that all tags MUST have an explicit closure.

Because a little over 20 years ago XML was the latest hotness, someone came up with the idea of changing HTML to work in a XML namespace, allowing HTML documents to be formed that work in both legacy SGML UA's, and new XML capable UA's. This reformulation of HTML into the XML namespace was called XHTML.

The problem is that empty/void elements are not a thing XML supports or allows for. Completely invalid under it's stricture rules. To get around this instead of <br> you could use <br/> and XML would treat it properly... but this had a problem, under many SGML parsers (Internet Explorer being the most noteworthy) <br/> is invalid. But because anything after a space in SGML is treated as an attribute even if unrecognized or built from invalid characters, adding a space -- <br /> -- got us around that issue.

Thus <br /> style closures were introduced in XHTML, NOT HTML 5. It was allowed in HTML 5 for one reason and one reason only... to allow HTML 5 to act as XHTML for the handful of nutters who still desperately and pathetically cling to the idea that XML is somehow better and not a technological dead-end... and really that's what XHTML has become, dead. It died young from lack of adoption, and the presence of support for it in HTML 5 is more a leftover relic / concession to the XML fanboys.

In 99% of HTML 5 documents, there's no reason to />. Particularly when not one single legitimate UA that would access a HTML 5 document gives a damn if it's there or not.

HTML in general has seen a lot of false starts, bad ideas that have gone by the wayside, and bizarre attempts to shoe-horn it into doing things (like fitting into an XML namespace) it was never designed for. As these things have been added and removed the specification has turned into a real mess, and I've seen beginner after beginner confused by the result. The ONE attempt to clean things up -- HTML 4.0 Strict -- being mostly stillborne as most people continued to just sleaze out the train wreck that was HTML 3.2 under what was called "HTML 4 Transitional" -- transitional in this case literally meaning "in transition from 1997 to 1998 development practices". Today people still basically sleaze out HTML 3.2 methodologies under HTML 5's lip-service doctype, unaware of just how utterly banjaxed their resultant code is.

Part of why I think HTML 5 needs a healthy does of the "4 Strict" treatment, removing pointless redundancies, clarifying semantic meanings, and an overall gutting of the documentation so that it is written for people who actually use the language, instead of JUST being written for people who program user-agents.

Did we mention that the specification for the language used to write websites isn't written for people who write websites? Yeah, chew on that idea for a while.

 

farhajr
This is why I did not told you about XML and stuff now.
Don't get into all that now, you will merely confuse yourself.

For "now", just remember 2 things.
<img> and <br>
are the tags which do not have a closing tag,
like other tags have.
Example <p> </p>

So to close these 2 tags, you should put a " /", just before the ">" sign.
Not after the ">" sign, before it, like this:
<img />
<br />

If you do this, your webpages will work find in all browsers and in XML parsers also.

All the modern web browsers are recognizing this way of closing these 2 tags, and you will have no problems.

 

WHAT XML PARSERS?!?

See, I would NOT encourage that derpy /> stuff moving forward, because no browser gives a damn one way or the other, nor does any legitimate other UA like screen readers, braille readers, etc. The only thing that cares is XML parsers and honestly, what the F*** actually parses HTML files as XML other than the type of sleazy dirtbag bullshit common to "data scrapers"?

Or as I call them, content thieves.

I mean there's XSLT, but that too is for all intents and purposes deadenberried.

It's a relic of the technological dead end that was XHTML, and belongs in the past serving zero legitimate purpose moving forward.

I know that sounds odd coming from someone who a decade ago was actively promoting XHTML 1.0 Strict, but it's dead. Leave it in the grave alongside attributes like ALIGN and BGCOLOR, or tags like CENTER. No modern code has any legitimate reason to use them. It's just more of the outdated crap that HTML 5 allows that drags us back to the worst of 1990's practices.

 

@deathshadow
browsers also parse XML from feeds.
A lot of webmasters include long description, with HTML in <Description> tag in their XML.
When these tags are left unclosed in these feeds, you will get an error saying something like, feed is not properly formed...

Its not about following HTML or XHTML methods.
Point is, if HTML and XML both support one type of syntax, then use that syntax, instead of remembering 2 different types of syntax.
Reduces error possibility a lot, more like silly mistakes.

I am sure browsers will keep supporting <br /> and <img /> going forward also.

 

Did you mean here "XHTML" and "XML" as a same thing.... Are both of those the same but with 2 different names..

 

XHTML and XML are not really same.
This is difficult to explain to you at this stage, but XML is very strict, and is more like a way to use a structure for similar data.
Like rows and columns in a table. That's the easiest comparison I can think of.
Main purpose is to provide a compatible data source to different platforms coded in different languages.
You can parse XML documents using JAVA, PHP, ASPX, PEARL, etc, almost anything.

XHTML is XML version of HTML, equally strict, but allows use of HTML in XML documents.
Like DeathShadow mentioned, about 10 years back everyone was switching to XHTML on their webpages, but its rarely seen anywhere now.