Урок 4. Ссылки и изображения.

Количество просмотров: 345

Наш старый друг вернулся из экспедиции на Марс и узнал, что Джесс как и он попросила вас сделать ей персональную страничку. Узнав это он позвонил вам с просьбой связать его страничку со страницей Джесс. Вы сказали что готовы это сделать и к ужину все будет готово. Только как это сделать?

Пришло время познакомиться со ссылками.

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

Давайте создадим свою первую ссылку. Для их создания используется специальный тег <a>. Посмотрите на пример ниже.


<a href="http://ya.ru/images/">Перейти на Яндекс Картинки</a>

Текст "Перейти на Яндекс Картинки" - является текстом ссылки, и при наведении на него курсор мыши изменит свой вид, сообщая пользователю, что по нему можно кликнуть и перейти на другую страницу. Адрес по которому нужно перейти задается с помощью специального атрибута href="url". У примера выше адресом является http://ya.ru/images. В атрибуте href можно указать адрес любого элемента сети, будь то страница, картинка или аудио файл. Адреса бывают абсолютные и относительные. Абсолютные адреса содержат в себе полный путь до конечного элемента включая протокол, имя сервера и путь до нужного элемента.

  • http:// - протокол
  • ya.ru - имя сервера или доменное имя.
  • /images/ - путь.

Абсолютный адрес отлично подходит для явного указания нужного документы, браузеру лишь нужно обратиться к нужному домену, по нужному протоколу. Можно опускать протокол и доменное имя в адресе оставляя только путь, например путь /html-uchebnik/ в ссылке <a href="/html-uchebnik/">Главная страница учебника</a> будет вести на заглавие этого учебника.

Относительные адрес - в них нет указания домена или протокола, только путь. Например <a href="../../>На главную</a> Отправит нас на главную страницу нашего сайта. Часть адреса - ../ - говорит о том что браузеру нужно подняться на уровень выше текущего раздела, т.е. в заглавие учебника. Использовав такую запись два раза говорит браузеру подняться на два уровня выше, в нашем случае это будет главная страница. Или еще один пример, ../../os/ как вы думаете, на какую страницу приведет данный путь?

Теперь когда мы знаем про абсолютные и относительные адреса, пришло время применить новые знания на практике и отточить полученные навыки.

Создайте в папке две html страницы, можно использовать ранее созданные файлы. Допустим что они называются one.html и two.html. Попробуем поставить ссылки друг на друга. Сошлемся с one.html на two.html.


<a href="two.html">Ссылка на вторую страницу.</a>

Сохраните страницу, обновите браузер и проверьте, работает ли переход. Если все ок, попробуем разместить ссылку на яндекс как в самом верхнем примере.


<a href="http://ya.ru/images/">Перейти на Яндекс Картинки</a>

Сохраните документ и попробуйте перейти по ссылке. Если у вас есть интернет, то у вас откроется страница яндекс картинок. Теперь попробуйте поставить ссылку из документа two.html на one.html

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

<a href="/web/web.html">Еще одна страница.</a> сохраним его и попробуем перейти по ней. Если все ок, то пришло время поставить обратную ссылку с web.html на two.html. Открыв файл создадим следующую ссылку - <a href="../two.html">Еще одна ссылка на страницу</a> Сохраним страницу и попробуем перейти по ней. Все работает, и это отлично. Пришло время попрактиковаться. Создайте еще несколько папок или даже подпапок и поместите в них какой нибудь текстовый докуемент. Любой файл , например text.txt попробуйте поставить ссылки на него из разных страниц и посмотрите что будет.

Если все работает, а работать должно, ведь вы на пути ниндзя html которые никогда не сдаются. Попробуем поставить ссылку на изображение. Возьмем любой файл, скопируем его в папку к файлам one и two. В нашем случае это kotik.jpg и поставим на него ссылку из любого из этих документов - <a href="kotik.jpg">Котик</a> сохраним и обновим страницу. Кликнув по ссылку у нас в браузере откроется картинка с котиком. Но как добавить картинку на страницу без ссылки спросите вы? Все очень просто, воспользуемся тегом <img> из первого урока. Вставим в код страницы следующий тег

<img src="kotik.jpg"> 

Обновив страницу мы видим, что изображение слишком велико. И мы сейчас его изменим. Для изменения размера не обязательно использовать графические редакторы, в html есть специальные атрибуты у тега <img> позволяющие задавать размеры изображения. Это атрибуты width (ширина) и height (высота).

Пример:

<img width="300" src="...">

Для изображения в примере задается ширина равная 300 пикселям. Важно учесть, что для значений в атрибутах width и height не нужно указывать px. Если вы задаете размер изображения с помощью пикселей, то используйте только цифры. Так же в качестве значения можно использовать проценты, например:


<img width="50%" src="...">

Если задавать значение только одного элемента, то значение второго браузер рассчитает сам без нарушения пропорций. Если же указать оба то пропорция может быть испорчена и изображение будет криво смотреться на странице.

Давайте потренируемся и вставим несколько картинок с разными размерами на страницу и посмотрим как они будут себя вести.

Попробуйте следующие значения:


 <img width="300" src="kotik.jpg">
 <img width="200" height="200" src="kotik.jpg">
 <img width="70%" src="kotik.jpg">
 
 

Великолепно не правда ли? Вы научились не только ставить ссылки на другие страницы, но и вставлять изображения тем самым улучшая внешний вид страниц. Будет чем похвастаться за ужином, и предложить ребятам выслать вам свои фотографии для веб страниц.

© 2015-2018 Goodweb.me --- Карта сайта --- info@goodweb.me

Наверх