HTML (Hypertext Markup Language) is the language needed for the creation of web pages. I will skip the part about the history and the development of HTML, and focus on its practical use.
To start creating an HTML document open Notepad and type the following: <html><head>
<title>Document title</title>
</head>
<body>
Enter here some text
</body></html> Now go to File > Save As..., in the field Save as filetype choose All files, and in the field above enter a name for the file, type a period and add htm or html (for example: "aname.html" - without quotes ). Save it.
Every HTML document has to have the tags you see in the above example (except if it is a document with frames - then you use instead of "body" the "frameset" tag). To set the background and text color for the document, you could put the attributes bgcolor and text with desired values into the BODY tag. Example: <body bgcolor=red text=black> The document background color is now red and the text color is black. In order to change the background or text color, just change the values of these attributes (the name of the color in English - e.g. green, azure, magenta etc. or in hexadecimal form - "#000000" for black, "#FFFFFF" for white, "#FF0000" for red etc.). If you want a different color for a certain word or sentence, you can use the <font> tag (though it is recommended to use CSS for that purpose). Example:
<body bgcolor=red text=black>This text is black <font color=white size=4>and this one is white and font-size 4</font>.
The font-size goes from 1 to 7 (default is 3), and for the font-color applies the same as for the background-colors.
General notesKeep all your files related to your site in one folder.
In order to view or edit an HTML document, right-click on that page (but not on an image or link) and select View Source or choose from the menu on the top View>Source
HTML ignores more than one space, so if you need more space between letters or some other elements on the page use or employ CSS.
Elements can't overlap each other. For example, if the <b> tag appears within a <p>, the </b> end tag must appear within the same <p> element.
HTML isn't case-sensitive and it will work even if you mix uppercase and lowercase letters in the source code (though it's recommended to use uppercase for the tag and attribute names).
The head section There are 6 active elements you can put between the <head>..</head> tags: <title>, <link>, <style>, <script>, <meta>, <base>.
The content inside the <title>...</title> tags will appear in the title-bar of the browser.
The <style> and <link> elements refer to CSS, while the <script> element refers to scripts.
<META> tags are important for search engine placement. The most important attributes are name and content. Example:
<meta name="description" content="Article about Meta tags">
<meta name="keywords" content="meta, keywords, html, http-equiv, tag">
The body section In order to produce visible content for a web page you have to put it between the <body<...</body> tags. If you would just type text between the tags it would appear on the web page. But in order to put images on the page, align elements on the page, make links between pages and so on, you need to know something about the HTML elements.
There are 6 levels of headings, <H1>-<H6>. Attibutes you can use inside this tag are: align, style, class, id. Example:<h2 align=center style="color: maroon;font: Helvetica">Heading for page</h2>
To make a linebreak, you can use the <P> tag, which tells the browser to separate text into paragraphs with a space between; a closing tag is not required, but is recommended. Possible attributes: align, style, class, id. The <BR> tag also forces a new line, but without the space between; this is an empty tag, meaning it has no attributes and doesn't need a closing tag.
To insert an image in a web page you have to use the <IMG> tag (no closing tag), together with the attribute SRC (source). Example: <IMG SRC="someimage.jpg" width=100 height=120> Other possible attributes for the IMG tag are: align, alt, border, hspace, vspace, usemap etc.
Hyperlinks are the most important part of the Internet and that's what made the Web so popular. To link to other pages, the <A> (anchor) tag is used with the HREF attribute (closing tag is required). Example:<a href="somepage.html">Link</a> If the link leads within a site, it's enough to put just the name of the linked page, but if the link is leading to a page outside the current site, the full path has to be used (like, http://geocities.com/kostic_dejan/somepage.html). To open the new link in a separate browser window, use target="_blank". It's important to note that the name of the link (here called 'somepage.html') can't contain spaces and that it's case-sensitive - otherwise the link might not work.
To create an email - link the same atribute is used, but inside the quote you need to put mailto: followed by the email address. Example: <a href="mailto:[email protected]">Send email</a>
Aligning elements on a page is also important and for that purpose the align atribute is used inside an appropriate tag. The possible values are: left, right, center, justify. The use of CSS for the positioning and alignment of elements is recommended.
The mastering of tables is very important in order to control the overall layout of a page, but that is one of the most difficult parts of HTML. It's easy to make a simple table, like
<table width=100% align=left><tr><td bgcolor=azure>Here goes the content. You can use inside a table any of the other HTML elements</td></tr></table>
But the difficult part comes when you want to put tables inside tables. That can take quite some time to master.
Some possible attributes for the <TABLE> tag are: width, height, border, bgcolor, id, title, for the <TR> (table row) tag: height, align, bgcolor and for the <TD> (table data) tag: width, height, bgcolor, align, title, rowspan.
|