Статья из курса HTML и CSS

[Start] [HTML элементы] [Атрибуты HTML] [CSS стили] [Онлайн совет]
[А] [B] [С] [D] [E] [F] [Н] [I] [K] [L] [М] [N] [О] [Р] [Q] [R] [S] [Т] [U] [В] [Вт] [Z]
[Цвет] [Текст] [Шрифт] [Размер] [Позиция] [Таблица] [Список] [Форма]
[Структура] [Ссылка] [СМИ] [Units] [Кадр] [Фон] [Синтез] [Печать]

Мой первый сайт за 15 минут

Создание сайтов является относительно простым и очень приятным занятием. Вы можете изучить основы HTML за несколько часов и буквально создать простой веб-сайт. Вы просто должны помнить, чтобы следовать нескольким основным правилам.

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

Первая страница

Вам не нужно иметь доступ в Интернет для создания сайтов. Все, что вам нужно, это веб-браузер, установленный на вашем компьютере. Вы должны сохранить страницу в обычном текстовом файле и дать ему соответствующее имя. Любой, даже самый простой текстовый редактор подходит для написания веб-сайтов - от простого блокнота в Windows или Pico в Unix до специализированных редакторов HTML. У каждого есть свой любимый текстовый редактор, я использую сенсационные NoteTab Pro (менее продвинутая версия этого редактора доступна бесплатно).

Документ, содержащий HTML, должен иметь расширение .html или .htm, что предполагает, что это веб-страница. Предполагалось, что главная страница сайта обычно называется index.html (иногда она может называться иначе). Другие страницы, которые могут быть доступны из index.html, могут иметь любое имя. Пусть они, однако, будут разборчивыми и не слишком длинными.

Размер букв важен в названиях страниц - лучше использовать только строчные буквы без польских символов. Страница Contact.html отличается от страницы contact.html (обратите внимание на размер первой буквы K). Вы также не должны использовать польские символы в именах страниц, будьте осторожны со специальными символами (например,% ^ $ @). Не используйте пробелы (пробелы). Лучше дать название: food-for-zolwia.html, чем еда для turtle.html.

Каждая страница имеет несколько общих элементов. Вы должны сообщить браузеру, что это HTML, а не обычный текст. Кроме того, написано с польскими символами в стандарте ISO8859-2. Также стоит дать заголовок странице.

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

<! doctype html public "- // w3c // dtd html 4.0 переходный // en"> <html> <head> <meta http-эквивалент = "тип контента" content = "text / html; charset = iso-8859 -2 "> <title> Вставьте здесь заголовок страницы </ title> </ head> <body> Мой первый сайт! </ body> </ html>

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

! DOCTYPE определяет вариант языка HTML (чаще всего используется переходная версия 4.0). Затем мы сообщаем браузеру, что это HTML-документ, помещая все содержимое документа в пару элементов <HTML> и </ HTML>. Каждая страница имеет заголовок между элементами <HEAD> и </ HEAD>. Мы помещаем заголовок страницы в элементы <TITLE> и </ TITLE> и информацию о кодировке польских символов в ISO-8859-2. После заголовка есть часть, которую мы можем видеть в окне браузера - она ​​определяется элементами <BODY> и </ BODY>. Здесь текст, графика, ссылки, таблицы и прочее.

Скопируйте содержимое в текстовый редактор, сохраните все на диске под именем index.html и посмотрите, как выглядит страница в браузере. На самом деле, у вас уже есть свой сайт ...

Несколько правил

Как видите, большинство элементов HTML являются парами команд. Существует открывающий и закрывающий элемент, например, заголовок был окружен парой <TITLE> и </ TITLE>. В результате браузер знает, что отображать в луче браузера в качестве заголовка страницы. Если в теле страницы вы заключите какое-либо слово с парой элементов <B> и </ B>, оно будет выделено жирным шрифтом (B - это аббревиатура от английского слова Bold). Зная пары команд, вы можете делать что угодно с текстом. Вам действительно не нужно изучать пары - просто запомните название команды, потому что структура обычно одинакова: <COMMAND> ... </ COMMAND>.

Команды (это HTML-элементы в курсе) могут по-прежнему иметь атрибуты. Это означает, что вы можете изменить свойства этих команд. Если вы хотите создать соединение с другим сайтом, все, что вам нужно, это команда вы добавите атрибут HREF указав адрес другой страницы. На практике это выглядит так:

<A href="http://web.reporter.pl/"> ссылка на WebReportera </A>

Если вы добавите атрибут цель , вы можете указать окно, в котором будет открыта веб-страница. Пусть это будет новое окно браузера, поэтому целью будет _blank (пустое чистое новое окно).

<A href="http://reporter.pl/" target="_blank"> См. Reporter.pl </A>

Смотрите Reporter.pl

Команды и атрибуты могут быть написаны в верхнем или нижнем регистре, это не имеет значения. Только для курса я использую заглавные буквы для элементов (команд) и строчные буквы для атрибутов, потому что этот способ более читабелен. Но вышеупомянутая ссылка может быть сохранена так:

<a HrEf="http://reporter.pl/" tarGET="_BLaNk"> См. Reporter.pl </a>

Вы, вероятно, догадываетесь, что для того, чтобы вставить изображение на страницу, вам нужно использовать элемент, отвечающий за графику, и указать ему, какое изображение вставить. элемент IMG он отвечает за изображения (IMG - это сокращение от слова Image). У него много атрибутов, и один из них один ЦСИ (т.е. источник - источник изображения). Давайте использовать их так ... Пусть дополнительно картинка будет в середине страницы (вызывается команда центрирования CENTER ).

<center> <img src = "../ p / logo.gif"> </ center> <center> <img src =

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

<center> <a href="http://www.reporter.pl" target="_blank"> <img src = "../ p / logo.gif" width = "120" height = "60" border = "0"> </a> </ center> <center> <a href=http://www

Это не сложно, хотя появилось больше атрибутов: ширина ширина картинки, высота определяет высоту, а border = "0" приводит к тому, что рамка исчезает, что означает, что изображение является ссылкой. Я не хочу рамки, потому что это только искажает изображение - поэтому почти всегда элемент IMG на веб-страницах имеет рамку ...

Другое важное правило - это порядок, в котором вы открываете и закрываете команды. Вы не должны делать что-то вроде этого:

<s> несколько <b> примеров </ s> слов </ b>

несколько примеров слов

элемент S определяет зачеркивание, но прежде чем он был закрыт, я открыл элемент В (жирным шрифтом), затем я закрыл S вместо B. Они основаны "на кресте". Он выглядит менее читабельным и не соответствует правилам, хотя браузер хорошо показал эффект ... Вот правильный порядок:

<s> несколько </ s> <b> <s> образец </ s> слов </ b>

Я знаю, что вам приходилось использовать S несколько раз, но это окупилось. Пример более читабелен. В сложных документах это огромно. Поэтому при создании сайта обращайте внимание на его читабельность. Не случайно многие авторы делают характерные отступы в коде HTML. Это облегчает чтение кода после нескольких лет, когда сам автор не помнит, что имел в виду, делая сайт ...

Обратите внимание, что вы уже можете создавать ссылки и вставлять графику. Каждый абзац (текстовый блок) начинается с команды P (Это не требует закрывающего элемента, хотя это стоит использовать). Этой информации достаточно, чтобы соблазнить вас поэкспериментировать с вашей первой веб-страницей.

При создании сайтов вы также получите много неудобств. Поскольку существует несколько веб-браузеров, некоторые команды могут иметь различный эффект. Иногда страница с незакрытыми командами или таблицами (что, очевидно, является ошибкой) будет выглядеть прямо под Internet Explorer. Может случиться, что правильная страница, использующая стандарт HTML, рекомендованный организацией W3C, не будет хорошо отображаться браузером Netscape. Люди захотят распечатать, отправить по электронной почте, сохранить на диск. Вы должны думать обо всех потребностях пользователя!

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

Удачи!


• • •
Смотрите советы, сценарии, статьи и готовые решения для владельцев сайтов!

Вы, вероятно, хотите иметь «кликабельное» изображение, которое является ссылкой на другой сайт?