Очень важно! Если вдруг, перед тем как изучить урок вы обнаружили что вид вашей панели отличается от того что описано в уроке, не пугайтесь! Просто переключите новую панель на старую. Как это сделать? Вот в этой
Рекомендую почитать:
Как поменять адрес сайта на ucoz Всего за 200р.
Как создать ссылку при помощи тега ?
Вот так выглядит сам код ссылки:
Данный тег парный, у него есть открывающий тег — и закрывающий — , они отличаются между собой только косой чертой. Между данными тегами помещается текст который будет отображаться на ссылке.
В первый тег который называют открывающий, помещается атрибут href, при помощи которого задаётся адрес страницы или файлов. Адрес помещается между двойными кавычками. Всё что помещается между двойными кавычками называется значение. Запомним сразу, что атрибут и его значение помещается в открывающий тег. Между атрибутом и его значением есть знак равенства, равенство играет роль присваивания, то-есть, вот такому вот атрибуту присвоить вот это значение.
Пример настоящей ссылки:
Важные атрибуты к тегу А
У тега который мы рассмотрели выше, есть порядком больше десятка атрибутов, половину из них не используют, другая половина уже давно устарела. Мы рассмотри только важные, которые используются очень часто.
- href — Атрибут помогает задавать путь к документам (Файлам, страницам).
- name — Помогает создавать закладки на странице.
- target — Открывает ссылку в заданном окне.
- title — При наведении на ссылку всплывает подсказка.
- class — При помощи данного атрибута задаётся имя для css стиля.
- id — При помощи данного атрибута задаётся имя для css стиля.
- style — Этот атрибут помогает на прямую задавать стили css.
Href мы уже рассмотрели и знаем как с ним работать, так-что переходим к следующему атрибуту.
Name этот атрибут помогает вставлять закладки на страницу. Как это работает, к примеру у нас есть очень большая статья которая разбита на много подзаголовков, в верху статьи помещаются ссылки, которые привязаны к этим заголовкам, если нажать на такую ссылку нас автоматически перекинет к той части статьи к которой привязана эта ссылка, в данном случае к заголовку.
К примеру, если вы сейчас нажмёте на эту ссылку, вас перекинет в верхнею часть урока, там где написано как создать ссылку…
Как создать закладку на странице?
Что-бы создать закладку, нужно выбрать место в тексте куда будем перенаправляться после нажатия на закладку, это может быть обычное слово, или любой другой элемент. Возле этого слова помещаем следующий код —
Пример закладки:
В теги пропишите атрибут name а между двойных кавычек, там где вписывается значение атрибута, в пишите любое слово на английском или русском языке. Я туда прописал nazwanie. Следующие что нам осталось сделать, это создать ссылку которая будет перекидывать нас к закладке. Для этого пропишите следующий код —
Пример ссылки на закладку:
Теперь в тег помещается атрибут href а между двойных кавычек помещается решетка # и название закладки. При нажатии на эту ссылку, браузер на странице ищет подходящий атрибут с названием #nazwanie и перекидывает нас к нему. Вот так работают закладки.
Target открывает ссылку в заданном окне, к примеру в новом окне браузера. У атрибута target есть свои значения.
- target=»_blank» Открывает ссылку в новом окне браузера.
- target=»_self» Открывает ссылку в том-же окне. Это значение применяется ко всем ссылкам изначально!
- target=»_parent» Открывает ссылку во фрейме-родителя, если фрейма нет, ссылка откроется в том-же окне браузера.
- target=»_top» Открывает ссылку в окне браузера, если даже изначально ссылка должна была открытся во фрейме.
Пример кода с target:
Этот пример нас учит сразу двум вещам, как вставлять атрибут target в код и как вставлять второй атрибут в тег. После адреса yandex.ru, у нас идёт двойная кавычка, после которой идёт пробел и слово target. У этого атрибута стоит значение _blank, которое говорит браузеру, что эту ссылку нужно открыть в новом окне. Атрибутов в теги может быть один или десять, всё зависит от задачи поставленной перед веб-программистом, атрибуты разделяются между собой пробелами.
Title при помощи этого атрибута можно создавать подсказки. На этой странице я уже использовал пару раз этот атрибут для подсказок, выше вы должны были их встретить и заметьте что title можно использовать не только к ссылкам но и к другим тегам.
Пример кода:
В код поместите атрибут title, а в его значение тот текст который будет выскакивать как подсказка.
Class задаёт имя для тега, которое помогает связывать данный тег с правилами css. К примеру, если мы зададим нашему атрибуту class значение «cwet»
Пример:
А в стилях css пропишем этому имени правило, к примеру чтобы тег с этим именем был красного цвета.
Пример:
.cwet {color:red;}
Браузеру в коде нужно будет найти этот тег с именем cwet и отобразить те правила которые были помещены для него в фигурные скобках, а это color — Цвет и red — Красный.
Id атрибут работает точно также, но есть небольшие отличия.
Пример html:
Пример css:
#cwet {color:red;}
Данный атрибут id у которого значение cwet, можно в тегах использовать только один раз, что-бы id использовать для другого тега, нужно поменять его значение например на «cwet2». А вот атрибут class со значением cwet можно использовать и для других тегов, не ограниченное количество. Атибут class в стилях определяется при помощи точки, атрибут id в стилях css определяется при помощи решётки #, после решётки пишется значение атрибута в нашем случае cwet. Что бы лучше понять как работает css, для этого советую изучить специальный раздел на сайте.
Style, при помощи этого атрибута можно напрямую внедрять код css в html разметку. Вообще, css можно внедрять в html теги несколькими путями, подключать отдельный файл, внедрять через специальный тег , этот пример можно посмотреть выше, когда я показывал как прописываются классы для тегов. Так-же его можно подключить напрямую через атрибут Style. Как это делается? К примеру, если мы хотим нашу ссылку сделать красного цвета, тогда нужно прописать следующий код:
Пример: внедрение css напрямую:
У атрибута style просто пропишите значение color:red и ссылка после сохранения документа станет красной.