poniedziałek, 10 czerwca 2013

Kody HTML

Tworzymy swoją stronę Internetową

Aby two­rzyć w HTML trzeba w przy­naj­mniej małym stop­niu znać język angiel­ski. Bez tego się nie obę­dzie. Przed­sta­wię gotowy kod, z miej­scem na prze­su­wa­jący się tekst do góry, tekst oddzie­lony, tekst, oraz zdję­cie. A oto on:
<html>
<head>
<title>TUTAJ WPISUJEMY TYTUŁ STRONY</title>
</head>
<body>
<body bgcolor=“TUTAJ WPISUJEMY KOLOR TŁA STRONY”>
<cen­ter>
<marquee><h1><font color=“TUTAJ WPISUJEMY KOLOR TEKSTU, KTÓRY MA SIĘ PRZESUWAĆ”>TUTAJ WPISUJEMY TEKST, KTÓRY MA SIĘ PRZESUWAĆ</font></h1></marquee>
<hr>TUTAJ WPISUJEMY TEKST, KTÓRY MA BYĆ ODDZIELONY, NP.: ZAPRASZAM NA FORUM.TOIN.PL.<hr>
TUTAJ WPISUJEMY TEKST STRONY
<img src=“TUTAJ WPISUJEMY, KTÓRE MA BYĆ ZDJĘCIE DODANE”>
</body>
</html>
  • Teraz pada pyta­nie: Co wpi­sać i co w ogóle z tym kodem zrobić ?
Zacznę opi­sy­wać po kolei:
1. Kod wpi­su­jemy w Notat­niku, a stronę zapi­su­jemy koniecz­nie jako: “index.html” (bez cudzysłowu).
2. Tam, gdzie mamy wpi­sać tytuł wpi­su­jemy to co będzie się poka­zy­wać na pasku tytu­ło­wym prze­glą­darki do góry.
3. Tam, gdzie mamy wpi­sać kolor tła strony wpisujemy:
  • Jeden z pod­sta­wo­wych kolo­rów w języku angiel­skim, np.: blue
  • albo kolor w for­ma­cie HTML-owym, np.: #CC0000
4. Z kolo­rem tek­stu, który ma się
prze­su­wać jest tak samo jak wyżej.
5. Tam, gdzie mamy wpi­sać tekst tek­stu, który będzie się prze­su­wał wpi­su­jemy wybrany przez nas tekst, np.: “Witam !”.  Znacz­niki <h1> można usu­nąć, one tylko kon­tro­lują jaki ma być roz­miar tego tekstu.
6. Tekst oddzie­lony jest oddzie­lony linią o góry i u dołu. Za oddzie­le­nie odpo­wiada znacz­nik <hr>.
7. Tekst strony możemy dowol­nie sfor­ma­to­wać znacz­ni­kami zawar­tymi w tabelce u góry.
8. Aby wsta­wić zdję­cie musimy wie­dzieć do jakiego fol­deru wsta­wimy ten obra­zek na ser­we­rze. Jeśli, np.: do fol­deru “ima­ges”, a obra­zek będzie się nazy­wał “dom.jpg”, wtedy linijka kodu odpo­wie­dzialna za obraz, będzie wyglą­dać następująco:
<img src=“images\dom.jpg”>
Możemy rów­nież wrzu­cić zdję­cie “luzem”:
<img src=“dom.jpg”>
Fol­der, lub luźne zdję­cie musi być w tym samym miej­scu co plik strony (index.html).
9. Nasza strona jest gotowa. Możemy dodać dodat­kowe znacz­niki i inne rze­czy, ale musimy pamię­tać o zamy­ka­niu znacz­ni­ków, np.: <b><i>TEKST</i></b>. Teraz wystar­czy wgrać ją na ser­wer.

 Przydatne kody

  • Kod na wstawienie obrazka do prezentacji:
Kod:
<img src="http://img19.imageshack.us/img19/8947/avataryd.png" border="0"> 
src - link bezpośredni do obrazka! 
border - zmiana rozmiaru obrazka; 0 to wartość początkowa
  • Kod na link w prezentacji:
Kod:
<a href="http://pastehtml.com/view/ayfgzn8jh.html">tekst</a> 
href - link do odnośnika
Kod:
<a style="color: rgb(2, 2, 2);" href="http://pastehtml.com/view/ayfgzn8jh.html">tekst</a> 
color - zmiana koloru odnośnika
Kod:
<a style="color: rgb(2, 2, 2);" title="wejdz na podstrone :)" href="http://pastehtml.com/view/ayfgzn8jh.html">tekst</a> 
title - po najechaniu na link wyświetli się tekst zapisany w tym polu

  •  Kod na pogrubienie, pochylenie i podkreślenie tekstu.
Kod:
 <b></b> <i></i> <u></u>
Autor: o

Brak komentarzy :

Prześlij komentarz

Subskrybuj: Komentarze do posta ( Atom )