Как связать теги html

html

Содержание:

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

Одна страница у нас уже есть, создадим еще одну: index.html - это стандартное название главной страницы сайта. Если вы всерьез собираетесь делать сайт, то полезно набирать код вручную. А для ленивых и практичных: открываем предыдущую учебную html-страницу в Блокноте и задаем имя: index.html (Файл - Сохранить как).

Не забываем про тип файла и кодировку - UTF-8 (см. первый урок о создании html-страницы в Блокноте). Затем открываем файл index.html в Блокноте, редактируем его, чтобы получилось следующее:

создание index-страницы

Для тех, у кого хромает компьютерная грамотность: двойной клик левой кнопкой мыши по файлу .html откроет его в основном браузере. Чтобы открыть его в другом браузере нужно сделать по нему клик правой кнопкой мыши, выбрать в меню пункт «Открыть с помощью» - и выбрать название браузера. Там же можно выбрать Блокнот или другой редактор - для редактирования файла.

Теперь посмотрим, что у нас получилось, в браузере. Салатовый цвет фона всей страницы задан атрибутом bgcolor тега Body:

просмотр в браузере

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

Чтобы задать цвет отдельных элементов, таких как абзац P или заголовки допускается применять универсальный атрибут style, пример: <h1 style="color: #fff">...</h1> - белый цвет заголовка. Смотрите о значениях цвета в html. В таблицах Справочника для каждого тега есть колонка «Универсальные атрибуты»: легко понять, применяются они к элементу или нет.

Как вставить изображения

Поместите любые изображения в ту же папку, где находятся две учебные html-страницы. Саму папку можно назвать, ну скажем Site1. Измените названия файлов изображений на img1, img2, img3, как на скриншоте. Либо измените в нашем связать коде эти названия на названия ваших изображений, а если нужно, то поменяйте и расширения (формат файлов). У меня это картинки 3D человечков, в формате.jpg:

вставка изображений

Вы наверно слышали выражение «Корневой каталог сайта» - это директория (папка), где расположены все файлы сайта. В нем могут располагаться другие папки: с изображениями, с файлами скриптов, с отдельными разделами сайта. Чтобы потом не путаться в куче файлов с разными расширениями, уместно создать, например, отдельную папку для изображений. А для больших сайтов - несколько папок изображений для разных его разделов.

Если ваши изображения поместить в отдельную папку, например, с названием «papka», то путь к ней (значение обязательного атрибута scr) будет выглядеть так: <img scr="papka/img1.jpg">. Если ваши изображения не отображаются в браузере, то причин всего две: указан неправильный путь к файлу или опечатка. Вы уже заметили, что элемент Img не имеет закрывающего тега. Разберем другие примененные атрибуты тега Img.

Во втором изображении img2.jpg: атрибут alt - в качестве значения используется текст, который виден, если браузер, по каким-либо причинам, не смог отобразить изображение. Рекомендуется использовать атрибут alt, прописывая в нем ключевые слова. Третье изображение помещено в тег P, а его расположение справа от текста абзаца определено значением «right» атрибута align, служащего для выравнивания картинки.

Стоит, еще отметить, что кроме формата jpg в веб-графике применяются форматы gif и png. Желательно научиться оптимизировать изображения для веб и пользоваться программой Photoshop. Оптимизированные, более «легкие по весу» изображения, меньше тормозят загрузку страниц в браузере.

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

Ссылки: как связать html-страницы в сайт

Ссылки (гиперссылки) - тег A с атрибутом href, значение которого - путь к файлу (URL), я поместил в элементы списка Li, что мы и наблюдаем в скриншоте (2-ом) страницы из браузера. Здесь три вида ссылок: первая ссылается на сайт, где вы сейчас находитесь. Если нажать на нее при наличии интернет-соединения, то вы попадете на главную страницу моего сайта. Если добавить в URL: «/index.html» - результат будет тот же.

вставка на страницу гиперссылок

Вторая ссылка, как пример, ведет на несуществующую страницу spravochnik.html, находящуюся в папке «papka» моего сайта. У этих двух ссылок указаны полные пути к документам, на который они ссылаются. У третьей гиперссылки указан относительный путь. Для того чтобы она работала необходимо наличие страницы index.html в одной папке со страницей, где эта ссылка размещена. В данном случае, она ссылается на эту же страницу (на саму себя).

Т.е. ссылки, ведущие на страницы других сайтов, могут быть только с указанием полного URL. А ссылки на внутренние страницы этого же сайта могут иметь, как полный, так и относительный адрес. Об атрибутах: значение атрибута title (не путать с тегом) - текст, который всплывает при наведении курсора на элемент, см. на 2-ом скриншоте. Title - универсальный атрибут, его можно использовать для тех же изображений. Атрибут target со значением «blank» открывает страницу в новой вкладке браузера.

Теперь свяжем наши две учебные странички в единый сайт. Добавим на обе страницы, сразу за тегом Body две такие строчки (здесь 8-ая и 9-ая) - две гиперссылки:

добавление ссылок

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

как связать html-страницы в сайт

Теперь вы сами можете создать другие страницы сайта, а его меню расширить: Страница 3, Страница 4, только изменив эти названия ссылок на «человеческие». На этом этапе вам необходимо поэкспериментировать, почаще обращайтесь к Справочнику HTML.

Получившийся у нас сайт (правда, уместнее назвать микросайтик) - локальный, он расположен на компьютере. Чтобы разместить сайт в Сети, необходимо загрузить все его файлы на сервер выбранного вами хостинга. Для этого используется протокол передачи данных FTP, а лучший ftp-клиент - программа FileZilla, тем более что она бесплатная и не очень сложная. В некоторых html-редакторах, существует свой автономный ftp-загрузчик: загрузка сайта на хостинг в Dreamweaver.

В следующем уроке мы рассмотрим создание таблиц. Оставшиеся темы: мультимедиа и формы. Далее, по плану - изучение CSS и блочная верстка.

Содержание:

О партнёрках

Книга по партнёркам

получить

Сайт с нуля

Сайт с нуля

получить

Онлайн конструктор сайтов

Онлайн конструктор сайтов

хостинги

Выбор хостинга

Курсы Евгения Попова

Все курсы Евгения Попова

Справочник HTML

Справочник HTML

Инфобизнес

Инфобизнес в деталях

Дудл видео

Создание рисованного видео

Видеокурсы Photoshop

Видеокурсы по Photoshop. Обработка фотографий

Продвижение партнёрских продуктов

Продвижение партнёрских продуктов

Партнёрки инфопродуктов

Лучшие партнёрки инфопродуктов

Курсы по созданию сайтов

Бесплатные курсы по созданию сайтов



Закрыть ... [X]

HTML -теги - полный список, таблица тегов по разделам Мастер класс по украшениям из шоколада



Как связать теги html Добавление CSS Таблицы связанных стилей
Как связать теги html Учебник CSS для начинающих. Способы внедрения CSS в HTML документ
Как связать теги html Как связать Html с Css? - Stack Overflow на русском
Как связать теги html Соединяем html-страницы между собой. Обсуждение на LiveInternet
Как связать теги html HTML ссылки - HTML ссылка на сайт - Изображение ссылка
Как связать теги html Соединяем html-страницы между собой и оформляем контент
Как связать теги html 10 популярных видов плетения цепей из золота
Sredstva Вязание спицами для полных женщин. Схемы с описанием, узоры КАК ПОЭТАПНО НАРИСОВАТЬ. - m Оригами из бумаги Кубик меняющий лицо Поделки для детей Поделки из картона. Как сделать замок своими руками