Zawartość

• Kroki
• Metoda 1 z 1: Pisanie strony HTML
• Porady
• Ostrzeżenia
• Czego potrzebujesz

HTML (Hypertext Markup Language) to podstawowy język programowania do tworzenia stron internetowych. Stworzony jako prosty i wygodny język programowania. Większość stron w Internecie została opracowana przy użyciu jednej z form tego języka (ColdFusion, XML, XSLT). Po przeczytaniu tego artykułu możesz kontynuować szkolenie, korzystając z innych zasobów w Internecie. Spróbuj poszukać w Internecie innych artykułów związanych z tym tematem.

Kroki

Metoda 1 z 1: Pisanie strony HTML

1. 1 Zanim zaczniesz zapoznawać się z jednym z przedstawionych tutaj kroków, zapoznaj się z sekcją „Czego będziesz potrzebować”.
2. 2 Co powinieneś wiedzieć, zanim zaczniesz rozumieć ten problem:
3. 3 Podstawy. Czy kiedykolwiek słyszałeś o tagu? Znacznik jest otoczony nawiasami ostrymi ze słowem w środku. Znacznik końcowy jest napisany w tej samej formie, ale z dodatkiem ukośnika po pierwszym nawiasie ostrym. Atrybut to opcjonalne słowo w znaczniku, które służy do dodawania szczegółów do znacznika.
4. 4 Początek dokumentu. W dowolnym edytorze tekstu, którego używasz, wklej następujące elementy:
   html> head> title> wikiHow / title> / head> body> Hello World / body> / html> big> / big>
   Znacznik musi być zamknięty tym samym znacznikiem, ale z ukośnikiem po pierwszym nawiasie ostrym. Są wyjątki, takie jak tagi META lub DOCTYP.
5. 5 DOCTYP
   • Zazwyczaj większość stron internetowych jest ustawiona DOCTYP ”. Pomaga to określić kodowanie, a także sposób, w jaki będzie postrzegane przez przeglądarki internetowe. Większość stron będzie działać bez tego, „ale jest to konieczne, jeśli chcesz dopasować (Regulują rodzaje kodowania w Internecie i sposób ich użycia)... DOCTYPE dla HTML 4.01 jest przedstawiony poniżej:! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> To jest jeden z najczęstszych DOCTYPE używany na stronach w całym Internecie.Najpierw wskazuje typ strony opisującej „html”, następnie wskazuje rodzaj kodowania, a na końcu lokalizację DOCTYPE, co w efekcie opisuje stronę dla przeglądarki internetowej.
   • Istnieją różne typy HTML (różne wersje rozwijane przez lata), na przykład wykorzystujące nowe znaczniki lub określone znaczniki. Niektóre tagi są przestarzałe (zamiast tego używane są inne, bardziej przydatne).
   • b> i ja> - to jest obecnie nakładane na tagi, ponieważ służą one do przekształcania tekstu, ale nie specyfikacji, w wyniku czego inne tagi przychodzą na ich miejsce. Etykietka silny> jest zamiennikiem dla b>, oraz em>, zamiennik dla ja>.
   • Ważne jest, aby poprzednie znaczniki zostały zastąpione znacznikami, które są czymś więcej niż tylko formatowaniem. Jeśli tekst jest tłumaczony, to nie tylko formatowanie, ale także jego znaczenie pozostaje bez zmian. To jest semantycznie poprawne.
   • W XHTML w wersji 2.0 b> i ja> nie używany, tak jak w wersji HTML 3+.
6. 6 HTML „Zasada enkapsulacji”.
   • Przyjrzyjmy się ważniejszym obecnie używanym tagom. Podczas tworzenia strony zastosowano prostą strukturę. Jeśli tag został otwarty, w rezultacie powinno być zamknięte... Dotyczy to całej konstrukcji. Oto poprawny przykład struktury układu XHTML:
   • DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   • html xmlns = "http://www.w3.org/1999/xhtml">
   • głowa>
   • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
   • tytuł> Witaj świecie! / tytuł>
   • / głowa>
   • ciało>
   • h1> Witaj świecie! / h1>
   • / ciało>
   • / html>
   • Przykładowy kod, który wysyła wiadomość Witaj świecie... Nazywa się to testem Witaj świecie.
7. 7 Nagłówek
   • Tytuł strony internetowej to treść między tagiem głowa>... Ta treść nie może być przeglądana przez użytkownika (tylko tytuł, który jest wyświetlany w tytule strony). Informacje między tagami głowa>, może zawierać inne tagi, takie jak:
     
     
     • Znacznik META służy do przechowywania informacji przydatnych dla wyszukiwarek i innych narzędzi.
     • Znacznik LINK, który tworzy łącze między dokumentami, na przykład dla stylów (CSS).
     • SCRIPT tag, obejmuje prawie każde kodowanie internetowe, z możliwością zdalnego dostępu (z innego dokumentu).
     • Znacznik STYLE, który jest zasadniczo stylem, który można zastosować do strony.
     • Znacznik TITLE to tytuł, który pojawia się jako tytuł strony w przeglądarce internetowej.
   • Zobaczmy demo niektórych z nich w przykładowym nagłówku zaczerpniętym z tej strony (został skrócony):
     • głowa>
     • tytuł> ... / tytuł>
     • meta name = "opis" content = "..." />
     • link rel = "stylesheet" type = "text / css" href = "..." />
     • meta http-equiv = "content-type" content = "text / html; charset = UTF-8" />
     • style type = "text / css" media = "all"> ... / style>
     • script type = "text / javascript" src = "..."> / script>
     • / głowa>
       
       Jeśli nie zauważyłeś, poszczególne tagi zostały podświetlone, a rzeczywiste informacje usunięte. Przykład jest dość krótki, pokazuje prawie każdy tag, który można znaleźć w głowa>z wyjątkiem komentarza HTML (porozmawiamy o tym w prostych tagach).
8. 8 Proste tagi wszędzie
   • Przejdźmy dalej i zobaczmy inne tagi. Uważaj na tagowanie i pamiętaj o zasadzie „Enkapsulacja”.
     
     
     • strong> Podkreśla ważny tekst.
     • small> Zmniejsza tekst. Rozmiar czcionki jest mierzony w standardowych jednostkach od 1 do 7, 3 to domyślny rozmiar tekstu. ...
     • pre> Definiuje blok tekstu sformatowanego. Jak słusznie, taki tekst jest pisany czcionką o tym samym rozmiarze iz zachowaniem wszystkich odstępów między wyrazami.
     • em> Pokazuje tekst jako frazę.
     • del> Wykreśla tekst.
     • ins> Definiuje tekst, który został wstawiony do dokumentu.
     • h1> Jeden z wielu tagów nagłówka. Tagi tego rodzaju zaczynają się na „h”, z różnicą w liczbie. Pamiętaj, aby zamknąć tag z tym samym numerem.
     • p> Definiuje akapit.
     • ! --- ... ---> W przeciwieństwie do innych znaczników, komentarz musi znajdować się wewnątrz samego znacznika. Ta informacja jest widoczna tylko podczas przeglądania kodu.
     • blockquote> Pokazuje cytat, może być używany z tagiem cite>.
     • Kilka powyższych przykładów nie jest pełną listą istniejących tagów. Aby dowiedzieć się o innych, odwiedź.
9. 9 Tworzenie przejrzystej struktury
   • Strony są zaprojektowane do przechowywania danych w prostych zestawach tagów, dzięki czemu możemy przeanalizować informacje na akapity. Komputer rozpoznaje dane, nie zna kontekstu ani związku pojęciowego. Musimy tworzyć przyjazne dla komputera strony HTML. Osiąga się to za pomocą znacznika div. Pomaga stworzyć ogromną liczbę stron. Może być stylizowany za pomocą CSS i jest łatwiejszy niż tworzenie dużych tabel kodu dla układu.
     • div> Ten znacznik jest wyjątkowy, ponieważ można go stylizować i używać oddzielnych bloków informacji, które mogą zrozumieć zarówno użytkownik, jak i komputer.
   • Przyjrzyjmy się prostemu układowi HTML, który wykorzystuje znacznik div.
     • DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     • html xmlns = "http://www.w3.org/1999/xhtml">
     • głowa>
     • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
     • tytuł> Witaj świecie! / tytuł>
     • / głowa>
     • ciało>
     • h1> Witaj świecie! / h1>
     • div id = "contentOne">
     • p> To jest jakiś tekst w div # contentOne. / p>
     • div>
     • p> Akapit w podsekcji div # contentOne / p>
     • / dz>
     • / dz>
     • / ciało>
     • / html>
   • Używanie znaczników div> pomaga w wyszukiwaniu i modyfikowaniu stylów podczas pracy z CSS i Javascript. HTML użyje innego kodowania do pracy ze stylami CSS i JavaScript, aby stworzyć lepsze i bardziej responsywne środowisko użytkownika.

Porady

• Po przeczytaniu tego artykułu nie zatrzymuj się i nie myśl, że nauczyłeś się wszystkiego, co musisz wiedzieć. Zawsze jest się czego nauczyć, zwłaszcza w tej technologii.
• Ucz się, rozumiej i pisz kod.
• Zauważ, że niektóre tagi używają tylko >. Para i br to kilka przykładów. Inne tagi otwarte za pomocą> muszą być dalej zamknięte. Na przykład „div> / div>”.
• Ludzie oczekują nowych odkryć, więc wymyślaj na nowo, projektuj lub koduj.
• Kiedy już się dużo nauczysz, spróbuj nauczyć się programowania serwera.
• Naucz się pracować z CSS, a także Javascript.

Ostrzeżenia

• Pamiętaj, że HTML polega na edycji treści. Oznacza to, że HTML służy wyłącznie do przechowywania treści w rozpoznawanym formacie. Inne zmiany muszą być wykonane przy użyciu innych technologii, takich jak CSS. Oznacza to również robienie „Semantycznie poprawnenawet jeśli inni tego nie przyznają. Inne języki programowania pomagają budować strony internetowe (CSS, Javascript i XML). HTML to konstruktor treści.

Czego potrzebujesz

• Edytor tekstu obsługujący kodowanie ANSI
• Przeglądarka internetowa, taka jak Internet Explorer lub Mozilla Firefox
• (Opcjonalnie) wysiwyg lub wykiwyg edytor HTML, taki jak Adobe Dreamweaver, Aptana Studio lub Microsoft Expression Web