What is HTML?
HTML (defined as HyperText Markup Language on Abbreviation Finder) is a selection language (also called page description language). The idea behind this language is that an HTML document should be viewable by all browsers (browser) regardless of whether the visitor has items. a Mac or PC. Provided, then, that one codes according to current recommendations. You structure the page into different elements (for example, tables, paragraphs and pictures), for help you have different markings (tags). For example: you want to make a list. To select the list, use the start tag<UL>, type your list using the list tags<LI>and end the list with the end tag</UL>. Each element thus has a start tag<tagg>and usually a finish tag</sluttagg>
An element can have different attributes that affect how the element is presented on the screen. Attributes are placed in the start tag, an example of an attribute is border. The attribute is, in turn, usually a value border=0. The value is what stands for equals sign =. Sometimes the value should be quoted, see examples of it a little further down.
Your browser interprets (reads) the various selections (tags) and then knows how to present the page on the screen. Provided it is understood that it can interpret all the markings. If you have coded errors, the reader may not be able to interpret your tags at all or interpret them completely incorrectly. An old web browser cannot interpret all the markings in HTML 3.2 and HTML 4.0. The recommendation before these was called HTML 2.0, after which came a proposal HTML 3.0, which was good but was not adopted as a recommendation. If you want to know which tags are included in HTML 3.2 (recommendation of January 14, 1997) you can check here. Today, HTML 4.0 is the current HTML recommendation (since December 1997). But it was and is the last of that generation. Now it’s XHTML which concerns. But plain honest HTML still works :).
An old browser that encounters a tag it doesn’t understand should give it seventeen and simply skip it. But do not build your entire structure on the page in such a way that it will be completely destroyed unless an older browser can interpret it correctly. Then both Netscape and Explorer have their own tags which unfortunately can only be interpreted by the respective browser.
As a beginner, you have a lot of fun with getting together a good website. You may not be so interested in the basics of HTML. But it can be good to know why a thing is visible in Netscape 4.0 but not in Explorer 5.0 etc. 97% of the browsers browsing Swedish pages are now Internet Explorer (MSIE) 5. * and / or 6. *, see my log file . Comparing to learning a language, certainly the grammar may seem boring but oh so necessary for understanding.
HTML doc UMENT
An HTML document can be created in any text editor at any time, provided you can save the file as.html or.htm – ie plain text (ASCII). Many wonder if there is any difference in using either.html or.htm. The answer is no,.htm comes from the operating system Dos inability to handle more than 3 file extensions. So you should not save your work as index.txt, but it should say, for example; index.html or index.htm. Otherwise, the browser cannot handle the file. If you record a.txt file in a browser, it displays everything, tags and text. If you have Notepad.exe on your hard drive you can use it.
It does not matter if you type:
<TITLE></TITLE>or the <title></title>
Browser does not care about the upper or lower case letters in the tags (except for some exceptions, eg target in frames). However, it is important that all characters come and go with spaces or not.
<tablewidth=”80%”>is wrong, it should stand <table width=”80%”>
A vital space is missing and it should be “around the value. The quotes around the values are not only there for fun, they fulfill their function. It is a bit jarring with the quotes, but why not learn how to do right from be sure to include all the characters in the code. It can sometimes work without, but then gives a syntax error. Too many syntax errors in your document can crash the visitor’s web browser or your page is not presented at all. way you had thought.
The thing with quotes can be a bit irrational and difficult to understand. But fall rather than free. If you are in the least unsure of squeezing in there with a few quotes, they won’t do any harm. A rule of thumb is that as soon as there is a comma, #, space, /, percent, plus + minus – characters in the value, you must surround the value with “characters” and when using letters other than aA-zZ, ie å ä ö. in the habit of quoting URLs and file names.
Some examples of when to quote:
font size = “+ 2”
alt = “Alternative caption”
img src = “filename.gif”
a href = “http://www.atiger.pp.se”
td width = “20 % ”
target =” _ top ”
You should also keep in mind when mixing multiple tags (codes) that they should be written in a certain order. If you start with tag 1, you should also end with tag 1 and so on. an example:
<starttagg1><starttagg2>xxx</sluttagg2></sluttagg1>
If you forget to print a final tag, you never finish the start tag. <b>For example, if you have written to highlight that the text should be in bold type, the rest of the text in your document will be in bold unless you end with a final tag </b>where you want the text to be normal again.
File name / paths
I can also mention another thing, file names with spaces, å, ä and ö. Just because everything goes well in Win 95/98, it does not work everywhere. The servers where you upload your files may have a completely different operating system, they are usually UNIX based. If you have a file named for links.html, then rename it to laenkar.html. In the file names it is also important that you write correctly, the file is called STor.html so type STor.html in the links / filenames.
A very common beginner error is that the html document specifies, for example. the name of the image in uppercase when the file is renamed in lowercase. I have mentioned that it does not matter when writing your tags. But for example. file names, paths and images are very important. Wrong file name of the image in the code compared to how it is saved in the file system unfortunately results in the image will not be visible.
It can be difficult to see in the file manager but there is a trick, open Ws-ftp (see Tips and FTP file transfer) and in that program you see how the files are saved in the right window if you open the folder they are in – then compare with how it is written in your html code. Another common mistake is that you have turned on / – it should say http: // first but sometimes throw some if it to http: \\ which is incorrect. Another common error is that the path to the hard drive is specified and it does not work on the web, there is a drive letter ex. C: \ so you should delete this before transferring the files to your server.
If you start getting many documents and pictures, you may want to structure your “site”. As ex. on Tele 2 your main folder is called html. There you can put your index.html, which is the home page. Then you map so that under html is ex. the docs, gifs and jpgs folders. Then you have to link between the folders. It is not that difficult.
HTML
|
docs
| |
gifs jpgs
From index.html you link to documents in docs like this:
<a href=”docs/info.html”>länktext</a>
From index.html you type path to a gif image in gifs like this:
<img src=”docs/gifs/din_bild.gif”>
or path to a gif image in gifs from the docs folder:
<img src=”gifs/din_bild.gif”>
Up one step is written../ write up two steps../../ Suppose you have a document in gifs and want to link to another in jpgs. Then enter the path
<a href=”../jpgs/ditt_dok.html”>länktext</a>
A simple HTML document
This is how an HTML document can look in an editor.
To see how it looks in a browser, click here!
There may be unintentional line breaks in your browser regarding the examples of doctype and body below.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title>Min hemsida</title>
</head>
<body bgcolor=”#000000″ text=”#ffffff” link=”#ff0000″ alink=”#ffff00″ vlink=”#0000ff”>
<h1>Välkommen</h1>
<p>Detta är ett försök till en egen hemsida.<br>
Så här ser jag ut.
<p><img src=”bb38.jpg” width=150 height=155 alt=”Ego”>
</body>
</html>
What is this Greek? Well, if you start to understand the principle, it looks pretty clear.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>indicates that this is a document written in accordance with the HTML 4.0 recommendation. Doctype is mandatory, see more about this under Miscellaneous, META. You see that it says <html>at the beginning and the </html>end. It indicates that here begins and ends an HTML document.
<head>and </head>marks the header of the document. Note, as a beginner, you can start by just typing in a title on the document that, in a few short words, describes your website. Then you can register the page and the search engines have the title to search on. Entering codes (including META tags) within <head> </head> is probably more for the slightly more advanced website carpenter. See more under Miscellaneous, META.
<title> Det som står här inne är dokumentets titel.</title>. Having a title on your document is mandatory. The title is what appears at the top of the browser’s title bar. This is also what is visible if someone places a bookmark on your page. In a few short words, try to explain what your page is about. Good if you later register it.
<body>and </body>indicates that inside these tags is the document itself, such as text and images. It is also in <body> that you specify the background color / image, text color and the links color.
<body bgcolor=”#000000″ text=”#ffffff” link=”#ff0000″ alink=”#ffff00″> vlink=”#0000ff”> Here in this example it is stated that the background color should be black, the text white, red links, active links yellow and visited links should be blue. See more about hexadecimal colors under Graphics, Backgrounds. If you do not enter anything in the body tag, the page in the browser is displayed by default, often gray, black text and blue links. It depends on how you have set up your reader.
<h1>Rubrik</h1>indicates that the text inside the markings is a heading. The heading is shown in bold and is available in different sizes. <p>tells the browser that here comes a new paragraph. <br>tells the browser that here it will break to a new row. <img src=”bb38.jpg” width=”150″ height=”155″ alt=”Ego”>tells the browser that this image should be loaded. You also specify the height and width of the image and specify an alternative text for the image, here alt = “Ego”, see more about this under Graphics.
Å , Ä and Ö
In an ordinary text editor must replace some characters with a special code. Four characters from the ASCII table are especially important. There are and. They each have a special meaning in HTML and therefore cannot be written straight up and down in your plain text. This is how you should type <html> in the editor as usual when entering a tag. But not . Then you need to encode <to & lt; you should writeinside the editor. < > &”mindre än=<mindre än=<
Well, says friend of order. What about our Swedish characters then? If you sit and write in an editor, you will often find that it often encodes our letters, otherwise there is usually a shortcut that does it for you. But it is not really necessary since the new international “character set” ISO lat1 PUBLIC ISO 8879-1986 // became standard. The only crux is that not all servers are configured in this way.
Personal websites hardly need to be re-coded unless you think it might become popular and subject to print. Because there, Mac owners apparently have problems if you don’t re-code. They have a different character set. But they see the pages completely okay on the web without re-coding. Or if you start writing pages for companies and internationally, then you should spend time coding our Swedish letters.
| < med <> med >
& med & ” med " ä med ä |
Ä med ÄÖ med Ö
ö med ö Å med Å å med å |
HTML editors
There are many good HTML editors to download from the web. I recommend HomeSite (the same company that sells Dreamweaver) that has a built-in validator (check that you have coded correctly), where you can code manually or use different shortcuts / keys and that it codes correctly. Which unfortunately you cannot say that most other Swedish or English editors do. If you just want to test, there is an older free version (though not with all the features) to download under the Links section . For Mac, WYSIWYG editors include Golive Cyberstudio (now also available for Windows).
I started with my first website in Netscap’s WYSIWYG editor, What You See Is What You Get. If you want to try Netscape, you can pick up an evaluation copy from Sunet or at Netscape . Here you do not have to pee with the codes, you type, click on buttons and you see the result grow. For beginners, maybe a good start. But a word of warning if you want to make a professional impression and code clean, avoid WYSIWYG editors.
I did a survey and asked what my visitors use for editors. Thank you for all the answers. It was obviously an interesting theme. Most advocates using a text editor or HTML editor type HomeSite for best results. Most were in agreement in their comments that FrontPage and other WYSIWYG editors were less good. However, many worked on such, but then adjusted the code manually in a text editor. I have listed the results in a table for interested parties.