Вперед Назад

Основы HTML

Язык разметки гипертекста (HTML) является фундаментальным языком разметки, используемым для создания веб-контента. Ваш HTML должен быть хорошо структурирован и допустимый для работы хорошо с Safari на рабочем столе и Safari на iOS. Считайте это приложение для узнавания больше о создании соответствующего содержимого HTML.

Посмотрите Safari Ссылка HTML для полного руководства по всем элементам HTML, поддерживаемым Safari.

Что такое HTML?

HTML является стандартом для структуры содержания в сети. Его исходное намерение разработчиков состояло в том, чтобы обеспечить структуру, требуемую для веб-браузеров проанализировать ее содержание в значимый формат. Эта структура могла определить все документы, вместе с заголовками, текстом, списками, таблицами данных, изображения и т.д., Поскольку сеть процветала, это также начало включать стиль и мультимедийные аспекты также.

Возможно самая важная функция HTML является возможностью "связать текст гиперссылками". Это предоставляет контент-провайдерам возможность присвоить URI другого содержания в сети к блоку текста, позволяя ему щелкаться и сопровождаться пользователем содержания.

Новые версии стандарта HTML возвращаются к «былым временам» разделения структуры веб-контента (HTML) от представления содержания (использующий технологию под названием Каскадные таблицы стилей или CSS). Можно узнать больше о создании эффективного стиля веб-контента в приложении Основ CSS.

Это приложение, с другой стороны, касается только структуры HTML и как должным образом отформатировать документ для множества клиентов. Это не обсуждает усовершенствованные функции HTML или надлежащее расположение веб-страницы и проект.

Основная структура HTML

Существует несколько блоков базовой структуры, составляющих ядро документа HTML. Блоки описаны в контексте кода HTML, показанного в Перечислении a-1.

Перечисление a-1 Основной документ HTML

<!DOCTYPE html>

<html>

    <head>

        <title>HTML Sample Code</title>

    </head>

    <body>

        <div>

            <img src="myWelcomeGraphic.gif" alt="Welcome!">

        </div>

        <h1>Big Heading</h1>

        <p>This is our HTML sample code. It shows many elements:</p>

        <ul>

            <li>The HTML document block.</li>

            <li>The HEAD and title of the page.</li>

            <li>A paragraph.</li>

            <li>An unordered list.</li>

        </ul>

    </body>

</html>

Блок документа HTML: <html> блок документа является полнотой кода HTML для веб-страницы. В примере, теги, определяющие этот блок —<html> и </html>— расположены к верху и низу документа. Документ снабжен предисловием с a DOCTYPE объявление, говорящее браузеры который спецификация проанализировать Вашу веб-страницу против. Если Вы следуете строгим соглашениям спецификации HTML5, необходимо использовать объявление, показанное выше. Иначе это может быть брошено, но это принимает значение по умолчанию к режиму «причуд». Обратитесь к спецификации HTML5 для больше на типах проверки документа.

Главный блок: <head> блок определяет блок метаданных о веб-странице. В этом случае Вы видите, что веб-страница имеет a <title> элемент в нем. Заголовок является текстом, выведенным на экран наверху окна веб-браузера. <head> блок также может содержать множество других метаданных, таких как внешне соединенные таблицы стилей CSS (использующий link тег) и наборы функций JavaScript. Этот блок должен всегда содержать, по крайней мере, заголовок и должен всегда быть внешним к содержанию организации.

Блок организации: Этот блок определяет всю организацию документа — это должно охватить видимое содержание самой веб-страницы. Сам блок организации не разработан для встроенного содержания. Скорее необходимо определить другие блочные элементы (такие как абзацы, подразделения и заголовки) и встроить содержание в них. <body> блок должен использоваться для указания параметров стиля для полноты содержания.

Другие блочные элементы: существует много других фундаментальных блочных элементов, включенных в содержании <body> блок. Они включают:

Заголовок. Указанный в этом случае <h1> и </h1> теги, это определяет заголовок для следующего блока содержания. Заголовки могут иметь шесть различных размеров, в пределах от очень большого заголовка первого уровня (определенный с помощью <h1> и </h1> теги) вниз к маленькому заголовку шестого уровня (определенный с помощью <h6> и </h6> теги). Это должно содержать только краткий текст — другое содержание, такое как крупный текст блокирует, отображает, и фильмы должны быть встроены в другие надлежащие блочные элементы, такие как абзацы и подразделения.
Абзац. Указанный <p> и </p> теги, это - один из фундаментальных блочных элементов для веб-контента. Каждый отдельный абзац должен содержать встроенное текстовое содержание, которое определяет читаемое содержание веб-страницы и не должно включать никакие другие блочные элементы. Обычно блоки абзаца для текста только. Альтернатива абзацу является подразделением, и это - самый надлежащий блочный элемент для других типов среды, таких как изображения и фильмы.
Подразделение/Раздел. Указанный <div> и </div> теги, подразделение разработано для содержания всех видов содержания, включая текст, изображения и другое мультимедиа. Это также может охватить другие блочные элементы, такие как абзацы, хотя обычно не рекомендуется включение подразделений в других подразделениях. Обычно блоки подразделения используются для определения объединенных стилей для блоков содержания. В примере выше, блок подразделения содержит возглавляющее изображение для веб-страницы.
Список. Поддержки HTML два основных вида списков, упорядоченного списка (указанный <ol> и </ol> теги) и неупорядоченный список (указанный <ul> и </ul> теги), как в примере выше. Упорядоченные теги списка каждый элемент списка (указанный <li> и </li> теги) с инкрементным числом (1, 2, 3, и т.д.). Неупорядочиваемые теги списка каждый элемент списка с маркером, хотя этот маркер может быть изменен с помощью моделирования CSS.

Теперь Вы изучили некоторые фундаментальные скелетные элементы структуры HTML. Блочные элементы, такие как абзацы и подразделения являются ядром содержания — собой они невидимы, но они содержат встроенные элементы, такие как текст, изображения и фильмы. Следующий раздел берет Вас немного глубже в некоторые функции содержимого HTML.

Создание эффективного содержимого HTML

Вы узнали о фундаментальных элементах, определяющих структуру HTML, но веб-страница бесполезна без любого вида содержания в ней. Теперь, когда Вы установили основу для веб-страницы, необходимо поместить некоторое содержание для создания богатого опыта для пользователей. Это приложение обсуждает некоторые основные встроенные элементы HTML; для всех элементов, поддерживаемых Safari и WebKit, отошлите к Safari Ссылку HTML.

Наиболее распространенный веб-контент содержит много текста и нескольких изображений. Думайте о журнале перемещения, например, который имеет обсуждение событий дня рядом с несколькими фотографиями от поездки. Поскольку Интернет назрел, Вы, возможно, видели больше в способе фильмов, анимаций и других «богатых» форм содержания, представленного сети. Но наиболее распространенные носители являются все еще комбинацией текста и изображений.

Отображение текста является простой вещью в HTML. Как только Вы установили окружающий блочный элемент — абзац, например, как обсуждено в предыдущем разделе — текст может просто быть помещен встроенный. Пример из вымышленного журнала перемещения мог бы быть как показано в Перечислении a-2:

Перечисление a-2 , Добавляющее абзац

<p>

Today, we arrived in Cupertino, California. We visited the Apple campus. It was a bright sunny day and exhibited none of the fog that was so prevalent during our stay in San Francisco.

</p>

Это - простая текстовая запись, но очень еще нет к нему. Хороший журнал перемещения также отмечает дату и время каждой записи, таким образом, необходимо добавить это к содержанию, также. Перечисление a-3 показывает время и дату, добавленное как заголовок.

Перечисление a-3 , Добавляющее заголовок

<h1>Friday, May 20, 2005 - 4:40PM</h1>

<p>

Today, we arrived in Cupertino, California. We visited the Apple campus. It was a bright sunny day and exhibited none of the fog that was so prevalent during our stay in San Francisco.

</p>

Это - все еще простая текстовая запись, но по крайней мере Вы предоставили своему читателю немного дополнительной информации. Но что, если Ваш читатель понятия не имеет, каков Apple? Одной из замечательных особенностей HTML является возможность "связать документы гиперссылками" — создают ссылки к внешним веб-страницам. Используя <a> и </a> теги гиперссылки, можно соединить читателя с веб-сайтом Apple как показано в Перечислении a-4.

Перечисление a-4 , Создающее гиперссылку

<h1>Friday, May 20, 2005 - 4:40PM</h1>

<p>

Today, we arrived in Cupertino, California. We visited the <a href="http://www.apple.com/" title="Apple web site">Apple</a> campus. It was a bright sunny day and exhibited none of the fog that was so prevalent during our stay in San Francisco.

</p>

Заметьте, что слово «Apple» теперь окружается этим элементом гиперссылки. Элемент описывает два определенных атрибута:

Атрибут href: Это соединяется с URL веб-страницы, с которой Вы хотите соединиться. При указании относительного URL, такого как «myPage.html» или «/pages/mypage.html», ссылка указала бы на файл в той же папке как код, или в отдельной папке, соответственно. В этом примере значением является полностью определенный URL, таким образом, это просто соединяется с тем сайтом (домашняя страница Apple).
Атрибут заголовка: Это - дополнительный атрибут, но один необходимо выработать привычку использования. title атрибут предоставляет альтернативное описание ссылки. В Safari, содержа мышь по гиперссылке в течение нескольких секунд показывает это значение как подсказку. Это - отличный способ предоставить информацию о ссылке, прежде чем пользователь щелкнет по нему, позволяя им решить, хотят ли они оставить Вашу веб-страницу или нет. Кроме того, эта информация используется программами экранного доступа и другими устройствами доступности, таким образом, при помощи этого атрибута, Вы помогаете расширить свое содержание до более многочисленного сообщества.

С этой гиперссылкой на месте, слово «Apple» в журнале перемещения теперь выведено на экран как активируемая по щелчку ссылка. Щелчок по слову перенаправляет пользователя к домашней странице Apple.

До сих пор перемещение журналирует большие чтения. Но действительно привлекать внимание Ваших читателей, Вы могли бы хотеть включать изображение. Изображение в HTML указано <img> тег. Важно отметить, что изображение является встроенным элементом, так должен быть помещен в блочном элементе, таком как абзац. Это также немного отличается от некоторых других встроенных элементов, в которых это не требует закрывающего тэга. Перечисление a-5 показывает, как добавить изображение к проводке в журнале перемещения.

Перечисление a-5 , Добавляющее изображение

<h1>Friday, May 20, 2005 - 4:40PM</h1>

<p>

<img src="cupertino.gif" alt="Picture of Cupertino, CA">

<br>

Today, we arrived in Cupertino, California. We visited the <a href="http://www.apple.com/" title="Apple web site">Apple</a> campus. It was a bright sunny day and exhibited none of the fog that was so prevalent during our stay in San Francisco.

</p>

Заметьте, что определение изображения много походит на определение гиперссылки. src атрибут определяет URL к изображению (с теми же правилами для относительного по сравнению с абсолютным URLs как в гиперссылке), и alt атрибут определяет блок дополнительного текста — этот текст может также быть считан программами экранного доступа или может быть показан некоторыми браузерами, когда изображения выключены в браузере.

Другой маленький элемент, который мы добавили, был <br> элемент разрыва строки. Помните, что изображение является встроенным элементом, точно так же, как текст. Без принудительного разрыва строки изображение вывело бы на экран, и текст будет следовать непосредственно после, слева направо, один за другим. Это является немного неловким для журнала перемещения, но полезным, когда у Вас есть маленькие изображения (как математические уравнения), что Вы хотите интегрированный в текст. Добавьте разрыв строки для принуждения следующей строки текста к новой строке.

Теперь Вы узнали о фактическом веб-контенте — встроенный текст и носители, который определяет то, что пользователь читает и просматривает, когда они посещают Вашу веб-страницу. Этот раздел ни в коем случае не является исчерпывающим обсуждением содержания, которое можно предоставить пользователям. Для получения дополнительной информации о содержании, что Safari и поддержка WebKit, отошлите к Safari Ссылку HTML.

Использование других функций HTML

В этом разделе рассматриваются еще несколько функций HTML, который можно хотеть использовать в веб-контенте.

Один другой общий блочный элемент <table> блок. Можно добавить a <table> блокируйте для отображения любого вида табличных данных. К предыдущему примеру давайте добавим таблицу температур, которые писатель журнала испытал в его или ее день в Купертино. Для получения информации, чтобы быть полезными, Вы также захотите добавить что-то во время, в которое была зарегистрирована температура. И время и температура могут быть маркированы с помощью табличных заголовков, указанных <th> и </th> теги. Заметьте что порядок табличных заголовков и ячеек таблицы (указанный <td> и </td> теги), соответствуют в их определенной строке (указанный <tr> и </tr> теги) в Перечислении a-6.

Перечисление a-6 , Составляющее таблицу

<h1>Friday, May 20, 2005 - 4:40PM</h1>

<p>

<img src="cupertino.gif" alt="Picture of Cupertino, CA">

<br>

Today, we arrived in Cupertino, California. We visited the <a href="http://www.apple.com/" title="Apple web site">Apple</a> campus. It was a bright sunny day and exhibited none of the fog that was so prevalent during our stay in San Francisco.

</p>

<table>

    <tr>

        <th>Time</th>

        <th>Temperature</th>

    </tr>

    <tr>

        <td>9:00AM</td>

        <td>65 degrees</td>

    </tr>

    <tr>

        <td>12:00PM</td>

        <td>76 degrees</td>

    </tr>

    <tr>

        <td>3:00PM</td>

        <td>78 degrees</td>

    </tr>

</table>

Другая полезная функция является возможностью интегрировать JavaScript — интерпретируемый язык, обработанный веб-браузерами — в HTML. JavaScript может сделать множество задач, многие из которых адресуются в WebKit Темы Программирования DOM. Код JavaScript может быть встроен во внешние файлы, в <script> блок веб-страницы <head> блок, или даже встраивают с элементами, с помощью различных делегатов JavaScript, предоставленных браузером. Например, если Вы хотите вывести на экран предупреждение, когда пользователь нажимает кнопку, добавьте код (или вызов функции, если код определяется в другом месте) к кнопке onClick делегат:

<input type="button" value="Click Me!" onClick="alert('This is an alert!')">

Вперед Назад