Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › How to insert HTML in a HTML document.
New Posts  All Forums:Forum Nav:

How to insert HTML in a HTML document.

post #1 of 19
Thread Starter 
I am developing a small project; a series of small tutorials on how to develop websites using HTML.

However, I am stumped straight away. I coded it in HTML myself, but it mucks up when I try to tell the reader what to write.

I would use;

Code:

<code>

<html>
blah blah blad
</html> 
But this doesn't seem to work and it screws the document. Is the
Code:

<code> 

tag still going or has it preceded?

Thanks.
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
post #2 of 19
Uh, should just start with <html> tags. No need for code...
post #3 of 19
Thread Starter 
That was an example in my tutorial. I will post the source code, maybe you will get a better understanding..
Code:

<html>
<head>
<title> How to write a HTML document. </title>
</head>

<body bgcolor="black">
<h2> <font color="lightgreen"><center> How To Write a HTML Document </h2></font></center> 
<br>
<font face="courier new" color="lightgreen"> Welcome to my web design tutorials. These are designed for the common 
man who has never written code, markup, or indeed has a significant knowledge of computers. Contrary to belief,
it is not that hard to write a web page. It depends how long you want to spend at it. Some people do this as a job,
others just as a hobby. For me personally it is just a hobby, and it is <b>great fun!</b>
<br><br>

Best of all, to start writing your own web pages is completely free! Of course you could buy expensive hosting,
IDEs, development programs and so on. But you can get free hosting (just Google it), free developer tools and 
most of them are just as good as ones you would pay for. I made this in <a href="http://projects.gnome.org/gedit/"
target="resource window">Gedit
</a>, the standard "notepad" package in Linux Ubuntu. In windows you can use Notepad, but I highly recommend <a href="http://notepad-plus-plus.org/" target="resource window">Notepad++.</a> Mac users can use TextEdit. Gedit and Notepad++ both have
syntax highlighting, so does TextEdit, I believe. Here are some more common (all <b>FREE</b>) programs that you can use to write your HTML:
<br>
<ul>
<li> PSPad (Windows)
<li> Bluefish editor (Linux)
<li> Kate advanced text editor (Linux)
<li> And Evrsoft front page 2006. (Windows)

</ul>
<br>
There are also a lot that you can buy from large and small corporations, but I'm not going to cover those as I support <a href="http://en.wikipedia.org/wiki/Free_and_open_source_software" target="resource window">FOSS</a> which is basically for free and open source software. <br><Br>


Anyway, lets get on with learning HTML. But, wait! How can you learn HTML if you don't know what it is? From Wikipedia:
<br><br>
<table border="1" align="center" width="90%">
<tr>
<td>
<font color="lightgreen" face="courier-new">HyperText Markup Language (HTML) is the predominant markup language for web pages. HTML elements are the basic building-blocks of webpages.
</td>
</tr>

</table>
<br> To read more, click <a href="http://en.wikipedia.org/wiki/Html" target="resource window">here.</a>
<br><br>
So there you have it. I could give a long winded explanation of what HTML is, but whats the point? You now know that its the basic building blocks of webpages, so now lets get writing!<br><br>
<hr width="90%" bgcolor="lightgreen">
<br><Br>

To start a HTML document, open up your writer software.
<br><br>Type:
<code>
<html>
</html>
</code> 
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
post #4 of 19
Code doesn't do what you think it does. It's basically a phrase tag, which tells the browser how to display the text between the tags: http://www.w3schools.com/tags/tag_phrase_elements.asp

What you need to do is convert all of the < to &lt and the > to &gt.
post #5 of 19
Thread Starter 
Oh. I presumed it was like forum BBcode.
Code:
 and
. How silly, lol. I will look at the article, thanks . +rep.
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
post #6 of 19
Check out something like with syntax highlighting also to make it more readable.

One example is:
http://softwaremaniacs.org/soft/highlight/en/

But there are many other options out there also.
White TITAN
(16 items)
 
   
CPUMotherboardGraphicsRAM
intel core i7-3770k Asus Z77 Sabertooth EVGA GTX 780 SC ACX Corsair Dominator Platinum 16GB (2x8GB) 
Hard DriveHard DriveHard DriveOptical Drive
Samsung 840 Pro  WD Black Crucial M4 LG Blueray 
CoolingOSMonitorPower
Swiftech H220 (Stock cooler on while RMA :( ) Windows 7 64bit Dell 2311h Ultrasharp x 2 Corsair AX850 
CaseMouseMouse PadAudio
Fractal Design Define R4 White (w/ Window) Logitech G700 Razer Control Edition Sound Blaster ZxR 
CPUMotherboardGraphicsRAM
Intel 980x Asus Rampage iii Extreme EVGA GTX580 SLI Patriot Viper Xtreme 12GB DDR3 2000 (PC3 16000) 
Hard DriveHard DriveHard DriveOptical Drive
120GB Corsair Force Series 3 SSD WD Caviar Black 640GB Crucial M4 128GB SSD LG Black Blu-ray Drive SATA Model UH12LS28 
CoolingCoolingCoolingCooling
XSPC RX360 and RX120 Rads Watercool HeatKiller 3.0 Limited Edition Black ... XSPC Dual Bay Res with Swiftech MCP655 Pump Silver Shining Bitspower Compression Fittings 
CoolingCoolingCoolingCooling
PrimoFlex Pro LRT Black Tubing -1/2in. ID X 3/4in. 3x Gentle Typhoon 120mm Fan 1850RPM (AP-15)  1x Noiseblocker NB-BlackSilentPro PL-2 120mm Ul... Koolance VID-NX580 Full Cover GPU Waterblock x2 
OSMonitorKeyboardPower
Windows 7 Home Premium x64 Dell U2311 Ultrasharp x2 Max Keyboard Nighthawk X8 Semi-Custom - Mechani... Antec High Current Gamer 900W 
CaseMouseMouse PadAudio
Xigmatek Elysium Black Logitech G700 Razer Goliathus Creative Sound Blaster Recon3D Fatal1ty Pro 
  hide details  
Reply
White TITAN
(16 items)
 
   
CPUMotherboardGraphicsRAM
intel core i7-3770k Asus Z77 Sabertooth EVGA GTX 780 SC ACX Corsair Dominator Platinum 16GB (2x8GB) 
Hard DriveHard DriveHard DriveOptical Drive
Samsung 840 Pro  WD Black Crucial M4 LG Blueray 
CoolingOSMonitorPower
Swiftech H220 (Stock cooler on while RMA :( ) Windows 7 64bit Dell 2311h Ultrasharp x 2 Corsair AX850 
CaseMouseMouse PadAudio
Fractal Design Define R4 White (w/ Window) Logitech G700 Razer Control Edition Sound Blaster ZxR 
CPUMotherboardGraphicsRAM
Intel 980x Asus Rampage iii Extreme EVGA GTX580 SLI Patriot Viper Xtreme 12GB DDR3 2000 (PC3 16000) 
Hard DriveHard DriveHard DriveOptical Drive
120GB Corsair Force Series 3 SSD WD Caviar Black 640GB Crucial M4 128GB SSD LG Black Blu-ray Drive SATA Model UH12LS28 
CoolingCoolingCoolingCooling
XSPC RX360 and RX120 Rads Watercool HeatKiller 3.0 Limited Edition Black ... XSPC Dual Bay Res with Swiftech MCP655 Pump Silver Shining Bitspower Compression Fittings 
CoolingCoolingCoolingCooling
PrimoFlex Pro LRT Black Tubing -1/2in. ID X 3/4in. 3x Gentle Typhoon 120mm Fan 1850RPM (AP-15)  1x Noiseblocker NB-BlackSilentPro PL-2 120mm Ul... Koolance VID-NX580 Full Cover GPU Waterblock x2 
OSMonitorKeyboardPower
Windows 7 Home Premium x64 Dell U2311 Ultrasharp x2 Max Keyboard Nighthawk X8 Semi-Custom - Mechani... Antec High Current Gamer 900W 
CaseMouseMouse PadAudio
Xigmatek Elysium Black Logitech G700 Razer Goliathus Creative Sound Blaster Recon3D Fatal1ty Pro 
  hide details  
Reply
post #7 of 19
Woahwoahwoah, stop right there. I'm sorry but the code you posted is very old, and not at all according to web standards. I'd recommend you pick up a book on XHTML 1.0 or HTML5 and brush up on how you'll want your HTML to look like. All that styling you have in the HTML (like and bgcolor) are all deprecated, and should never be used as the browser will enter 'quirks' mode and might not display everything correctly. All styling has now been moved to CSS. HTML should be used exclusively for content and separation, there is absolutely no styling allowed using HTML code anymore. Also look up doctypes.
post #8 of 19
Thread Starter 
Whaaaaat?

But it will still "work" no? I am learning more and more CSS as time goes on but I think it can be easier to focus on the project if everything is infront of me, not in another file.

However, I have asked for a book on HTML5 from Santa, so we'll have to see how it pans out wheee.gif
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
post #9 of 19
Quote:
Originally Posted by joshd View Post

Whaaaaat?
But it will still "work" no? I am learning more and more CSS as time goes on but I think it can be easier to focus on the project if everything is infront of me, not in another file.
However, I have asked for a book on HTML5 from Santa, so we'll have to see how it pans out wheee.gif

It will still "work", but perhaps not uniformly across browsers. What you do is up to you, but coding using HTML attributes is not looked favorably upon tongue.gif If you don't like putting things in separate files, there's a nice, modern attribute that's perfect for inline style actually!

Let's say I have this:
Code:
<html>
<head>
<title>Test</title>
</head>
<body>
<h2>Hello World!</h2>
</body>
</html>

The style="..." attribute will give you a place you can stick CSS in right in the body. So if I wanted to, for example, change the h2 to have a red font and give it an underline, I can modify it like this:
Code:
<h2 style="color: red; text-decoration: underline;">Hello World!</h2>

Once you have large sites, however, it is so much simpler and faster to have, for example, a global.css file which you import into all of your documents, so they're all styled the same and you don't have to copy down all that style every time you add a new page.
post #10 of 19
Thread Starter 
Thanks. I took your advice and made this up quickly:
Code:


body
{
background: #4d3319;
width: 100%;
height: 100%;
}
h1
{
font-family: arial;
font-size: 20pt;
text-decoration: bold;
}
h2
{
font-family: arial;
font-size: 16pt;
text-decoration: bold;
}
h3 
{
font-family: arial;
font-size: 12pt;
text-decoration: bold;
}
font
{
font-family: arial;
font-size: 15pt
text-decoration: none;
}
A:link 
{
color: brown
}
A:visited 
{
color: brown
}


How could I style

?

Cheers.

Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › How to insert HTML in a HTML document.