Ghana Forum
Would you like to react to this message? Create an account in a few clicks or log in to continue.

<ʜᴛᴍʟ> Fully Explained HTML Tutorial - Learn HTML </ʜᴛᴍʟ>

Go down

 <ʜᴛᴍʟ> Fully Explained HTML Tutorial - Learn HTML </ʜᴛᴍʟ> Empty <ʜᴛᴍʟ> Fully Explained HTML Tutorial - Learn HTML </ʜᴛᴍʟ>

Post by The Boss 2014-07-15, 12:19 pm

Preface


This tutorial is intended for beginners or a memory book for those who are already familiar with the HTML language. HTML language learning through this tutorial does not require any previous programming experience. After this tutorial you will have full opportunity to make even a website for yourself / others.




What's HTML?




HTML stands for HyperText Markup Language. HTML is a language designed for the Internet. Its purpose is to create a website looks. That is, HTML is used for images, text, positioning, etc. (ALIGN). HTML language can also be used other than just the positioning, but soon begins to miss something new and it is a sign of learning. Even HTML 4.0 offers new, but the heavier stuff is coded CGI scripts, JavaScript, or Java. There are also a number of different styles such as CSS scripts. Quickly get a website when you use some kind of Web editor, HTML code, but it would be good to feel the bugs, and editor of inadequacies in mind.




Okay, that's the basics. Lets begin the actual tutorial.




Contents


1. Building a website
a) HTML
b) HEAD
c) TITLE
d) META
e) BODY


2. Text to the browser
a) Text entry.
b) Headlines.
c) Style format, line breaks and positioning.
d) Lists.


3. Images to the browser.
a) Image to the screen.
b) An image map.


4. Using tables to get more appearance
a) Page order.
b) Efficient utilization of the table.

5. Using frames to split sites
a) Page two.
b) Frames for efficient use.


6. Forms.
a) The buttons on the screen.
b) More components.


THE END


Notice: I apologize if there is some spelling errors. The reason for this is that I just got tired while writing all this; confused affraid study






1. Building a website.


[a) HTML


Page coding begins with <html> and ends with the </html> command.


Example:

CODE:
<HTML>
Code here.
</HTML>
The string <HTML> indicates that it is an HTML document and </ HTML> string indicates that the HTML document ends. HTML is the language in almost all commands have to start and end characters. So, <HTML> starts HTML document and </ HTML> stop document.


b) HEAD

The next section, <HEAD>. <HEAD> This is used for writing general information of the page page. <HEAD> Section includes also the header section = <TITLE>. <META> Codes that come <HEAD> section of the page explains the information. Let's make at this stage a small page. Take some editor where you can write(notepad / notepad++) do not use any bold or italics. Type the following code in the editor.


Example 1. mypage.html
Code:
<HTML>

<HEAD>

<TITLE>Ghana.forum rules!</TITLE>

<META name="description" Value="Everything is here">

<META name="keywords" Value="everything, here">

</HEAD>

<BODY></BODY>

</HTML>
Save code as mypage.html and open the page you just saved. Page doesn't do anything, and it shouldn't. Try to write to <BODY> section something, like:
CODE:
<BODY> Wohoo! </BODY>.
This time, the text was supposed to be shown, if the text did not come do not panic answers will be found. Let's take a look at Example 1 code.


The first line of <HTML>

- Tells it's a HTML document

The second line <HEAD>

- Starts HEAD section

The third line <TITLE> Ghana.forums rules! </ TITLE>

- Window title

The fourth line is <META name="description" Value="Everything is here">

- A description of the page, or value the value appears in the search on the server, when the page is found in the search engine.

The fifth row <META name="keywords" Value="everything, here">

- The search to find the Server Stuff eq. Value prices


The sixth line </ HEAD>

- Closes the HEAD section

The seventh row <BODY> </ BODY>

- BODY section start and end

The eighth row </ HTML>

- HTML document ends

This clarification might not help alot, but soon everything will be figured out.


c) TITLE

TITLE section gives the window title. <TITLE> Title </ TITLE> this code would change the title of the window to "TITLE". TITLE is always written to HEAD section. Good example for this is the page we already created, mypage.html.


d) META

<meta Name="description" VALUE="Everything here"> Such a code would allow pages "Everything here" description. So if the Search Engine finds your site then your description is "everthing, here".

<meta Name="keywords" VALUE="everything, here"> This code in turn gives the page's keywords Value field defined words are keywords to pages.


e) BODY

BODY is one of the most important elements of the website. It defines the text color, link color, active link color, link color already printed, the background color / image and from there you can run scripts.


Text color text="color"

The link color link="color"

Alrdy clicked links color vlink="color"

Active links color alink="color"
The background color bgcolor="color"

When we created mypage.html BODY partitions wasn't defined in more detail as it was not needed. The following example is the definition of the BODY section.

CODE:
Code:
<BODY text="#800080" link="#FF0000" alink="#000080" BGCOLOR="#FFFFFF">

</BODY>
Make a little change to mypage.html

Example:
Code:
<HTML>

<HEAD>

<TITLE>mypage</TITLE>

<META name="description" Value="Everything here">

<META name="keywords" Value="everything, here">

</HEAD>

<BODY text="#800080" link="#FF0000" alink="#000080"  BGCOLOR="#FFFFFF">

</BODY>

</HTML>
Save this as mypage2.html and see what happened. BODY section features didn't run out of this, but more about them when you need them.


Summary.

Now, we've gone through the key issues in HTML language, and it is time to gather things together. Much on the outside, and a lot of the inside. If you notice at this point that your page does work matter what you do, do not worry. Now, to be attentive to it noticed the following presents a short form of any of the above.

We want to make a website, which background color is red and has a red Heading website. It does not actually sound like much anything and it is not. But when we explain it in the complicated ways so too can become very odd thing. I have given all my energy to explain this matter as simply and briefly. I failed to explain things quite deliberately, that they confuse and complicate the learning even further. Excluded will be figured out so sit back and relax.


Let's start with an example.

Example 3. redwebsite.html
Code:

<HTML>

<HEAD>

<TITLE>Red website</TITLE>

</HEAD>

<BODY BGCOLOR="RED">

</BODY>

</HTML>
So that worked, now to the following thing.

Change
CODE:

<BODY BGCOLOR="RED">
to that:

CODE:

<BODY BGCOLO="BLUE">
Here was briefly the current knowledge. Now go ahead whether you figured out above or not.

Remember:

Body part always comes after head.



2. Text to the browser.


a) Text entry.

The topic doesn't sound so big, but it includes a lot of things. Specific knowledge of the matter, however, is lost or is no longer notice, because it is self-evident. Well let's start.

When you want the text browser must be written in the BODY section. Now make an example of a program that prints the text.


Example 4. text1.html
Code:

<HTML>

<HEAD>

<TITLE>Text in the screen</TITLE>

</HEAD>

<BODY text="#000000" link="#FF0000" alink="#000080"  BGCOLOR="#FFFFFF">

Here's some text, and color should be black

</BODY>

</HTML>
b) Headlines

If something is well done in HTML language, it is its similarity. The end of each section and the start command is written <> between characters such as <BODY> ... </ BODY>. This is also the case in the headlines that have style <H1> ... </ H1>. Let's take a look to example with different titles.


Example 5. headlines.html
Code:

<HTML>

<HEAD>

<TITLE>Otsikot</TITLE>

</HEAD>

<BODY text="#000000" link="#FF0000" alink="#000080"  BGCOLOR="#FFFFFF">

<H1>This is headline1</H1>

<H2>This is headline2</H2>

<H3>This is headline3</H3>

<H4>This is headline4</H4>

<H5>This is headline5</H5>

<H6>This is headline6</H6>

</BODY>

</HTML>
On the screen was going to be a different size labels, if were, good, if not then you know what to do (check spelling). The headline does not make sense to use the appearance of, because different browsers render titles in different ways. Headings are text-purpose tools are not indicative of the style formats. Style of the forms of the time already started to talk to them will be continued in the next.


c) Style format, line breaks and positioning.

You will using a lot of different fonts and accents in your site. Their use by HTML is difficult and laborious. In some situations, it is, however, reasonable to use HTML. FONT section is the keyword and we'll take a look at it now.

FONT section has a variety of commands and have a variety of functions in the next section is a list of important FONT commands.

·FACE "defines what font is used"

·SIZE "defines size of the font"

·COLOR "defines color of the font"

The above clarification probably didn't make it any clearlier, but now some examples to make it clearlier.

Example 6, font.html
Code:

<HTML>

<HEAD>

<TITLE>Font</TITLE>

</HEAD>

<BODY text="#000000" link="#FF0000" alink="#000080"  BGCOLOR="#FFFFFF">

<FONT size="+2" COLOR="blue" FACE="Arial">

Size = 2<BR>

Color = Blue<BR>

Font = Arial<BR>

</FONT>

<BR>And here's some plain text.

</BODY>

</HTML>
As you can see the color of text can can be modified into the BODY section from all other forms, but the most used website noticed the color put on the BODY section. Recent code can be found in new and interesting. I decided to start a row

CODE:

<FONT Size="+2" COLOR="blue" FACE="Arial">.
Piece of code tells the browser that you want to write +2 size letters, color to blue and the font is Arial.

In the example also shows <BR> letters. This is command (carriage return). Next, I will present a number of forms of style which are very convenient, and recommended use.


·<STRONG>...</STRONG> "Important things"

·<EM>...</EM> "Emphasis, highlight"

·<DFN>...</DFN> "Definition, defineable word"

·<BLOCKQUOTE>...</BLOCKQUOTE> "Longer quote"

·<B>...</B> "Bold"

·<I>...</I> "Italic"
The Boss
The Boss
Admin
Admin

Posts : 481
Join date : 2014-07-14

https://ghana.forumotion.com

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum