 |
|
 |  |
| Aeronautica | Comunicatii | Drept | Informatica | Nutritie | Sociologie |
| Tehnica mecanica |
Html
|
Qdidactic » stiinta & tehnica » informatica » html HTML - bazele programarii HTML - ce software ne trebuie? |
HTML - bazele programarii HTML - ce software ne trebuie?
PRIMA PAGINA
Introducere
HTML este limbajul
care face web-ul sa mearga. Este limbajul de programare cel mai des intalnit in
site-urile pe care le vizitati. Este inteles de orice computer din lume si este modul universal de a crea documente. HTML nu are cele mai bune unelte de formatare si de aceea nu
puteti garanta ca paginile voastre vor arata la fel in orice browser, dar fara
el nu ar fi internet.
Puteti, bineinteles, folosi un editor WYSIWYG (What
You See Is What You Get) HTML pentru a face website-uri, dar ele au 3
dezavantaje importante:
- Uneori folosesc prea mult cod pentru a crea designul unei pagini, ceea ce incetineste timpul de descarcare
- Nu intotdeauna folosesc un cod pe de-a-ntregul compatibil
- Unele editoare WYSIWYG schimba orice cod HTML introdus de mana
Din aceste cauze, puteti crea mult mai bine cod HTML scriind de mana. Trebuie sa admit ca eu nu fac asta prea mult pentru ca imi ia mai
mult timp decat folosind un editor WYSIWYG, dar stiu ca este bine sa ai
cunostinte de baza de HTML. Va asigur ca daca veti
invata HTML veti crea pagini web mult mai bune.
Acest tutorial va va invata bazele programarii HTML.
Ce software ne trebuie?
Nu aveti nevoie de un software special pentru a scrie
cod HTML si multi web designeri argumenteaza ca cele mai bune web site-uri sunt
create in Notepad! Pentru acest tutorial, totusi, voi folosi
unul din programele mele preferate de web design, FirstPage 2000. Este gratuit si puteti sa-l descarcati.
Unele din avantajele folosirii unui editor HTML este
acela ca va colora codul HTML astfel incat va fi usor de citit, 'sters' codul
cand ati terminat, si puteti folosi butoane pentru a insera coduri care se
repeta.
Nu conteaza daca folositi Notepad, FirstPage 2000 sau alt editor HTML, acest
tutorial va va invata limbajul HTML.
Intelegerea limbajului HTML
Limbajul actual HTML este usor de invatat odata ce
cunoasteti bazele. HTML este facut din tag-uri. Un tag
este o parte de text continuta in <> si arata astfel
Exista 2 tipuri de tag-uri. De deschidere si de inchidere.
Cele de inchidere sunt diferite doar prin / inaintea lor
Tag-urile apar in perechi astfel:
<center>Text in here is centered</center>
Orice este continut intre 2 tag-uri va avea aceste
tag-uri aplicate. Un bun exemplu este folosirea
tag-ului pentru a alinia textul:
Text in here is centered
Aproape orice tag are
si un tag de inchidere, dar cateva nu au. Ce trebuie sa va amintiti este
Text
Declararea HTML
Deschideti programul pe care il folositi pentru a scrie HTML. Daca folositi un editor HTML veti avea niste cod deja. Daca nu aveti deja,
scrieti urmatoarele
Va voi explica ce inseamna mai jos:
Aceasta ii spune browser-ului ce limbaj a fost folosit pentru pagina. Nu este
neaparat necesar, dar este bine sa fie .
Ii spune browser-ului unde este inceputul unui
document HTML.
Acesta este inceputul sectiunii header. Sectiunea
header contine configurarea optiunilor paginii(cum ar
fi titlul).
Ii spune browser-ului ce sa scrie drept titlu al
paginii. Aceasta apare in bara de titlu in partea de
sus a browser-ului. Introduceti numele paginii voastre intre
tagurile
Sfarsitul sectiunii header.
Orice este cuprins intre aceste taguri este corpul
paginii. Aici este locul textului, imaginilor etc.
Aceasta este cea mai importanta parte a paginii.
Arata sfarsitul documentului HTML.
ADAUGAREA TEXTULUI
Introduction
In part 1 I explained how to declare an HTML document and I explained how HTML
was built up using <tag>text</tag>. Below is the HTML you added in
the last part.
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0
Transitional//EN'>
<html>
<head>
<title>Untitled</title>
</head>
<body>
</body>
</html>
For this section of the tutorial I will show you how to create a simple
homepage. The first thing you will want to do is change the title of the page
from Untitled to:
My Personal Homepage
To do this change the tag:
<title>Untitled</title>
to
<title>My Personal Homepage</title>
The <font> Tag
The <font></font> tag set are the most common and one of the most
versatile tags found in HTML. Using the tags in the basic form they will show
text on the page (but they can be changed). To start off we will just display
the text
Welcome To My Homepage
on the screen. To do this you need to add
<font>Welcome To My Homepage</font>
between the <body> and the </body> tags. This will display the text
in a standard font size, black, in Times New Roman. Not the most interesting
thing for your homepage.
Size, Color and Face
These are the three things you can set for a piece of
text. These are the first tag attributes you have come across. We will start
with the Face attribute. Instead of having a new tag for font face (the font it
will be displayed in) you add it to the font tag like this
<font face='Arial'>Welcome To My Homepage</font>
As you can see you enclose the name of the font in quotation marks ''
after an equals sign. You do not need to include this in the end tag.
More than one attribute can be added to a tag so it is easy to display this in
a different size. The only thing you must remember is that sizes in HTML are
not the same as normal font sizes (measured in point sizes (pt). They are a
single number which relate to a standard font size in the following way:
|
|
|||||
|
HTML Font Size |
Standard Font Size |
||||
|
|
8 pt
|
||||
|
|
10 pt |
||||
|
|
12 pt |
||||
|
|
14 pt |
||||
|
|
18 pt |
||||
|
|
24 pt |
||||
|
|
36 pt |
You can make a nice large title by changing the tag to the following
<font face='Arial' size='7'>Welcome To My
Homepage</font>
As you can see, once you know a tag it is easy to add extra options to it. The
final one you will learn is the color tag. You must make sure that you must use
the American spelling for this. Color is a little different to the other
attributes. It can be changed using an HTML Color Word (a standard color name)
but only some color names work with this (you can see a list of them here). You
can also use HEX codes. HEX codes are in the format #000000 (# followed by six
numbers). The first 2 numbers are the amount of Red, the second 2 are Green and
the last 2 are blue. To made this text red you could either use
<font face='Arial' size='7'
color='red'>Welcome To My Homepage</font>
or
<font face='Arial' size='7'
color='#FF0000'>Welcome To My Homepage</font>
Centering The Text
Finally you will want to center the text so that it looks like a real title. To
do this you can use the <center> tag. To do this simply enclose
everything you want centered in the <cente
r> tags like this
<center>
<font face='Arial' size='7'
color='red'>Welcome To My Homepage</font>
</center>
Which would display text like this:
Welcome To My Homepage
Summary
You have now learnt how to display text on your web
page and how to format the color, size and font of it. You have also learnt how
to center things on the page. This is the code you should now have for your
website.
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0
Transitional//EN'>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<center>
<font face='Arial' size='7'
color='red'>Welcome To My Homepage</font>
</center>
</body>
</html>
POZITIONAREA TEXTULUI
Introduction
In the last part we finished with the following code:
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN'>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<center>
<font face='Arial' size='7' color='red'>Welcome
To My Homepage</font>
</center>
</body>
</html>
Which displayed the words 'Welcome To My Homepage' in large, red, Arial letters
in the middle of your page.
In this part I am going to show you how to position text (or anything else) on
your page. I will also show you some other useful HTML tags.
The <p> Tag
The <p> tag is extremely. P stands for
Paragraph. It is used to break up text into paragraphs. To define a paragraph
you just include the text inside the <p> and </p> tags. This will
then group the text together and leave a space after it (like the paragraphs on
this page.
The <p> tag has an attribute which can be added to it. This is the align
option. You can specify three types of alignment (like in a word processor) -
left, center and right. For example to align the text right you use
<p align='right'>Text</p>
It is up to you to decide whether to use the <center> tag or the <p
align='center'> tag. I usually use the <center> tag as it is
shorter which will reduce loading times. It is hardly ever necessary to use the align='left' attribute as nearly all browsers
automatically align text to the left but some people use it.
The <br> Tag
Sometimes you will not want to leave a space after
your paragraphs. To do this you should use the <Br> (break) tag. This tag
is very useful as, wherever you insert it, it will start a new line. To create
a new line without a space you use the <Br> tag and to create a line
break you use <Br><Br>. There is no end tag for the <Br> tag.
For example
This text is on a line
This text is on the next line
This is text after a line break
This is text after 3 <Br> tags.
The <hr> Tag
The <hr> tag is another very useful way of breaking up your page. It will
insert a horizontal line like this:
As you can see this is an extremely simple to use tag. It has no closing tag.
There are a few attributes for them but they are rarely used. You can change
the height (in pixels) the width (in % of window or pixels) and the color
(Internet Explorer only). Here is an example of how to create a line 30 pixels
high, 50% of the window in blue (you will see it in gray if you are not using
Internet Explorer
<hr width='50%' size='30' color='#0000FF'>
Comment Tags
Comment tags are useful if you want to put notes into your HTML code which will
not show up on the page. They can be used for copyright notices, little notes
to tell you what each section of code is about, notes
to people reading your code or anything else you want to use them for. Some web
hosts use them so that their servers will know where to insert banners (they
look for a specific comment which you must add). These comments take the form
<!-- Your comment -->
The browser will ignore anything in a <!-- --> tag.
HYPERLINKS SI SEMNE DE CARTE
Introduction
You should know how what a hyperlink is and what it is
used for. If you do not, a hyperlink is a piece of text you click to be taken
to another page. A bookmark is a way of bookmarking a point on your page so
that you can hyperlink to it.
The <a> Tag
The <a> tag is used when creating hyperlinks and bookmarks. It stands for
anchor. The functions are explained more fully below.
<a href>
To create a hyperlink you need to use the href variable of the <a> tag.
Href stands for Hyperlink REFerence. To make a piece of text or an image into a
hyperlink you contain it in
<a href='pageurlhere'>Text Goes In Here</a>
Hyperlinks can specify several things:
|
Function |
Example Code |
|
Web Page or Site |
<a href='https://www.webaddress.com/folder/page'> |
|
Local Page |
<a href='pagename.html'> |
|
Local Page In A Folder Level Below |
<a href='foldername/pagename.html'> |
|
Local Page In A Folder Level Above |
<a href='../pagename.html'> |
|
Open E-mail Program With E-mail Addressed |
<a href='mailto:yourname@yourname.com'> |
|
Bookmarked Section |
<a href='#bookmarkname'> |
|
Bookmarked Section In Another Page |
<a href='pagelocation.htm#bookmarkname'> |
Bookmarks
Bookmarks on a page are very easy to make as they also use the <a> tag.
Instead of changing the href variable you use the name variable. For example
<a name='top'>The First Text In The Page</a>
Will create a bookmark called top in the text which the tag surrounds. An image
can also be contained in this tag. You can then link to this using a standard
hyperlink
<a href='#top'>Back To Top</a>
You can name bookmarks anything you like. Bookmarks are very useful on pages
which are very long as they can be used to quickly go to another part of the
page.
IMAGINI SI BACKGROUND
Introduction
images are a very important part of an HTML page. They make it different from
an e-mail or just a printed page. They can be used as a design element to make
pages look better and can be used as the background to make the page more
interesting.
Images
Images are added to pages very easily. All you need to do is use an <img>
tag. You must use some variables with it, though, or it will show
Which is not very helpful. You must use the src= variable to choose the image
to insert. Like a hyperlink this can either be a relative reference or a direct
reference including the site's url. For example
<img src='https://www.gowansnet.com/images/gnet.gif'>
If you include an image in a hyperlink it will, by default, display a blue
border round the image. To turn this off you should use the
border='0'
variable for the image.
Resizing Images
You can resize images inside the browser using two other
image variables - width and height. Even if you do not want to resize the image
it is useful to specify its size using these variables as it will put a
placeholder in the browser and the page will not change much when the image is
loaded.
These tags can also be use to make an image bigger or smaller. All measurements
are in pixels. Here is an example
<img src='https://www.gowansnet.com/images/gnet.gif'
border='0' width='80' height='30'>
or
<img src='https://www.gowansnet.com/images/gnet.gif'
border='0' width='10' height='10'>
It is good to remember that it is probably better to resize an image in an
image editing program if you are making it smaller. This is because the smaller
image will have a smaller file size and will load quicker. This would not be
the case if you resized it in the browser.
Alt
The final variable of an image is the alt variable. This tells the browser what
the alternative text for an image should be if the browser has images turned
off. It is used like this
<img src='https://www.gowansnet.com/images/gnet.gif' alt='The
Gowansnet Logo'>
Finally you should also remember to use gif or jpeg images as the file sizes
are much smaller.
Background Colors
You can change the background color of the page using
the bgcolor variable of the <body> tag. It is used like this
<body bgcolor='#0000FF'>
which would set the background color as blue. You could also use an HTML color
word.
This is a very simple tag to use as there is really no more to it. You should
always remember to ONLY use a light color text on a dark background or a light
color text on a dark background. NEVER use blue on red or red on blue. It is
generally thought that a white background with black text is best.
Background Images
Background images can be placed on a web page. A background image is an image
which is tiled behind the text. It is done using another variable of the
<body> tag. It is background and it is used like this:
<body background='myimage.gif'>
It is sometimes a good idea to include a background color as well so that
people can read the text on the right color before the background image has
loaded. Again, you should remember only to use contrasting colors.
Summary
That is the end of this tutorial. You have learnt how
to create an HTML page with formatted text split into paragraphs, insert
images, link between pages and link to different parts of you
r page. Watch out for our tutorials on how to create frames and tables.
| Contact |- ia legatura cu noi -| |  |
| Adauga document |- pune-ti documente online -| |  |
| Termeni & conditii de utilizare |- politica de cookies si de confidentialitate -| |  |
| Copyright © |- 2024 - Toate drepturile rezervate -| |  |
 |
||||||||||||||||||||||||
|
||||||||||||||||||||||||
|
||||||||||||||||||||||||
Esee pe aceeasi tema
| ||||||||||||||||||||||||
|
| ||||||||||||||||||||||||
|
||||||||||||||||||||||||
|
|
||||||||||||||||||||||||