Przejście z HTML na Standard HTML 5 - Podstawy

Odpowiedz Nowy wątek
2016-11-14 16:59

Rejestracja: 4 lata temu

Ostatnio: 5 miesięcy temu

0

Witam, jak w temacie - po "kilku" latach braku styczności z HTML , od dzisiaj za cel obrałem sobie powrót i zaczełem od podstaw.
Schematy - header, main, footer, aside, nav, sidebar oraz głównie inputy -> nowe standardy html5. W kodzie skoncentrowałem się tylko na tych aspektach.
Ciekaw jestem opinii osób doświadczonych - czy kod nie jest aż tak tragiczny - zaznaczam, że zaczełem kilka godzin temu i dopiero się uczę :)

Proszę o konstruktywną krytyke oraz porady w "którą strone się kierować".

<!DOCTYPE html>
<html>
        <header>
        <meta charset = "UTF-8">
        <link rel = "stylesheet" type="text/css" href="main.css" />
        <title>Check my html 5 abilities!</title>
        </header>

        <main>
                            <!--- The exercice's with inputs in HTML-5 // --->

            <p>The main think of this page is - vote for each team.
            Let's test our HTML - skills<p>

            <p>Let me check your age - if {age>=18...You can take the pool :)}
            <input type="checkbox">Yes, i'am older then 18....</p>

            <section>

                <section>
                    <h2>Cristiano Ronaldo</h2>
                        <label><input type="radio" name="footbaler">1</label>
                        <label><input type="radio" name="footbaler">2</label>
                        <label><input type="radio" name="footbaler">3</label>
                </section>

                <section>
                    <h2>Toni Kroos</h2>
                        <select>
                            <option>Ocena 1 </option>
                            <option>Ocena 2 </option>
                            <option>Ocena 3 </option>
                        </select>
                </section>

                <section>
                    <h2>Luka Modric</h2>
                        <select multiple>
                            <option>Ocena 1</option>
                            <option>Ocena 2</option>
                            <option>Ocena 3</option>
                        </select>
                </section>

            </section>

            <article>
                <h1>At the end i need to ask you about your name , surname and the others...</h1>

                    <fieldset>
                        <legend>Personal data</legend>
                            <label>Name<input type="text"></label>
                            <label>Surname<input type="text"></label>
                        </fieldset>
            </article>
        </main>

</html>

oraz jakiś tam pisany na kolanie arkusz styli..

main
{
    background-color: teal;
}

p
{
    font-size: 20px;
    text-align: left;
    text-align: center;
}

h2
{
    font-size: 25px Tahoma;
    text-align: left;;

}

Będę wdzięczny jeżeli komuś będzie się chciało rzucić okiem i napisać kilka słów.
Pozdrawiam :)

Pozostało 580 znaków

2016-11-14 17:27

Rejestracja: 8 lat temu

Ostatnio: 14 godzin temu

Lokalizacja: Grudziądz/Bydgoszcz

2
  • zaginął ci body.
  • header != head
  • main się jeszcze nie stosuje
  • nie zastępuj każdego diva sectionem, section to raczej ogólnie wydzielona tematycznie treść np liste artykułów wydzielasz od reszty strony.
edytowany 1x, ostatnio: mr_jaro, 2016-11-14 17:28

Pozostało 580 znaków

2016-11-14 17:44

Rejestracja: 4 lata temu

Ostatnio: 3 godziny temu

Lokalizacja: Warszawa

0

Zacznij tutaj: https://validator.w3.org/#validate_by_input

Pozostało 580 znaków

Informator
2016-11-14 17:51
Informator
0

Jak dla mnie kod tragicznie napisany, aczkolwiek nie to coś, czego nie da się odratować. Nie będę wypisywać dlaczego, bo mr_jaro już to ładnie ukazał. Przerób sobie jakiś kurs html5, który ma w swoich treściach porównania starego, jak i nowego standardu. O ile mnie pamięć nie myli to how2html dobrze to wytłumaczył.

Pozostało 580 znaków

2016-11-14 18:53

Rejestracja: 4 lata temu

Ostatnio: 4 godziny temu

0

Nowe tagi w HTML5 mają znaczenie semantyczne. Tag <section /> czy <article /> nie jest zamiennikiem dla <div />. Polecam lekturę http://html5doctor.com/lets-talk-about-semantics/

Pozostało 580 znaków

Odpowiedz

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0