Szukaj na tym blogu

Pokazywanie postów oznaczonych etykietą HTML/CSS. Pokaż wszystkie posty
Pokazywanie postów oznaczonych etykietą HTML/CSS. Pokaż wszystkie posty

piątek, 6 lutego 2026

Budowanie strony na bazie tabeli

 

 

Aby zrobić szablon  strony za pomocą tabeli potrzebujesz kodu źródłowego napisanego za pomocą znaczników HTML

Znacznik wstawiania tabeli to:

{<table>

<table>}

Pamiętaj, że potrzebujesz jeszcze znacznika wiersza <tr></tr> i znacznika komórek <td></td>

Jeżeli chcesz zbudować tabelę, która będzie miała trzy wiersze i trzy kolumny (patrz obrazek poniżej)


potrzebujesz następującego kodu:

<table>

<tr>

<td></td><td></td><td></td>        WIERSZ PIERWSZY

</tr>


<tr>

<td></td><td></td><td></td>       WIERSZ DRUGI 

</tr>


<tr>

<td></td><td></td><td></td>      WIERSZ TRZECI

</tr>

</table>


Ale samo napisanie takiego kodu to zdecydowanie za mało. Na samym początku musimy określić wielkość i położenie tabeli. 

WIELKOŚĆ

Jeżeli chcesz na samym początku określić wielość tabeli musisz użyć atrybutu WIDTH (szerokość)

oraz atrybutu ALIGN (czyt: alajn), który określi położenie całej tabeli.

<table width=”1000” align =”center”>

Teraz napisz  kod dla pierwszego wiersza, który będzie miał trzy komórki. Kod będzie wyglądał tak:

<tr>

<td></td><td></td><td></td>

</tr>

Kod napisany jest prawidłowo, ale wam potrzebna jest JEDNA komórka. Należy więc scalić trzy komórki <td> w jedną. 


SCALANIE KOMÓREK

do scalania komórek potrzebny jest atrybut COLSPAN (column span)


<tr>

<td colspan =”3”></td>

</tr>


W drugim wierszu tabeli pozostają trzy komórki ale musisz im nadać odpowiednie wielkości

<tr>

<td width= ”140”></td>

<td width =”680” ></td>

<td width =”180”></td>

</tr>


Trzeci wiersz powinien posiadać jedną kolumnę. Należy ją scalić tak jak w wierszu pierwszym używając atrybutu COLSPAN


PAMIETAJ!

Znacznik table nie służy do tworzenia struktury strony. Robisz to, aby samemu się przekonać jak wygląda budowanie  strony na bazie tabeli.






środa, 25 października 2023

Znaczniki HTML

 kliknij link obok - znaczniki HTML

Ułożenie znaczników w podstawowej strukturze strony - ramy dokumentu
początek struktury          
początek nagłówka        
tytuł strony                  
koniec nagłówka            
                                     
pomiędzy znacznikami body znajduje sie właściwa treść strony
                                      
koniec struktury             
<html>
<head>
<title> tytuł stony</title>
</head>
<body>


</body>


</html>

Wstawianie wielkości czcionki
<font size="n">Tu wpisz tekst</font>
Rozmiar czcionki 3
Rozmiar czcionki 4
Rozmiar czcionki 5
Wstawianie nagłówka
<h1>Tu wpisuje się treść strony</h1>
<h2>Tu wpisuje się treść strony</h2>
<h3>Tu wpisuje się treść strony</h3>
Wstawianie hiperłącza
<a href="względna ścieżka dostępu do podstrony">opis odsyłacza</a>
odsyłacz otwiera się w nowym oknie
<a target="blank" href ="względna ścieżka dostępu do podstrony">opis odsyłacza</a>
Wstawianie tła i kolor tekstu
<body bgcolor="kolor tła" text="kolor tekstu">Tu jest właściwa treść strony</body>
obrazek jako tło
<body background="ścieżka dostępu do obrazka">...</body>
Wstawianie obrazu
<img src="Tu podaj względną ścieżkę dostępu do obrazka" alt=
"Tekst alternatywny" align="rodzaj"/>
img - image; src source:źródło
gdzie jako "rodzaj" należy wpisać:
"left" - obrazek ustawiony po lewej stronie względem otaczającego go tekstu
"right" - obrazek po prawej stronie względem tekstu
"top"   - tekst ustawiony na górze obrazka
"middle" - tekst ustawiony na średniej wysokości względem obrazka
"bottom" - tekst ustawiony na dole obrazka (domyślnie)
 
wstawianie obrazu ze wskazaną wielkością
<img src="ścieżka dostępu" alt="Tekst alternatywny" width="x" height="y"/>
wstawianie obrazu z obramowaniem
<img src="ścieżka dostępu"alt="Tekst alternatywny" border="n" />
wstawianie obrazu, który jest hiperłączem
<a href="ścieżka dostepu obrazu" <img src="ścieżka dostepu obrazu">
Pogrubianie tekstu wyróżnienie
<b>tekst</b>
<strong>tekst</strong> Pozwala wyróżnić dowolny tekst. Polecenie pogrubia tekst
<em>tekst</em> (emfaza)Pozwala wyróżnić dowolny tekst, aby podkreślić jego znaczenie. 
Polecenie zwykle wyświetla tekst napisany kursywą.
Wstawianie lini poziomej
 <HR>
Linii może mieć dowolną grubość
<HR SIZE=5>
Linia może mieć dowolną długość w pikselach
<HR WIDTH=500>
Linia może być umieszczona na środku
<HR ALIGN=center>
Linia może mieć dowolny kolor
<hr color="nazwa_koloru">
Wstawianie tabeli
<table>
<tr>
 <td>...</td> <td>...</td>
</tr>
<tr>
 <td>...</td> <td>...</td>
</tr>
</table> 
<table>...</table> jest znacznikiem tabeli
<tr>...</tr> jest znacznikiem wiersza
<td>...</td>jest znacznikiem pojedynczej komórki
 

obramowanie  tabeli

<table border="x">...</table>
"x" oznacza grubość zewnętrznej ramki tabeli (w pikselach).
Dodaje obramowanie pomiędzy komórkami tabeli, czyli pionowe
i poziome linie dzielące poszczególne wiersze oraz kolumny.
Pozwala określić szerokość zewnętrznej części tego obramowania.
kolor tła w jednym wierszu
<table>
<tr bgcolor="kolor">...</tr>
</table>
kolor w pojedyńczej komórce
<table>
<tr>
 <td bgcolor="kolor">...</td>
</tr>
</table>
Wykaz numerowany (podstawowy) - lista uporządkowana
<ol>
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ol>
Wstawianie wypunktowania lista nieuporządkowana
<ul>
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ul>
Wstawianie indeksu górnego
tu mam tekst<sup> a to jest indeks górny</sup>
np. godziny : 3<sup>00</sup>
                    8<sup>00</sup>



wtorek, 7 marca 2023

Podstawowe informacje

HTML czyli Hypertext Markup Language jest językiem znaczników, którego używa się do tworzenia stron internetowych. 

Podstawowy wykaz znaczników, znajdziesz w linku obok LINK

środa, 8 lutego 2023

Co to jest CSS?

CSS to kaskadowe arkusze stylów -Cascading Style Sheets (css) służą do definiowania układów graficznych dokumentów HTML. Arkusz stylów CSS zawiera reguły opisujące w jaki sposób przeglądarka internetowa ma wyświetlać zawartość dokumentów HTML lub XML.

CSS daje więcej możliwości stylizacji strony i zmniejsza się tez ilość linii kodu HTML



Jak dołaczyc linie css do html?

możemy to zrobić na kilka sposobów.

1. w sekcji head wpisujemy tag link: <link rel="stylesheet" href="style.css"/>

2. w sekcji head wpisujemy znacznik style(znacznik otwierający i zamykający)

<style>

</style>

pomiędzy tymi znacznikami wpisujemy kod css lub fragment kodu. Jeżeli zamieścimy w znaczniku style fragment kodu to wyświetli sie zmiana naniesiona w dokumencie html. dlaczego? bo w kodzie css obowiązuje HIERARCHIA czyli jedne zapisy zasłaniaja inne.
HIERARCHIA czyli KASKADOWOŚĆ

3. W samym kodzie html zmieniamy jakiś element dopisując do niego style CSS 
np <h1 style=" color:green; font-size:32px">

Ćwiczymy pisanie tekstu - krój i wielkość czcionki, kolory

Przeczytaj poniższy fragment wiersza  Juliana Tuwima "Lokomotywa"   wykonaj ćwiczenia: Otwórz program WORD przepisz pierwszych 6 ...