Выполнения упражнений в сайте HTML


Вот проблема у меня решена. Пожалуйста, ознакомьтесь с этим.

<!DOCTYPE HTML>
<html>
    <head>
            <title>BLA| Welcome </title>
    </head>
    <body>
            <h1 align="center">Meet Jack</h1>
            <img src="http://www.htmliseasy.com/exercises/jack.gif" alt="Meet Jack"> <br/>
            <p> He is Jack.He is an odd little boy that just got an empty box for his birthday. He may <em>look </em> happy but is a <em>little </em> disappointed. Now he will have to put a little things in the box.<br/>
            Jack would really like...<br/>
                <ul>
                    <li>Roller blades</li>
                    <li>Magic tricks</li>
                    <li>Anything Pokemon</li>
                    <li>A motorized Lego set</li>
                </ul>
                <br/>
                You can get all this (and more) at an online toy store. Two very popular ones are <a href="http://www.toysrus.com/">toysrus.com </a>and <a href="http://www.etoys.com/">eToys</a>.            
            </p>

    </body>
</html>


1162
6
задан 29 июня 2011 в 10:06 Источник Поделиться
Комментарии
1 ответ

Ладно, я не знаю точно, в каких пределах ваших упражнений, но я отвечу, что я думаю, что это хороший веб-стандарт. (Я веб-разработчик в течение ~4 лет)


  1. Не использовать атрибут align. HTML-это должен быть язык разметки. Использовать CSS для управления внешним видом вашего HTML-элементов. В этом случае что-то вроде Н1 { текст-выровняйте: центр; } должны делать только штрафом.

  2. Не используйте
    теги для других вещей, чем фактической линии-разрывы (то есть, разбивать текст). Я хотел бы удалить все
    теги, так как вам не нужно их в этом упражнении. Элементы как ul, li и P являются элементами блока по умолчанию, которая течет вертикально. Если вам нужно больше пространства между элементами, маржа использовать/вместо подклада. Однако, img не блочный элемент по умолчанию, так что вы можете обернуть его в div или сделать это блочный элемент с помощью CSS, как компания IMG { дисплей: блок; }.

  3. Не ставьте ул внутри тег p. Закрыть тег p, а затем добавить следующий тег p после того, ул, а не.

  4. Изысканные детали: вставка разрывов строки В текста для повышения читабельности. Типичная практика, чтобы линии не менее 80 символов.

Кстати, вы знаете, что есть валидатор инструменты для HTML, верно?

Редактировать: полный код, в лучшую сторону: (обратите внимание, что я выбрал, чтобы сохранить один тег br. Может быть, это может быть упражнение, чтобы выяснить, почему)

<!DOCTYPE HTML>
<html>
<head>
<style>
h1 { text-align: center; }
img { display: block; }
</style>
<title>BLA| Welcome </title>
</head>
<body>
<h1>Meet Jack</h1>
<img src="http://www.htmliseasy.com/exercises/jack.gif" alt="Meet Jack" />
<p>He is Jack. He is an odd little boy that just got an empty box for his
birthday. He may <em>look</em> happy but is a <em>little</em>
disappointed. Now he will have to put a little things in the box.<br />
Jack would really like...</p>
<ul>
<li>Roller blades</li>
<li>Magic tricks</li>
<li>Anything Pokemon</li>
<li>A motorized Lego set</li>
</ul>
<p>You can get all this (and more) at an online toy store. Two very popular
ones are <a href="http://www.toysrus.com/">toysrus.com</a> and
<a href="http://www.etoys.com/">eToys</a>.</p>

</body>
</html>

12
ответ дан 29 июня 2011 в 11:06 Источник Поделиться