Informacje z pierwszych lekcji

  1. Jest sobie coś takiego jak entity i jest to coś w stylu stalej. Znaki mające jakąś funkcję trzeba zapisywać za ich pomocą. np. "&lt;" co tworzy < (& - ampersand)
  2. Są takie znaczniki jak:
    • <dfn> - define oznaczający definicję.
    • <cite> - służy do cytowania i oznacza osobę cytowaną. Cytat umieszcza sie w <blockquote>. <blockquote> ma atrybut cite który powinien zawierać źródło.
    • <font> - służy do nadania czcionki. Ma takie atrybuty jak size, czy face (czyli jaka czcionka)
    • <pre> - służy do umieszczenia preformatowanego tekstu.
    • <sup> - służy do zrobienia indeksu górnego.
    • <sub> - służy do zrobienia indeksu dolnego.
  3. Nagłówki (np <h1>) istnieją od h1 do h6.
  4.       &nbsp; Służy do robienia spacji w liczbię >1.
  5. Są też znaczniki semantyczne. Mają one wartość informacyjną dla botów. Przykłady:
    • <strong> - służy do podkreślenia czegoś dla bota i jednocześnie pogrubienia
    • <em> - służy do podkreślenia czegoś dla bota i jednocześnie użycia kursywy
    • <code> - służy do oznaczenia fragmentu kodu
    • <var> - służy do oznaczenia zmiennej w kodzie
    • <adress> - W nim umieszczamy adres.
    • <acronym> - W nim umieszczamy skrótowce. W atrybucie title umieszczamy rozwinięcie. Możemy również określić język w atrybucie lang jeśli jest on inny od języka strony.
    • <abbr> - Od abbreviation. Jest to tag oznaczający skrót.

Uczę się list

Pojęcie
Pojęcie coś oznacza. Należy je przeprowadzić w konretnej kolejności
  1. Zrób kawę.
  2. Wypij ją.
Inne pojęcie
Inne pojęcie nic nie oznacza. Skoro nic nie oznacza, to zamiast niego możesz zrobić różne rzeczy jak np.
  • Odpocząć.
  • Zrobić coś innego.
Pojęcie Opis tego pojęcia

Uczę się tabel.

Tabela 1.1
Header1 Header2
Stopka
Komórka 1 Komórka 2
Komórka 3

Wstawiamy obrazki

Logo Bractwa Stali

Odnośniki

Przejdź na Udemy, stamtąd się uczę xD (Ale nie oceniaj przez mój pryzmat bo debil here)

Tutaj jest wewnętrzny odnośnik

Tutaj można do mnie napisać, o tu tu tu

Możesz też przejść do początku

Uczymy się ramek.

Uczymy się formularzy.

Uczymy się podstaw kaskadowych arkuszy stylów.

W tychże arkuszach można zmieniać właściwości wyglądowe tagów.

Wygląda to następująco:

body
    {
        background-color: rgb(210,210,210);
    }

Chcąc zmienić wiele tagów na raz, wymieniamy je po przecinku np. body, p.

Chcąc zmienić tagi, które zagnieżdżone są w innych tagach piszemy je w odpowiedniej kolejności po spacji np. chcąc zmienić każdy pogrubiony tekst ( <b> ) zawarty w paragrafie ( <p> ) jako selektor piszemy "p b"

Chcąc zmienić tylko część poszczególnych tagów musimy im przypisać tę samą klasę za pomocą atrybutu "class". Następnie odwołujemy się do czegoś takiego w arkuszu stylów za pomocą kropki po tagu np. dla paragrafu o klasie red_text wyglądało by to tak:

p.red_text
    {
        color: rgb(255,0,0);
    }

Możemy też zmieniać pojedyncze elementy za pomocą odwoływania się do ich identyfikatorów, czyli atrybutu id. Robi się to za pomocą hasza (#), tak jak w przypadku klass za pomocą kropki.

Uczymy się spana i diva.

Span oraz div służą do zawierania tekstu w tagach o jak najmniejszej ilości formatowania domyślnego. To, oraz poprzednie zdanie są zapisane w tagach <span>. Powinny one być w linii, gdyż span służy do wyświetlania fragmentów tekstu w sposób "display: inline;" (Tak by ta właściwość wyświetlania była zapisana w css'ie).
Ten fragment tekstu zapisany jest w tagu <div>. Powinien on być nowym blokiem. Nie ma on jednak innych właściwości niż bycie oddzielonym blokiem. Np. paragraf ma dodatkowy odstęp czego używając diva nie chcemy.

Uczymy się właściwości linków.

Linki możemy w css'ie opisywać w ich czterech stanach: link, visited, hover, active. Odwołujemy się do nich za pomocą symbolu ":", np. a:link.
Dla przykładu poniżej zostanie zedytowany odnośnik do strony wyszukiwarki google

Uczymy się formatowania tekstu.

Na tym tekście będę uczył się formatowania tekstu. Nie jest to dla mnie najfajniesza rzecz, gdyż nie odnajduję w sobie zbyt dużej dozy duszy artystycznej. Wolałbym zajmować się funkcjonalnościami niż estetyką, ale jak mus to mus xD.

Uczymy się modyfikacji czcionek.

Na tym tekście będę się uczył formatowania czcionek. Zobaczymy jak to wyjdzie.
Ogólnie rzecz biorąc czcionki mają takie właściwości jak font-size, font-family, font-weight, font-variant czy font-style.

Uczymy się teł.

Jednolity kolor tła uzyskujemy za pomocą background-color. Obrazek za pomocą background-image. Za pomocą background-repeat sterujemy powtarzaniem obrazku tła. background-possition służy do pozycjonowania tła. background-attachment służy do ustawienia względem okna (a przynajmniej przy ustawieniu fixed). Wszystkie te właściwości można również umieścić w jednej globalnej właściwości background.

Uczymy się obramowań.

Obramowania robi się borderem xD Jest wiele typów obramowań, określa się je w border style. Można im też określać kolor oraz szerokość. Mają również właściwość collapse co się przydaje przy tabelach, co będzie w następnej lekcji.

Uczymy się stylów tabelek.

Tabele edytuje się poprzez edycję stylu samej tabeli jak i stylu jej komórek.
Tabele mają takie właściwości jak obramowanie, wysokość czy szerokość. Aby obramowanie tabeli nie mieszało sie z obramowaniem komórek można ustawić tabeli border-collapse na collapse.
Komórki mogą mieć obramowanie, tło (jak i tabela może mieć tło) oraz padding.

Uczymy się wykazów list.

  1. Pierwszy element pierwszej listy.
  2. Drugi element pierwszej listy

Listy edytuje się za pomocą list-style. Można zmienić type, position oraz image.

Zmieniamy kursor.

Kursor można zmienić za pomocą własności cursor xD.

Zmieniamy przeźroczystość.

Przeźroczystość można zmienić za pomocą "opacity" lub dla IE: "filter: alpha(opacity=x)".

Uczymy się marginesów i wypełnień.

Marginesy to margin. Wypełnienie to padding. Body domyślnie ma mały margines.

Float i clear.

Float jest właściwością w css'ie sprawiającą, że element przykleja się do krawędzi strony a reszta elementów go opływa. Anulujemy to właściwością clear.

Pozycjonowanie

Omawiana jest właściwość position. Domyślne ustawienie to static. Można użyć ustawienia relative i odsuwać względem miejsca w którym obiekt powinien być. Robi się to za pomocą własności top right down left. Można też użyć absolute i wtedy odsówać od początkowego okna strony. Niestety pozostałe elementy wtedy mieszają się z tak przesuniętym. Jeśli chcemy ustawiać względem okna, a nie względem załadowanej strony, możemy użyć fixed.
Aby coś wycentrować należy określić temu jakiś width a następnie ustawić marginesy w poziomie na auto. Aby div wewnątrz diva pozycjonować względem tego wyższego, należy postąpić następująco: Ustawić pozycjonowanie diva niższego na absolutne i ustawić go tak jak chcemy oraz ustawić pozycjonowanie diva wyższego na relatywne. W ten sposób absolutem dla diva niższego przestanie być strona, a zacznie być div nad nim.

Zawsze możesz też przejść do początku