HTML Basics Dicsussion

RalphD · June 16, 2018, 6:56am

Question: When you want to show a paragraph created in text editor, how many ways can it be done. In the course, it was sent to Firefox. I used to have Firefox, but it was removed because of a problem I had at the time.

CompSciGuyIT · June 16, 2018, 7:27am

Sorry @RalphD I’m not sure if I understand what you’re asking.
Do you mean when creating your html file in a text editor, how to get it to open in a browser?
Or something else?

Checksum · June 17, 2018, 3:57am

Any web browsing program can open the .html file such as google chrome, internet explorer, mozilla, etc. I used chrome.

Kennc · June 18, 2018, 11:31am

Hi all

I just finished the image and break section. I’ve no problem adding an image if its linked to an online image but how can i add an image thats on my computer. the tutorials on line make it seems simple. But i may be missng something

Kennc · June 18, 2018, 12:38pm

Simple mistake. first i didnt realise that the image folder was relative to the html doc and also i did not end the code for image with a forward slash so i had this

But I should of had this

Samm · June 23, 2018, 2:32am

I find that more often than not anymore, including the tag at the front is becoming more necessary. Sometimes weird errors are fixed by including that. Then again, maybe it’s just me!
-Samm

crashwny · July 7, 2018, 6:01pm

I don’t have experience with Visual Studio Code, but I started with HTML back in the 90’s when things were simple. I used CoffeeCup HTML editor, and it mostly left you alone to code yourself. I lost my purchased copy probably a decade ago, and I’m not going to pay to get it back, but it looks like it lost its charm. I prefer a more natural and unobtrusive code editor, and BlueFish works great, and it’s open source.

David_Wyness · July 14, 2018, 7:29am

Hi guys, hopefully you can help with the following.

So I am trying to include a background image with CSS on a html page that has Javascript embedded. I found some code online that on its own works perfectly and displays the image in my browser. However as soon as I insert my javascript the background image no longer displays until the script has finished running. I have tried moving the JS to the head/body and even at the very end of the body.

Is there any work around for this? The HTML/CSS code is below with out the JS as it is quite long. (I have had to remove the “<” from the HTML to enable it to display here rather than be interpenetrated as code).

!DOCTYPE html>
html>
head>
meta name=“viewport” content=“width=device-width, initial-scale=1”>
style>
body, html {
height: 100%;
margin: 0;
}

.bg {
/* The image used */
background-image: url(“nature-12.jpg”);

/* Full height */
height: 100%;

/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;

}
/style>

/head>
body>

div class=“bg”>

/body>
/html>

25thfret · July 31, 2018, 8:16pm

Hello Ivan. I just wanted to say that my studies into this exciting development course are on hold until I finish a business course from MIT. The workload is not self paced therefore I must spend my time on that course first and it is taking all of my time. But I will be back in this course the middle of August! Then I will be able to give you valuable feedback.

Shea_April · September 8, 2018, 4:40pm

In using Atom how does Ivan get to run the “code” beside the text editor. I’ll keep looking and post if I find out.

Shea_April · September 8, 2018, 5:34pm

control+shift+m

Will open a side panel to view your code in Atom.

Also as this community grows It would be lovely we could organize and algimate the comments.a bit.

Shea_April · September 8, 2018, 7:30pm

LOL also after watching the video towards the end of the HTML section “Understanding web technology, Harvard lecture”, I realized that atom was not saving the folder as .html
now that I have saved the folder and manually added .HTML at the end; when I click on the folder it automatically opens in my browser. Also if you’re reading this and have next to no experience I’d almost recommend watching the video first so you have something to model as well as providing a better mental framework to fit what you are going to learn. you can then watch it again with new eyes at the end.

Kakurat · November 20, 2018, 8:39am

Glad to see you got there on your own

PokerFace · January 7, 2019, 1:44pm

Wow…I finally started the course…Back to HTML which i first encountered at University in 1998

Thibault_Langlois · January 7, 2019, 4:39pm

Hi guys, I need help if you may help me somewhat :

I am looking to publish my website on internet (through OVH service), but when I succed to do it, my website doesn’t work properly (only the html code seems to work, not the CSS or Java…) : http://thibaultmz.cluster027.hosting.ovh.net/

Once more, when I wok localy on my computer on my website’s code, all my website is fine and shows well

Anyone ?

Thx guys

MichaelGolpe · February 5, 2019, 10:54pm

Ok, I’m back at it with the programming course. Approaching this with renewed vigor now!

radicall · February 11, 2019, 11:26pm

I like the format so far thanks Ivan, it helps that I am used to your Video Style from Good Morning Crypto!

LordEvil · February 13, 2019, 2:04pm

I see a lot of missing resources when I look at the source of your website. You can use F12 in Chrome and go to the console tab to see for yourself.

When you move your mouse over the filename you can see the expected location. I think you are missing the subfolders with the files you have on your local machine. (Or the rights on the subfolders on your OVH machine are not set correctly)

Hope this helps.

jon_m · November 18, 2019, 5:06am

@ivan, @filip

After watching the extra four HTML tutorial videos in the last lecture (Additional Reading) for this HTML & Web section, I thought it might be helpful to point something out about the last video HTML Tutorial for Beginners - Learn HTML in 30 Minutes https://youtu.be/hrZqiCUx6kg
Even though it does provide some useful material, it also contains quite a lot of deprecated or obsolete syntax for HTML5. This is surprising as the video is from 2016, and HTML5 was initially released in 2014. Even though this syntax may still work, from what I’ve managed to find out from my own research, I think it is considered bad practice to still use it.

I’ve listed the deprecated/obsolete elements and attributes below, together with the CSS styling which can be used instead. I’ve also included links to the relevant MDN Web Docs documentation to back all this up and where you can also find a lot more examples.

I do realise that some people will be working through this section without any prior knowledge of CSS. However, even as a complete beginner, I don’t think it’s good to learn something in HTML as a short-term fix, which you will then have to unlearn because it’s now considered bad practice in the programming community. Even if you don’t learn to actually use the relevant CSS styling until later on, I still think it’s helpful to have someone point out that in order to display certain formatting and styling you should probably wait until you do. It’s good to have the awareness, even if the correct implementation doesn’t come until later.

Having said all that, I’m still a beginner myself, so please let us all know if you disagree with anything in this post!

FONTS & TEXT STYLING

<font> element, together with its attributes color, face and size = obsolete
If styling a paragraph <p>, for example, you can use CSS properties such as in the following example:

p {
  color: blue;
  font-family: Georgia, serif; 
  font-size: 1.5em;
  font-weight: bold;
}

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts

In fact, the following HTML tags should no longer be used to format text according to their default styling. Instead, CSS should be used to format/style the text, with the HTML tags being used to define semantics (i.e. the meaning of a particular word or chunk of text).

For displaying text in italics purely for stylistic or decorative reasons, use the CSS property/value pair font-style: italic;

<em> element — highlights words that should be emphasised (not just for italics)
<i> element — highlights words that are different from the standard text that surrounds them e.g. foreign words, technical terms (not just for italics)

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em#Usage_notes
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i

For displaying text in bold purely for stylistic or decorative reasons, use the CSS property
font-weight (https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight).

<strong> element — highlights words that have a special/greater importance, or seriousness e.g. a warning (not just for bold)
<b> element — highlights words just to draw the reader’s attention to them, but without them having a special importance e.g. keywords (not just for bold)

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b

For underlining text purely for presentation or stylistic reasons, use the CSS property/value pair text-decoration: underline;
<u> element — applies annotation for a specific purpose e.g. to highlight spelling mistakes (by default this is rendered as underlining, but CSS can be used to style other effects with lines e.g. crossing out, overlining, wavy lines, dotted lines etc.)
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u

To display a horizontal line across the page purely for presentation or decorative reasons (e.g. as a separator) use CSS.
<hr> element — specifically defines a thematic break between two paragraphs.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr

BACKGROUND

bgcolor attribute = deprecated/obsolete
Use CSS background-color property instead e.g.

body {
  background-color: lightblue;
}

background attribute = obsolete
Use CSS background-image property instead e.g.

body {
  background-image: url("...file_path...");
}

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body
— scroll down to the Attributes section (see 2nd and 3rd attributes listed)

https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

TABLES

The <table> element attributes border, cellpadding and cellspacing = deprecated
Instead, apply the following CSS properties:

border-spacing to the <table> element;
border to any of the table elements: <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td> ;
padding to the <th> and <td> elements.

e.g.

table {
  border-spacing: 5px;
}

th, td {
  border: 1px solid black;   // values = width(thickness), style, color 
  padding: 5px 10px;         // values = top/bottom, right/left
}

NB: If you don’t want any spacing between the cells, then, instead of border-spacing, you need to apply the CSS property border-collapse to the <table> element, and set its value to collapse as follows:

table {
  border-collapse: collapse;
}

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#Attributes
— see 3rd (border), 4th (cellpadding) and 5th (cellspacing) attributes listed
— bgcolor also listed as deprecated (see 2nd attribute)

filip · November 13, 2019, 12:13pm

Your suggestions do make sense for HTML5 and looks correct. You’ve done great research!

Many people, sometimes even myself, use old html syntax because it’s an old habit. A lot of people learned HTML way back and it takes quite a lot of time to get used to the new syntax.