Jak zrobić stronę internetową, część 2, kompletna witryna wykonana z 0 w HTML, CSS z galerią zdjęć - tutorial wideo

Ten poradnik opisuje witryny przy użyciu HTML i CSS, obejmujące wszystkie etapy: opracowanie strony internetowej,
Tworząc konto na darmowy hosting i wreszcie przesyłania plików na naszej stronie internetowej w tym hosting, darmowy hosting to szybka metoda umieszczenie na stronie internetowej naszego on-line w ciągu kilku minut, wadą tej metody jest to, że będziemy mieć niektóre reklamy wyświetlane przez cały czas u góry (nagłówek powyżej).

Każdy, kto chce otworzyć stronę internetową, trzeba znać języka HTML i CSS, nie trzeba być ekspertem w HTML (Hyper Text Markup Language), ale niektóre informacje w kodzie są absolutnie niezbędne do zrozumienia, jak te rzeczy działają.

Nawet jeśli zbudować jedną stronę, trzeba jeszcze się nie mieć pojęcia o tym, co dzieje się za pośrednictwem tych plików będą wymagać okresowej korekty błędów lub osiągnięcia zmian.

Wiele osób ucieka od kodu, wielu porównuje kod do hieroglifów, wcale tak nie jest, ktoś kiedyś powiedział: „KOD JEST POEZJA”, miał rację, kiedy widzisz, że coś rodzi się z szeregu linii kodu, czujesz się wspaniale, budujesz wirtualny świat tylko z klawiaturą i myszą.

Długo korzystaliśmy z aplikacji zbudowanych przez firmy programistyczne, zajmowaliśmy się tylko obsługą komputera, nadszedł czas na programowanie, w rzeczywistości nie jest to język programowania, to „język znaczników”, ale będziemy odnosić się do to jest jak język programowania, ponieważ brzmi dość dziwnie „język znaczników”, HTML jest jednym z najłatwiejszych obecnie używanych języków programowania (znaczników), widzimy HTML na dowolnej stronie, wiele programów ma w Składniki HTML, ten język programowania jest wszędzie, czas się go nauczyć.

Za pierwszym razem może być mniej trudne, ale jeśli jesteś ostrożny, niż natychmiast zrozumieć, że nie wszystko jest tak trudno to proste i piękne rzeczy, tworzymy coś w naszych rękach, to jest najważniejsze.

Będziemy uczyć się podstaw, a następnie dowiadujemy się, jak wprowadzać tekst na stronie internetowej, a następnie będziemy zorganizować i kolor tekstu, używamy CSS Strona stylu (kaskadowe arkusze stylów), z którym będziemy umieszczać wszystkie elementy strony HTML w ogóle tak, że będziesz umieszczać na naszej stronie jest wykonany wyglądać jednym kawałku.

Dowiesz się prostych technik, podstawowy tryb HTML i CSS, choć są to podstawowe rzeczy w HTML i CSS, stworzy przegląd przyjemny.

Na tym kursie trzeba uzbroić się z uwagą i cierpliwością, ten poradnik nie jest coś, co możemy sobie pozwolić na niewielkie, jeśli przewijania kilku sekund można przegapić coś bardzo ważnego, a zobaczysz, potem już nie ma sensu, koncentracja informacja jest bardzo wysoki i dlatego proszę was bardzo, bardzo ostrożny.

Po tym kursie, nawet intensywny kurs powiedziałbym, będziesz miał lepszy pomysł, co HTML i CSS, można kontrolować kod, a także w pełni zrozumieć dokument HTML, czując, że HTML nie jest tylko tablicą heroglife rozwieje, wiesz co to jest, jeśli spojrzeć na jednej HTML lub CSS.

Poznamy Tagi (znaczniki), mamy tutaj kilka przykładów znaczników (tagów), które można użyć w dokumencie HTML, nie martw się, nie trzeba im zapamiętać wszystko, czego potrzebujesz, aby dowiedzieć się tylko z podstawami w pierwszej tabeli resztę można znaleźć tutaj na miejscu lub w internecie, gdy są potrzebne.

Nawet tablice są sortowane te tagi, są wykonane przy użyciu języka HTML.

Podstawowe elementy (tags).

Określa format plików Web
nagłówek dokumentu
dokument Tilul
Strona ciała HTML
bgcolor = kolor Kolor tła strony
TEXT =kolor Kolor tekstu na stronie
LINK =kolor Nieodwiedzonych link do strony kolor
vlink =kolor Odwiedził Link kolor strony
ALINK =kolor Kolor łącza podczas exacutat kliknięcie użytkownika
STAN = url Tło obrazu strony
ustęp
<Hn> <H.n> Podtytuł poziomie dokumentu (n = 1-6)
Specyficzne atrybuty tekstu w ramce
SIZE =n Rozmiar tekstu jest 1-7
FACE =„A, b” Określ czcionkę: aJeśli to możliwe, lub b
COLOR =s Kolor tekstu: albo nazwę koloru lub wartość RGB
nowalinia
informacje preformatowane
HTML Comenatriu
Materiał ośrodki w stronę
pozioma linijka
SIZE =x Wysokość Linijka w pikselach
Szerokość =x Szerokość Linijka w pikselach lub w procentach
NOSHADE Wyłącz wyświetlanie cieni na poziomej linijce
align =x Wyrównanie poziome miarki na stronie (lewy, środkowy, prawy)
COLOR =x Kolor poziomej linijki (tylko IE)
Kotwa typu Mark
Href =url odniesienia hipertekstowe
Href =#name Odniesienie do wewnętrznego łącznika
name =nazwa Definicja kotew wewnętrznych

Produkty do listy .

Opis definicja
definicja typu Lista
W ramach definicji
lista funkcji
<OL Lista numerowana (numerowana)
TYPE =typ Numeracja. Możliwe wartości: A, A, I, I, 1
START =x Liczbę rozpoczął uporządkowanej listy
<UL Lista nieuporządkowana (zaznaczone)
TYPE =forma zakładka formularza. Możliwe wartości: koło, kwadrat, tarczowe.

elementy formatowania znaków .

Wklej tekst pogrubiony
Wklej tekst kursywą
Wklej zaznaczony tekst
Monospaced czcionki tekstu
cytat bibliogarfica
Program Notowania
Styl logika podświetlanie
Tekst klawiatury
Podkreślając silną logikę
Program lub zmienna
<CZCIONKA PODSTAWOWA SIZE = n> Określa domyślny rozmiar czcionki strony

Elementy klatek .

Definiowanie strony pisania
COLS =x Liczba i względną kolumny
rows =x Liczby i wielkości względne linie
Border =x Określa status „włączony” lub „wyłączony” dla ramki FRAMESET (1 lub 0)
frameborder = x Określa rozmiar ramki
FRAMESPACING = x Ilość miejsca pomiędzy dwoma sąsiednimi ramkami
Definicja konkretnej ramki
SRC =url Adres źródłowy ramki
Name =nazwa Nazwa ramy (używana w połączeniu z TARGET = nazwa jako część znaku kotwicy
scrolling =scrl Definiowanie Pasek opcji derulare.Valori możliwe: (Uaktywnij), wyłącz (nieaktywne), Auto (automatyczny)
frameborder =x Wielkość granicy wokół ramy
marginheight =x Dodatkowa przestrzeń powyżej i poniżej pewnego ramach
marginwidth =x Przestrzeń Suplimetar lewo i prawo na specyficzny
Strona Sekcja wyświetlany użytkownikom, którzy nie widzą ramkę
Ramowy (tylko (IE)
SRC =url źródło ramki
Name =s Nazwa okna (przydatne dla TARGET)
WYSOKOŚĆ =x Wbudowany wysokość ramy
Szerokość =x Wbudowany szerokość ramy

Elementy do stołów .

tabela HTML
Border =x table border
cellpadding =x Dodatkowa przestrzeń wewnątrz komórek tabeli
cellspacing =x Dodatkowa przestrzeń między komórkami tabeli
Szerokość =x Nałożone szerokość stołu
FRAME =wart Precyzyjna regulacja stołu
ZASADY =wart Miarki porządku tabeli regulacji
borderColor = kolor Specyfikacja koloru obramowania tabeli
BORDERCOLORLIGHT = kolor Im jaśniejszy kolor dwóch kolorach podano
BORDERCOLORDARK = kolor Im ciemniejszy kolor dwóch kolorach podano
align =lewo Wyrównuje tabelę do lewego marginesu strony, a tekst przepływa prawy bok
align =prawo Wyrównuje tabelę do prawej krawędzi strony, a tekst płynie do lewej
hspace =x Suplimetar pozioma przestrzeń wokół stołu
vspace =x Suplimetar pionowa przestrzeń wokół stołu
COLS =x Określa liczbę kolumn tabeli
Definiuje zestaw definicji kolumn za pomocą znaczników
<KOL Szerokość =x> Określa szerokość kolumny w pikselach
Definiuje nagłówek tabeli
Definiuje ciało stołowego
tabela linia
bgcolor =kolor Określa kolor tła dla całej linii
align =wyrównanie Wyrównanie komórki w bieżącym wierszu (lewy, środkowy, prawy)
komórka danych tabeli
bgcolor =kolor Określa kolor tła dla danych komórek
colspan =x Liczba kolumn, które obejmują bieżące dane komórki
rowspan =x Liczba linii rozciągających aktualnych danych komórki
align =wyrównanie Wyrównywanie tkankę komórki date.Valori możliwe: (lewy, prawy, środkowy)
valign =wyrównanie Pionowe wyrównanie materiału z komórki date.Valori możliwe: (górny, dolny, środkowy)
STAN =url Określa obraz tła dla komórki tabeli
nowrap Nie dopuścić linie Podział tekstu w komórce
align =bazowy Wyrównanie komórek danych do linii bazowej tekstu sąsiadującego
align =charakter Wyrównuje kolumnę do określonego znaku (domyślnym znakiem jest „.”)
align =uzasadniać Wyrównaj zarówno lewą krawędź i prawą krawędź tekstu

Produkty przeznaczone do dodawania obrazów.

<IMG Zaznaczanie obrazów wejściowych
SRC =url grafika Plik źródłowy
Alt =XNUMX Alternatywny tekst wyświetlany, jeśli jest to konieczne
align =wyrównanie Ustawianie obrazu na stronie. Możliwe wartości: top (góra), środkowy (w środku), dolny (poniżej), w lewo (po lewej), prawo (po prawej)
WYSOKOŚĆ =x wysokość obrazu (w pikselach)
Szerokość =x szerokość obrazu
Border =x Ramka po obrazie, gdy jest on stosowany jako hiperłącza
hspace =x Dodatkowa przestrzeń wokół obrazu w poziomie (w pikselach)
vspace =x Dodatkowa przestrzeń wokół obrazu w pionie (w pikselach)

Tworzy elementy.

Aktywny formularz HTML
action =url Program CGI na serwerze, który odbiera dane
METODA =metoda Jak dane są przesyłane do serwera (GET lub POST)
<WPROWADZENIE Obóz tekst lub inne dane wejściowe
TYPE =opcja Typ pola wejściowego . Możliwe wartości: tekst, hasło, pole wyboru, ukryty, plik,
Radio, przedstawienia, reset obraz.
Name =nazwa Pole Wartość Nazwa symboliczne
VALUE =wart Domyślna zawartość pola tekstowego
Zaznaczone = opcja Przycisk / pole zaznaczone domyślnie
SIZE =x Liczba znaków w polu tekstowym
SIZE =x Maksymalna dozwolona liczba znaków
Grupa pól wyboru
Name =nazwa Pole Wartość Nazwa symboliczne
SIZE =x Liczba pozycji w menu, które są wyświetlane jeden raz (domyślnie = 1)
KILKA =x Umożliwia wielokrotny wybór pozycji menu
<OPCJA Szczególny wybór w dziedzinie
VALUE =wart Uzyskaną wartość tego menu wyboru
Tekst zbrojenie Obóz na wielu liniach
Name =nazwa Pole Wartość Nazwa symboliczne
rows =x Liczba linii pola tekstowego
COLS =x Liczba kolumn (znaki) na linii pola tekstowego
Podziel formę logiczną w częściach
Nazwa związana zestaw pól (fieldsets)
align =s Określić legendę wyrównania (wyjaśnienie) Wyświetlana (góra, dół, lewo, prawo)
tabindex =x Określ elementy zamówienia, gdy użytkownik naciśnie klawisz Tab
ACCESKEY =c Który stanowi specyficzny klucz ze skrótu klawiszowego związanego z konkretnym punkcie
DISABLED Element jest nieaktywny, ale jest wyświetlany na ekranie
readonly Element jest wyświetlany na ekranie, ale nie można edytować

Elementy zaawansowane.

Szczegółowe informacje na temat modelu stylów
TYPE =val Rodzaj modelu stylu. Zwykle „text / css”
Zwykle zawiera skrypt JavaScript na swojej stronie internetowej
JĘZYK =język Język używany
EVENT =wydarzenie Zdarzenie, które powoduje wykonanie konkretnych skryptów
NA =numeobiect Strona Nazwa obiektu, na którym działa skrypt

POBIERZ tabel HTML Z etykietkami

Jeśli chcesz odwiedzić witrynę prowadzone samouczek, można uzyskać dostęp pod tym adresem: http://www.videotutorial.150m.com.

Polecam rozpakować załącznik i studiować trzy pliki html lub plik CSS za pomocą Notepad ++ lub inny program do edycji stron internetowych w ten sposób można dokonać zmian cau mogą nawet robić notatki podczas niej dowiesz html bez ciebie konta.

Ty życzymy miłego i zapraszamy na następujących samouczków w tej serii i poza nią.

POBIERZ PLIKI TEST

Dan Constantin
tutorialegimp.blogspot.com
Cristian Cismaru: Lubię wszystko, co dotyczy IT&C, lubię dzielić się doświadczeniem i informacjami, które gromadzę każdego dnia. Uczę się cię uczyć!

Komentarze (333)

  • Bardzo ładny, mnóstwo informacji w tym poradniku.
    Ten poradnik może być wywołana wlew HTML i CSS.
    Może nie dostać się nauczyć w ciągu kilku miesięcy można nauczyć się tu za godzinę lub tak, widziałem to wszystko przed pisał i można powiedzieć, że pod wrażeniem sobie przytoczyć informacje mogą zmieścić się w samouczku.
    W pewnym momencie poczułem, że trzeba pić wodę, choć tylko obserwował samouczek, ani nie chcę myśleć, cytując Dan pił wodę po tym.
    Jest coś nie uczyć się HTML i / lub CSS po tym kursie.

  • Aoleu, od około 3 miesięcy próbuję zacząć się uczyć, ciągle nie mam czasu...
    Wielkie dzięki, oglądam ją uważnie!

  • Cristi-adminBardzo ładny, mnóstwo informacji w tym poradniku.
    Ten poradnik może być wywołana wlew HTML i CSS.
    Może nie dostać się nauczyć w ciągu kilku miesięcy można nauczyć się tu za godzinę lub tak, widziałem to wszystko przed pisał i można powiedzieć, że pod wrażeniem sobie przytoczyć informacje mogą zmieścić się w samouczku.
    W pewnym momencie poczułem, że trzeba pić wodę, choć tylko obserwował samouczek, ani nie chcę myśleć, cytując Dan pił wodę po tym.
    Jest coś nie uczyć się HTML i / lub CSS po tym kursie.

    tak, masz rację, Cristi, ale jestem zawiedziony, bo myślałem, że zrobisz tutorial :( ale tak czy inaczej, dobra robota, bardzo dobry poradnik

    • To nie miłe, co powiedziałeś i mówię ci to szczerze, ten człowiek przez około półtorej godziny walczył o nauczenie cię, jak zrobić stronę internetową od zera, a ty mówisz, że jesteś rozczarowany, że tego nie zrobił? Czy możesz sobie wyobrazić, ile pracy włożył ten człowiek i ile czasu stracił, aby nauczyć każdego z nas podstaw HTML i CSS, pomyśl zanim otworzysz usta, że ​​nie będzie Ci odpowiadać włożyć pracy, a potem zostawić innych bezużyteczne komentarze jakbyś był zawiedziony, że ktoś inny nie umieścił, stworzył ten poradnik, bądź wdzięczny, że masz się z czego uczyć ;)

  • dziób:
    Cristi Tak masz rację, ale jestem rozczarowany, bo uważał, że zrobisz tutorialu ale i tak dan bravo bardzo dobrą tutorialu

    Jak myślisz, że cykl o "Jak zrobić stronę internetową" dobiegł końca.
    W następnym ćwiczeniu zostanie mi być.
    Bo co następny tutorial muszę oglądać tego kursu prowadzonego przez Dana.
    Co przedstawiam różni się od samouczka zrobiłem aza Dan, ale zawarte w nim informacje będą niezbędne dla właściwego zrozumienia rzeczy.
    Jest kilka sposobów publikowania treści w internecie, ale wszystkie mają wspólny mianownik, HTML i CSS, bez nich nie można nic zrobić.

  • Cristi-admin:
    Co sądzisz, że zakończył się cykl zatytułowany "Jak stworzyć stronę internetową".
    W następnym ćwiczeniu zostanie mi być.
    Bo co następny tutorial muszę oglądać tego kursu prowadzonego przez Dana.
    Co przedstawiam różni się od samouczka zrobiłem aza Dan, ale zawarte w nim informacje będą niezbędne dla właściwego zrozumienia rzeczy.
    Jest kilka sposobów publikowania treści w internecie, ale wszystkie mają wspólny mianownik, HTML i CSS, bez nich nie można nic zrobić.

    Witam Cristi, przyjdzie serię php lub js?

  • Alex:
    Witam Cristi, przyjdzie serię php lub js?

    Rozmawiamy o wszystkim, ale także strona PHP i JS wiąże się HTML, HTML nie może być bez.
    PHP jest częściej używane do wydobywania danych z baz danych, strony internetowe nadal opierają się na HTML, niezależnie od tego, czy mówimy o witrynach dynamicznych (php, dhtml, asp, jsp, cf), czy też mówimy o stronie statycznej, będziemy używać języka HTML, bez niego nic nie da się zrobić.
    Wielu robi duże zamieszanie „nie chcę już witryny HTML, chcę dynamiczną witrynę php”, to duży błąd, prawie wszędzie używany jest HTML, niezależnie od tego, czy mówimy o witrynach dynamicznych, czy o witrynach statycznych.
    JS (Java Script) to nie to samo z JSP (Java Server Pages), które zależy od serwera, strony JS służą do niektórych skryptów, nie trzeba żadnych skryptów serwerowych JS można uruchomić w dowolnej przeglądarce bez konieczności składnik serwera, w tym poradniku, Dan używany szereg skryptów JS (galeria zdjęć), nadziać punktualny się powoduje JS, nie ma łazienki strony z JS zamiast są pełne witryn przy użyciu języka Java Server Pages, że jest coś innego, choć wydaje się to samo.
    Wiem, że zacząłeś studiować „kod” dawno temu, ten samouczek jest doskonałą pomocą, Dan wykonał świetną robotę z tym samouczkiem, nawet nie zdajesz sobie sprawy, jak cenny jest ten samouczek, w ramach samouczka masz prawie wszystko tagi (elementy) używane w HTML, możesz ich używać, zwłaszcza że każdy z nich ma opis.
    Nie pozwól, aby Alex kod przerwy, jest on oparty.
    Uwierz mi, nie brakuje dla potencjalnych!

  • wow, dużo informacji bardzo dobrze ustrukturyzowanych, aby każdy mógł je zrozumieć. Osobiście obejrzałem tutorial tylko po to, żeby nauczyć się czegoś nowego, a w miarę postępów w tutorialu byłem zdumiony, jak łatwo jest stworzyć stronę internetową, która nie jest zbyt załadowana i bardzo miłe dla oka. Gratuluję tego poradnika, ale także wszystkich innych. Nie mogę się doczekać kolejnego „nalewu” (według słów Cristi) informacji.

  • Gratulacje!! Bardzo fajny tutorial. Będzie Rumunia pełna projektantów stron internetowych :) (miejmy nadzieję!!)

  • Będzie samouczek Dreamweaver? Dc nie używaj programu Dreamweaver lub w tutoriali?

    Gratulacje za wszystkie tutoriale... jesteście najlepsi ;)

  • Witam.. tutorial jest świetny, jest mnóstwo informacji.net w tamtym czasie i teraz mogę obejrzeć tutorial, który wyjaśnia wszystko, co muszę wiedzieć..widać, że się rozwinąłem :)))..podobało mi się fakt, że zostało to wyjaśnione krok po kroku i że zostały umieszczone na stronie wszystkie podstawowe polecenia + przykład, na którym można popracować.. widać, że wiecie, co robicie, jesteście prawdziwymi nauczycielami!!
    Jednak wiele osób pracujących w projektowaniu stron internetowych za pomocą programów, które automatycznie składać zamówienia i moje pytanie brzmi zrobisz tutorial z takiego programu ??
    Wiem, że stworzyłeś ten samouczek, aby zrozumieć polecenia, a tym samym lepiej zrozumieć programy do projektowania stron internetowych... ale mimo to jestem ciekaw, co będziesz kontynuować w tej serii samouczków, ponieważ nawet dużo się mówi na ten temat jeśli niektórzy uważają, że są nudne, jeśli chodzi o tutoriale takie jak ten autorstwa Dana, któremu przy tej okazji gratuluję tutoriala...

Podobne post

Ta strona używa plików cookie.