HTML i CSS - Tworzenie prostych artykułów

Przez:, Z dnia:

Już używaliśmy HTML i CSS, ale nie skupialiśmy ssię na budowaniu czegoś dobrze wyglądającego. W tym tutorialu zaczniemy zabawę z HTML i CSS poprzez budowanie czegoś od początku do końca.

Zbudujemy stronę, która będzie wyglądać jak to:

result of the class on HTML and CSS

Krok 1: Stwórz plik HTML i dodaj tag tytułu

Rozpocznijmy od zdefiniowania struktury naszego dokumentu HTML. Stwórz nowy plik na pulpicie i nazwij go "article.html". Otwórz go ze swoim ulubionym edytorem tekstu i wklej ten kod:

<!DOCTYPE html>

<html>
    <head>
        <title>
            Breaking News: Cat does not give a damn
        </title>
        <style type="text/css">

        </style>
    </head>
    <body>

    </body>
</html>

Jak zapewne zauważyłeś, użyliśmy nowego taga wewnątrz HEAD. Jeżeli otworzysz stronę w Safari, u góry okna przeglądarki zobaczysz tytuł.

Krok 2: Dodaj tag artykułu

Określmy granice naszego artykułu dodając tag HTML, "article":

<!DOCTYPE html>

<html>
    <head>
        <title>
            Breaking News: Cat does not give a damn
        </title>
        <style type="text/css">

        </style>
    </head>
    <body>
        <article>
            <h1>Breaking News: Cat does not give a damn</h1>
        </article>
    </body>
</html>

Tag "article" zachowuje się jak gumka recepturka; rozciągnie się, by zawrzeć całą treść. Narazie zostawmy tak jak jest. Styl dodamy później.

Krok 3: Dodaj metafizyczne informacje

Następnie, chcemy dodać metafizyczne informacje do artykułu. Chcemy wiedzieć kto go napisał i kiedy został opublikowany.

<!DOCTYPE html>

<html>
    <head>
        <title>
            Breaking News: Cat does not give a damn
        </title>
        <style type="text/css">

        </style>
    </head>
    <body>
        <article>
            <h1>Breaking News: Cat does not give a damn</h1>
            <p><strong>Author:</strong> Bill Clinton, <strong>Published:</strong> Yesterday</p>
        </article>
    </body>
</html>

Do tworzenia pogrubionych części tekstu używamy taga "strong".

Krok 4: Dodaj obrazek

Następnie chcemy dodać obrazek i jego podpis. Żeby mieć pewność, że obrazek i podpis zawsze będą razem, umieścimy je w jednym tagu DIV. DIV to tak naprawdę elastyczny element. Lubię go porównywać do gumki recepturki (tag artukułu jest typem taga DIV). Kiedy nic nie znajduje się wewnątrz DIV, staje się on niewidoczny. Wraz z chwila, w której coś do niego dodamy, rozciągnie się on poziomo do 100% długości taga, w którym jest umieszczony i automatycznie by pomieścić zawartość, pionowo. Spróbujmy:

<!DOCTYPE html>

<html>
    <head>
        <title>
            Breaking News: Cat does not give a damn
        </title>
        <style type="text/css">

        </style>
    </head>
    <body>
        <article>
            <h1>Breaking News: Cat does not give a damn</h1>
            <p><strong>Author:</strong> Bill Clinton, <strong>Published:</strong> Yesterday</p>

            <div>
                <img src="http://peoplecancode-public.s3.amazonaws.com/cat.jpg">
                <span>Image source: The WEB</span>
            </div>

        </article>
    </body>
</html>

Rewelacyjnie. Umieściliśmy obrazek na stronie. Spróbuj zapisać i przeładować stronę, powinieneś widzieć przystojnego kota. Kontynuujmy i dodajmy ostatni element HTML: tekst.

<!DOCTYPE html>

<html>
    <head>
        <title>
            Breaking News: Cat does not give a damn
        </title>
        <style type="text/css">

        </style>
    </head>
    <body>
        <article>
            <h1>Breaking News: Cat does not give a damn</h1>
            <p><strong>Author:</strong> Bill Clinton, <strong>Published:</strong> Yesterday</p>

            <div>
                <img src="http://peoplecancode-public.s3.amazonaws.com/cat.jpg">
                <span>Image source: The WEB</span>
            </div>

            <p>
                This paragraph will include the photo of a random cat that the author of this tutorial has found online. You can replace this text with any random text. The sole purpose of this copy is to fill the space and make sure that the image to the left has enough text to low around it. I even decided to copy the previous paragraph. This paragraph will include the photo of a random cat that the author of this tutorial has found online. You can replace this text with any random text. The sole purpose of this copy is to fill the space and make sure that the image to the left has enough text to low around it.
            </p>
            <p>This paragraph will include the photo of a random cat that the author of this tutorial has found online. You can replace this text with any random text. The sole purpose of this copy is to fill the space and make sure that the image to the left has enough text fo low around it.</p>

        </article>
    </body>
</html>

Krok 5: Styl i rozmiar czcionki

Jesteśmy gotowi by zacząć stylizację naszego dokumentu! Po pierwsze, chcemy zmienić domyślną czcionkę na bezszeryfową. Możemy tego dokonać poprzez wyszczególnienie stylu w tagu HTML, "body". Tym sposobem, czcionka bezszeryfowa będzie domyślną czcionką.

<style type="text/css">
    body { font-family: sans-serif; }
</style>

Przełąduj Twoją przeglądarkę. Zobaczysz, że strona się zmieniła.

Kolejną rzeczą jaką chcemy zrobić, jest przywrócenie czcionki szeryfowej dla tagów H1:

<style type="text/css">
    body { font-family: sans-serif; }
    h1 { font-family: serif; }
</style>

Krok 6: Ustal margines i szerokość

My chcemy również upewnić się, że margines pod spodem taga H1 jest ustawiony na wiekość 0 aby metadane pojawiły się bliżej tutyłu:

<style type="text/css">
    body { font-family: sans-serif; }
    h1 {
        font-family: serif;
        margin-bottom: 0;
    }
</style>

Następnie chcemy ograniczyć szerokość artykułu po to, aby nie obejmował szerokości całego okna przeglądarki. Zrobimy to przez bezpośrednie dodanie stylu do artykułu:

<style type="text/css">
    body { font-family: sans-serif; }
    h1 {
        font-family: serif;
        margin-bottom: 0;
    }
    article {
        width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
</style>

Ustaliliśmy także lewy i prawy margines żeby artykuł był umieszczony na środku strony. Teraz chcemy dodać styl do taga DIV, w którym umieściliśmy obrazek. Chcemy żeby obrazek był mniejszy, i żeby tekst pływał do okoła niego, jak na makiecie. Przypiszmy klasę temu DIV-owi i dodajmy styl.

<div class="image-wrapper">
    <img src="http://peoplecancode-public.s3.amazonaws.com/cat.jpg">
    <span>Image source: The WEB</span>
</div>

Krok 7: Ustaw poprawny przepływ

<style type="text/css">
    body { font-family: sans-serif; }
    h1 {
        font-family: serif;
        margin-bottom: 0;
    }
    article {
        width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    .image-wrapper {
        width: 200px;
        float: left;
        padding-right: 25px;
        padding-bottom: 10px;
    }
</style>

Odpowiedni "float" sprawi, że nasz obrazek przesunie się do lewej i zostanie owinięty tekstem z prawej. Użyliśmy marginesów żeby odepchnąć tekst od krawędzi DIV. Właśnie teraz możesz zobaczyć, że obrazek wychodzi poza DIV. Dzieje się tak, ponieważ przeglądarka używa oryginalnych rozmiarów obrazu. By mieć pewność, że obrazek zostaje pomiędzy granicami, przypiszemy mu szerokość 100%.

<style type="text/css">
    body { font-family: sans-serif; }
    h1 {
        font-family: serif;
        margin-bottom: 0;
    }
    article {
        width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    .image-wrapper {
        width: 200px;
        float: left;
        padding-right: 25px;
        padding-bottom: 10px;
    }
    .image-wrapper img {
        width: 100%;
    }
</style>

Krok 8: Edytuj obrazek

Wspaniale. Mało zostało. Podpis obrazka musi być nieco mniejszy i nie tak ciemny:

<style type="text/css">
    body { font-family: sans-serif; }
    h1 {
        font-family: serif;
        margin-bottom: 0;
    }
    article {
        width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    .image-wrapper {
        width: 200px;
        float: left;
        padding-right: 25px;
        padding-bottom: 10px;
    }
    .image-wrapper img {
        width: 100%;
    }

    .image-wrapper span {
        font-family: sans-serif;
        font-size: 10px;
        color: #ccc;
    }
</style>

Krok 9: Edytuj metafizyczne informacje

Naprawmy metafizyczne informacje dla naszego arykułu. Ponieważ użyliśmy taga "p" i chcemy by styl, który dodamy, nie miał wpływu na dwa akapity poniżej, dodamy mu klasę:

<article>
    <h1>Breaking News: Cat does not give a damn</h1>
    <p class="article-meta"><strong>Author:</strong> Bill Clinton, <strong>Published:</strong> Yesterday</p>
    ...
</article>
<style type="text/css">
    body { font-family: sans-serif; }
    h1 {
        font-family: serif;
        margin-bottom: 0;
    }
    article {
        width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    .image-wrapper {
        width: 200px;
        float: left;
        padding-right: 25px;
        padding-bottom: 10px;
    }
    .image-wrapper img {
        width: 100%;
    }

    .image-wrapper span {
        font-family: sans-serif;
        font-size: 10px;
        color: #ccc;
    }

    .article-meta {
        font-family: sans-serif;
        color: #aaa;
        font-size: 12px;
    }
</style>

Krok 10: Edytuj akapity

I ostatecznie, akapity z główną treścią:

<style type="text/css">
    body { font-family: sans-serif; }
    h1 {
        font-family: serif;
        margin-bottom: 0;
    }
    article {
        width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    .image-wrapper {
        width: 200px;
        float: left;
        padding-right: 25px;
        padding-bottom: 10px;
    }
    .image-wrapper img {
        width: 100%;
    }

    .image-wrapper span {
        font-family: sans-serif;
        font-size: 10px;
        color: #ccc;
    }

    .article-meta {
        font-family: sans-serif;
        color: #aaa;
        font-size: 12px;
    }
    p {
        font-size: 14px;
    }
</style>

Jeśli chcesz zmienić rozmiar czcionki, czuj się swobodnie.

Gratulacje! Skończyłeś. Zapisz plik HTML i odśwież przeglądarkę.

Musisz się zalogować by móc oznaczyć tutorial jako ukończony żeby śledzić swój postęp



Komentarze

  • Z dnia: sameer napisał:

    Hey ,

    then style should start like

    if

    then style should start like

  • Z dnia: sameer napisał:

    If any suggestion needed please let me ping my email :sameersoft6@gmail.com

Dodaj komentarz

Możesz się zalogować by skomentować