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ą.
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!
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ć ;)
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ć.
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...