На сегодняшний день HTML является самым популярным языком в Интернете. Без этого Интернет не был бы таким, как сейчас. HTML можно рассматривать как строительные блоки Интернета — как кирпичи и строительный раствор дома. Так что каждый веб-разработчик должен учиться!
Существует ряд различных стандартов HTML, которым люди могут соответствовать, но мы будем использовать HTML 4.01. Это не новейший стандарт, но он наиболее широко принят в Интернете
Начиная
Есть несколько вещей, которые вам понадобятся для изучения HTML:
- Текстовый редактор (например: EditPlus, Notepad и т. Д., Но не WordPad или Word)
- Браузер (например, Internet Explorer, Opera и т. Д.)
Вы будете кодировать свой HTML-код в текстовом редакторе, а затем просматривать его в том виде, в котором он фигурирует в веб-браузере. В этом учебном пособии я буду использовать EditPlus в качестве моего текстового редактора и Internet Explorer 5.5 для моего браузера, но вы можете использовать все, что вам удобно.
HTML состоит из простой структуры тегов (заключенных в <и>) и текста. Теги управляют макетом и внешним видом страницы и интерпретируются браузером при просмотре документа. Все теги имеют формат « <name> » — и все, что находится за пределами угловых скобок, считается текстом, который вы хотите, чтобы посетители видели. Для каждого тега (с несколькими исключениями — но мы вернемся к ним позже), должен быть закрывающий тег. Это то же самое, что и открывающий тег, за исключением того, что перед именем тега стоит знак «/», например » </tag> «.
Каждая HTML-страница должна соответствовать этому основному макету:
<html> <head> <title>Title</title> </head> <body> content </body> </html>
На первый взгляд это может показаться запутанным, поэтому давайте рассмотрим его построчно:
<html>Это открывающий тег каждой HTML-страницы - он сообщает браузеру, что страница использует HTML.
<head>Это сообщает браузеру, что заголовок запущен. Заголовок содержит информацию о странице, которая не отображается в основной части окна браузера.
<title>Title</title> Тег <title> сообщает браузеру, что следующий текст является заголовком страницы. Он появится в строке заголовка браузера, а также в панели задач (рядом с меню «Пуск» на компьютерах с Windows).
</head> Это означает конец заголовка - все, что появляется после этого и не является тегом, будет отображаться пользователю.
<body> Это начало основной части страницы.
</body> Конец основной части страницы.
</html>Конец всей веб-страницы.Видеть? Это не так сложно, в конце концов! Это (или должно быть) основной макет каждой HTML-страницы. Эта страница хорошо сформирована (с отступами) и полностью соответствует последним стандартам W3C .
Форматирование и структура
Теперь, когда вы знаете, как выглядит базовая HTML-страница, пришло время добавить текст и увидеть, как все это собрано вместе. Итак, загрузите ваш текстовый редактор и наберите (или вырезайте и вставьте) структуру, на которую мы смотрели ранее, на эту пустую страницу. Затем добавьте текст в тело страницы. Это может быть что угодно - отформатируйте его, как если бы вы печатали в Word. После этого у вас должна быть страница, похожая на эту:
<html> <head> <title>My First Web Page</title> </head> <body> Welcome to my first Web page! The purpose of this Web page is to learn some HTML so that perhaps I can make a really fantastic Web page later on. Please come back and visit soon, James </body> </html>
Теперь сохраните файл как «webpage.html» или что-то подобное. Если вы используете Блокнот, вам нужно поместить имя файла в кавычки («filename.html»), чтобы сохранить его правильно. Затем дважды щелкните файл в проводнике Windows — он откроет выбранный вами браузер, возможно, Internet Explorer. Но вместо хорошо сформированного текста с хорошим абзацем, который вы набрали ранее, весь текст будет отображаться в одной строке. Это потому, что HTML не обращает внимания на форматирование внутри самого кода. Вы можете обойти эту проблему с помощью еще нескольких HTML-тегов, а именно:
-
<p>Этот тег создает абзац текста, оставляя перед ним пустую строку. -
<br>Это тег разрыва строки — он начинает новую строку. Это наш первый пример тега, которому не нужен закрывающий тег (т.</br>Нет такого понятия, как тег</br>).
Итак, с применением тегов ваша страница должна выглядеть примерно так:
<html> <head> <title>My First Web Page</title> </head> <body> <p> Welcome to my first web page! </p> <p> The purpose of this web page is to learn some HTML so that perhaps I can make a really fantastic web page later on. </p> <p> Please come back and visit soon, <br> James </p> </body> </html><html> <head> <title>My First Web Page</title> </head> <body> <p> Welcome to my first web page! </p> <p> The purpose of this web page is to learn some HTML so that perhaps I can make a really fantastic web page later on. </p> <p> Please come back and visit soon, <br> James </p> </body> </html>Теперь есть несколько вещей, которые вы, вероятно, заметили там. Я включил теги
<p>и</p>для обозначения начала и конца абзацев. Хотя в этом нет необходимости, это хорошая практика, и это означает, что вы будете полностью соответствовать будущим стандартам HTML. Я также выделил код для аккуратности, опять же, что-то, что, безусловно, не нужно, но я всегда делаю это, чтобы сделать код легче для чтения и изменения.Теперь вы знаете, как создать базовую HTML-страницу, как добавить разрывы строк и какие теги необходимы для создания обычной веб-страницы. Следующим шагом будет использование различных шрифтов и размеров шрифтов, а также форматирование цвета текста на ваших страницах.
Шрифты и форматирование текста
Теперь, когда вы можете создать простую веб-страницу, пришло время сделать ее более привлекательной. Это может включать использование ваших собственных шрифтов, цветов и размеров текста, чтобы сделать страницу более привлекательной для читателя.
Все изменения шрифта выполняются с помощью
<font>. Существует ряд атрибутов, которые вы можете использовать с<font>для управления внешним видом текста. Атрибут содержится внутри самого тега (например,<font color="red">). Тег - это «шрифт», атрибут - «цвет», а его значение - «красный». Атрибуты используются во многих различных тегах, а не только в шрифтах.Существует ряд различных тегов, которые можно использовать для указания различных аспектов шрифта:
-
<font face="Verdana">Это позволяет вам указать фактический шрифт, который будет использоваться. Однако шрифт будет отображаться только в том случае, если он существует на компьютере пользователя, поэтому выберите популярный шрифт, который будет у большинства посетителей. -
<font color="red">Это позволяет вам указать цвет текста. Большинство стандартных названий цветов (например, красный, синий и т. Д.) Будут работать, хотя существуют специальные коды, которые предоставляют более широкий диапазон цветов. Мы поговорим об этом позже! -
<font size="4">Этот атрибут позволяет указать размер текста. Это не размеры, которые вы бы использовали с вашим текстовым процессором, а специальные размеры — так что вам, возможно, придется немного поэкспериментировать, чтобы получить нужный размер.
Вы также можете использовать комбинации атрибутов, например:
<font face="Times New Roman" color="yellow" size="4">
Итак, теперь давайте добавим немного форматирования на нашу страницу. Вот такая страница, как сейчас, без форматирования:
<html> <head> <title>My First Web Page</title> </head> <body> <p> Welcome to my first Web page! </p> <p> The purpose of this Web page is to learn some HTML so that perhaps I can make a really fantastic Web page later on. </p> <p> Please come back and visit soon, <br> James </p> </body> </html>
И со шрифтами и цветами:
<html> <head> <title>My First Web Page</title> </head> <body> <p> <font size="4" face="Verdana, Arial" color="red"> Welcome to my first Web page! </font> </p> <p> <font face="Arial"> The purpose of this Web page is to learn some HTML so that perhaps I can make a really fantastic Web page later on. </font> </p> <p> <font face="Arial"> Please come back and visit soon, </font> <br> <font color="blue" size="+1"> James </font> </p> </body> </html><html> <head> <title>My First Web Page</title> </head> <body> <p> <font size="4" face="Verdana, Arial" color="red"> Welcome to my first Web page! </font> </p> <p> <font face="Arial"> The purpose of this Web page is to learn some HTML so that perhaps I can make a really fantastic Web page later on. </font> </p> <p> <font face="Arial"> Please come back and visit soon, </font> <br> <font color="blue" size="+1"> James </font> </p> </body> </html>Теперь вы можете заметить пару незнакомых вещей в этом блоке кода. Во-первых, 7-я строка содержит необычное значение для шрифта:
<font face="Verdana, Arial">Это говорит браузеру использовать Verdana в качестве первого варианта шрифта, но если Verdana не установлена на компьютере зрителя, то вместо этого следует попробовать Arial. Если на компьютере пользователя нет ни Verdana, ни Arial, тогда будет использоваться шрифт браузера по умолчанию (часто что-то вроде Times New Roman).
Второй трюк используется в окончательном теге шрифта. Я использовал:
<font size="+1">. Это говорит браузеру, что размер шрифта должен быть больше обычного размера шрифта. Размер шрифта по умолчанию может различаться для разных браузеров и компьютеров, поэтому лучше всего использовать эту технику (называемую относительным размером), чтобы гарантировать, что каждый получит правильный размер текста. Вы можете указать +1, чтобы сделать его больше, и -1, чтобы сделать его меньше.Наша страница начинает обретать форму сейчас. Однако все еще не хватает нескольких вещей, таких как жирный шрифт и курсив. Вы можете установить текст, который будет выделен жирным шрифтом или курсивом, с - как вы уже догадались - больше HTML-тегов!
-
<b> text </b>полужирный -
<i> text </i>курсив -
<u> text </u>Подчеркивание
Итак, вот последняя страница со всем, что добавлено в:
<html> <head> <title>My First Web Page</title> </head> <body> <p> <font size="4" face="Verdana, Arial" color="red"> <u> Welcome to my first Web page! </u> </font> </p> <p> <font face="Arial"> The purpose of this Web page is to learn some HTML so that perhaps I can make a really fantastic Web page later on. </font> </p> <p> <font face="Arial"> Please come back and visit soon, </font> <br> <font color="blue" size="+1"> <u><i>James</i></u> </font> </p> </body> </html>
Есть еще одна техника для изменения внешнего вида ваших страниц, о которой вы должны знать: каскадные таблицы стилей или CSS для краткости. CSS является чрезвычайно мощным, но довольно сложным способом определения всех типов форматирования. Это слишком углубленно, чтобы углубляться в этот урок, поэтому я собираюсь указать вам направление этого урока для изучения CSS.
Статья CSS это просто! и написано Кевином Янком. Это должно помочь вам понять основы CSS и, надеюсь, использовать его на некоторых своих страницах. Я использовал его альтернативу (т. <font> Теги <font> ) в этом руководстве, потому что CSS не совместим с некоторыми более старыми браузерами (версии 3.0 и более ранние).
В следующей части этой серии мы узнаем, как создавать ссылки на другие веб-страницы и на другие части наших собственных страниц.