Jump to content
Please Use CODE Tags

Could i get some constructive criticism on my html?

JordanMac
By JordanMac
in Programming
 Share
Posted

Hi guys,

 

Just started learning some html today and decided on trying to make a basic website for my build, could anyone give me some little tips, tricks and some constructive criticism on my code?

<html><HEAD><TITLE>Project Cobalt</TITLE></HEAD><BODY bgcolor="#171717"><div style="center; width:100%;"><br><H1 align="center"><font face="calibri" color="#ffffff">Project Cobalt- One of a Kind, Custom Liquid Cooled PC</font></H1><br><hr><div style="float:right; width:80%">  <center><img height="700" width="1000" src="http://i.imgur.com/mXLCRsY.jpg"</img></div><div style="float:left; width:20%;"> <h2><font face="calibri" color="#ffffff">Component List</font></h2><h4><font face="calibri" color="#ffffff">PC Components</font></h4><p><font face="calibri" color="#ffffff"><br>CPU- Intel i5 3570k<br>Motherboard- Gigabyte Z77X-UD5H<br>Hard Drive- Seagate Barracuda 1tb<br>SSD Boot drive- Intel 330 series 60gb x2 (RAID 0)<br>PSU- Corsair tx750m<br>Fans- 140mm silverstone air penetrators x5<br>Memory- Corsair Vengeance 8gb blue 1600mhz<br>Graphics Card- MSI/Nvidia GTX 670<br>Case- Modified Nzxt Switch 810 gun metal<br>Sleeving- MDPC Blue,white and grey Heatshrinkless</font><br><h4><font face="calibri" color="#ffffff">Watercooling Components</font></h4><P><font face="calibri" color="#ffffff"><br>Reservoir- Bitspower Z-Multi 150mm Water Tank<br>Tubing- 10mm Chromed Copper Pipe<br>CPU Waterblock- XSPC Raystorm<br>GPU Waterblock- XSPC Razor gtx 670 full cover block<br>Radiator 1- Thermochill PA140.3<br>Radiator 2- Phobya G-Changer 280 Radiator<br>Coolant- Mayhems Pastel Blue<br>Pump- XSPC / Laing D5 Vario<br><br>Full Build Log: <a href="">LinusTechTips Build Log</a></font></P></div><div align="center"><br><center><P><font face="calibri" color="#ffffff">This Midplate that seperates the top main compartment of the case from the basement of the case is made from 2 sheets <br>of 5mm acrylic that has been laser etched using a VL350 laser cutter to achieve that awesome pattern. To create the lighting effects several meters <br>of blue led strips are placed on a seperate sheet in order to create that awesome lighting effect</font></P><center><br><hr><center><img height="700" width="1000" src="http://i.imgur.com/pK3UsUZ.jpg"</img></center><br><hr><center><P><font face="calibri" color="#ffffff">With the angled side panel you can't see any of the glare, it hides the pump and hides the hard drive that <br>you dont want to be seen and leaves you with only the good stuff that you really want to show off.</font></P><br><hr><center><img height="700" width="1000" src="http://i.imgur.com/vJ5hoKV.jpg"</img></center><br><hr><center><P><font face="calibri" color="#ffffff">This PC is liquid cooled. A d5 vario pump pushes Mayhem pastel blue coolant around through the chromed copper pipes<br>to the XSPC waterblocks that pull heat from the CPU and the Graphics card. The hot coolant is then cooled with 2 massive radiators,<br>the first being a triple 140mm, 60mm thick radiator. The second being a double 140mm, 60mm thick radiator.<br></font></P><br><hr><center><img height="700" width="1000" src="http://i.imgur.com/AHVR8ai.jpg"</img></center><br><hr><center><P><font face="calibri" color="#ffffff">The front panel has been modified from the stock Switch 810 with a massive cut out and some mesh to keep out the dust.<br>This improves the air flow through the case and through the radiators, this lowers the temperatures of the coolant and hence keeps your CPU and graphics card running cool.</font></P><br><hr><center><P><font face="calibri" color="#ffffff">This rig runs an i5 3570k and an Nvidia gtx 670 which is capable of playing high end titles and perfectly playable framerates, <br>some benchmarks i have run include: Battlefield 3 Ultra Settings at 40 FPS, Battlefield 3 High Settings at 60 FPS and Payday: The Heist at 55 FPS.</font></P><br><hr><center><h2><font face="calibri" color="#ffffff">LinusTechTips Review</font></h2></div><center><object width="640" height="480"><param name="movie" value="//www.youtube.com/watch?v=_T2SKLbpgB8?version=3&hl=en_US&5915"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/watch?v=_T2SKLbpgB8?version=3&hl=en_US&5915" type="application/x-shockwave-flash" width="640" height="480" allowscriptaccess="always" allowfullscreen="true"></embed></object><center></BODY></html>

thanks Guys

-JordanMac

PC Builder, Engineer... BACON    Project Cobalt: http://linustechtips.com/main/topic/38058-project-cobalt-copper-piping-laser-etching-and-more/#entry489258

| NZXT Switch 810 | i5-3570k | gigabyte UD-5H | Corsair Vengeance 8gb ram | GTX 670 | 2x 60gb intel 330 series ssd's in raid 0 | 1tb seagate barracuda hdd | Corsair tx750m | XSPC razor GPU and CPU waterblocks | XSPC d5 vario pump | Thermochill Pa140.3 | phoyba 280mm radiator | Chromed Copper tubing |

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Looks pretty good :D

 

The fact that this is your first day at HTML you did a great job.

\

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

Looks pretty good :D

 

The fact that this is your first day at HTML you did a great job.

thank you, spent like 5-6 hours on it today :)

PC Builder, Engineer... BACON    Project Cobalt: http://linustechtips.com/main/topic/38058-project-cobalt-copper-piping-laser-etching-and-more/#entry489258

| NZXT Switch 810 | i5-3570k | gigabyte UD-5H | Corsair Vengeance 8gb ram | GTX 670 | 2x 60gb intel 330 series ssd's in raid 0 | 1tb seagate barracuda hdd | Corsair tx750m | XSPC razor GPU and CPU waterblocks | XSPC d5 vario pump | Thermochill Pa140.3 | phoyba 280mm radiator | Chromed Copper tubing |

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

There are mistakes with tags:

  • you don't need </img> only <img src="XYZ" > and some of the img tags don't have a '>', images should also have an 'alt' attribute
  • there is a missing </div>
  • many of the <center> tags are not closed

Make the video 845 pixels wide for the correct aspect ratio.

 

You are using lots of outdated elements like <font> and <center> and attributes such as bgcolor and align, while this works it is  recommended that you use css (or style="...") for these.

 

There should be <!DOCTYPE HTML> at the top.

 

Out of curiosity what program did you write this in?

I remain,  

msevilgenius

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Looks alright, but there are several things you could improve:

  • Stick each line in <p>Your Text</p> rather than starting each line with <br/> (if you do, it's better to use <br/> because it's more compliant with the specs, although it usually doesn't matter). This makes it better for loads of things, (like google as well as screen readers) and is the standard for html.
  • Start your code with
    <!DOCTYPE html>

    to define it as html5 so that browsers render it correctly (technically in "Standards compliance mode" rather than "Quirks mode"). This is really important, and without it every browser will interpret your code differently and how it likes.

  • Rather than having:

    <div style="your style">and<div font face="font" color="blue

    you should give each differently styled section a style then either define all the styles in a <style> tag at the top or in a separate .css stylesheet which you include at the start like so:

    <!DOCTYPE html><html><head><style>.classOne{   color:blue;   font:"Times New Roman", Serif;   size:48pt;}.classTwo{   color:green;   font:Calibri, Sans-serif;   size:8pt;}</style></head><body><div class="classOne"><p>I am putting stuff here in blue, times new roman and with size 48 font!</p><p>This paragraph is the same!</p></div><p class="classTwo">This paragraph is green, in calibri and size 8</p></body></html>

  • Please don't use caps for your html tags because it's not as compliant with the standard.

HTTP/2 203

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Looks Good

Rig CPU Intel i5 3570K at 4.2 GHz - MB MSI Z77A-GD55 - RAM Kingston 8GB 1600 mhz - GPU XFX 7870 Double D - Keyboard Logitech G710+

Case Corsair 600T - Storage Intel 330 120GB, WD Blue 1TB - CPU Cooler Noctua NH-D14 - Displays Dell U2312HM, Asus VS228, Acer AL1715

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

There are mistakes with tags:

  • you don't need </img> only <img src="XYZ" > and some of the img tags don't have a '>', images should also have an 'alt' attribute
  • there is a missing </div>
  • many of the <center> tags are not closed

Make the video 845 pixels wide for the correct aspect ratio.

 

You are using lots of outdated elements like <font> and <center> and attributes such as bgcolor and align, while this works it is  recommended that you use css (or style="...") for these.

 

There should be <!DOCTYPE HTML> at the top.

 

Out of curiosity what program did you write this in?

thanks for the advice, it was written in notepad. :)

PC Builder, Engineer... BACON    Project Cobalt: http://linustechtips.com/main/topic/38058-project-cobalt-copper-piping-laser-etching-and-more/#entry489258

| NZXT Switch 810 | i5-3570k | gigabyte UD-5H | Corsair Vengeance 8gb ram | GTX 670 | 2x 60gb intel 330 series ssd's in raid 0 | 1tb seagate barracuda hdd | Corsair tx750m | XSPC razor GPU and CPU waterblocks | XSPC d5 vario pump | Thermochill Pa140.3 | phoyba 280mm radiator | Chromed Copper tubing |

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

 

Looks alright, but there are several things you could improve:

  • Stick each line in <p>Your Text</p> rather than starting each line with <br/> (if you do, it's better to use <br/> because it's more compliant with the specs, although it usually doesn't matter). This makes it better for loads of things, (like google as well as screen readers) and is the standard for html.
  • Start your code with
    <!DOCTYPE html>

    to define it as html5 so that browsers render it correctly (technically in "Standards compliance mode" rather than "Quirks mode"). This is really important, and without it every browser will interpret your code differently and how it likes.

  • Rather than having:

    <div style="your style">and<div font face="font" color="blue

    you should give each differently styled section a style then either define all the styles in a <style> tag at the top or in a separate .css stylesheet which you include at the start like so:

    <!DOCTYPE html><html><head><style>.classOne{   color:blue;   font:"Times New Roman", Serif;   size:48pt;}.classTwo{   color:green;   font:Calibri, Sans-serif;   size:8pt;}</style></head><body><div class="classOne"><p>I am putting stuff here in blue, times new roman and with size 48 font!</p><p>This paragraph is the same!</p></div><p class="classTwo">This paragraph is green, in calibri and size 8</p></body></html>

  • Please don't use caps for your html tags because it's not as compliant with the standard.

 

thanks for the advice i'll add the <!doctype html> and it looks like i'll have to start learning some css to really move forward :)

PC Builder, Engineer... BACON    Project Cobalt: http://linustechtips.com/main/topic/38058-project-cobalt-copper-piping-laser-etching-and-more/#entry489258

| NZXT Switch 810 | i5-3570k | gigabyte UD-5H | Corsair Vengeance 8gb ram | GTX 670 | 2x 60gb intel 330 series ssd's in raid 0 | 1tb seagate barracuda hdd | Corsair tx750m | XSPC razor GPU and CPU waterblocks | XSPC d5 vario pump | Thermochill Pa140.3 | phoyba 280mm radiator | Chromed Copper tubing |

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

I would recommend Notepad++. It helps a lot.

Seconded, even basic syntax highlighting is very helpful.

 

Though if you want something more advanced have a look at Brackets, it's still in development but it's really nice to use, the live preview feature is awesome, and there are plenty of useful extensions.

I remain,  

msevilgenius

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

I would recommend Notepad++. It helps a lot.

 

Even better would be Sublime Text, but the advantages might not become apparent until he's reached some more advanced stages, so I guess Notepad++ could do.

Cheers,

Linus

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

I would recommend Notepad++. It helps a lot.

 

 

Seconded, even basic syntax highlighting is very helpful.

 

Though if you want something more advanced have a look at Brackets, it's still in development but it's really nice to use, the live preview feature is awesome, and there are plenty of useful extensions.

 

just installed it, looks very good and shall be sticking with it

 

and ill have to give brackets a go :)

PC Builder, Engineer... BACON    Project Cobalt: http://linustechtips.com/main/topic/38058-project-cobalt-copper-piping-laser-etching-and-more/#entry489258

| NZXT Switch 810 | i5-3570k | gigabyte UD-5H | Corsair Vengeance 8gb ram | GTX 670 | 2x 60gb intel 330 series ssd's in raid 0 | 1tb seagate barracuda hdd | Corsair tx750m | XSPC razor GPU and CPU waterblocks | XSPC d5 vario pump | Thermochill Pa140.3 | phoyba 280mm radiator | Chromed Copper tubing |

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

If you want a great place to start learning further, try CodeCademy. Otherwise the code looks not too bad save for the few mistakes pointed out by the others. But hey, you're way further ahead of myself on your first day. :D

Desktop: KiRaShi-Intel-2022 (i5-12600K, RTX2060) Mobile: OnePlus 5T | Koodo - 75GB Data + Data Rollover for $45/month
Laptop: Dell XPS 15 9560 (the real 15" MacBook Pro that Apple didn't make) Tablet: iPad Mini 5 | Lenovo IdeaPad Duet 10.1
Camera: Canon M6 Mark II | Canon Rebel T1i (500D) | Canon SX280 | Panasonic TS20D Music: Spotify Premium (CIRCA '08)

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×